e284d5b | edge-city

git clone https://git.pyrossh.dev/edge-city

edge-city is a next level meta-framework for react that runs only on edge runtimes

e284d5b — Peter John 2023-05-20T20:20:34+05:30

initial build

Generated files not shown: pnpm-lock.yaml

Files changed (46) hide show

.gitignore +1 -0
packages/cli/index.js +388 -0
packages/cli/package.json +27 -0
packages/example/.gitignore +4 -0
packages/example/.vscode/extensions.json +5 -0
packages/example/.vscode/settings.json +13 -0
packages/example/Dockerfile +8 -0
packages/example/components/Counter/Counter.jsx +16 -0
packages/example/components/Layout/Layout.css +5 -0
packages/example/components/Layout/Layout.jsx +19 -0
packages/example/components/Timer/Timer.jsx +18 -0
packages/example/components/Todo/Todo.css +16 -0
packages/example/components/Todo/Todo.jsx +94 -0
packages/example/db/index.js +20 -0
packages/example/db/migrations/0000_empty_shatterstar.sql +7 -0
packages/example/db/migrations/meta/0000_snapshot.json +54 -0
packages/example/db/migrations/meta/_journal.json +12 -0
packages/example/drizzle.config.json +4 -0
packages/example/jsconfig.json +9 -0
packages/example/main.js +6 -0
packages/example/package.json +59 -0
packages/example/pages/_404/page.css +38 -0
packages/example/pages/_404/page.jsx +19 -0
packages/example/pages/_500/page.css +38 -0
packages/example/pages/_500/page.jsx +19 -0
packages/example/pages/about/page.css +10 -0
packages/example/pages/about/page.jsx +28 -0
packages/example/pages/page.css +17 -0
packages/example/pages/page.jsx +29 -0
packages/example/pages/page.spec.js +19 -0
packages/example/pages/todos/page.css +71 -0
packages/example/pages/todos/page.jsx +61 -0
packages/example/playwright.config.js +65 -0
packages/example/readme.md +18 -0
packages/example/services/auth.service.js +50 -0
packages/example/services/todos.service.js +49 -0
packages/example/services/todos.service.test.js +41 -0
packages/example/static/favicon.ico +0 -0
packages/example/static/logo192.png +0 -0
packages/example/static/logo512.png +0 -0
packages/example/static/manifest.json +25 -0
packages/example/static/robots.txt +3 -0
packages/runtime/index.js +315 -0
packages/runtime/package.json +14 -0
pnpm-workspace.yaml +2 -0
readme.md +20 -0

.gitignore ADDED Viewed

	@@ -0,0 +1 @@
1	+ node_modules/

packages/cli/index.js ADDED Viewed

