@farm.js/create-app 0.1.0-beta.34 → 0.1.0-beta.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farm.js/create-app",
-  "version": "0.1.0-beta.34",
+  "version": "0.1.0-beta.36",
   "description": "Create a new FARMJS application",
   "keywords": [
     "@farm.js/create-app",

package/templates/_renderers/preact/package.json

@@ -11,7 +11,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@farm.js/core": "0.1.0-beta.34",
+    "@farm.js/core": "0.1.0-beta.36",
     "@farm.js/preact": "0.1.0-beta.30",
     "@fontsource-variable/geist": "5.3.0",
     "@fontsource-variable/geist-mono": "5.3.0",
@@ -19,7 +19,7 @@
     "zod": "4.1.12"
   },
   "devDependencies": {
-    "@farm.js/cli": "0.1.0-beta.34",
+    "@farm.js/cli": "0.1.0-beta.36",
     "tailwindcss": "^4.0.0",
     "typescript": "^5.3.3"
   },

package/templates/_renderers/solid/package.json

@@ -10,7 +10,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@farm.js/core": "0.1.0-beta.34",
+    "@farm.js/core": "0.1.0-beta.36",
     "@farm.js/solid": "0.1.0-beta.26",
     "@fontsource-variable/geist": "5.3.0",
     "@fontsource-variable/geist-mono": "5.3.0",
@@ -18,7 +18,7 @@
     "zod": "4.1.12"
   },
   "devDependencies": {
-    "@farm.js/cli": "0.1.0-beta.34",
+    "@farm.js/cli": "0.1.0-beta.36",
     "tailwindcss": "^4.0.0",
     "typescript": "^5.3.3"
   },

package/templates/_renderers/svelte/package.json

@@ -11,7 +11,7 @@
     "type-check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "dependencies": {
-    "@farm.js/core": "0.1.0-beta.34",
+    "@farm.js/core": "0.1.0-beta.36",
     "@farm.js/svelte": "0.1.0-beta.29",
     "@fontsource-variable/geist": "5.3.0",
     "@fontsource-variable/geist-mono": "5.3.0",
