chore: move routing logic and share code loading to the backend

Author: brettkolodny

src/client/App.tsx

@@ -36,40 +36,17 @@ import {
 import isEqual from "lodash/isEqual";
 import { MoonIcon, ShareIcon, SunIcon, SunMoonIcon } from "lucide-react";
 import { type FC, useEffect, useMemo, useRef, useState } from "react";
-import { type LoaderFunctionArgs, useLoaderData } from "react-router";
 import { useDebouncedValue } from "./hooks/debounce";
 
-/**
- * Load the shared code if present.
- */
-export const loader = async ({ params }: LoaderFunctionArgs) => {
-const { id } = params;
-if (!id) {
-return;
-}
-
-try {
-const res = await rpc.parameters[":id"].$get({ param: { id } });
-if (res.ok) {
-const { code } = await res.json();
-return code;
-}
-} catch (e) {
-console.error(`Error loading playground: ${e}`);
-return;
-}
-};
-
 export const App = () => {
 const [wasmLoadState, setWasmLoadingState] = useState<WasmLoadState>(() => {
 if (window.go_preview) {
 return "loaded";
 }
 return "loading";
 });
-const loadedCode = useLoaderData<typeof loader>();
 const [code, setCode] = useState(
-loadedCode ?? window.EXAMPLE_CODE ?? defaultCode,
+window.CODE ?? defaultCode,
 );
 const [debouncedCode, isDebouncing] = useDebouncedValue(code, 1000);
 const [parameterValues, setParameterValues] = useState<

src/client/index.tsx

@@ -2,22 +2,15 @@ import { TooltipProvider } from "@/client/components/Tooltip";
 import { ThemeProvider } from "@/client/contexts/theme.tsx";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { RouterProvider, createBrowserRouter, redirect } from "react-router";
-import { App, loader as appLoader } from "./App.tsx";
+import { RouterProvider, createBrowserRouter } from "react-router";
+import { App } from "./App.tsx";
 import "@/client/index.css";
 import { EditorProvider } from "./contexts/editor.tsx";
 
 const router = createBrowserRouter([
-{
-loader: appLoader,
-path: "/parameters/:id?",
-Component: App,
-},
 {
 path: "*",
-loader: () => {
-return redirect("/parameters");
-},
+Component: App,
 },
 ]);
 

src/server/api.ts

@@ -0,0 +1,37 @@
+import { head, put } from "@vercel/blob";
+import { nanoid } from "nanoid";
+import * as v from "valibot";
+
+export const BLOG_PATH = "parameters/share";
+
+export const ShareDataSchema = v.object({ code: v.string() });
+type ShareData = v.InferInput<typeof ShareDataSchema>;
+
+export const putShareData = async (data: ShareData): Promise<string> => {
+const id = nanoid(10);
+await put(`${BLOG_PATH}/${id}.json`, JSON.stringify(data), {
+addRandomSuffix: false,
+access: "public",
+});
+
+return id;
+};
+
+export const getShareData = async (id: string): Promise<{ code: string; } | null> => {
+try {
+const { url } = await head(`${BLOG_PATH}/${id}.json`);
+const res = await fetch(url);
+const data = JSON.parse(new TextDecoder().decode(await res.arrayBuffer()));
+
+const parsedData = v.safeParse(ShareDataSchema, data);
+if (!parsedData.success) {
+console.error("Unable to parse share data", parsedData.issues);
+return null;
+}
+
+return parsedData.output;
+} catch (e) {
+console.error(`Failed to load playground with id ${id}: ${e}`);
+return null;
+}
+};

src/server/blob.ts

@@ -1,7 +1,9 @@
 import { examples } from "@/examples/code";
-import { api } from "@/server/api";
+import { api } from "@/server/routes/api";
 import { Hono } from "hono";
 import { renderToString } from "react-dom/server";
+import { getShareData } from "./blob";
+import { trimTrailingSlash } from "hono/trailing-slash";
 
 // This must be exported for the dev server to work
 export const app = new Hono();
@@ -16,12 +18,21 @@ app.use("*", async (ctx, next) => {
 });
 app.route("/api", api);
 
+app.use(trimTrailingSlash());
+
 // Serves the main web application. This must come after the API route.
-app.get("*", (c) => {
-const getExampleCode = () => {
+app.get("/parameters/:shareId?", async (c) => {
+const getExampleCode = async (): Promise<string | null> => {
+const { shareId } = c.req.param();
 const { example } = c.req.query();
+
+if (shareId) {
+const shareData = await getShareData(shareId);
+return shareData?.code ?? null;
+}
+
 if (!example) {
-return;
+return null;
 }
 
 return examples[example];
@@ -54,7 +65,7 @@ app.get("*", (c) => {
 ? "/assets/wasm_exec.js"
 : "/wasm_exec.js";
 const iconPath = import.meta.env.PROD ? "/assets/logo.svg" : "/logo.svg";
-const exampleCode = getExampleCode();
+const exampleCode = await getExampleCode();
 
 return c.html(
 [
@@ -76,7 +87,7 @@ app.get("*", (c) => {
 <body>
 <div id="root"></div>
 {exampleCode ? (
-<script type="module">{`window.EXAMPLE_CODE = ${JSON.stringify(exampleCode)}`}</script>
+<script type="module">{`window.CODE = ${JSON.stringify(exampleCode)}`}</script>
 ) : null}
 <script type="module" src={clientScriptPath}></script>
 </body>
@@ -85,3 +96,5 @@ app.get("*", (c) => {
 ].join("\n"),
 );
 });
+
+app.get("*", (c) => c.redirect("/parameters"));

src/server/index.tsx

@@ -0,0 +1,32 @@
+import { vValidator } from "@hono/valibot-validator";
+import { Hono } from "hono";
+import * as v from "valibot";
+import { putShareData } from "@/server/blob";
+
+
+const parameters = new Hono().post(
+"/",
+vValidator(
+"json",
+v.object({
+code: v.string(),
+}),
+),
+async (c) => {
+const data = c.req.valid("json");
+const bytes = new TextEncoder().encode(JSON.stringify(data));
+
+// Check if the data is larger than 1mb
+if (bytes.length > 1024 * 1000) {
+console.error("Data larger than 10kb");
+return c.json({ id: "" }, 500);
+}
+
+const id = await putShareData(data);
+return c.json({ id });
+},
+);
+
+export const api = new Hono().route("/parameters", parameters);
+
+export type ApiType = typeof api;

src/server/routes/api.ts

@@ -1,4 +1,4 @@
-import type { ApiType } from "@/server/api";
+import type { ApiType } from "@/server/routes/api";
 import { hc } from "hono/client";
 
 export const rpc = hc<ApiType>("/api");

src/utils/rpc.ts

@@ -20,7 +20,7 @@ declare global {
 // Loaded from wasm
 go_preview?: GoPreviewDef;
 Go: { new (): Go };
-EXAMPLE_CODE?: string;
+CODE?: string;
 }
 }