@@ -0,0 +1,388 @@
+#!/usr/bin/env bun
+import meow from 'meow';
+import React from "react";
+import esbuild from 'esbuild';
+import resolve from 'esbuild-plugin-resolve';
+import { renderToReadableStream } from "react-dom/server";
+import fs, { mkdir } from "fs";
+import path from 'path';
+import walkdir from 'walkdir';
+import postcss from "postcss"
+import autoprefixer from "autoprefixer";
+import postcssCustomMedia from "postcss-custom-media";
+import postcssNesting from "postcss-nesting";
+import mimeTypes from "mime-types";
+import bytes from 'bytes';
+import pc from 'picocolors';
+import ms from 'ms';
+import pkg from "./package.json";
+const cli = meow(`
+parotta v${pkg.version}
+Usage
+  $ parotta build cloudflare
+  $ parotta build vercel
+`, {
+  importMeta: import.meta,
+  autoVersion: true,
+});
+if (cli.input.length != 2) {
+  cli.showHelp();
+  process.exit(0);
+}
+if (!globalThis.firstRun) {
+  globalThis.firstRun = true
+  const version = (await import(path.join(import.meta.dir, "package.json"))).default.version;
+  console.log(`parotta v${version}`)
+  console.log(`running with cwd=${path.basename(process.cwd())} node_env=${process.env.NODE_ENV}`);
+} else {
+  console.log(`server reloading`);
+}
+const isProd = process.env.NODE_ENV === "production";
+const routes = walkdir.sync(path.join(process.cwd(), "pages"))
+  .filter((p) => p.includes("page.jsx"));
+const services = walkdir.sync(path.join(process.cwd(), "services"))
+  .map((s) => s.replace(process.cwd(), ""))
+  .filter((s) => s.includes(".service.js"))
+  .forEach((s) => {
+    const serviceName = s.replace(".service.js", "");
+    routes[serviceName + "/*"] = { key: serviceName, service: s };
+  });
+const mapDeps = (dir) => {
+  return walkdir.sync(path.join(process.cwd(), dir))
+    .map((s) => s.replace(process.cwd(), ""))
+    .filter((s) => s.includes(".jsx") || s.includes(".js"))
+    .reduce((acc, s) => {
+      if (s.includes(".jsx")) {
+        acc['@' + s.replace(".jsx", "")] = s
+      }
+      if (s.includes(".js")) {
+        acc['@' + s.replace(".js", "")] = s
+      }
+      return acc;
+    }, {});
+}
+const staticDir = path.join(process.cwd(), "build", "static");
+const createDirs = () => {
+  if (!fs.existsSync(staticDir)) {
+    fs.mkdirSync(staticDir, { recursive: true });
+  }
+}
+const buildImportMap = async () => {
+  const packageJson = await import(path.join(process.cwd(), "package.json"));
+  const config = packageJson.default.parotta || { hydrate: true };
+  const devTag = !isProd ? "-dev-" : "";
+  const devQueryParam = !isProd ? `?dev` : "";
+  const nodeDeps = Object.keys(packageJson.default.dependencies).reduce((acc, dep) => {
+    acc[dep] = `https://esm.sh/${dep}@${packageJson.default.dependencies[dep]}`;
+    return acc;
+  }, {})
+  const components = mapDeps("components");
+  const importmap = {
+    "radix3": `https://esm.sh/[email protected]`,
+    "history": "https://esm.sh/[email protected]",
+    "react": `https://esm.sh/[email protected]${devQueryParam}`,
+    [`react/jsx${devTag}runtime`]: `https://esm.sh/[email protected]${devQueryParam}/jsx${devTag}runtime`,
+    "react-dom/client": `https://esm.sh/[email protected]${devQueryParam}/client`,
+    "nprogress": "https://esm.sh/[email protected]",
+    ...nodeDeps,
+    ...components,
+  }
+  const outfile = path.join(staticDir, "importmap.json");
+  fs.writeFileSync(outfile, JSON.stringify(importmap, null, 2));
+}
+const buildRouteMap = () => {
+  const routemap = routes.reduce((acc, p) => {
+    const r = p.replace(process.cwd(), "");
+    const key = r.replace("/pages", "").replace("/page.jsx", "")
+    acc[key === "" ? "/" : key] = r;
+    return acc
+  }, {});
+  const outfile = path.join(staticDir, "routemap.json");
+  fs.writeFileSync(outfile, JSON.stringify(routemap, null, 2));
+}
+const buildServer = async (r) => {
+  const buildStart = Date.now();
+  const shortName = r.replace(process.cwd(), "").replace("/pages", "");
+  const outfile = `${process.cwd()}/build/functions${shortName.replace("page.jsx", "index.js")}`;
+  const result = await esbuild.build({
+    bundle: true,
+    target: ['es2022'],
+    entryPoints: [r],
+    outfile: outfile,
+    format: 'esm',
+    keepNames: true,
+    external: ["node:*"],
+    color: true,
+    treeShaking: true,
+    // metafile: true,
+    jsxDev: !isProd,
+    jsx: 'automatic',
+    define: {
+      'process.env.NODE_ENV': `"${process.env.NODE_ENV}"`,
+    },
+    plugins: [resolve({
+      "/static/routemap.json": `${staticDir}/routemap.json`
+    })]
+  });
+  // console.log(await analyzeMetafile(result.metafile))
+  const outLength = fs.statSync(outfile).size;
+  const builtTime = ms(Date.now() - buildStart);
+  console.log(
+    `${pc.green("✓ Bundled")} ${outfile.replace(process.cwd() + "/", "")} ${pc.cyan(`(${bytes(outLength)})`)} ${pc.gray(`[${builtTime}]`)}`
+  );
+}
+const bundleBun = async (r) => {
+  const buildStart = Date.now();
+  const shortName = r.replace(process.cwd(), "").replace("/page.jsx", "");
+  const result = await Bun.build({
+    entrypoints: [r],
+    outdir: `${process.cwd()}/bb/functions/${shortName}`,
+  });
+  if (!result.success) {
+    console.error("Build failed");
+    for (const message of result.logs) {
+      // Bun will pretty print the message object
+      console.error(message);
+    }
+  }
+  for (const o of result.outputs) {
+    const outLength = (await o.arrayBuffer()).byteLength;
+    const builtTime = ms(Date.now() - buildStart);
+    console.log(
+      `✓ Bundled ${o.kind} ${o.path.replace(process.cwd() + "/bb", "")} ${pc.cyan(`(${bytes(outLength)})`)} ${pc.gray(`[${builtTime}]`)}`
+    );
+  }
+}
+const main = async () => {
+  createDirs();
+  buildImportMap();
+  buildRouteMap();
+  for (const r of routes) {
+    buildServer(r);
+  }
+}
+main();
+// const createServerRouter = async () => {
+//   const routes = {};
+//   const dirs = walkdir.sync(path.join(process.cwd(), "pages"))
+//     .map((s) => s.replace(process.cwd(), "")
+//       .replace("/pages", "")
+//       // .replaceAll("[", ":")
+//       // .replaceAll("]", "")
+//     )
+//   dirs.filter((p) => p.includes('page.jsx'))
+//     .map((s) => ({ path: s, route: s.replace("/page.jsx", "") }))
+//     .forEach((page) => {
+//       const key = page.route || "/";
+//       routes[key] = { key: key, page: page.path };
+//     });
+//   walkdir.sync(path.join(process.cwd(), "static"))
+//     .map((s) => s.replace(process.cwd(), "").replace("/static", ""))
+//     .forEach((route) => {
+//       routes[route] = { key: route, file: route }
+//     });
+//   return createRouter({
+//     strictTrailingSlash: true,
+//     routes: routes,
+//   });
+// }
+// const createClientRouter = async () => {
+//   const routes = await walkdir.sync(path.join(process.cwd(), "pages"))
+//     .filter((p) => p.includes("page.jsx"))
+//     .filter((p) => !p.includes("/_"))
+// .map((s) => s.replace(process.cwd(), ""))
+// .map((s) => s.replace("/pages", ""))
+// .map((s) => s.replace("/page.jsx", ""))
+//     .reduce(async (accp, r) => {
+//       const acc = await accp;
+//       const src = await import(`${process.cwd()}/pages${r}/page.jsx`);
+//       if (!result.success) {
+//         console.error("Build failed");
+//         for (const message of result.logs) {
+//           // Bun will pretty print the message object
+//           console.error(message);
+//         }
+//       }
+//       acc[r === "" ? "/" : r] = src.default;
+//       return acc
+//     }, Promise.resolve({}));
+//   // console.log(clientRoutes);
+// };
+// const serverRouter = await createServerRouter();
+// const clientRouter = await createClientRouter();
+// const transpiler = new Bun.Transpiler({
+//   loader: "jsx",
+//   autoImportJSX: true,
+//   jsxOptimizationInline: true,
+//   // TODO
+//   // autoImportJSX: false,
+//   // jsxOptimizationInline: false,
+// });
+// const renderApi = async (key, filePath, req) => {
+//   const url = new URL(req.url);
+//   const params = req.method === "POST" ? await req.json() : Object.fromEntries(url.searchParams);
+//   const funcName = url.pathname.replace(`${key}/`, "");
+//   const js = await import(path.join(process.cwd(), filePath));
+//   try {
+//     const result = await js[funcName](params);
+//     return new Response(JSON.stringify(result), {
+//       headers: { 'Content-Type': 'application/json' },
+//       status: 200,
+//     });
+//   } catch (err) {
+//     const message = err.format ? err.format() : err;
+//     return new Response(JSON.stringify(message), {
+//       headers: { 'Content-Type': 'application/json' },
+//       status: 400,
+//     });
+//   }
+// }
+// const renderCss = async (src) => {
+//   try {
+//     const cssText = await Bun.file(src).text();
+//     const result = await postcss([
+//       autoprefixer(),
+//       postcssCustomMedia(),
+//       // postcssNormalize({ browsers: 'last 2 versions' }),
+//       postcssNesting,
+//     ]).process(cssText, { from: src, to: src });
+//     return new Response(result.css, {
+//       headers: { 'Content-Type': 'text/css' },
+//       status: 200,
+//     });
+//   } catch (err) {
+//     return new Response(`Not Found`, {
+//       headers: { 'Content-Type': 'text/html' },
+//       status: 404,
+//     });
+//   }
+// }
+// const renderJs = async (srcFile) => {
+//   try {
+//     const jsText = await Bun.file(srcFile).text();
+//     const result = await transpiler.transform(jsText);
+//     // inject code which calls the api for that function
+//     const lines = result.split("\n");
+//     // lines.unshift(`import React from "react";`);
+//     // replace all .service imports which rpc interface
+//     let addRpcImport = false;
+//     lines.forEach((ln) => {
+//       if (ln.includes(".service")) {
+//         addRpcImport = true;
+//         const [importName, serviceName] = ln.match(/\@\/services\/(.*)\.service/);
+//         const funcsText = ln.replace(`from "${importName}"`, "").replace("import", "").replace("{", "").replace("}", "").replace(";", "");
+//         const funcsName = funcsText.split(",");
+//         funcsName.forEach((fnName) => {
+//           lines.push(`const ${fnName} = rpc("${serviceName}/${fnName.trim()}")`);
+//         })
+//       }
+//     })
+//     if (addRpcImport) {
+//       lines.unshift(`import { rpc } from "parotta/runtime";`);
+//     }
+//     // remove .css and .service imports
+//     const filteredJsx = lines.filter((ln) => !ln.includes(`.css"`) && !ln.includes(`.service"`)).join("\n");
+//     //.replaceAll("$jsx", "React.createElement");
+//     return new Response(filteredJsx, {
+//       headers: {
+//         'Content-Type': 'application/javascript',
+//       },
+//       status: 200,
+//     });
+//   } catch (err) {
+//     return new Response(`Not Found`, {
+//       headers: { 'Content-Type': 'text/html' },
+//       status: 404,
+//     });
+//   }
+// }
+// const sendFile = async (src) => {
+//   try {
+//     const contentType = mimeTypes.lookup(src) || "application/octet-stream";
+//     const stream = await Bun.file(src).stream();
+//     return new Response(stream, {
+//       headers: { 'Content-Type': contentType },
+//       status: 200,
+//     });
+//   } catch (err) {
+//     return new Response(`Not Found`, {
+//       headers: { 'Content-Type': 'text/html' },
+//       status: 404,
+//     });
+//   }
+// }
+// // const mf = new Miniflare({
+// //   script: `
+// //   addEventListener("fetch", (event) => {
+// //     event.respondWith(new Response("Hello Miniflare!"));
+// //   });
+// //   `,
+// // });
+// // const res = await mf.dispatchFetch("http://localhost:3000/");
+// // console.log(await res.text()); // Hello Miniflare!
+// const server = async (req) => {
+//   const url = new URL(req.url);
+//   console.log(req.method, url.pathname);
+//   // maybe this is needed
+//   if (url.pathname.startsWith("/parotta/")) {
+//     return renderJs(path.join(import.meta.dir, url.pathname.replace("/parotta/", "")));
+//   }
+//   if (url.pathname.endsWith(".css")) {
+//     return renderCss(path.join(process.cwd(), url.pathname));
+//   }
+//   if (url.pathname.endsWith(".js") || url.pathname.endsWith(".jsx")) {
+//     return renderJs(path.join(process.cwd(), url.pathname));
+//   }
+//   const match = serverRouter.lookup(url.pathname);
+//   if (match && !match.key.includes("/_")) {
+//     if (match.file) {
+//       return sendFile(path.join(process.cwd(), `/static${match.file}`));
+//     }
+//     if (match.page && req.headers.get("Accept")?.includes('text/html')) {
+//       return renderPage(url);
+//     }
+//     if (match.service) {
+//       return renderApi(match.key, match.service, req);
+//     }
+//   }
+//   if (req.headers.get("Accept")?.includes('text/html')) {
+//     // not found html page
+//     return renderPage(new URL(`${url.protocol}//${url.host}/_404`));
+//   }
+//   // not found generic page
+//   return new Response(`{"message": "not found"}`, {
+//     headers: { 'Content-Type': 'application/json' },
+//     status: 404,
+//   });
+// }
+// export default server;

