@farm.js/create-app 0.1.0-beta.7 → 0.1.0-beta.71

package/templates/better-auth/src/app/layout.tsx

@@ -0,0 +1,11 @@
+import type { LayoutProps, Metadata } from "@farm.js/core";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "FARMJS Better Auth Starter",
+  description: "A production-shaped FARMJS authentication starter powered by Better Auth.",
+};
+
+export default function RootLayout({ children }: LayoutProps) {
+  return <>{children}</>;
+}

package/templates/better-auth/src/app/loading.tsx

@@ -0,0 +1,15 @@
+export default function Loading() {
+  return (
+    <main className="loading-shell" aria-label="Loading page" aria-live="polite">
+      <div className="loading-block">
+        <span className="loading-label">Loading account</span>
+        <div className="loading-line wide" />
+        <div className="loading-line" />
+        <div className="loading-grid">
+          <div />
+          <div />
+        </div>
+      </div>
+    </main>
+  );
+}

package/templates/better-auth/src/app/not-found.tsx

@@ -0,0 +1,26 @@
+interface NotFoundProps {
+  pathname?: string;
+}
+
+export default function NotFound({ pathname }: NotFoundProps) {
+  return (
+    <main className="error-shell">
+      <section className="error-panel">
+        <span className="section-index">404 / NOT FOUND</span>
+        <h1>This route is outside the starter.</h1>
+        <p>
+          {pathname ? (
+            <>
+              Nothing is registered at <code>{pathname}</code>.
+            </>
+          ) : (
+            "The page you requested does not exist."
+          )}
+        </p>
+        <a className="button button-primary" href="/">
+          Return home
+        </a>
+      </section>
+    </main>
+  );
+}

package/templates/better-auth/src/app/page.tsx

@@ -0,0 +1,50 @@
+import { ResourceLinks } from "../components/resource-links";
+import { getServerSession } from "../lib/session";
+
+export default async function HomePage() {
+  const session = await getServerSession();
+
+  return (
+    <main className="landing-main">
+      <section className="hero-section">
+        <div className="hero-copy">
+          <div className="eyebrow-row">
+            <span>00</span>
+            <span>FARMJS / Better Auth starter</span>
+          </div>
+
+          <h1>
+            {session ? (
+              <>
+                Open your <code>/dashboard</code>.
+              </>
+            ) : (
+              <>
+                Connect Postgres. Start at <code>/sign-up</code>.
+              </>
+            )}
+          </h1>
+
+          <div className="command-list" aria-label="Development commands">
+            <div className="command-row">
+              <span>01</span>
+              <code>cp .env.example .env.local</code>
+            </div>
+            <div className="command-row">
+              <span>02</span>
+              <code>pnpm dev</code>
+            </div>
+          </div>
+
+          <ResourceLinks
+            className="resource-links"
+            primary={{
+              href: session ? "/dashboard" : "/sign-up",
+              label: session ? "Dashboard" : "Get started",
+            }}
+          />
+        </div>
+      </section>
+    </main>
+  );
+}

package/templates/better-auth/src/app/sign-in/page.tsx

@@ -0,0 +1,16 @@
+import type { Metadata } from "@farm.js/core";
+import { AuthForm } from "../../components/auth-form";
+import { AuthShell } from "../../components/auth-shell";
+
+export const metadata: Metadata = {
+  title: "Sign in | FARMJS Better Auth Starter",
+  description: "Sign in with Better Auth.",
+};
+
+export default function SignInPage() {
+  return (
+    <AuthShell>
+      <AuthForm mode="sign-in" />
+    </AuthShell>
+  );
+}

package/templates/better-auth/src/app/sign-up/page.tsx

@@ -0,0 +1,16 @@
+import type { Metadata } from "@farm.js/core";
+import { AuthForm } from "../../components/auth-form";
+import { AuthShell } from "../../components/auth-shell";
+
+export const metadata: Metadata = {
+  title: "Create account | FARMJS Better Auth Starter",
+  description: "Create an account with Better Auth.",
+};
+
+export default function SignUpPage() {
+  return (
+    <AuthShell>
+      <AuthForm mode="sign-up" />
+    </AuthShell>
+  );
+}

