create-backtick-app 0.0.0-stage → 0.1.0

package/templates/react-native/server/HelloWave.tsx

@@ -0,0 +1,51 @@
+import { cs } from "@backtickjs/core";
+import { useEffect, useRef } from "@backtickjs/react";
+import { Animated, Pressable } from "@backtickjs/react-native";
+
+// A client component: it runs on the phone, so its animation does too. It
+// waves when it appears, and again when you tap it.
+export const HelloWave = cs`() => {
+  const rotation = $useRef(new $Animated.Value(0)).current;
+  const wave = () =>
+    $Animated
+      .loop(
+        $Animated.sequence([
+          $Animated.timing(rotation, {
+            toValue: 1,
+            duration: 150,
+            useNativeDriver: true,
+          }),
+          $Animated.timing(rotation, {
+            toValue: 0,
+            duration: 150,
+            useNativeDriver: true,
+          }),
+        ]),
+        { iterations: 4 },
+      )
+      .start();
+
+  $useEffect(wave, []);
+
+  return (
+    <$Pressable onPress={wave}>
+      <$Animated.Text
+        style={{
+          fontSize: 28,
+          lineHeight: 32,
+          marginTop: -6,
+          transform: [
+            {
+              rotate: rotation.interpolate({
+                inputRange: [0, 1],
+                outputRange: ["0deg", "25deg"],
+              }),
+            },
+          ],
+        }}
+      >
+        👋
+      </$Animated.Text>
+    </$Pressable>
+  );
+}`;

package/templates/react-native/server/Home.tsx

@@ -0,0 +1,84 @@
+import { cs } from "@backtickjs/core";
+import {
+  Linking,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  View,
+} from "@backtickjs/react-native";
+import { HelloWave } from "./HelloWave.js";
+
+// A server component: it runs on your server for every request, and hands the
+// app its data and its client components.
+export async function Home() {
+  // Read here, on your server, and sent to the phone as plain values.
+  const node = process.version;
+  const assembledAt = new Date().toLocaleTimeString();
+
+  // The whole layout is the screen's, safe areas included: iOS insets a root
+  // scroll view itself, and Android draws under its status bar, so the screen
+  // pads for it.
+  return cs`{
+    const styles = $StyleSheet.create({
+      screen: {
+        padding: 24,
+        paddingTop: ($StatusBar.currentHeight ?? 0) + 24,
+        gap: 24,
+      },
+      titleRow: { flexDirection: "row", alignItems: "center", gap: 8 },
+      title: { fontSize: 32, fontWeight: "bold", lineHeight: 32 },
+      step: { gap: 8 },
+      subtitle: { fontSize: 20, fontWeight: "bold" },
+      body: { fontSize: 16, lineHeight: 24 },
+      code: { fontWeight: "600" },
+      link: { fontSize: 16, lineHeight: 30, color: "#0a7ea4" },
+    });
+
+    return (
+      <$ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        style={{ backgroundColor: "#fff" }}
+        contentContainerStyle={styles.screen}
+      >
+        <$View style={styles.titleRow}>
+          <$Text style={styles.title}>Welcome!</$Text>
+          <$HelloWave />
+        </$View>
+
+        <$View style={styles.step}>
+          <$Text style={styles.subtitle}>Step 1: Try it</$Text>
+          <$Text style={styles.body}>
+            Edit <$Text style={styles.code}>server/Home.tsx</$Text> and save.
+            This screen redraws without rebuilding the app.
+          </$Text>
+        </$View>
+
+        <$View style={styles.step}>
+          <$Text style={styles.subtitle}>Step 2: Server and client</$Text>
+          <$Text style={styles.body}>
+            Your server assembled this screen with Node {$node} at{" "}
+            {$assembledAt}. The waving hand is a client component: its animation
+            runs on your phone. Tap it.
+          </$Text>
+        </$View>
+
+        <$View style={styles.step}>
+          <$Text style={styles.subtitle}>Step 3: Get a fresh start</$Text>
+          <$Text style={styles.body}>
+            When you're ready, run{" "}
+            <$Text style={styles.code}>npm run reset-project</$Text> for a blank{" "}
+            <$Text style={styles.code}>server/Home.tsx</$Text>.
+          </$Text>
+        </$View>
+
+        <$Text
+          style={styles.link}
+          onPress={() => $Linking.openURL("https://backtickjs.com/docs")}
+        >
+          Read the docs →
+        </$Text>
+      </$ScrollView>
+    );
+  }`;
+}

package/templates/react-native/server/index.tsx