packages/cli/package.json ADDED Viewed

@@ -0,0 +1,27 @@
+{
+  "name": "parotta-cli",
+  "version": "0.5.0",
+  "type": "module",
+  "dependencies": {
+    "autoprefixer": "^10.4.14",
+    "bytes": "3.1.2",
+    "esbuild": "0.17.19",
+    "meow": "12.0.1",
+    "mime-types": "2.1.35",
+    "ms": "2.1.3",
+    "parotta-runtime": "workspace:*",
+    "picocolors": "1.0.0",
+    "postcss": "^8.4.21",
+    "postcss-custom-media": "^9.1.2",
+    "postcss-nesting": "^11.2.1",
+    "walkdir": "0.4.1",
+    "esbuild-plugin-resolve": "2.0.0"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "bin": {
+    "parotta": "index.js"
+  }
+}

packages/example/.gitignore ADDED Viewed

@@ -0,0 +1,4 @@
+node_modules
+.env
+test-results
+build

packages/example/.vscode/extensions.json ADDED Viewed

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "ms-playwright.playwright"
+  ]
+}

packages/example/.vscode/settings.json ADDED Viewed

@@ -0,0 +1,13 @@
+{
+  "files.exclude": {
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/CVS": true,
+    "**/.DS_Store": true,
+    "**/Thumbs.db": true,
+    "**/dist": true,
+    "**/playwright-report": true,
+    "test-results": true
+  }
+}

packages/example/Dockerfile ADDED Viewed

@@ -0,0 +1,8 @@
+FROM oven/bun:0.5.8
+ENV NODE_ENV production
+WORKDIR /app
+COPY . /app
+CMD ["bun", "start"]

packages/example/components/Counter/Counter.jsx ADDED Viewed

@@ -0,0 +1,16 @@
+import React, { useState } from "react";
+const Counter = () => {
+  const [count, setCount] = useState(5);
+  return (
+    <div>
+      <button onClick={() => setCount(count - 1)}>-</button>
+      <span className="count">
+        {count}
+      </span>
+      <button onClick={() => setCount(count + 1)}>+</button>
+    </div>
+  )
+}
+export default Counter;

packages/example/components/Layout/Layout.css ADDED Viewed

@@ -0,0 +1,5 @@
+.layout-header {
+  & a {
+    margin-right: 20px;
+  }
+}

packages/example/components/Layout/Layout.jsx ADDED Viewed

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Link } from "parotta-runtime";
+import "./Layout.css";
+const Layout = ({ children }) => {
+  return (
+    <div>
+      <header className="layout-header">
+        <Link href="/about">About us</Link>
+        <Link href="/todos">Todos</Link>
+      </header>
+      <div>
+        {children}
+      </div>
+    </div>
+  )
+}
+export default Layout;

packages/example/components/Timer/Timer.jsx ADDED Viewed

@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react';
+export default function Timer() {
+  const [counter, setCounter] = useState(0);
+  useEffect(() => {
+    const ref = setInterval(() => {
+      setCounter((c) => c + 1);
+    }, 100);
+    return () => {
+      clearInterval(ref);
+    }
+  }, []);
+  return (
+    <div>
+      <p>(This page is interactive while data is loading: {counter})</p>
+    </div>
+  );
+}

