@farm.js/create-app 0.1.0-beta.3 → 0.1.0-beta.31

package/templates/_renderers/preact/src/app/page.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useState } from "preact/hooks";
+import { ResourceLinks } from "../components/resource-links";
+import { api } from "../lib/api-client";
+
+export default function HomePage() {
+  const [message, setMessage] = useState("Call a typed server function");
+  const [pending, setPending] = useState(false);
+  const [failed, setFailed] = useState(false);
+
+  const callServer = async () => {
+    setPending(true);
+    setFailed(false);
+    try {
+      const result = await api.greeting.post({
+        body: { name: "Preact" },
+      });
+      if (result.error) throw result.error;
+      if (!result.data) throw new Error("The server returned no greeting");
+      setMessage(result.data.message);
+    } catch {
+      setFailed(true);
+      setMessage("Try the server call again");
+    } finally {
+      setPending(false);
+    }
+  };
+
+  return (
+    <main className="landing-main">
+      <section className="hero-section">
+        <div className="hero-copy">
+          <div className="eyebrow-row">
+            <span>00</span>
+            <span>FARMJS / Preact starter</span>
+          </div>
+
+          <h1>
+            Edit <code>page.tsx</code> to begin.
+          </h1>
+
+          <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>
+              <button
+                type="button"
+                className={`server-call${failed ? " server-call-error" : ""}`}
+                onClick={callServer}
+                disabled={pending}
+              >
+                {pending ? "Calling…" : message}
+              </button>
+            </div>
+          </div>
+
+          <ResourceLinks className="resource-links" />
+        </div>
+      </section>
+    </main>
+  );
+}

package/templates/_renderers/preact/src/app/preact.css

@@ -0,0 +1,26 @@
+.server-call {
+  appearance: none;
+  width: fit-content;
+  border: 0;
+  padding: 0;
+  color: var(--ink);
+  background: transparent;
+  cursor: pointer;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  text-align: left;
+}
+
+.server-call:hover:not(:disabled) {
+  text-decoration: underline;
+  text-underline-offset: 0.25rem;
+}
+
+.server-call:disabled {
+  color: var(--ink-soft);
+  cursor: wait;
+}
+
+.server-call-error {
+  color: #fca5a5;
+}

package/templates/_renderers/preact/src/components/resource-links.tsx

@@ -0,0 +1,71 @@
+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"
+    >
+      <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">
+      <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/_renderers/preact/src/lib/api-client.ts

@@ -0,0 +1,4 @@
+import { createAPIClient } from "@farm.js/core/client";
+import type { APIRouter } from "./api.generated";
+
+export const api = createAPIClient<APIRouter>();

package/templates/_renderers/preact/src/lib/api.generated.ts

@@ -0,0 +1,7 @@
+import type { POST as POST_greeting } from "../app/api/greeting/route";
+
+export type APIRouter = {
+  greeting: {
+    post: typeof POST_greeting;
+  };
+};

package/templates/_renderers/preact/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "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",
+    "jsxImportSource": "preact",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "farm.config.ts"]
+}

package/templates/_renderers/solid/farm.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "@farm.js/core/config";
+import { solid } from "@farm.js/solid";
+
+export default defineConfig({
+  renderer: solid(),
+  theme: {
+    default: "dark",
+  },
+  deploy: {
+    target: "vercel",
+  },
+});

package/templates/_renderers/solid/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "farm-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "farm dev",
+    "build": "farm build",
+    "deploy": "farm deploy",
+    "start": "farm start",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@farm.js/core": "0.1.0-beta.31",
+    "@farm.js/solid": "0.1.0-beta.26",
+    "@fontsource-variable/geist": "5.3.0",
+    "@fontsource-variable/geist-mono": "5.3.0",
+    "solid-js": "1.9.14",
+    "zod": "4.1.12"
+  },
+  "devDependencies": {
+    "@farm.js/cli": "0.1.0-beta.31",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.3.3"
+  },
+  "packageManager": "pnpm@8.12.1"
+}

package/templates/_renderers/solid/src/app/api/greeting/route.ts

@@ -0,0 +1,15 @@
+import { createEndpoint } from "@farm.js/core";
+import { z } from "zod";
+
+export const POST = createEndpoint(
+  "/api/greeting",
+  {
+    method: "POST",
+    body: z.object({
+      name: z.string().trim().min(1).max(40),
+    }),
+  },
+  async ({ body }) => ({
+    message: `Hello, ${body.name}, from the FARMJS server.`,
+  }),
+);

package/templates/_renderers/solid/src/app/layout.tsx