@@ -19,7 +19,7 @@
     "zod": "4.1.12"
   },
   "devDependencies": {
-    "@farm.js/cli": "0.1.0-beta.34",
+    "@farm.js/cli": "0.1.0-beta.36",
     "svelte-check": "4.7.5",
     "tailwindcss": "^4.0.0",
     "typescript": "^5.3.3"

package/templates/_renderers/vue/package.json

@@ -10,7 +10,7 @@
     "type-check": "vue-tsc --noEmit"
   },
   "dependencies": {
-    "@farm.js/core": "0.1.0-beta.34",
+    "@farm.js/core": "0.1.0-beta.36",
     "@farm.js/vue": "0.1.0-beta.26",
     "@fontsource-variable/geist": "5.3.0",
     "@fontsource-variable/geist-mono": "5.3.0",
@@ -18,7 +18,7 @@
     "zod": "4.1.12"
   },
   "devDependencies": {
-    "@farm.js/cli": "0.1.0-beta.34",
+    "@farm.js/cli": "0.1.0-beta.36",
     "tailwindcss": "^4.0.0",
     "typescript": "^5.3.3",
     "vue-tsc": "3.3.9"

package/templates/auth/package.json

@@ -12,8 +12,8 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@farm.js/auth": "0.1.0-beta.34",
-    "@farm.js/core": "0.1.0-beta.34",
+    "@farm.js/auth": "0.1.0-beta.36",
+    "@farm.js/core": "0.1.0-beta.36",
     "@fontsource-variable/geist": "5.3.0",
     "@fontsource-variable/geist-mono": "5.3.0",
     "better-call": "1.3.2",
@@ -21,7 +21,7 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@farm.js/cli": "0.1.0-beta.34",
+    "@farm.js/cli": "0.1.0-beta.36",
     "@types/node": "20.19.9",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",

package/templates/basic/package.json

@@ -10,14 +10,14 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@farm.js/core": "0.1.0-beta.34",
+    "@farm.js/core": "0.1.0-beta.36",
     "@fontsource-variable/geist": "5.3.0",
     "@fontsource-variable/geist-mono": "5.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@farm.js/cli": "0.1.0-beta.34",
+    "@farm.js/cli": "0.1.0-beta.36",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "tailwindcss": "^4.0.0",

package/templates/better-auth/package.json

@@ -11,8 +11,8 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@farm.js/better-auth": "0.1.0-beta.34",
-    "@farm.js/core": "0.1.0-beta.34",
+    "@farm.js/better-auth": "0.1.0-beta.36",
+    "@farm.js/core": "0.1.0-beta.36",
     "@fontsource-variable/geist": "5.3.0",
     "@fontsource-variable/geist-mono": "5.3.0",
     "better-auth": "1.6.25",
@@ -22,7 +22,7 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@farm.js/cli": "0.1.0-beta.34",
+    "@farm.js/cli": "0.1.0-beta.36",
     "@types/node": "20.19.9",
     "@types/pg": "8.20.0",
     "@types/react": "^19.0.0",

package/templates/react-compiler/README.md

@@ -0,0 +1,62 @@
+# FARMJS React Compiler Starter
+
+A focused experimental starter for FARMJS's React AOT compiler. It uses the same minimal dark shell
+as the other Create FARMJS App starters and includes one live comparison: an eligible local state
+update beside ordinary React reconciliation.
+
+> The compiler is experimental. Unsupported component shapes stay on React, so the optimization is
+> never required for correctness.
+
+## Create this starter
+
+```bash
+pnpm create @farm.js/app@beta my-compiler-app --template react-compiler --typescript
+cd my-compiler-app
+pnpm dev
+```
+
+You can also clone the standalone
+[farmjs-react-compiler-starter](https://github.com/farming-labs/farmjs-react-compiler-starter).
+
+## Compiler configuration
+
+The starter enables the compiler through the React renderer:
+
+```ts
+renderer: react({
+  experimental: {
+    compiler: true,
+  },
+}),
+```
+
+The included environment switch defaults to enabled and makes comparison builds easy:
+
+```bash
+FARM_REACT_COMPILER=true pnpm build
+FARM_REACT_COMPILER=false pnpm build
+```
+
+The status shown on the starter page reflects the resolved value used for that build.
+
+Components are considered automatically. Add `"use no compiler"` to a component when you need an
+explicit React-only path.
+
+## Verify the compiled path
+
+```bash
+pnpm install
+pnpm exec playwright install chromium
+pnpm experiment
+```
+
+The command builds the app, opens the production output in Chromium, checks both counters, verifies
+that the compiled update does not execute the component again, and saves a screenshot to
+`/tmp/farm-react-compiler-starter.png`.
+
+For batching, multiple bindings, safe keyed-list fallback, and the full compiler-on/off benchmark,
+see the maintained
+[React Compiler example](https://github.com/farming-labs/farm.js/tree/main/examples/react-compiler).
+
+Read the [React compiler guide](https://farm.js.dev/docs/renderers/react#experimental-aot-compiler)
+for the supported component contract and rollout guidance.

package/templates/react-compiler/farm.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from "@farm.js/core";
+import { react } from "@farm.js/react";
+
+const compilerEnabled = process.env.FARM_REACT_COMPILER !== "false";
+
+export default defineConfig({
+  env: {
+    public: {
+      FARM_REACT_COMPILER_ENABLED: () => compilerEnabled,
+    },
+  },
+  renderer: react({
+    experimental: {
+      compiler: compilerEnabled,
+    },
+  }),
+  theme: {
+    default: "dark",
+  },
+  deploy: {
+    target: "node",
+  },
+});

package/templates/react-compiler/gitignore

@@ -0,0 +1,23 @@
+# Dependencies
+node_modules/
+
+# Farm and deployment output
+.farm/
+.output/
+.vercel/
+dist/
+
+# Local environment files
+.env
+.env.local
+.env.*.local
+
+# Local databases
+*.sqlite
+*.sqlite-*
+*.db
+*.db-*
+
+# Logs and TypeScript cache
+*.log
+*.tsbuildinfo

package/templates/react-compiler/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "farmjs-react-compiler-starter",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "farm dev",
+    "build": "farm build",
+    "start": "farm start",
+    "experiment": "pnpm run build && node scripts/verify-experiment.mjs",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@farm.js/core": "0.1.0-beta.36",
+    "@farm.js/react": "0.1.0-beta.0",
+    "@fontsource-variable/geist": "5.3.0",
+    "@fontsource-variable/geist-mono": "5.3.0",
+    "react": "19.2.8",
+    "react-dom": "19.2.8"
+  },
+  "devDependencies": {
+    "@farm.js/cli": "0.1.0-beta.36",
+    "@playwright/test": "^1.52.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10"
+  },
+  "packageManager": "pnpm@8.12.1"
+}

package/templates/react-compiler/pnpm-workspace.yaml

@@ -0,0 +1,8 @@
+packages:
+  - "."
+
+allowBuilds:
+  "@prisma/client": true
+  esbuild: true
+  sharp: true
+  vue-demi: true

package/templates/react-compiler/public/favicon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-labelledby="title">
+  <title id="title">FARMJS React AOT</title>
+  <rect width="64" height="64" rx="14" fill="#0a0a09"/>
+  <path d="M18 16h30v8H28v8h17v8H28v16H18z" fill="#b8ff5b"/>
+</svg>

package/templates/react-compiler/scripts/verify-experiment.mjs

@@ -0,0 +1,113 @@
+import assert from "node:assert/strict";
+import { spawn } from "node:child_process";
+import { access } from "node:fs/promises";
+import path from "node:path";
+import { chromium } from "@playwright/test";
+
+const port = Number(process.env.FARM_EXPERIMENT_PORT || 4327);
+const origin = `http://127.0.0.1:${port}`;
+const compilerEnabled = process.env.FARM_REACT_COMPILER !== "false";
+const serverEntry = path.resolve(".farm/.output/server/index.mjs");
+const screenshotPath =
+  process.env.FARM_EXPERIMENT_SCREENSHOT || "/tmp/farm-react-compiler-starter.png";
+
+await access(serverEntry);
+
+let serverOutput = "";
+const server = spawn(process.execPath, [serverEntry], {
+  env: {
+    ...process.env,
+    HOST: "127.0.0.1",
+    NITRO_HOST: "127.0.0.1",
+    NITRO_PORT: String(port),
+    PORT: String(port),
+  },
+  stdio: ["ignore", "pipe", "pipe"],
+});
+
+server.stdout.on("data", (chunk) => {
+  serverOutput += chunk;
+});
+server.stderr.on("data", (chunk) => {
+  serverOutput += chunk;
+});
+
+async function waitForServer() {
+  for (let attempt = 0; attempt < 120; attempt += 1) {
+    if (server.exitCode !== null) {
+      throw new Error(`Production server exited early.\n${serverOutput}`);
+    }
+    try {
+      const response = await fetch(origin);
+      if (response.ok) return;
+    } catch {
+      // The server is still starting.
+    }
+    await new Promise((resolve) => setTimeout(resolve, 100));
+  }
+  throw new Error(`Production server did not start.\n${serverOutput}`);
+}
+
+async function readNumber(page, selector) {
+  return Number((await page.locator(selector).textContent())?.trim());
+}
+
+let browser;
+try {
+  await waitForServer();
+  browser = await chromium.launch({ headless: true });
+  const page = await browser.newPage({ viewport: { width: 1280, height: 900 } });
+  const browserErrors = [];
+
+  page.on("console", (message) => {
+    if (message.type() === "error") browserErrors.push(message.text());
+  });
+  page.on("pageerror", (error) => browserErrors.push(error.message));
+
+  await page.goto(origin, { waitUntil: "networkidle" });
+  await page.getByRole("heading", { name: /compiler handles the rest/i }).waitFor();
+  assert.equal(
+    (await page.locator("[data-compiler-status]").textContent())?.trim(),
+    `experimental.compiler: ${String(compilerEnabled)}`,
+  );
+
+  const executions = {};
+  for (const pathName of ["compiled", "react"]) {
+    const root = `[data-path="${pathName}"]`;
+    executions[pathName] = {
+      initial: await readNumber(page, `${root} [data-metric="executions"]`),
+    };
+    await page.locator(`${root} [data-action="update"]`).click();
+    await page.locator(`${root} [data-action="update"]`).click();
+    await page.waitForFunction(
+      (selector) => document.querySelector(selector)?.textContent?.trim() === "2",
+      `${root} [data-metric="state"]`,
+    );
+    executions[pathName].final = await readNumber(page, `${root} [data-metric="executions"]`);
+    executions[pathName].added = executions[pathName].final - executions[pathName].initial;
+  }
+
+  assert.equal(executions.compiled.added, compilerEnabled ? 0 : 2);
+  assert.equal(executions.react.added, 2);
+  assert.deepEqual(browserErrors, []);
+
+  await page.screenshot({ path: screenshotPath, fullPage: true });
+
+  console.log(
+    JSON.stringify(
+      {
+        result: "PASS",
+        productionUrl: origin,
+        screenshot: screenshotPath,
+        compilerEnabled,
+        compiledUpdateExecutions: executions.compiled.added,
+        reactUpdateExecutions: executions.react.added,
+      },
+      null,
+      2,
+    ),
+  );
+} finally {
+  await browser?.close();
+  server.kill("SIGTERM");
+}