packages/example/components/Todo/Todo.css ADDED Viewed

@@ -0,0 +1,16 @@
+.todo {
+  & label {
+    list-style-type: none;
+    padding: 1em;
+    border-radius: 0.5em;
+    background-color: #ddd;
+    margin-top: 1em;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  & .done {
+    text-decoration: line-through;
+  }
+}

packages/example/components/Todo/Todo.jsx ADDED Viewed

@@ -0,0 +1,94 @@
+import { useState } from "react";
+// import PropTypes from 'prop-types';
+// import { Button, InputGroup } from "@blueprintjs/core";
+// import useMutation from '@/hooks/useMutation';
+// import { TodoPropType } from '@/models/Todo';
+import "./Todo.css";
+// const propTypes = {
+//   // todo: PropTypes.shape(TodoPropType).isRequired,
+// }
+const Todo = ({ todo }) => {
+  const [state, setState] = useState({ text: todo.text, editing: false });
+  // const updateMutation = useMutation(async (data) => {
+  //   await onUpdate({ ...todo, ...data });
+  //   await refetch();
+  // });
+  // const deleteMutation = useMutation(async () => {
+  //   await onDelete(todo.id);
+  //   await refetch();
+  // })
+  return (
+    <li className="todo">
+      {!state.editing && (
+        <label>
+          <input
+            type="checkbox"
+            checked={todo.completed}
+            onChange={(e) => {
+              // updateMutation.mutate({ completed: e.target.checked })
+            }}
+          />{" "}
+          <span className={todo.completed ? "done" : undefined}>{todo.text}</span>{" "}
+        </label>
+      )}
+      {/* {state.editing && (
+        <InputGroup
+          autoFocus
+          value={state.text}
+          onChange={(e) => setState({ text: e.target.value, editing: true })}
+          onKeyDown={async (e) => {
+            if (e.key === "Enter") {
+              await updateMutation.mutate({ text: state.text });
+              setState({ text: todo.text, editing: false });
+            } else if (e.key === "Escape") {
+              setState({ text: todo.text, editing: false });
+            }
+          }}
+        />
+      )}
+      <span>
+        {!todo.completed && !state.editing && (
+          <Button
+            onClick={() => setState({ text: todo.text, editing: true })}
+          >
+            Edit
+          </Button>
+        )}
+        {todo.completed && (
+          <Button loading={deleteMutation.isMutating} onClick={deleteMutation.mutate}>
+            Delete
+          </Button>
+        )}
+        {state.editing && state.text !== todo.text && (
+          <Button
+            loading={updateMutation.isMutating}
+            onClick={async () => {
+              await updateMutation.mutate({ text: state.text });
+              setState({ text: todo.text, editing: false });
+            }}
+          >
+            Save
+          </Button>
+        )}
+        {state.editing && (
+          <Button
+            onClick={() => setState({ text: todo.text, editing: false })}
+          >
+            Cancel
+          </Button>
+        )}
+      </span> */}
+    </li>
+  );
+};
+// Todo.propTypes = propTypes;
+export default Todo;

packages/example/db/index.js ADDED Viewed

@@ -0,0 +1,20 @@
+import { drizzle } from 'drizzle-orm/neon-serverless';
+import { Pool } from '@neondatabase/serverless';
+import { highlight } from 'sql-highlight';
+export const pool = new Pool({ connectionString: process.env.PG_CONN_URL });
+const db = drizzle(pool, {
+  logger: {
+    logQuery: (query, params) => {
+      const sqlString = params.reduce((acc, v, i) => acc.replaceAll("$" + (i + 1), v), query);
+      console.log(highlight(sqlString));
+    }
+  }
+});
+export default db;
+// import { migrate } from 'drizzle-orm/neon-serverless/migrator';
+// export const migrateAll = async () => {
+//   await migrate(db, { migrationsFolder: './db/migrations' });
+// }

packages/example/db/migrations/0000_empty_shatterstar.sql ADDED Viewed

@@ -0,0 +1,7 @@
+CREATE TABLE IF NOT EXISTS "todos" (
+	"id" serial PRIMARY KEY NOT NULL,
+	"text" text NOT NULL,
+	"completed" boolean NOT NULL,
+	"createdAt" date NOT NULL,
+	"updatedAt" date
+);

packages/example/db/migrations/meta/0000_snapshot.json ADDED Viewed

@@ -0,0 +1,54 @@
+{
+  "version": "5",
+  "dialect": "pg",
+  "id": "7b876e3f-3db0-4282-b1c9-a5961b930b99",
+  "prevId": "00000000-0000-0000-0000-000000000000",
+  "tables": {
+    "todos": {
+      "name": "todos",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "text": {
+          "name": "text",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "completed": {
+          "name": "completed",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "date",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "updatedAt": {
+          "name": "updatedAt",
+          "type": "date",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {}
+    }
+  },
+  "enums": {},
+  "schemas": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  }
+}

packages/example/db/migrations/meta/_journal.json ADDED Viewed

@@ -0,0 +1,12 @@
+{
+  "version": "5",
+  "dialect": "pg",
+  "entries": [
+    {
+      "idx": 0,
+      "version": "5",
+      "when": 1683227001598,
+      "tag": "0000_empty_shatterstar"
+    }
+  ]
+}

packages/example/drizzle.config.json ADDED Viewed

@@ -0,0 +1,4 @@
+{
+  "out": "./db/migrations/",
+  "schema": "./db/index.js"
+}

packages/example/jsconfig.json ADDED Viewed

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  }
+}

packages/example/main.js ADDED Viewed

@@ -0,0 +1,6 @@
+import server from "parotta/server.js";
+export default {
+  port: 3000,
+  fetch: server,
+}

packages/example/package.json ADDED Viewed

@@ -0,0 +1,59 @@
+{
+  "name": "parotta-example",
+  "type": "module",
+  "scripts": {
+    "start": "bun main.js",
+    "build": "parotta build cloudflare",
+    "run": "docker run -p 3000:3000 example",
+    "test": "bun test",
+    "test-e2e": "playwright test"
+  },
+  "dependencies": {
+    "@neondatabase/serverless": "^0.2.9",
+    "drizzle-orm": "0.26.0",
+    "normalize.css": "^8.0.1",
+    "react": "18.2.0",
+    "react-aria-components": "1.0.0-alpha.3",
+    "react-dom": "18.2.0",
+    "react-error-boundary": "4.0.4",
+    "react-helmet-async": "1.3.0",
+    "react-hook-form": "7.43.9",
+    "sql-highlight": "^4.3.2",
+    "zod": "^3.21.4",
+    "parotta-runtime": "workspace:*"
+  },
+  "devDependencies": {
+    "parotta-cli": "workspace:*",
+    "@playwright/test": "^1.31.2",
+    "eslint": "^8.35.0",
+    "eslint-config-react-app": "^7.0.1"
+  },
+  "parotta": {
+    "hydrate": true,
+    "css": [
+      "node_modules/normalize.css/normalize.css"
+    ]
+  },
+  "prettier": {
+    "printWidth": 120
+  },
+  "eslintConfig": {
+    "root": true,
+    "parserOptions": {
+      "ecmaVersion": "latest",
+      "sourceType": "module"
+    },
+    "extends": [
+      "eslint:recommended",
+      "react-app"
+    ],
+    "ignorePatterns": [
+      "build"
+    ],
+    "rules": {
+      "react/prop-types": "warn",
+      "react/react-in-jsx-scope": "off",
+      "no-unused-vars": "warn"
+    }
+  }
+}

packages/example/pages/_404/page.css ADDED Viewed

@@ -0,0 +1,38 @@
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #000;
+  background: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif;
+  height: 100vh;
+  text-align: center;
+  & h1 {
+    display: inline-block;
+    border-right: 1px solid rgba(0, 0, 0, .3);
+    margin: 0;
+    margin-right: 20px;
+    padding: 10px 23px 10px 0;
+    font-size: 24px;
+    font-weight: 500;
+    vertical-align: top;
+  }
+  & .content {
+    display: inline-block;
+    text-align: left;
+    line-height: 49px;
+    height: 49px;
+    vertical-align: middle;
+  }
+  & h2 {
+    font-size: 14px;
+    font-weight: normal;
+    line-height: inherit;
+    margin: 0;
+    padding: 0;
+  }
+}