@@ -0,0 +1,50 @@
+import { createServer } from "node:http";
+import { createRequire } from "node:module";
+import { bundler } from "@backtickjs/bundler";
+import { Home } from "./Home.js";
+
+// Development is only what `npm start` runs, which sets NODE_ENV: any other
+// run, a deploy included, is production. In development, this run of the
+// server: `--watch` starts a new one whenever you save, and the app, seeing a
+// new one at `/live`, draws its screen again.
+const development = process.env.NODE_ENV === "development";
+const run = crypto.randomUUID();
+
+// The versions of React and React Native the app is built with: this
+// project's own, as the app and this server share a package.json. A server
+// for apps of many versions would tell them apart, by their user agent for
+// one, and bundle each for its own.
+const require = createRequire(import.meta.url);
+const packageVersions = {
+  react: require("react/package.json").version,
+  "react-native": require("react-native/package.json").version,
+};
+
+const server = createServer(async (request, response) => {
+  // `npm run web` serves the app from another origin.
+  response.setHeader("access-control-allow-origin", "*");
+  if (development && request.url === "/live") {
+    response.end(run);
+    return;
+  }
+  if (request.url === "/home") {
+    try {
+      const bundle = await bundler.build({ input: <Home />, packageVersions });
+      const { code } = bundle.generate({ format: "cjs" });
+      response.setHeader("content-type", "text/javascript");
+      response.end(code);
+    } catch (error) {
+      // Answered rather than crashed on, so the app 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/react-native/server/tsconfig.json

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

package/templates/react-native/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true
+  },
+  "exclude": ["server"]
+}

package/templates/solid-js/.prettierignore

@@ -0,0 +1,8 @@
+# Written by the package manager.
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
+bun.lock
+
+# Written the way VS Code writes them, one entry per line.
+.vscode/extensions.json

package/templates/solid-js/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["@backtickjs/prettier-plugin"]
+}

package/templates/solid-js/.turbo/turbo-typecheck.log

@@ -0,0 +1 @@
+$ backtick-tsc --noEmit

package/templates/solid-js/.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "backtickjs.backtick-vscode",
+    "esbenp.prettier-vscode"
+  ]
+}

package/templates/solid-js/gitignore

@@ -0,0 +1,16 @@
+# dependencies
+node_modules/
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo

package/templates/solid-js/node_modules/.bin/backtick-tsc

@@ -0,0 +1,22 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/backtick/backtick/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/backtick/backtick/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../@backtickjs/tsc/bin/backtick-tsc.js" "$@"
+else
+  exec node  "$basedir/../@backtickjs/tsc/bin/backtick-tsc.js" "$@"
+fi
+# cmd-shim-target=/home/runner/work/backtick/backtick/packages/create-backtick-app/templates/solid-js/node_modules/@backtickjs/tsc/bin/backtick-tsc.js

package/templates/solid-js/node_modules/.bin/prettier

@@ -0,0 +1,22 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/backtick/backtick/node_modules/.pnpm/prettier@3.8.4/node_modules/prettier/node_modules:/home/runner/work/backtick/backtick/node_modules/.pnpm/prettier@3.8.4/node_modules:/home/runner/work/backtick/backtick/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/backtick/backtick/node_modules/.pnpm/prettier@3.8.4/node_modules/prettier/node_modules:/home/runner/work/backtick/backtick/node_modules/.pnpm/prettier@3.8.4/node_modules:/home/runner/work/backtick/backtick/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../prettier/bin/prettier.cjs" "$@"
+else
+  exec node  "$basedir/../prettier/bin/prettier.cjs" "$@"
+fi
+# cmd-shim-target=/home/runner/work/backtick/backtick/packages/create-backtick-app/templates/solid-js/node_modules/prettier/bin/prettier.cjs

package/templates/solid-js/node_modules/.bin/tsc

@@ -0,0 +1,22 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/backtick/backtick/node_modules/.pnpm/typescript@6.0.3/node_modules/typescript/node_modules:/home/runner/work/backtick/backtick/node_modules/.pnpm/typescript@6.0.3/node_modules:/home/runner/work/backtick/backtick/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/backtick/backtick/node_modules/.pnpm/typescript@6.0.3/node_modules/typescript/node_modules:/home/runner/work/backtick/backtick/node_modules/.pnpm/typescript@6.0.3/node_modules:/home/runner/work/backtick/backtick/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../typescript/bin/tsc" "$@"
+else
+  exec node  "$basedir/../typescript/bin/tsc" "$@"
+fi
+# cmd-shim-target=/home/runner/work/backtick/backtick/packages/create-backtick-app/templates/solid-js/node_modules/typescript/bin/tsc

package/templates/solid-js/node_modules/.bin/tsserver

