npm - @farm.js/create-app - Versions diffs - 0.1.0-beta.7 → 0.1.0-beta.71 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (173) hide show

package/templates/react-compiler/src/app/layout.tsx ADDED Viewed

@@ -0,0 +1,22 @@
+import type { LayoutProps, Metadata } from "@farm.js/core";
+import "./globals.css";
+export const metadata: Metadata = {
+  title: "FARMJS React Compiler Starter",
+  description: "Start a FARMJS app with the experimental React AOT compiler.",
+  icons: {
+    icon: [{ url: "/favicon.svg", type: "image/svg+xml", sizes: "any" }],
+  },
+};
+export default function RootLayout({ children }: LayoutProps) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}

package/templates/react-compiler/src/app/page.tsx ADDED Viewed

@@ -0,0 +1,47 @@
+import { publicEnv } from "@farm.js/core/env";
+import { CompilerComparison } from "../components/compiler-comparison";
+import { ResourceLinks } from "../components/resource-links";
+export default function HomePage() {
+  const compilerMode = String(publicEnv.FARM_REACT_COMPILER_ENABLED);
+  return (
+    <main className="landing-main">
+      <section className="hero-section">
+        <div className="hero-copy">
+          <div className="eyebrow-row">
+            <span>00</span>
+            <span>FARMJS / React Compiler starter</span>
+            <span className="experimental-label">Experimental</span>
+          </div>
+          <h1>
+            Edit <code>page.tsx</code>. The compiler handles the rest.
+          </h1>
+          <p className="hero-summary">
+            Keep writing ordinary React. FARMJS prepares direct bindings for safe local state
+            updates and leaves everything else with React.
+          </p>
+          <div className="command-list" aria-label="Getting started">
+            <div className="command-row">
+              <span>01</span>
+              <code>pnpm dev</code>
+            </div>
+            <div className="command-row">
+              <span>02</span>
+              <div className="compiler-status">
+                <span className="status-dot" data-enabled={compilerMode} aria-hidden="true" />
+                <code data-compiler-status>experimental.compiler: {compilerMode}</code>
+              </div>
+            </div>
+          </div>
+          <CompilerComparison />
+          <ResourceLinks className="resource-links" />
+        </div>
+      </section>
+    </main>
+  );
+}

package/templates/react-compiler/src/components/compiler-comparison.tsx ADDED Viewed

@@ -0,0 +1,93 @@
+"use client";
+import { useState } from "react";
+let compiledExecutions = 0;
+let reactExecutions = 0;
+export function CompiledCounter() {
+  const [count, setCount] = useState(0);
+  return (
+    <article className="counter-path counter-path-compiled" data-path="compiled">
+      <div className="counter-heading">
+        <span className="path-index">A</span>
+        <div>
+          <h3>AOT compiled</h3>
+          <p>Direct DOM binding</p>
+        </div>
+      </div>
+      <dl className="counter-metrics" aria-live="polite">
+        <div>
+          <dt>State</dt>
+          <dd data-metric="state">{count}</dd>
+        </div>
+        <div>
+          <dt>Executions</dt>
+          <dd data-metric="executions">
+            {typeof window === "undefined" ? 1 : ++compiledExecutions}
+          </dd>
+        </div>
+      </dl>
+      <button type="button" data-action="update" onClick={() => setCount((value) => value + 1)}>
+        Update compiled state
+        <span aria-hidden="true">↗</span>
+      </button>
+    </article>
+  );
+}
+export function BaseReactCounter() {
+  "use no compiler";
+  const [count, setCount] = useState(0);
+  return (
+    <article className="counter-path" data-path="react">
+      <div className="counter-heading">
+        <span className="path-index">B</span>
+        <div>
+          <h3>Base React</h3>
+          <p>React reconciliation</p>
+        </div>
+      </div>
+      <dl className="counter-metrics" aria-live="polite">
+        <div>
+          <dt>State</dt>
+          <dd data-metric="state">{count}</dd>
+        </div>
+        <div>
+          <dt>Executions</dt>
+          <dd data-metric="executions">{typeof window === "undefined" ? 1 : ++reactExecutions}</dd>
+        </div>
+      </dl>
+      <button type="button" data-action="update" onClick={() => setCount((value) => value + 1)}>
+        Update React state
+        <span aria-hidden="true">↗</span>
+      </button>
+    </article>
+  );
+}
+export function CompilerComparison() {
+  return (
+    <section className="compiler-check" aria-labelledby="compiler-check-title">
+      <header className="check-heading">
+        <div>
+          <span>Live check</span>
+          <h2 id="compiler-check-title">Same click. Less React work.</h2>
+        </div>
+        <p>Watch executions after each update.</p>
+      </header>
+      <div className="comparison-grid">
+        <CompiledCounter />
+        <BaseReactCounter />
+      </div>
+    </section>
+  );
+}

