create-backtick-app 0.3.2 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-backtick-app",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "Creates a Backtick app: React Native, React or Solid, with screens from your server on Node or Bun",
   "keywords": [
     "backtick",

package/templates/react/package.json

@@ -11,10 +11,10 @@
     "format:check": "prettier --check --ignore-unknown ."
   },
   "dependencies": {
-    "@backtickjs/bundler": "0.3.2",
-    "@backtickjs/core": "0.3.2",
-    "@backtickjs/node-plugin": "0.3.2",
-    "@backtickjs/jsx-react": "0.3.2",
+    "@backtickjs/bundler": "0.4.0",
+    "@backtickjs/core": "0.4.0",
+    "@backtickjs/node-plugin": "0.4.0",
+    "@backtickjs/jsx-react": "0.4.0",
     "@hono/node-server": "^2.1.4",
     "hono": "^4.13.13",
     "react": "19.2.3",
@@ -22,8 +22,8 @@
     "typescript": "^6.0.3"
   },
   "devDependencies": {
-    "@backtickjs/prettier-plugin": "0.3.2",
-    "@backtickjs/tsc": "0.3.2",
+    "@backtickjs/prettier-plugin": "0.4.0",
+    "@backtickjs/tsc": "0.4.0",
     "@types/node": "^25.9.1",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.7",

package/templates/react/server/html.ts

@@ -1,6 +1,4 @@
 import { bundler } from "@backtickjs/bundler";
-import { cs } from "@backtickjs/core";
-import { createRoot } from "react-dom/client" with { backtick: "client" };
 import type { JSX } from "@backtickjs/jsx-react/jsx-runtime";
 
 // The versions of React the page loads, below: what each page is bundled for.
@@ -13,12 +11,10 @@ const modules = {
 // Development unless NODE_ENV says production, as hosts set it for a deploy.
 const development = process.env.NODE_ENV !== "production";
 
-// A page: the element, bundled for the browser, and React from a CDN.
+// A page: its element, bundled for the browser, which the page's entry draws
+// with React's `createRoot`, and React from a CDN.
 export async function toHtml(element: JSX.Element): Promise<string> {
-  const bundle = await bundler.build({
-    input: cs`$createRoot(document.getElementById("app")!).render($element)`,
-    modules,
-  });
+  const bundle = await bundler.build({ input: element, modules });
   // In development, a map back to the files you wrote, for the browser's
   // devtools.
   const { code } = bundle.generate({
@@ -44,7 +40,11 @@ export async function toHtml(element: JSX.Element): Promise<string> {
   </head>
   <body style="margin: 0">
     <div id="app"></div>
-    <script type="module" src="data:text/javascript,${encodeURIComponent(code)}"></script>
+    <script type="module">
+      import { createRoot } from "react-dom/client";
+      import page from "data:text/javascript,${encodeURIComponent(code)}";
+      createRoot(document.getElementById("app")).render(page);
+    </script>
   </body>
 </html>`;
 }

package/templates/react-native/package.json

@@ -16,12 +16,12 @@
     "format:check": "prettier --check --ignore-unknown ."
   },
   "dependencies": {
-    "@backtickjs/bundler": "0.3.2",
-    "@backtickjs/core": "0.3.2",
-    "@backtickjs/expo": "0.3.2",
-    "@backtickjs/hono": "0.3.2",
-    "@backtickjs/node-plugin": "0.3.2",
-    "@backtickjs/jsx-react": "0.3.2",
+    "@backtickjs/bundler": "0.4.0",
+    "@backtickjs/core": "0.4.0",
+    "@backtickjs/expo": "0.4.0",
+    "@backtickjs/hono": "0.4.0",
+    "@backtickjs/node-plugin": "0.4.0",
+    "@backtickjs/jsx-react": "0.4.0",
     "@hono/node-server": "^2.1.4",
     "expo": "~57.0.26",
     "expo-constants": "~57.0.20",
@@ -35,8 +35,8 @@
     "typescript": "^6.0.3"
   },
   "devDependencies": {
-    "@backtickjs/prettier-plugin": "0.3.2",
-    "@backtickjs/tsc": "0.3.2",
+    "@backtickjs/prettier-plugin": "0.4.0",
+    "@backtickjs/tsc": "0.4.0",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.7",
     "@types/node": "^25.9.1",

package/templates/solid-js/package.json

@@ -11,18 +11,18 @@
     "format:check": "prettier --check --ignore-unknown ."
   },
   "dependencies": {
-    "@backtickjs/bundler": "0.3.2",
-    "@backtickjs/core": "0.3.2",
-    "@backtickjs/node-plugin": "0.3.2",
-    "@backtickjs/jsx-solid": "0.3.2",
+    "@backtickjs/bundler": "0.4.0",
+    "@backtickjs/core": "0.4.0",
+    "@backtickjs/node-plugin": "0.4.0",
+    "@backtickjs/jsx-solid": "0.4.0",
     "@hono/node-server": "^2.1.4",
     "hono": "^4.13.13",
     "solid-js": "1.9.17",
     "typescript": "^6.0.3"
   },
   "devDependencies": {
-    "@backtickjs/prettier-plugin": "0.3.2",
-    "@backtickjs/tsc": "0.3.2",
+    "@backtickjs/prettier-plugin": "0.4.0",
+    "@backtickjs/tsc": "0.4.0",
     "@types/node": "^25.9.1",
     "agent-device": "^0.21.27",
     "nodemon": "^3.1.14",

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

@@ -6,7 +6,7 @@ writeFileSync(
   `import { cs } from "@backtickjs/core";
 
 export async function Home() {
-  return cs\`(
+  return cs\`() => (
     <main style={{ padding: "24px", "font-family": "system-ui, sans-serif" }}>
       <p>Edit server/Home.tsx to edit this page.</p>
     </main>

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

@@ -8,7 +8,9 @@ export async function Home() {
   const node = process.version;
   const assembledAt = new Date().toLocaleTimeString();
 
-  return cs`{
+  // A component, which Solid draws where it's placed: its client components'
+  // onMount and refs run once it's in the page.
+  return cs`() => {
     const styles = {
       page: {
         "max-width": "640px",

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

@@ -1,6 +1,4 @@
 import { bundler } from "@backtickjs/bundler";
-import { cs } from "@backtickjs/core";
-import { render } from "solid-js/web" with { backtick: "client" };
 import type { JSX } from "@backtickjs/jsx-solid/jsx-runtime";
 
 // The version of Solid the page loads, below: what each page is bundled for.
@@ -13,12 +11,10 @@ const modules = {
 // Development unless NODE_ENV says production, as hosts set it for a deploy.
 const development = process.env.NODE_ENV !== "production";
 
-// A page: the element, bundled for the browser, and Solid from a CDN.
+// A page: its component, bundled for the browser, which the page's entry
+// draws with Solid's `render`, 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")!)`,
-    modules,
-  });
+  const bundle = await bundler.build({ input: element, modules });
   // In development, a map back to the files you wrote, for the browser's
   // devtools.
   const { code } = bundle.generate({
@@ -44,7 +40,11 @@ export async function toHtml(element: JSX.Element): Promise<string> {
   </head>
   <body style="margin: 0">
     <div id="app"></div>
-    <script type="module" src="data:text/javascript,${encodeURIComponent(code)}"></script>
+    <script type="module">
+      import { render } from "solid-js/web";
+      import Page from "data:text/javascript,${encodeURIComponent(code)}";
+      render(Page, document.getElementById("app"));
+    </script>
   </body>
 </html>`;
 }