@@ -0,0 +1,22 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/backtick/backtick/node_modules/.pnpm/typescript@6.0.3/node_modules/typescript/node_modules:/home/runner/work/backtick/backtick/node_modules/.pnpm/typescript@6.0.3/node_modules:/home/runner/work/backtick/backtick/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/backtick/backtick/node_modules/.pnpm/typescript@6.0.3/node_modules/typescript/node_modules:/home/runner/work/backtick/backtick/node_modules/.pnpm/typescript@6.0.3/node_modules:/home/runner/work/backtick/backtick/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../typescript/bin/tsserver" "$@"
+else
+  exec node  "$basedir/../typescript/bin/tsserver" "$@"
+fi
+# cmd-shim-target=/home/runner/work/backtick/backtick/packages/create-backtick-app/templates/solid-js/node_modules/typescript/bin/tsserver

package/templates/solid-js/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "backtick-app-solid-js",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "node scripts/start.mjs",
+    "reset-project": "node scripts/reset-project.mjs",
+    "typecheck": "backtick-tsc --noEmit",
+    "format": "prettier --write --ignore-unknown .",
+    "format:check": "prettier --check --ignore-unknown ."
+  },
+  "dependencies": {
+    "@backtickjs/bundler": "^0.1.0",
+    "@backtickjs/core": "^0.1.0",
+    "@backtickjs/node-plugin": "^0.1.0",
+    "@backtickjs/solid-js": "^1.9.14",
+    "typescript": "^6.0.3"
+  },
+  "devDependencies": {
+    "@backtickjs/prettier-plugin": "^0.1.0",
+    "@backtickjs/tsc": "^0.1.0",
+    "@types/node": "^25.9.1",
+    "prettier": "^3.6.2"
+  },
+  "backtick": {
+    "plugins": [
+      "@backtickjs/solid-js/plugin"
+    ]
+  }
+}

package/templates/solid-js/scripts/reset-project.mjs

@@ -0,0 +1,21 @@
+// Replaces the welcome page with a blank one, so you start fresh.
+import { rmSync, writeFileSync } from "node:fs";
+
+writeFileSync(
+  "server/Home.tsx",
+  `import { cs } from "@backtickjs/core";
+
+export async function Home() {
+  return cs\`(
+    <main style={{ padding: "24px", "font-family": "system-ui, sans-serif" }}>
+      <p>Edit server/Home.tsx to edit this page.</p>
+    </main>
+  )\`;
+}
+`,
+);
+rmSync("server/HelloWave.tsx", { force: true });
+
+console.log(
+  "✅ Project reset. server/Home.tsx is now a blank page, and the welcome example is gone.",
+);

package/templates/solid-js/scripts/start.mjs

@@ -0,0 +1,20 @@
+// Starts your Backtick server in development: it restarts whenever a file
+// under `server/` changes, and the page reloads with it. Any other way of
+// running the server, a deploy included, is production.
+import { spawn } from "node:child_process";
+import { readFileSync } from "node:fs";
+
+// The runtime is the one package.json has a Backtick loader for: Bun's, or
+// else Node's.
+const { dependencies } = JSON.parse(readFileSync("package.json", "utf8"));
+const [runtime, ...loader] =
+  "@backtickjs/bun-plugin" in dependencies
+    ? ["bun", "--preload", "@backtickjs/bun-plugin"]
+    : ["node", "--enable-source-maps", "--import", "@backtickjs/node-plugin"];
+
+const server = spawn(runtime, ["--watch", ...loader, "server/index.tsx"], {
+  stdio: "inherit",
+  env: { ...process.env, NODE_ENV: process.env.NODE_ENV ?? "development" },
+});
+
+server.on("exit", (code) => process.exit(code ?? 0));

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

@@ -0,0 +1,34 @@
+import { cs } from "@backtickjs/core";
+import { onMount } from "@backtickjs/solid-js";
+
+// A client component: it runs in the browser, so its animation does too. It
+// waves when it appears, and again when you click it.
+export const HelloWave = cs`() => {
+  let hand!: HTMLSpanElement;
+  const wave = () => {
+    hand.animate(
+      [
+        { transform: "rotate(0deg)" },
+        { transform: "rotate(25deg)" },
+        { transform: "rotate(0deg)" },
+      ],
+      { duration: 300, iterations: 4 },
+    );
+  };
+
+  $onMount(wave);
+
+  return (
+    <span
+      ref={hand}
+      onClick={wave}
+      style={{
+        display: "inline-block",
+        cursor: "pointer",
+        "font-size": "28px",
+      }}
+    >
+      👋
+    </span>
+  );
+}`;

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"]
+}