packages/example/pages/_404/page.jsx ADDED Viewed

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Helmet } from 'react-helmet-async';
+import "./page.css";
+const Page = () => {
+  return (
+    <div>
+      <Helmet>
+        <title>Page not found</title>
+      </Helmet>
+      <h1>404 - Page not found</h1>
+      <div className="content">
+        <h2>This page could not be found</h2>
+      </div>
+    </div>
+  )
+}
+export default Page;

packages/example/pages/_500/page.css ADDED Viewed

@@ -0,0 +1,38 @@
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #000;
+  background: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif;
+  height: 100vh;
+  text-align: center;
+  & h1 {
+    display: inline-block;
+    border-right: 1px solid rgba(0, 0, 0, .3);
+    margin: 0;
+    margin-right: 20px;
+    padding: 10px 23px 10px 0;
+    font-size: 24px;
+    font-weight: 500;
+    vertical-align: top;
+  }
+  & .content {
+    display: inline-block;
+    text-align: left;
+    line-height: 49px;
+    height: 49px;
+    vertical-align: middle;
+  }
+  & h2 {
+    font-size: 14px;
+    font-weight: normal;
+    line-height: inherit;
+    margin: 0;
+    padding: 0;
+  }
+}

packages/example/pages/_500/page.jsx ADDED Viewed

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Helmet } from 'react-helmet-async';
+import "./page.css";
+const Page = () => {
+  return (
+    <div>
+      <Helmet>
+        <title>Oop's Something went wrong</title>
+      </Helmet>
+      <h1>Oop's Something went wrong</h1>
+      <div className="content">
+        <h2>Internal Server Error</h2>
+      </div>
+    </div>
+  )
+}
+export default Page;

packages/example/pages/about/page.css ADDED Viewed

@@ -0,0 +1,10 @@
+body {
+  margin: 0;
+  padding: 20px;
+  padding-bottom: 130px;
+  background-color: violet;
+  & footer {
+    margin-top: 100px;
+  }
+}

packages/example/pages/about/page.jsx ADDED Viewed

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Link, useRouter } from "parotta-runtime";
+import { Helmet } from 'react-helmet-async';
+import Layout from '@/components/Layout/Layout';
+import "./page.css";
+export const Page = () => {
+  const router = useRouter();
+  return (
+    <Layout>
+      <div className="about-page">
+        <Helmet>
+          <title>About Page @ {router.pathname}</title>
+          <meta name="description" content="Showcase of using parotta meta-framework." />
+        </Helmet>
+        <div>
+          <h1>About Page @ {router.pathname}</h1>
+          <p>Showcase of using parotta meta-framework.</p>
+        </div>
+        <footer>
+          <Link href="/">Back</Link>
+        </footer>
+      </div>
+    </Layout>
+  )
+}
+export default Page;

packages/example/pages/page.css ADDED Viewed

@@ -0,0 +1,17 @@
+body {
+  margin: 0;
+  padding: 20px;
+  margin: 0;
+  background-color: turquoise;
+  & .count {
+    color: black;
+    padding: 40px;
+    font-size: 30px;
+    font-weight: 600;
+  }
+  & footer {
+    margin-top: 100px;
+  }
+}

packages/example/pages/page.jsx ADDED Viewed

@@ -0,0 +1,29 @@
+import React, { useEffect } from 'react';
+import { useRouter } from "parotta-runtime";
+import Layout from '@/components/Layout/Layout';
+import Counter from "@/components/Counter/Counter";
+import { Helmet } from 'react-helmet-async';
+import "./page.css";
+const Page = () => {
+  const router = useRouter();
+  useEffect(() => {
+  }, []);
+  return (
+    <Layout>
+      <Helmet>
+        <title>Parotta App</title>
+      </Helmet>
+      <div>
+        <h1>Home Page</h1>
+        <p>
+          Path: {router.pathname}
+        </p>
+        <Counter />
+      </div>
+    </Layout>
+  )
+}
+export default Page;

packages/example/pages/page.spec.js ADDED Viewed

@@ -0,0 +1,19 @@
+// @ts-check
+// import { test, expect } from '@playwright/test';
+// test.beforeEach(async ({ page }) => {
+//   await page.goto('/');
+// })
+// test('has title', async ({ page }) => {
+//   await expect(page).toHaveTitle(/Parotta/);
+// });
+// test('has links', async ({ page }) => {
+//   // await page.getByRole('link', { name: 'About us' }).click();
+// });
+// test('has counter', async ({ page }) => {
+//   const counter =  page.getByText("Counter");
+//   expect(counter.innerText).toEqual("123");
+// });

packages/example/pages/todos/page.css ADDED Viewed

