feat: add @fresh/examples package (#2555)

This can be used to showcase remote islands, combining apps and other
things.

.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>
+  );
+}