feat: add @fresh/examples package

.github/workflows/publish.yml

@@ -34,3 +34,7 @@ jobs:
  - name: Publish @fresh/update
  working-directory: ./update
  run: deno publish
+
+ - name: Publish @fresh/examples
+ working-directory: ./examples
+ run: deno publish

examples/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2021-2024 the Deno authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

examples/README.md

@@ -0,0 +1,55 @@
+# Examples for Fresh
+
+This is an package contains examples for using Fresh with
+[JSR](https://jsr.io/).
+
+Learn more about the Fresh framework here:
+[https://fresh.deno.dev/](https://fresh.deno.dev/)
+
+## Usage: Island example
+
+```tsx
+import { App } from "fresh";
+// Import the island function
+import { DemoIsland } from "jsr:@fresh/examples/island";
+
+export const app = new App({ root: import.meta.url })
+ .use(staticFiles());
+
+// Register the island
+app.island(
+ // Module specifier for esbuild, could also be a file path
+ "jsr:@fresh/examples/island",
+ // Name of the island
+ "DemoIsland",
+ // Island component function
+ DemoIsland,
+);
+
+// Use the island somewhere in your components
+app.get("/", (ctx) => ctx.render(<DemoIsland />));
+
+await app.listen();
+```
+
+## Usage: App1 or App2 example
+
+```tsx
+import { App } from "fresh";
+// Import the example apps
+import { app1 } from "jsr:@fresh/examples/app1";
+import { app2 } from "jsr:@fresh/examples/app2";
+
+export const app = new App({ root: import.meta.url })
+ .use(staticFiles());
+
+// Merge apps from JSR into this one
+app.mountApp("/app1", app1);
+app.mountApp("/app2", app1);
+
+await app.listen();
+```
+
+## License
+
+MIT, see the [LICENSE](./LICENSE) file.

examples/deno.json

@@ -0,0 +1,18 @@
+{
+ "name": "@fresh/examples",
+ "version": "1.0.0",
+ "exports": {
+ "./island": "./src/island.tsx",
+ "./app1": "./src/app1.tsx",
+ "./app2": "./src/app2.tsx"
+ },
+ "imports": {
+ "@preact/signals": "npm:@preact/signals@^1.2.3",
+ "preact": "npm:preact@^10.22.0",
+ "fresh": "jsr:@fresh/core@^2.0.0-alpha.18"
+ },
+ "compilerOptions": {
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact"
+ }
+}

examples/src/app1.tsx

@@ -0,0 +1,11 @@
+import { App } from "fresh";
+import { Doc } from "./shared.tsx";
+
+export const app1 = new App()
+ .get("/", (ctx) =>
+ ctx.render(
+ <Doc>
+ <h1>App1</h1>
+ <p>This app is loaded from JSR</p>
+ </Doc>,
+ ));

examples/src/app2.tsx

@@ -0,0 +1,11 @@
+import { App } from "fresh";
+import { Doc } from "./shared.tsx";
+
+export const app2 = new App()
+ .get("/", (ctx) =>
+ ctx.render(
+ <Doc>
+ <h1>App2</h1>
+ <p>This app is loaded from JSR</p>
+ </Doc>,
+ ));

examples/src/island.tsx

@@ -0,0 +1,13 @@
+import { useSignal } from "@preact/signals";
+
+export default function DemoIsland() {
+ const count = useSignal(0);
+
+ return (
+ <div style="display: flex; gap: 1rem; padding: 2rem;">
+ <button onClick={() => (count.value -= 1)}>-1</button>
+ <p style="font-variant-numeric: tabular-nums;">{count}</p>
+ <button onClick={() => (count.value += 1)}>+1</button>
+ </div>
+ );
+}

examples/src/shared.tsx

@@ -0,0 +1,13 @@
+import type { ComponentChildren } from "preact";
+
+export function Doc(props: { children?: ComponentChildren }) {
+ return (
+ <html>
+ <head>
+ <meta charset="utf-8" />
+ <title>Fresh Examples</title>
+ </head>
+ <body>{props.children}</body>
+ </html>
+ );
+}