package/templates/better-auth/src/components/auth-form.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { useState } from "react";
+import { authClient } from "../lib/auth-client";
+
+interface AuthFormProps {
+  mode: "sign-in" | "sign-up";
+}
+
+export function AuthForm({ mode }: AuthFormProps) {
+  const isSignUp = mode === "sign-up";
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function submit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError(null);
+    setPending(true);
+
+    const formData = new FormData(event.currentTarget);
+    const email = String(formData.get("email") ?? "").trim();
+    const password = String(formData.get("password") ?? "");
+    const name = String(formData.get("name") ?? "").trim();
+
+    try {
+      const response = isSignUp
+        ? await authClient.signUp.email({
+            email,
+            name,
+            password,
+          })
+        : await authClient.signIn.email({
+            email,
+            password,
+          });
+
+      if (response.error) {
+        setError(response.error.message ?? "We could not complete that request.");
+        setPending(false);
+        return;
+      }
+
+      window.location.assign("/dashboard");
+    } catch {
+      setError("The authentication service could not be reached. Please try again.");
+      setPending(false);
+    }
+  }
+
+  return (
+    <div className="auth-form-panel">
+      <div className="auth-form-heading">
+        <span className="section-index">{isSignUp ? "01 / SIGN UP" : "01 / SIGN IN"}</span>
+        <h1>{isSignUp ? "Create account." : "Welcome back."}</h1>
+      </div>
+
+      <form className="auth-form" onSubmit={submit}>
+        {isSignUp ? (
+          <label className="field">
+            <span>
+              <small>01</small> Name
+            </span>
+            <input
+              autoComplete="name"
+              minLength={2}
+              name="name"
+              placeholder="Ada Lovelace"
+              required
+              type="text"
+            />
+          </label>
+        ) : null}
+
+        <label className="field">
+          <span>
+            <small>{isSignUp ? "02" : "01"}</small> Email
+          </span>
+          <input
+            autoComplete="email"
+            name="email"
+            placeholder="you@example.com"
+            required
+            type="email"
+          />
+        </label>
+
+        <label className="field">
+          <span>
+            <small>{isSignUp ? "03" : "02"}</small> Password
+          </span>
+          <input
+            autoComplete={isSignUp ? "new-password" : "current-password"}
+            minLength={8}
+            name="password"
+            placeholder="At least 8 characters"
+            required
+            type="password"
+          />
+        </label>
+
+        {error ? (
+          <div className="form-error" role="alert">
+            <strong>Authentication failed</strong>
+            <span>{error}</span>
+          </div>
+        ) : null}
+
+        <button className="button button-primary auth-submit" disabled={pending} type="submit">
+          <span>{pending ? "Please wait…" : isSignUp ? "Create account" : "Sign in"}</span>
+          <span aria-hidden="true">{pending ? "···" : "→"}</span>
+        </button>
+      </form>
+
+      <p className="auth-switch">
+        {isSignUp ? "Have an account?" : "Need an account?"}{" "}
+        <a href={isSignUp ? "/sign-in" : "/sign-up"}>{isSignUp ? "Sign in →" : "Sign up →"}</a>
+      </p>
+    </div>
+  );
+}

package/templates/better-auth/src/components/auth-shell.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import { ResourceLinks } from "./resource-links";
+
+interface AuthShellProps {
+  children: ReactNode;
+}
+
+export function AuthShell({ children }: AuthShellProps) {
+  return (
+    <main className="auth-shell">
+      <a className="auth-home-link" href="/" aria-label="Back to starter home">
+        <span>00</span>
+        <span>FARMJS / Better Auth starter</span>
+      </a>
+
+      <section className="auth-form-side">{children}</section>
+
+      <ResourceLinks className="auth-resource-links" />
+    </main>
+  );
+}

package/templates/better-auth/src/components/resource-links.tsx