@@ -0,0 +1,15 @@
+import type { LayoutProps, Metadata } from "@farm.js/core";
+import "./globals.css";
+import "./solid.css";
+
+export const metadata: Metadata = {
+  title: "FARMJS Solid App",
+  description: "A framework for product-integrated apps",
+  icons: {
+    icon: [{ url: "/favicon.svg", type: "image/svg+xml", sizes: "any" }],
+  },
+};
+
+export default function RootLayout(props: LayoutProps) {
+  return <>{props.children}</>;
+}

package/templates/_renderers/solid/src/app/page.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { createSignal } from "solid-js";
+import { ResourceLinks } from "../components/resource-links";
+import { api } from "../lib/api-client";
+
+export default function HomePage() {
+  const [message, setMessage] = createSignal("Call a typed server function");
+  const [pending, setPending] = createSignal(false);
+
+  const callServer = async () => {
+    setPending(true);
+    try {
+      const result = await api.greeting.post({
+        body: { name: "Solid" },
+      });
+      if (result.error) throw result.error;
+      if (!result.data) throw new Error("The server returned no greeting");
+      setMessage(result.data.message);
+    } finally {
+      setPending(false);
+    }
+  };
+
+  return (
+    <main class="landing-main">
+      <section class="hero-section">
+        <div class="hero-copy">
+          <div class="eyebrow-row">
+            <span>00</span>
+            <span>FARMJS / Solid starter</span>
+          </div>
+
+          <h1>
+            Edit <code>page.tsx</code> to begin.
+          </h1>
+
+          <div class="command-list" aria-label="Getting started">
+            <div class="command-row">
+              <span>01</span>
+              <code>pnpm dev</code>
+            </div>
+            <div class="command-row">
+              <span>02</span>
+              <button type="button" class="server-call" onClick={callServer} disabled={pending()}>
+                {pending() ? "Calling…" : message()}
+              </button>
+            </div>
+          </div>
+
+          <ResourceLinks className="resource-links" />
+        </div>
+      </section>
+    </main>
+  );
+}

package/templates/_renderers/solid/src/app/solid.css

@@ -0,0 +1,22 @@
+.server-call {
+  appearance: none;
+  width: fit-content;
+  border: 0;
+  padding: 0;
+  color: var(--ink);
+  background: transparent;
+  cursor: pointer;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  text-align: left;
+}
+
+.server-call:hover:not(:disabled) {
+  text-decoration: underline;
+  text-underline-offset: 0.25rem;
+}
+
+.server-call:disabled {
+  color: var(--ink-soft);
+  cursor: wait;
+}

package/templates/_renderers/solid/src/components/resource-links.tsx

@@ -0,0 +1,71 @@
+interface ResourceLinkAction {
+  href: string;
+  label: string;
+}
+
+interface ResourceLinksProps {
+  className: string;
+  primary?: ResourceLinkAction;
+}
+
+function DocsIcon() {
+  return (
+    <svg
+      class="resource-icon"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.8"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <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 class="resource-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <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 class="resource-separator" aria-hidden="true">
+      /
+    </span>
+  );
+}
+
+export function ResourceLinks(props: ResourceLinksProps) {
+  return (
+    <nav class={props.className} aria-label="Starter resources">
+      {props.primary ? (
+        <span class="resource-link-item">
+          <a class="resource-link-primary" href={props.primary.href}>
+            {props.primary.label}
+          </a>
+        </span>
+      ) : null}
+      <span class="resource-link-item">
+        {props.primary ? <ResourceSeparator /> : null}
+        <a href="https://farm.js.dev">
+          <DocsIcon />
+          <span>Docs</span>
+        </a>
+      </span>
+      <span class="resource-link-item">
+        <ResourceSeparator />
+        <a href="https://github.com/farming-labs/farm.js">
+          <GitHubIcon />
+          <span>GitHub</span>
+        </a>
+      </span>
+    </nav>
+  );
+}

package/templates/_renderers/solid/src/lib/api-client.ts

@@ -0,0 +1,4 @@
+import { createAPIClient } from "@farm.js/core/client";
+import type { APIRouter } from "./api.generated";
+
+export const api = createAPIClient<APIRouter>();

package/templates/_renderers/solid/src/lib/api.generated.ts

@@ -0,0 +1,7 @@
+import type { POST as POST_greeting } from "../app/api/greeting/route";
+
+export type APIRouter = {
+  greeting: {
+    post: typeof POST_greeting;
+  };
+};

package/templates/_renderers/solid/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "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": "preserve",
+    "jsxImportSource": "solid-js",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "farm.config.ts"]
+}

package/templates/_renderers/svelte/farm.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "@farm.js/core";
+import { svelte } from "@farm.js/svelte";
+
+export default defineConfig({
+  renderer: svelte(),
+  theme: {
+    default: "dark",
+  },
+});

