create-backtick-app 0.0.0-stage → 0.1.1

package/templates/solid-js/server/Home.tsx

@@ -0,0 +1,65 @@
+import { cs } from "@backtickjs/core";
+import { HelloWave } from "./HelloWave.js";
+
+// A server component: it runs on your server for every request, and hands the
+// browser its data and its client components.
+export async function Home() {
+  // Read here, on your server, and sent to the browser as plain values.
+  const node = process.version;
+  const assembledAt = new Date().toLocaleTimeString();
+
+  return cs`{
+    const styles = {
+      page: {
+        "max-width": "640px",
+        padding: "24px",
+        "font-family": "system-ui, sans-serif",
+        display: "grid",
+        gap: "24px",
+      },
+      titleRow: { display: "flex", "align-items": "center", gap: "8px" },
+      title: { margin: "0", "font-size": "32px", "line-height": "1" },
+      step: { display: "grid", gap: "8px" },
+      subtitle: { margin: "0", "font-size": "20px" },
+      body: { margin: "0", "font-size": "16px", "line-height": "1.5" },
+      link: { "font-size": "16px", color: "#0a7ea4" },
+    };
+
+    return (
+      <main style={styles.page}>
+        <div style={styles.titleRow}>
+          <h1 style={styles.title}>Welcome!</h1>
+          <$HelloWave />
+        </div>
+
+        <section style={styles.step}>
+          <h2 style={styles.subtitle}>Step 1: Try it</h2>
+          <p style={styles.body}>
+            Edit <b>server/Home.tsx</b> and save. This page redraws on its own.
+          </p>
+        </section>
+
+        <section style={styles.step}>
+          <h2 style={styles.subtitle}>Step 2: Server and client</h2>
+          <p style={styles.body}>
+            Your server assembled this page with Node {$node} at {$assembledAt}.
+            The waving hand is a client component: its animation runs in your
+            browser. Click it.
+          </p>
+        </section>
+
+        <section style={styles.step}>
+          <h2 style={styles.subtitle}>Step 3: Get a fresh start</h2>
+          <p style={styles.body}>
+            When you're ready, run <b>npm run reset-project</b> for a blank{" "}
+            <b>server/Home.tsx</b>.
+          </p>
+        </section>
+
+        <a style={styles.link} href="https://backtickjs.com/docs">
+          Read the docs →
+        </a>
+      </main>
+    );
+  }`;
+}

package/templates/solid-js/server/html.ts

@@ -0,0 +1,62 @@
+import { bundler } from "@backtickjs/bundler";
+import { cs } from "@backtickjs/core";
+import { render } from "@backtickjs/solid-js/web";
+import type { JSX } from "@backtickjs/solid-js/jsx-runtime";
+
+// The version of Solid the page loads, below: what each page is bundled for.
+const packageVersions = { "solid-js": "1.9.14" };
+
+// Development is only what `npm start` runs, which sets NODE_ENV: any other
+// run, a deploy included, is production.
+export const development = process.env.NODE_ENV === "development";
+
+// In development, what reloads the page whenever the server restarts, as it
+// does when you save.
+const reload = `
+    <script type="module">
+      let run;
+      setInterval(async () => {
+        try {
+          const next = await (await fetch("/live")).text();
+          if (run !== undefined && next !== run) location.reload();
+          run = next;
+        } catch {}
+      }, 1000);
+    </script>`;
+
+// A page: the element, bundled for the browser, and Solid from a CDN.
+export async function toHtml(element: JSX.Element): Promise<string> {
+  const bundle = await bundler.build({
+    input: cs`$render(() => $element, document.getElementById("app")!)`,
+    packageVersions,
+  });
+  // In development, a map back to the files you wrote, for the browser's
+  // devtools.
+  const { code } = bundle.generate({
+    format: "es",
+    sourcemap: development ? "inline" : false,
+  });
+
+  return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Backtick</title>
+    <script type="importmap">
+      {
+        "imports": {
+          "solid-js": "https://cdn.jsdelivr.net/npm/solid-js@1.9.14/dist/solid.js",
+          "solid-js/web": "https://cdn.jsdelivr.net/npm/solid-js@1.9.14/web/dist/web.js",
+          "solid-js/store": "https://cdn.jsdelivr.net/npm/solid-js@1.9.14/store/dist/store.js"
+        }
+      }
+    </script>
+  </head>
+  <body style="margin: 0">
+    <div id="app"></div>
+    <script type="module" src="data:text/javascript,${encodeURIComponent(code)}"></script>
+    ${development ? reload : ""}
+  </body>
+</html>`;
+}

package/templates/solid-js/server/index.tsx

@@ -0,0 +1,33 @@
+import { createServer } from "node:http";
+import { Home } from "./Home.js";
+import { development, toHtml } from "./html.js";
+
+// In development, this run of the server: `--watch` starts a new one whenever
+// you save, and the page, seeing a new one at `/live`, reloads.
+const run = crypto.randomUUID();
+
+const server = createServer(async (request, response) => {
+  if (development && request.url === "/live") {
+    response.end(run);
+    return;
+  }
+  if (request.url === "/") {
+    try {
+      const html = await toHtml(<Home />);
+      response.setHeader("content-type", "text/html");
+      response.end(html);
+    } catch (error) {
+      // Answered rather than crashed on, so the browser can show why.
+      console.error(error);
+      response.statusCode = 500;
+      response.end(String(error));
+    }
+    return;
+  }
+  response.statusCode = 404;
+  response.end();
+});
+
+server.listen(3000, () => {
+  console.log("Backtick server on http://localhost:3000");
+});

package/templates/solid-js/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    // Imports kept as written: a name a page only splices, as `$onMount`, looks
+    // unused to TypeScript, which would otherwise drop its import.
+    "verbatimModuleSyntax": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "target": "esnext",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "lib": ["esnext", "dom"],
+    "types": ["node"],
+    "jsx": "react-jsx",
+    "jsxImportSource": "@backtickjs/solid-js"
+  },
+  "include": ["server"]
+}