@@ -0,0 +1,78 @@
+interface ResourceLinkAction {
+  href: string;
+  label: string;
+}
+
+interface ResourceLinksProps {
+  className: string;
+  primary?: ResourceLinkAction;
+}
+
+function DocsIcon() {
+  return (
+    <svg
+      className="resource-icon"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" />
+      <path d="M14 2v6h6M8 13h8M8 17h6" />
+    </svg>
+  );
+}
+
+function GitHubIcon() {
+  return (
+    <svg
+      className="resource-icon"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M12 .7a11.5 11.5 0 0 0-3.64 22.41c.58.1.79-.25.79-.56v-2.23c-3.22.7-3.9-1.37-3.9-1.37-.52-1.34-1.28-1.69-1.28-1.69-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.57-.29-5.27-1.29-5.27-5.68 0-1.26.45-2.28 1.18-3.09-.12-.29-.51-1.47.11-3.05 0 0 .96-.31 3.16 1.18A10.95 10.95 0 0 1 12 6.1c.98 0 1.95.13 2.87.39 2.2-1.49 3.16-1.18 3.16-1.18.62 1.58.23 2.76.11 3.05.74.81 1.18 1.83 1.18 3.09 0 4.4-2.71 5.38-5.29 5.67.42.36.79 1.07.79 2.16v3.27c0 .31.21.67.8.56A11.5 11.5 0 0 0 12 .7Z" />
+    </svg>
+  );
+}
+
+function ResourceSeparator() {
+  return (
+    <span className="resource-separator" aria-hidden="true">
+      /
+    </span>
+  );
+}
+
+export function ResourceLinks({ className, primary }: ResourceLinksProps) {
+  return (
+    <nav className={className} aria-label="Starter resources">
+      {primary ? (
+        <span className="resource-link-item">
+          <a className="resource-link-primary" href={primary.href}>
+            {primary.label}
+          </a>
+        </span>
+      ) : null}
+      <span className="resource-link-item">
+        {primary ? <ResourceSeparator /> : null}
+        <a href="https://farm.js.dev">
+          <DocsIcon />
+          <span>Docs</span>
+        </a>
+      </span>
+      <span className="resource-link-item">
+        <ResourceSeparator />
+        <a href="https://github.com/farming-labs/farm.js">
+          <GitHubIcon />
+          <span>GitHub</span>
+        </a>
+      </span>
+    </nav>
+  );
+}

package/templates/better-auth/src/components/sign-out-button.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useState } from "react";
+import { authClient } from "../lib/auth-client";
+
+export function SignOutButton() {
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function signOut() {
+    setPending(true);
+    setError(null);
+
+    try {
+      const response = await authClient.signOut();
+      if (response.error) {
+        setError(response.error.message ?? "Could not sign out.");
+        setPending(false);
+        return;
+      }
+      window.location.assign("/");
+    } catch {
+      setError("Could not reach the authentication service.");
+      setPending(false);
+    }
+  }
+
+  return (
+    <div className="sign-out-control">
+      <button
+        className="button button-secondary"
+        disabled={pending}
+        onClick={signOut}
+        type="button"
+      >
+        {pending ? "Signing out…" : "Sign out"}
+      </button>
+      {error ? (
+        <span className="inline-error" role="alert">
+          {error}
+        </span>
+      ) : null}
+    </div>
+  );
+}

package/templates/better-auth/src/components/site-header.tsx

@@ -0,0 +1,46 @@
+interface HeaderUser {
+  email: string;
+  name: string;
+}
+
+interface SiteHeaderProps {
+  user: HeaderUser | null;
+}
+
+export function SiteHeader({ user }: SiteHeaderProps) {
+  return (
+    <header className="site-header">
+      <a className="brand" href="/" aria-label="FARMJS Better Auth Starter home">
+        <span className="brand-mark" aria-hidden="true">
+          F
+        </span>
+        <span>
+          <strong>FARMJS</strong>
+          <small>Better Auth Starter</small>
+        </span>
+      </a>
+
+      <nav className="header-nav" aria-label="Primary navigation">
+        <a href="https://farm.js.dev">Docs</a>
+        {user ? (
+          <a className="header-account" href="/dashboard">
+            <span className="avatar" aria-hidden="true">
+              {(user.name || user.email).slice(0, 1).toUpperCase()}
+            </span>
+            <span className="account-copy">
+              <small>Signed in</small>
+              <strong>{user.name || user.email}</strong>
+            </span>
+          </a>
+        ) : (
+          <>
+            <a href="/sign-in">Sign in</a>
+            <a className="button button-small button-primary" href="/sign-up">
+              Get started
+            </a>
+          </>
+        )}
+      </nav>
+    </header>
+  );
+}

package/templates/better-auth/src/lib/auth-client.ts

@@ -0,0 +1,5 @@
+import { createAuthClient } from "better-auth/react";
+
+export const authClient = createAuthClient({
+  baseURL: "",
+});

package/templates/better-auth/src/lib/auth.ts