package/templates/_renderers/svelte/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "farm-app",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "farm dev",
+    "build": "farm build",
+    "deploy": "farm deploy",
+    "start": "farm start",
+    "type-check": "svelte-check --tsconfig ./tsconfig.json"
+  },
+  "dependencies": {
+    "@farm.js/core": "0.1.0-beta.31",
+    "@farm.js/svelte": "0.1.0-beta.29",
+    "@fontsource-variable/geist": "5.3.0",
+    "@fontsource-variable/geist-mono": "5.3.0",
+    "svelte": "5.56.8",
+    "zod": "4.1.12"
+  },
+  "devDependencies": {
+    "@farm.js/cli": "0.1.0-beta.31",
+    "svelte-check": "4.7.5",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.3.3"
+  },
+  "packageManager": "pnpm@8.12.1"
+}

package/templates/_renderers/svelte/src/app/api/greeting/route.ts

@@ -0,0 +1,15 @@
+import { createEndpoint } from "@farm.js/core";
+import { z } from "zod";
+
+export const POST = createEndpoint(
+  "/api/greeting",
+  {
+    method: "POST",
+    body: z.object({
+      name: z.string().trim().min(1).max(40),
+    }),
+  },
+  async ({ body }) => ({
+    message: `Hello, ${body.name}, from the FARMJS server.`,
+  }),
+);

package/templates/_renderers/svelte/src/app/layout.svelte

@@ -0,0 +1,21 @@
+<script module lang="ts">
+  import type { Metadata } from "@farm.js/core";
+  import "./globals.css";
+  import "./svelte.css";
+
+  export const metadata: Metadata = {
+    title: "FARMJS Svelte App",
+    description: "A framework for product-integrated apps",
+    icons: {
+      icon: [{ url: "/favicon.svg", type: "image/svg+xml", sizes: "any" }],
+    },
+  };
+</script>
+
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  let { children }: { children?: Snippet } = $props();
+</script>
+
+{@render children?.()}

package/templates/_renderers/svelte/src/app/page.svelte

@@ -0,0 +1,64 @@
+<script module lang="ts">
+  export const hydrate = true;
+</script>
+
+<script lang="ts">
+  import ResourceLinks from "../components/resource-links.svelte";
+  import { api } from "../lib/api-client";
+
+  let message = $state("Call a typed server function");
+  let pending = $state(false);
+  let failed = $state(false);
+
+  async function callServer() {
+    pending = true;
+    failed = false;
+    try {
+      const result = await api.greeting.post({
+        body: { name: "Svelte" },
+      });
+      if (result.error) throw result.error;
+      if (!result.data) throw new Error("The server returned no greeting");
+      message = result.data.message;
+    } catch {
+      failed = true;
+      message = "Try the server call again";
+    } finally {
+      pending = false;
+    }
+  }
+</script>
+
+<main class="landing-main">
+  <section class="hero-section">
+    <div class="hero-copy">
+      <div class="eyebrow-row">
+        <span>00</span>
+        <span>FARMJS / Svelte starter</span>
+      </div>
+
+      <h1>Edit <code>page.svelte</code> to begin.</h1>
+
+      <div class="command-list" aria-label="Getting started">
+        <div class="command-row">
+          <span>01</span>
+          <code>pnpm dev</code>
+        </div>
+        <div class="command-row">
+          <span>02</span>
+          <button
+            type="button"
+            class:server-call-error={failed}
+            class="server-call"
+            disabled={pending}
+            onclick={callServer}
+          >
+            {pending ? "Calling…" : message}
+          </button>
+        </div>
+      </div>
+
+      <ResourceLinks class="resource-links" />
+    </div>
+  </section>
+</main>

package/templates/_renderers/svelte/src/app/svelte.css

@@ -0,0 +1,26 @@
+.server-call {
+  appearance: none;
+  width: fit-content;
+  border: 0;
+  padding: 0;
+  color: var(--ink);
+  background: transparent;
+  cursor: pointer;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  text-align: left;
+}
+
+.server-call:hover:not(:disabled) {
+  text-decoration: underline;
+  text-underline-offset: 0.25rem;
+}
+
+.server-call:disabled {
+  color: var(--ink-soft);
+  cursor: wait;
+}
+
+.server-call-error {
+  color: #fca5a5;
+}

package/templates/_renderers/svelte/src/components/resource-links.svelte

@@ -0,0 +1,31 @@
+<nav aria-label="Starter resources">
+  <span class="resource-link-item">
+    <a href="https://farm.js.dev">
+      <svg
+        class="resource-icon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <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>
+      <span>Docs</span>
+    </a>
+  </span>
+  <span class="resource-link-item">
+    <span class="resource-separator" aria-hidden="true">/</span>
+    <a href="https://github.com/farming-labs/farm.js">
+      <svg class="resource-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <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>
+      <span>GitHub</span>
+    </a>
+  </span>
+</nav>