@@ -0,0 +1,71 @@
+body {
+  padding: 10px;
+  background-color: turquoise;
+}
+:root {
+  --spectrum-alias-border-color: black;
+  --spectrum-global-color-gray-50: white;
+}
+.react-aria-TextField {
+  --field-border: var(--spectrum-alias-border-color);
+  --field-border-disabled: var(--spectrum-alias-border-color-disabled);
+  --field-background: var(--spectrum-global-color-gray-50);
+  --text-color: var(--spectrum-alias-text-color);
+  --text-color-disabled: var(--spectrum-alias-text-color-disabled);
+  --focus-ring-color: slateblue;
+  --invalid-color: var(--spectrum-global-color-red-600);
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+  .react-aria-Input {
+    padding: 0.286rem;
+    margin: 0;
+    border: 1px solid var(--field-border);
+    border-radius: 6px;
+    background: var(--field-background);
+    font-size: 1.143rem;
+    color: var(--text-color);
+    &[aria-invalid] {
+      border-color: var(--invalid-color);
+    }
+    &:focus {
+      outline: none;
+      border-color: var(--focus-ring-color);
+      box-shadow: 0 0 0 1px var(--focus-ring-color);
+    }
+    &:disabled {
+      border-color: var(--field-border-disabled);
+      color: var(--text-color-disabled);
+    }
+  }
+  [slot=description] {
+    font-size: 12px;
+  }
+  [slot=errorMessage] {
+    font-size: 12px;
+    color: var(--invalid-color);
+  }
+}
+@media (forced-colors: active) {
+  .react-aria-TextField {
+    --field-border: ButtonBorder;
+    --field-border-disabled: GrayText;
+    --field-background: Field;
+    --text-color: FieldText;
+    --text-color-disabled: GrayText;
+    --focus-ring-color: Highlight;
+    --invalid-color: LinkText;
+  }
+}

packages/example/pages/todos/page.jsx ADDED Viewed

@@ -0,0 +1,61 @@
+import React, { Suspense } from 'react';
+import { Helmet } from 'react-helmet-async';
+import { useQuery, useMutation } from "parotta-runtime";
+import { useForm } from 'react-hook-form';
+import Todo from "@/components/Todo/Todo";
+import { TextField, Label, Input } from 'react-aria-components';
+import { Button } from 'react-aria-components';
+import { getTodos, createTodo } from "@/services/todos.service";
+import Layout from '@/components/Layout/Layout';
+import "./page.css";
+const TodoList = () => {
+  const { data, refetch } = useQuery("todos", () => getTodos());
+  const { mutate, isMutating, err } = useMutation(async ({ text }) => {
+    await createTodo({
+      text,
+      completed: false,
+    })
+    await refetch();
+  });
+  const { register, handleSubmit, formState: { errors } } = useForm();
+  console.log('err', err, errors);
+  return (
+    <div>
+      <ul>
+        {data.map((item) => (
+          <Todo key={item.id} todo={item} />
+        ))}
+      </ul>
+      <form onSubmit={handleSubmit(mutate)}>
+        <TextField isRequired isReadOnly={isMutating}>
+          <Label>Text (required)</Label>
+          <Input {...register('text')} />
+          {err?.text && <p>{err.text._errors[0]}</p>}
+        </TextField>
+        <Button type="submit" isDisabled={isMutating}>Add Todo</Button>
+        {isMutating && <div>
+          <p>Creating...</p>
+        </div>}
+      </form>
+    </div>
+  )
+}
+const Page = () => {
+  return (
+    <Layout>
+      <h1>Todos</h1>
+      <Helmet>
+        <title>Todos Page</title>
+      </Helmet>
+      <div>
+        <Suspense fallback="Loading...">
+          <TodoList />
+        </Suspense>
+      </div>
+    </Layout>
+  )
+}
+export default Page;

packages/example/playwright.config.js ADDED Viewed

@@ -0,0 +1,65 @@
+// @ts-check
+import { defineConfig, devices } from '@playwright/test';
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+export default defineConfig({
+  testDir: './routes',
+  timeout: 30 * 1000,
+  expect: {
+    timeout: 5000
+  },
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    actionTimeout: 0,
+    baseURL: 'http://localhost:3000',
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { channel: 'chrome' },
+    // },
+  ],
+  outputDir: 'test-results/',
+  webServer: {
+    command: '../parotta/cli.js',
+    port: 3000,
+  },
+});

packages/example/readme.md ADDED Viewed

@@ -0,0 +1,18 @@
+# Sample Parotta Application
+## Requirements
+1. bun >= v0.5.8
+## Setup
+1. `bun i`
+2. `bunx playright install`
+## Running
+`bun run dev`
+## Testing
+`bun test`

packages/example/services/auth.service.js ADDED Viewed

@@ -0,0 +1,50 @@
+// import NextAuth from "next-auth";
+// import EmailProvider from "next-auth/providers/email";
+// import GoogleProvider from "next-auth/providers/google";
+// import DrizzleAuthAdapterPG from "drizzle-auth-adaptor-pg";
+// import db from "@/db";
+// GET /api/auth/signin
+// POST /api/auth/signin/:provider
+// GET/POST /api/auth/callback/:provider
+// GET /api/auth/signout
+// POST /api/auth/signout
+// GET /api/auth/session
+// GET /api/auth/csrf
+// GET /api/auth/providers
+// NEXTAUTH_SECRET="This is an example"
+// NEXTAUTH_URL
+// import { SessionProvider } from "next-auth/react"
+// export default function App({
+//   Component,
+//   pageProps: { session, ...pageProps },
+// }) {
+//   return (
+//     <SessionProvider session={session}>
+//       <Component {...pageProps} />
+//     </SessionProvider>
+//   )
+// }
+// const handler = NextAuth({
+//   adapter: DrizzleAuthAdapterPG(db),
+//   providers: [
+//     EmailProvider({
+//       server: {
+//         host: process.env.SMTP_HOST,
+//         port: Number(process.env.SMTP_PORT),
+//         auth: {
+//           user: process.env.SMTP_USER,
+//           pass: process.env.SMTP_PASSWORD,
+//         },
+//       },
+//       from: process.env.EMAIL_FROM,
+//     }),
+//     GoogleProvider({
+//       clientId: process.env.GOOGLE_CLIENT_ID,
+//       clientSecret: process.env.GOOGLE_CLIENT_SECRET,
+//     }),
+//   ],
+// });

packages/example/services/todos.service.js ADDED Viewed