@@ -0,0 +1,50 @@
+import { betterAuth } from "better-auth";
+import { getMigrations } from "better-auth/db/migration";
+import { Pool, type PoolConfig } from "pg";
+
+const authBaseUrl = process.env.BETTER_AUTH_URL ?? "http://localhost:3000";
+const databaseUrl = process.env.DATABASE_URL;
+const secret = process.env.BETTER_AUTH_SECRET;
+
+if (!databaseUrl) {
+  throw new Error("DATABASE_URL is required. Add your pooled Postgres connection string.");
+}
+
+if (!secret) {
+  throw new Error(
+    "BETTER_AUTH_SECRET is required. Copy .env.example to .env.local and generate a secret.",
+  );
+}
+
+const databaseConnection = new URL(databaseUrl);
+const enableChannelBinding = databaseConnection.searchParams.get("channel_binding") === "require";
+
+if (databaseConnection.searchParams.get("sslmode") === "require") {
+  databaseConnection.searchParams.set("sslmode", "verify-full");
+}
+
+const poolConfig: PoolConfig & { enableChannelBinding: boolean } = {
+  connectionString: databaseConnection.toString(),
+  enableChannelBinding,
+  max: process.env.NODE_ENV === "production" ? 5 : 2,
+  idleTimeoutMillis: 30_000,
+  connectionTimeoutMillis: 10_000,
+  allowExitOnIdle: true,
+};
+
+const database = new Pool(poolConfig);
+
+export const auth = betterAuth({
+  appName: "FARMJS Better Auth Starter",
+  baseURL: authBaseUrl,
+  database,
+  emailAndPassword: {
+    enabled: true,
+    minPasswordLength: 8,
+  },
+  secret,
+  trustedOrigins: [new URL(authBaseUrl).origin],
+});
+
+const migrations = await getMigrations(auth.options);
+await migrations.runMigrations();

package/templates/better-auth/src/lib/session.ts

@@ -0,0 +1,8 @@
+import { getCurrentRequest } from "@farm.js/core/request";
+import { auth } from "./auth";
+
+export async function getServerSession() {
+  return auth.api.getSession({
+    headers: getCurrentRequest().headers,
+  });
+}

package/templates/better-auth/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "farm.config.ts"]
+}

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/docs.config.ts

@@ -0,0 +1,33 @@
+import { defineDocs } from "@farming-labs/docs";
+
+// Site-wide docs configuration, powered by the @farming-labs/farmjs framework.
+// Farm auto-detects the installed adapter (because farm.config.ts sets
+// `docs: { enabled: true }`), loads this file, and serves Markdown from
+// src/app/docs.
+//
+// This typed config takes priority over docs.json. Keep docs.json in sync as
+// the language-agnostic manifest: it is the fallback for frameworkless / non
+// JS-TS setups and the source the docs cloud reads.
+export default defineDocs({
+  entry: "docs",
+  docsPath: "/docs",
+  metadata: {
+    description: "Documentation for your Farm.js app.",
+  },
+  nav: {
+    title: "Farm App",
+    url: "/",
+  },
+  search: {
+    provider: "simple",
+    enabled: true,
+    maxResults: 12,
+  },
+  llmsTxt: {
+    enabled: true,
+    siteTitle: "Farm App Docs",
+    siteDescription: "Documentation for your Farm.js app.",
+  },
+  sitemap: true,
+  robots: true,
+});

package/templates/react-compiler/docs.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "https://docs.farming-labs.dev/schema/docs.json",
+  "version": 1,
+  "entry": "docs",
+  "docsPath": "/docs",
+  "docs": {
+    "mode": "framework",
+    "runtime": "farm",
+    "root": "."
+  },
+  "content": {
+    "docsRoot": "src/app/docs"
+  },
+  "site": {
+    "name": "Farm App Docs"
+  },
+  "metadata": {
+    "description": "Documentation for your Farm.js app."
+  },
+  "nav": {
+    "title": "Farm App",
+    "url": "/"
+  },
+  "search": {
+    "provider": "simple",
+    "enabled": true,
+    "maxResults": 12
+  },
+  "llmsTxt": {
+    "enabled": true,
+    "siteTitle": "Farm App Docs",
+    "siteDescription": "Documentation for your Farm.js app."
+  },
+  "sitemap": true,
+  "robots": true
+}