add playground shareability (#4)

client/playgrounds.ts

@@ -0,0 +1,13 @@
+/**
+ * Playground is a jsonx playground.
+ */
+export interface Playground {
+  id: string;
+  version: string;
+  code: string;
+}
+
+/**
+ * AddPlaygroundRequest is the request to add a playground.
+ */
+export type AddPlaygroundRequest = Omit<Playground, "id">;

deno.jsonc

@@ -20,8 +20,7 @@
     }
   },
   "exclude": [
-    "**/_fresh/*",
-    "./static"
+    "**/_fresh/*"
   ],
   "imports": {
     "#/": "./",

fresh.gen.ts

@@ -4,23 +4,25 @@
 
 import * as $_404 from "./routes/_404.tsx";
 import * as $_app from "./routes/_app.tsx";
-import * as $examples_id_ from "./routes/examples/[id].ts";
+import * as $api_examples_id_ from "./routes/api/examples/[id].ts";
+import * as $api_playgrounds_id_ from "./routes/api/playgrounds/[id].ts";
+import * as $api_playgrounds_index from "./routes/api/playgrounds/index.ts";
 import * as $index from "./routes/index.tsx";
 import * as $meta from "./routes/meta.ts";
 import * as $playgrounds_id_ from "./routes/playgrounds/[id].tsx";
-import * as $playgrounds_index from "./routes/playgrounds/index.ts";
 
 import { type Manifest } from "$fresh/server.ts";
 
 const manifest = {
   routes: {
     "./routes/_404.tsx": $_404,
     "./routes/_app.tsx": $_app,
-    "./routes/examples/[id].ts": $examples_id_,
+    "./routes/api/examples/[id].ts": $api_examples_id_,
+    "./routes/api/playgrounds/[id].ts": $api_playgrounds_id_,
+    "./routes/api/playgrounds/index.ts": $api_playgrounds_index,
     "./routes/index.tsx": $index,
     "./routes/meta.ts": $meta,
     "./routes/playgrounds/[id].tsx": $playgrounds_id_,
-    "./routes/playgrounds/index.ts": $playgrounds_index,
   },
   islands: {},
   baseUrl: import.meta.url,

routes/api/playgrounds/[id].ts

@@ -0,0 +1,15 @@
+import type { Handlers } from "$fresh/server.ts";
+import { getPlayground, setPlayground } from "#/server/playgrounds.ts";
+import { kv } from "#/server/kv.ts";
+
+export const handler: Handlers = {
+  async GET(_request, ctx) {
+    const playground = await getPlayground(kv, ctx.params.id);
+    return Response.json(playground);
+  },
+  async POST(request, _ctx) {
+    const playground = await request.json();
+    await setPlayground(kv, playground);
+    return Response.json(playground);
+  },
+};

routes/playgrounds/index.ts → routes/api/playgrounds/index.ts

@@ -1,5 +1,5 @@
 import type { Handlers } from "$fresh/server.ts";
-import type { AddPlaygroundRequest } from "#/server/playgrounds.ts";
+import type { AddPlaygroundRequest } from "#/client/playgrounds.ts";
 import { addPlayground } from "#/server/playgrounds.ts";
 import { kv } from "#/server/kv.ts";
 

routes/index.tsx

@@ -1,5 +1,5 @@
 import { Head } from "$fresh/runtime.ts";
-import Playground from "#/client/playground/playground.tsx";
+import Playground from "#/client/components/playground/playground.tsx";
 import Nav from "#/client/nav.tsx";
 import { getMeta } from "#/client/meta.ts";
 import { kv } from "#/server/kv.ts";

routes/playgrounds/[id].tsx

@@ -1,25 +1,37 @@
-import type { Handlers, PageProps } from "$fresh/server.ts";
-import { getPlayground, setPlayground } from "#/server/playgrounds.ts";
+import type { FreshContext } from "$fresh/server.ts";
+import { Head } from "$fresh/runtime.ts";
+import Nav from "#/client/nav.tsx";
+import Playground from "#/client/components/playground/playground.tsx";
+import { getMeta } from "#/client/meta.ts";
+import { getPlayground } from "#/server/playgrounds.ts";
 import { kv } from "#/server/kv.ts";
 
-export const handler: Handlers = {
-  async GET(_request, ctx) {
-    const playground = await getPlayground(kv, ctx.params.id);
-    return Response.json(playground);
-  },
-  async POST(request, _ctx) {
-    const playground = await request.json();
-    await setPlayground(kv, playground);
-    return Response.json(playground);
-  },
-};
+export default async function PlaygroundHandler(
+  _request: Request,
+  ctx: FreshContext,
+) {
+  const playground = await getPlayground(kv, ctx.params.id);
+  if (!playground) {
+    return new Response("Not found!", { status: 404 });
+  }
 
-export default async function PlaygroundHandler(props: PageProps) {
-  const playground = await getPlayground(kv, props.params.id);
-  // TODO: Render playground component.
+  const meta = await getMeta();
   return (
     <>
-      <pre><code>{JSON.stringify(playground, null, 2)}</code></pre>
+      <Head>
+        <title>jsonx | Playground</title>
+        <link rel="stylesheet" href="/playground.css" />
+      </Head>
+
+      <Nav />
+
+      <main>
+        <Playground
+          code={playground.code}
+          version={playground.version}
+          meta={meta}
+        />
+      </main>
     </>
   );
 }

static/script.js

@@ -11,7 +11,7 @@ document.addEventListener("DOMContentLoaded", () => {
   setup({
     code: initialData.code,
     autoplay: initialData.autoplay,
-  })
+  });
 });
 
 async function transform(options) {
@@ -41,6 +41,37 @@ function createEditor(options) {
   });
 }
 
+function sharePlayground() {
+  if (!confirm("Are you sure you want to share this playground?")) {
+    return;
+  }
+
+  const data = {
+    code: cmEditor.state.doc.toString(),
+    version: elements.version.value,
+  };
+
+  elements.share.disabled = true;
+  fetch(
+    `/api/playgrounds`,
+    {
+      method: "POST",
+      body: JSON.stringify(data),
+    },
+  )
+    .then((response) => response.json())
+    .then((data) => {
+      if (!data.id) {
+        throw new Error("Failed to create a new playground.");
+      }
+
+      location.href = `/playgrounds/${data.id}`;
+    })
+    .finally(() => {
+      elements.share.disabled = false;
+    });
+}
+
 /**
  * setup create a playground.
  */
@@ -61,10 +92,13 @@ async function setup(options) {
     "click",
     () => (buildOutput.innerHTML = ""),
   );
-  elements. clearConsoleOutput.addEventListener(
+  elements.clearConsoleOutput.addEventListener(
     "click",
     () => (consoleOutput.innerHTML = ""),
   );
+  elements.share.addEventListener("click", () => {
+    sharePlayground();
+  });
   addEventListener("message", (event) => {
     if (event.data.type === "console") {
       appendConsoleOutput(
@@ -271,6 +305,5 @@ export const elements = {
     }
 
     return initialJSONData;
-  }
+  },
 };
-