package/templates/react-compiler/src/components/resource-links.tsx ADDED Viewed

@@ -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/react-compiler/src/farm.d.ts ADDED Viewed

@@ -0,0 +1,74 @@
+/**
+ * Generated by Farm.js. Do not edit.
+ * Contains project-specific route, environment, and internationalization types.
+ */
+import "@farm.js/core/image";
+import "@farm.js/core/css";
+/**
+ * Auto-generated route types from src/app.
+ * Link href and route component props are typed automatically from generated declarations.
+ * Regenerated on dev start and when routes change.
+ * Set suppressLintOnLink: true in farm.config.ts to accept any string on Link href.
+ */
+export type RoutePath = "/";
+export type RoutePattern = "/";
+export type RouteModulePattern = "/";
+declare module "@farm.js/core/client" {
+  interface LinkDefaultRoute {
+    _: import("./farm").RoutePath;
+    pattern: import("./farm").RoutePattern;
+  }
+}
+declare module "@farm.js/core" {
+  interface LinkDefaultRoute {
+    _: import("./farm").RoutePath;
+    pattern: import("./farm").RoutePattern;
+  }
+  // Ensure root import ("@farm.js/core") uses the same typed Link signature as client entry.
+  const Link: typeof import("@farm.js/core/client").Link;
+}
+// Internal declaration path used by @farm.js/core root type re-exports.
+declare module "@farm.js/core/dist/client.js" {
+  interface LinkDefaultRoute {
+    _: import("./farm").RoutePath;
+    pattern: import("./farm").RoutePattern;
+  }
+}
+declare global {
+  namespace FarmJS {
+    interface RouteRegistry {
+      pattern: import("./farm").RouteModulePattern;
+    }
+  }
+}
+/**
+ * Auto-generated env types from farm.config.
+ * Regenerated on dev start, build, and farm generate.
+ */
+import type FarmConfig from "../farm.config";
+import type { InferEnv } from "@farm.js/core/env";
+type FarmConfigEnv = typeof FarmConfig extends { env?: infer TEnv } ? NonNullable<TEnv> : never;
+type FarmResolvedEnv = [FarmConfigEnv] extends [never]
+  ? { server: {}; public: {} }
+  : InferEnv<FarmConfigEnv>;
+declare module "@farm.js/core/env" {
+  interface FarmEnvTypes {
+    server: FarmResolvedEnv["server"];
+    public: FarmResolvedEnv["public"];
+  }
+}
+declare module "@farm.js/core" {
+  interface FarmEnvTypes {
+    server: FarmResolvedEnv["server"];
+    public: FarmResolvedEnv["public"];
+  }
+}

package/templates/react-compiler/src/lib/api.generated.ts ADDED Viewed

@@ -0,0 +1,10 @@
+/**
+ * Auto-generated API router types
+ * This file is automatically generated - do not edit manually
+ *
+ * This file contains only TypeScript types for the API client.
+ * Runtime imports are used only at the type level.
+ */
+// Type-only representation of your API routes
+export type APIRouter = {};

package/templates/react-compiler/tsconfig.json ADDED Viewed

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "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/basic/src/app/about/page.tsx DELETED Viewed

@@ -1,32 +0,0 @@
-import { Link } from "@farm.js/core/client";
-export default function AboutPage() {
-  return (
-    <div className="min-h-screen p-8">
-      <div className="max-w-4xl mx-auto space-y-8">
-        <h1 className="text-5xl font-bold text-gray-900 mb-4">About Farm.js</h1>
-        <p className="text-xl text-gray-600 leading-relaxed">
-          Farm.js is a modern React meta-framework that combines the best of Vite's lightning-fast
-          development experience with Next.js-like semantics and React Server Components support.
-        </p>
-        <div className="bg-blue-50 border border-blue-200 rounded-lg p-6">
-          <h2 className="text-2xl font-semibold mb-3 text-blue-900">Why Farm.js?</h2>
-          <p className="text-gray-700 leading-relaxed">
-            We built Farm.js to provide developers with a framework that's both powerful and simple.
-            No complex configuration, no waiting for builds, just pure development joy with modern
-            React features.
-          </p>
-        </div>
-        <Link
-          href="/"
-          className="inline-flex items-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium shadow-md hover:shadow-lg"
-        >
-          ← Back to Home
-        </Link>
-      </div>
-    </div>
-  );
-}