@@ -0,0 +1,49 @@
+import { eq, asc } from 'drizzle-orm';
+import db from "@/db";
+import { boolean, date, pgTable, serial, text } from 'drizzle-orm/pg-core';
+import { z } from 'zod';
+const todos = pgTable('todos', {
+  id: serial('id').primaryKey(),
+  text: text('text').notNull(),
+  completed: boolean('completed').notNull(),
+  createdAt: date('createdAt').notNull(),
+  updatedAt: date('updatedAt'),
+});
+export const createSchema = z.object({
+  text: z.string().nonempty("please enter some text"),
+  completed: z.boolean(),
+});
+export const updateSchema = z.object({
+  text: z.string().nonempty("please enter some text"),
+  completed: z.boolean(),
+});
+export const getTodos = async () => {
+  return await db.select().from(todos).orderBy(asc(todos.id));
+}
+/** @param {z.infer<typeof createSchema>} params */
+export const createTodo = async (params) => {
+  const item = createSchema.parse(params);
+  item.createdAt = new Date();
+  return await db.insert(todos).values(item).returning();
+}
+export const getTodo = async (id) => {
+  const results = await db.select().from(todos).where(eq(todos.id, id));
+  return results[0]
+}
+/** @param {z.infer<typeof updateSchema>} params */
+export const updateTodo = async (params) => {
+  const item = updateSchema.parse(params);
+  item.updatedAt = new Date();
+  return await db.update(todos).set(item).where(eq(todos.id, item.id)).returning();
+}
+export const deleteTodo = async (id) => {
+  return await db.delete(todos).where(eq(todos.id, id)).returning();
+}

packages/example/services/todos.service.test.js ADDED Viewed

@@ -0,0 +1,41 @@
+import { test, expect } from "bun:test";
+import { createSchema } from "./todos.service";
+test("validate createSchema", () => {
+  expect(createSchema.safeParse({}).error.issues).toEqual([
+    {
+      "code": "invalid_type",
+      "expected": "string",
+      "message": "Required",
+      "path": [
+        "text"
+      ],
+      "received": "undefined"
+    },
+    {
+      "code": "invalid_type",
+      "expected": "boolean",
+      "message": "Required",
+      "path": [
+        "completed"
+      ],
+      "received": "undefined"
+    }
+  ])
+  expect(createSchema.safeParse({
+    text: '',
+    completed: true,
+  }).error.issues).toEqual([
+    {
+      "code": "too_small",
+      "exact": false,
+      "inclusive": true,
+      "message": "please enter some text",
+      "minimum": 1,
+      "path": [
+        "text"
+      ],
+      "type": "string"
+    },
+  ])
+})

packages/example/static/favicon.ico ADDED Viewed

Binary file

packages/example/static/logo192.png ADDED Viewed

Binary file

packages/example/static/logo512.png ADDED Viewed

Binary file

packages/example/static/manifest.json ADDED Viewed

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

packages/example/static/robots.txt ADDED Viewed

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

packages/runtime/index.js ADDED Viewed

@@ -0,0 +1,315 @@
+import React, {
+  Suspense, createElement, createContext, useContext, useState, useEffect, useTransition, useCallback
+} from "react";
+import { HelmetProvider } from 'react-helmet-async';
+import { ErrorBoundary } from "react-error-boundary";
+import { createMemoryHistory } from "history";
+import { createRouter } from "radix3";
+import routes from '/static/routemap.json' assert {type: 'json'};
+/**
+ * CSR related functions
+ */
+export const domain = () => typeof window !== 'undefined' ? window.origin : "http://0.0.0.0:3000";
+export const rpc = (serviceName) => async (params = {}) => {
+  const res = await fetch(`${domain()}/services/${serviceName}`, {
+    method: "POST",
+    headers: {
+      "Accept": "application/json",
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(params),
+  })
+  return await res.json();
+}
+export const RpcContext = createContext(undefined);
+// global way to refresh maybe without being tied to a hook like refetch
+export const useInvalidate = () => {
+  const ctx = useContext(RpcContext);
+  return (regex) => {
+    Object.keys(ctx)
+      .filter((k) => regex.test(k))
+      .forEach((k) => {
+        delete ctx[k];
+      });
+  }
+}
+export const useRpcCache = (k) => {
+  const ctx = useContext(RpcContext);
+  const [_, rerender] = useState(false);
+  const get = () => ctx[k]
+  const set = (v) => {
+    ctx[k] = v;
+    rerender((c) => !c);
+  }
+  const invalidate = () => {
+    delete ctx[k];
+    rerender((c) => !c);
+  }
+  return {
+    get,
+    set,
+    invalidate,
+  }
+}
+/**
+ *
+ * @param {*} fn
+ * @param {*} params
+ * @returns
+ */
+export const useQuery = (key, fn) => {
+  const [isRefetching, setIsRefetching] = useState(false);
+  const [err, setErr] = useState(null);
+  const cache = useRpcCache(key);
+  const refetch = useCallback(async () => {
+    try {
+      setIsRefetching(true);
+      setErr(null);
+      cache.set(await fn());
+    } catch (err) {
+      setErr(err);
+      throw err;
+    } finally {
+      setIsRefetching(false);
+    }
+  }, [fn]);
+  const value = cache.get();
+  if (value) {
+    if (value instanceof Promise) {
+      throw value;
+    } else if (value instanceof Error) {
+      throw value;
+    }
+    return { data: value, isRefetching, err, refetch };
+  }
+  cache.set(fn().then((v) => cache.set(v)));
+  throw cache.get();
+}
+export const useMutation = (fn) => {
+  const [isMutating, setIsMutating] = useState(false);
+  const [err, setErr] = useState(null);
+  const mutate = useCallback(async (params) => {
+    try {
+      setIsMutating(true);
+      setErr(null);
+      await fn(params);
+    } catch (err) {
+      setErr(err)
+      throw err;
+    } finally {
+      setIsMutating(false);
+    }
+  }, [fn])
+  return {
+    mutate,
+    isMutating,
+    err,
+  }
+}
+export const RouterContext = createContext(undefined);
+const getMatch = (radixRouter, pathname) => {
+  const matchedPage = radixRouter.lookup(pathname);
+  if (!matchedPage) {
+    return radixRouter.lookup("_404")
+  }
+  return matchedPage;
+}
+const getCssUrl = (pathname) => `/pages${pathname === "/" ? "" : pathname}/page.css`;
+export const App = ({ nProgress, history, radixRouter, rpcCache, helmetContext }) => {
+  const [isPending, startTransition] = useTransition();
+  const [match, setMatch] = useState(() => getMatch(radixRouter, history.location.pathname));
+  useEffect(() => {
+    return history.listen(({ location }) => {
+      const href = getCssUrl(location.pathname);
+      // const isLoaded = Array.from(document.getElementsByTagName("link"))
+      //   .map((link) => link.href.replace(window.origin, "")).includes(href);
+      // if (!isLoaded) {
+      // const link = document.createElement('link');
+      // link.setAttribute("rel", "stylesheet");
+      // link.setAttribute("type", "text/css");
+      // link.onload = () => {
+      //   nProgress.start();
+      //   startTransition(() => {
+      //     setMatch(getMatch(radixRouter, location.pathname));
+      //   })
+      // };
+      // link.setAttribute("href", href);
+      // document.getElementsByTagName("head")[0].appendChild(link);
+      // } else {
+      const link = document.createElement('link');
+      link.setAttribute("rel", "stylesheet");
+      link.setAttribute("type", "text/css");
+      link.setAttribute("href", href);
+      document.getElementsByTagName("head")[0].appendChild(link);
+      nProgress.start();
+      startTransition(() => {
+        setMatch(getMatch(radixRouter, location.pathname));
+      })
+      // }
+    });
+  }, []);
+  useEffect(() => {
+    if (!isPending) {
+      nProgress.done();
+    }
+  }, [isPending]);
+  return createElement(HelmetProvider, {
+    context: helmetContext,
+    children: createElement(RpcContext.Provider, {
+      value: rpcCache,
+      children: createElement(RouterContext.Provider, {
+        value: {
+          history: history,
+          params: match.params || {},
+        },
+        children: createElement(ErrorBoundary, {
+          onError: (err) => console.log(err),
+          fallback: createElement("p", {}, "Oops something went wrong"),
+          children: createElement(Suspense, {
+            fallback: createElement("p", {}, "Loading..."),
+            children: createElement(match, {}),
+          }),
+        }),
+      }),
+    }),
+  });
+}
+export const useRouter = () => {
+  const { history, params } = useContext(RouterContext);
+  return {
+    pathname: history.location.pathname,
+    query: new URLSearchParams(history.location.search),
+    params,
+    push: history.push,
+    replace: history.replace,
+    forward: history.forward,
+    back: history.back,
+    reload: () => window.location.reload(),
+  };
+}
+export const Link = (props) => {
+  const router = useRouter();
+  return createElement("a", {
+    ...props,
+    onMouseOver: (e) => {
+      // Simple prefetching for now will work only with cache headers
+      // fetch(getCssUrl(props.href));
+      // fetch(getCssUrl(props.href).replace("css", "jsx"));
+    },
+    onClick: (e) => {
+      e.preventDefault();
+      if (props && props.onClick) {
+        props.onClick(e);
+      }
+      router.push(props.href)
+    },
+  })
+}
+export const NavLink = ({ children, className, activeClassName, ...props }) => {
+  const { pathname } = useRouter();
+  const classNames = pathname === props.href ? [activeClassName, className] : [className];
+  return createElement(Link, {
+    children,
+    className: classNames,
+    ...props,
+  })
+}
+/**
+ * SSR related functions
+ */
+export const renderPage = async () => {
+  const clientRouter = createRouter({
+    strictTrailingSlash: true,
+    routes: Object.keys(routes).reduce((acc, r) => {
+      acc[r] = React.lazy(() => import(`/pages${r}/page.jsx`));
+      return acc;
+    }, {}),
+  });
+  const history = createMemoryHistory({
+    initialEntries: [url.pathname + url.search],
+  });
+  const helmetContext = {}
+  const nProgress = { start: () => { }, done: () => { } }
+  // const stream = await renderToReadableStream(
+  //   <html lang="en">
+  //     <head>
+  //       <link rel="stylesheet" href="https://unpkg.com/[email protected]/nprogress.css" />
+  //       <link id="pageCss" rel="stylesheet" href={`/pages${url.pathname}/page.css`} />
+  //       <script type="importmap" src="/static/importmap.json" />
+  //     </head>
+  //     <body>
+  //       <App
+  //         nProgress={nProgress}
+  //         history={history}
+  //         radixRouter={clientRouter}
+  //         rpcCache={{}}
+  //         helmetContext={helmetContext}
+  //       />
+  //       {false &&
+  //         <>
+  //           <script type="module" defer={true} dangerouslySetInnerHTML={{
+  //             __html: `
+  //             import React from "react";
+  //             import { hydrateRoot } from "react-dom/client";
+  //             import { createBrowserHistory } from "history";
+  //             import nProgress from "nprogress";
+  //             import { createRouter } from "radix3";
+  //             import { App } from "parotta/runtime";
+  //             import routes from '/static/routemap.json' assert {type: 'json'};
+  //             // import sheet from './styles.css' assert { type: 'css' };
+  //             const history = createBrowserHistory();
+  //             const radixRouter = createRouter({
+  //               strictTrailingSlash: true,
+  //               routes: {
+  //                 ${Object.keys(routes).map((r) => `"${r}": React.lazy(() => import("/pages${r}/page.jsx"))`).join(',\n      ')}
+  //               },
+  //             });
+  //             hydrateRoot(document.body, React.createElement(App, {
+  //               nProgress,
+  //               history,
+  //               radixRouter,
+  //               rpcCache: {},
+  //               helmetContext: {},
+  //             }));`
+  //           }}>
+  //           </script>
+  //         </>
+  //       }
+  //     </body>
+  //   </html>
+  // );
+  const stream = await renderToReadableStream(React.createElement(App, {
+    nProgress,
+    history,
+    radixRouter: clientRouter,
+    rpcCache: {},
+    helmetContext: helmetContext,
+  }));
+  // TODO:
+  // if (bot || isCrawler) {
+  //  await stream.allReady
+  //  add helmetContext to head
+  // }
+  return new Response(stream, {
+    headers: { 'Content-Type': 'text/html' },
+    status: 200,
+  });
+}

packages/runtime/package.json ADDED Viewed

@@ -0,0 +1,14 @@
+{
+  "name": "parotta-runtime",
+  "version": "0.5.0",
+  "type": "module",
+  "dependencies": {
+    "history": "^5.3.0",
+    "radix3": "^1.0.0"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-error-boundary": "*",
+    "react-helmet-async": "*"
+  }
+}

pnpm-workspace.yaml ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ packages:
2	+ - 'packages/*'

readme.md ADDED Viewed

@@ -0,0 +1,20 @@
+# parotta
+parotta is a next level meta-framework for react that runs only on edge runtimes.
+It uses bun as its bundler/transpiler and development mode as its quick and fast.
+It uses File System routing with streaming SSR + CSR as the method to render pages.
+It is very opionated and has set of idiomatic ways of doing things.
+It has an inbuilt rpc mechanism to access server resources instead of a typical REST API.
+During development each request for a page is executed in a separate vercel edge-runtime vm.
+During production each page is packaged to an esm function adapted to the platform of your choice.
+### Todo
+1. Hydrate rpc cache
+2. Build a docs website using parotta
+### Supported platforms
+1. [Cloudflare page functions](https://developers.cloudflare.com/pages/platform/functions/routing/)
+2. [Vercel edge functions](https://vercel.com/docs/concepts/functions/edge-functions)
+3. [Netlify edge functions](https://docs.netlify.com/edge-functions/overview/)
+4. [Deno Deploy](https://deno.com/deploy)