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

package/templates/_integrations/better-auth/svelte/src/app/layout.svelte

@@ -0,0 +1,20 @@
+<script module lang="ts">
+  import type { Metadata } from "@farm.js/core";
+  import "./globals.css";
+
+  export const metadata: Metadata = {
+    title: "FARMJS Svelte Better Auth Starter",
+    description: "Better Auth with FARMJS and Svelte",
+    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/_integrations/better-auth/svelte/src/app/page.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import ResourceLinks from "../components/resource-links.svelte";
+</script>
+
+<main class="landing-main">
+  <section class="hero-section">
+    <div class="hero-copy">
+      <div class="eyebrow-row">
+        <span>00</span>
+        <span>FARMJS / Svelte + Better Auth</span>
+      </div>
+
+      <h1>Connect Postgres. Start at <code>/sign-up</code>.</h1>
+
+      <div class="command-list" aria-label="Development commands">
+        <div class="command-row">
+          <span>01</span>
+          <code>cp .env.example .env.local</code>
+        </div>
+        <div class="command-row">
+          <span>02</span>
+          <code>pnpm dev</code>
+        </div>
+      </div>
+
+      <ResourceLinks
+        className="resource-links"
+        primary={{ href: "/sign-up", label: "Get started" }}
+      />
+    </div>
+  </section>
+</main>

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

@@ -0,0 +1,10 @@
+<script module lang="ts">
+  export const hydrate = true;
+</script>
+
+<script lang="ts">
+  import AuthForm from "../../components/auth-form.svelte";
+  import AuthShell from "../../components/auth-shell.svelte";
+</script>
+
+<AuthShell><AuthForm mode="sign-in" /></AuthShell>

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

@@ -0,0 +1,10 @@
+<script module lang="ts">
+  export const hydrate = true;
+</script>
+
+<script lang="ts">
+  import AuthForm from "../../components/auth-form.svelte";
+  import AuthShell from "../../components/auth-shell.svelte";
+</script>
+
+<AuthShell><AuthForm mode="sign-up" /></AuthShell>

package/templates/_integrations/better-auth/svelte/src/components/auth-form.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import { authClient } from "../lib/auth-client";
+
+  let { mode }: { mode: "sign-in" | "sign-up" } = $props();
+  const isSignUp = $derived(mode === "sign-up");
+  let pending = $state(false);
+  let error = $state<string | null>(null);
+
+  async function submit(event: SubmitEvent) {
+    event.preventDefault();
+    error = null;
+    pending = true;
+
+    const formData = new FormData(event.currentTarget as HTMLFormElement);
+    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) {
+        error = response.error.message ?? "We could not complete that request.";
+        pending = false;
+        return;
+      }
+      window.location.assign("/dashboard");
+    } catch {
+      error = "The authentication service could not be reached. Please try again.";
+      pending = false;
+    }
+  }
+</script>
+
+<div class="auth-form-panel">
+  <div class="auth-form-heading">
+    <span class="section-index">{isSignUp ? "01 / SIGN UP" : "01 / SIGN IN"}</span>
+    <h1>{isSignUp ? "Create account." : "Welcome back."}</h1>
+  </div>
+
+  <form class="auth-form" onsubmit={submit}>
+    {#if isSignUp}
+      <label class="field">
+        <span><small>01</small> Name</span>
+        <input autocomplete="name" minlength="2" name="name" required type="text" />
+      </label>
+    {/if}
+    <label class="field">
+      <span><small>{isSignUp ? "02" : "01"}</small> Email</span>
+      <input autocomplete="email" name="email" required type="email" />
+    </label>
+    <label class="field">
+      <span><small>{isSignUp ? "03" : "02"}</small> Password</span>
+      <input
+        autocomplete={isSignUp ? "new-password" : "current-password"}
+        minlength="8"
+        name="password"
+        required
+        type="password"
+      />
+    </label>
+
+    {#if error}
+      <div class="form-error" role="alert">
+        <strong>Authentication failed</strong>
+        <span>{error}</span>
+      </div>
+    {/if}
+
+    <button class="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 class="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/_integrations/better-auth/svelte/src/components/auth-shell.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import ResourceLinks from "./resource-links.svelte";
+
+  let { children }: { children?: Snippet } = $props();
+</script>
+
+<main class="auth-shell">
+  <a class="auth-home-link" href="/" aria-label="Back to starter home">
+    <span>00</span>
+    <span>FARMJS / Svelte + Better Auth</span>
+  </a>
+
+  <section class="auth-form-side">{@render children?.()}</section>
+  <ResourceLinks className="auth-resource-links" />
+</main>

package/templates/_integrations/better-auth/svelte/src/components/resource-links.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  let {
+    className,
+    primary,
+  }: {
+    className: string;
+    primary?: { href: string; label: string };
+  } = $props();
+</script>
+
+<nav class={className} aria-label="Starter resources">
+  {#if primary}
+    <span class="resource-link-item">
+      <a class="resource-link-primary" href={primary.href}>{primary.label}</a>
+    </span>
+  {/if}
+  <span class="resource-link-item">
+    {#if primary}<span class="resource-separator" aria-hidden="true">/</span>{/if}
+    <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>

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

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

package/templates/_integrations/better-auth/vue/farm.config.ts

@@ -0,0 +1,17 @@
+import { betterAuth } from "@farm.js/better-auth";
+import { defineConfig } from "@farm.js/core/config";
+import { vue } from "@farm.js/vue";
+import { auth } from "./src/lib/auth.ts";
+
+export default defineConfig({
+  renderer: vue(),
+  theme: {
+    default: "dark",
+  },
+  integrations: {
+    auth: betterAuth({ instance: auth }),
+  },
+  deploy: {
+    target: "vercel",
+  },
+});

package/templates/_integrations/better-auth/vue/src/app/dashboard/page.vue

@@ -0,0 +1,62 @@
+<script lang="ts">
+export const hydrate = true;
+</script>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { authClient } from "../../lib/auth-client";
+
+type SessionData = NonNullable<Awaited<ReturnType<typeof authClient.getSession>>["data"]>;
+
+const session = ref<SessionData | null>(null);
+const pending = ref(true);
+const error = ref<string | null>(null);
+
+onMounted(async () => {
+  const response = await authClient.getSession();
+  if (response.error || !response.data?.user) {
+    window.location.replace("/sign-in");
+    return;
+  }
+  session.value = response.data;
+  pending.value = false;
+});
+
+async function signOut() {
+  pending.value = true;
+  error.value = null;
+  const response = await authClient.signOut();
+  if (response.error) {
+    error.value = response.error.message ?? "Could not sign out.";
+    pending.value = false;
+    return;
+  }
+  window.location.assign("/");
+}
+</script>
+
+<template>
+  <main v-if="!session" class="loading-shell" aria-live="polite">
+    <div class="loading-block">
+      <span class="loading-label">Verifying protected session</span>
+      <div class="loading-line wide" />
+      <div class="loading-line" />
+    </div>
+  </main>
+
+  <main v-else class="dashboard-shell">
+    <div class="dashboard-heading">
+      <div>
+        <span class="section-index">PROTECTED / MIDDLEWARE VERIFIED</span>
+        <h1>Welcome back, {{ session.user.name }}.</h1>
+        <p>{{ session.user.email }}</p>
+      </div>
+      <div class="sign-out-control">
+        <button class="button button-secondary" :disabled="pending" @click="signOut">
+          {{ pending ? "Signing out…" : "Sign out" }}
+        </button>
+        <span v-if="error" class="inline-error">{{ error }}</span>
+      </div>
+    </div>
+  </main>
+</template>

package/templates/_integrations/better-auth/vue/src/app/layout.vue

@@ -0,0 +1,20 @@
+<script lang="ts">
+import type { Metadata } from "@farm.js/core";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "FARMJS Vue Better Auth Starter",
+  description: "Better Auth with FARMJS and Vue",
+  icons: {
+    icon: [{ url: "/favicon.svg", type: "image/svg+xml", sizes: "any" }],
+  },
+};
+</script>
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false });
+</script>
+
+<template>
+  <slot />
+</template>

package/templates/_integrations/better-auth/vue/src/app/page.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import ResourceLinks from "../components/resource-links.vue";
+</script>
+
+<template>
+  <main class="landing-main">
+    <section class="hero-section">
+      <div class="hero-copy">
+        <div class="eyebrow-row">
+          <span>00</span>
+          <span>FARMJS / Vue + Better Auth</span>
+        </div>
+
+        <h1>Connect Postgres. Start at <code>/sign-up</code>.</h1>
+
+        <div class="command-list" aria-label="Development commands">
+          <div class="command-row">
+            <span>01</span>
+            <code>cp .env.example .env.local</code>
+          </div>
+          <div class="command-row">
+            <span>02</span>
+            <code>pnpm dev</code>
+          </div>
+        </div>
+
+        <ResourceLinks
+          class="resource-links"
+          :primary="{ href: '/sign-up', label: 'Get started' }"
+        />
+      </div>
+    </section>
+  </main>
+</template>

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+export const hydrate = true;
+</script>
+
+<script setup lang="ts">
+import AuthForm from "../../components/auth-form.vue";
+import AuthShell from "../../components/auth-shell.vue";
+</script>
+
+<template>
+  <AuthShell><AuthForm mode="sign-in" /></AuthShell>
+</template>

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+export const hydrate = true;
+</script>
+
+<script setup lang="ts">
+import AuthForm from "../../components/auth-form.vue";
+import AuthShell from "../../components/auth-shell.vue";
+</script>
+
+<template>
+  <AuthShell><AuthForm mode="sign-up" /></AuthShell>
+</template>

package/templates/_integrations/better-auth/vue/src/components/auth-form.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { authClient } from "../lib/auth-client";
+
+const props = defineProps<{ mode: "sign-in" | "sign-up" }>();
+const isSignUp = computed(() => props.mode === "sign-up");
+const pending = ref(false);
+const error = ref<string | null>(null);
+
+async function submit(event: Event) {
+  event.preventDefault();
+  error.value = null;
+  pending.value = true;
+
+  const formData = new FormData(event.currentTarget as HTMLFormElement);
+  const email = String(formData.get("email") ?? "").trim();
+  const password = String(formData.get("password") ?? "");
+  const name = String(formData.get("name") ?? "").trim();
+
+  try {
+    const response = isSignUp.value
+      ? await authClient.signUp.email({ email, name, password })
+      : await authClient.signIn.email({ email, password });
+    if (response.error) {
+      error.value = response.error.message ?? "We could not complete that request.";
+      pending.value = false;
+      return;
+    }
+    window.location.assign("/dashboard");
+  } catch {
+    error.value = "The authentication service could not be reached. Please try again.";
+    pending.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="auth-form-panel">
+    <div class="auth-form-heading">
+      <span class="section-index">{{ isSignUp ? "01 / SIGN UP" : "01 / SIGN IN" }}</span>
+      <h1>{{ isSignUp ? "Create account." : "Welcome back." }}</h1>
+    </div>
+
+    <form class="auth-form" @submit="submit">
+      <label v-if="isSignUp" class="field">
+        <span><small>01</small> Name</span>
+        <input autocomplete="name" minlength="2" name="name" required type="text" />
+      </label>
+      <label class="field">
+        <span
+          ><small>{{ isSignUp ? "02" : "01" }}</small> Email</span
+        >
+        <input autocomplete="email" name="email" required type="email" />
+      </label>
+      <label class="field">
+        <span
+          ><small>{{ isSignUp ? "03" : "02" }}</small> Password</span
+        >
+        <input
+          :autocomplete="isSignUp ? 'new-password' : 'current-password'"
+          minlength="8"
+          name="password"
+          required
+          type="password"
+        />
+      </label>
+
+      <div v-if="error" class="form-error" role="alert">
+        <strong>Authentication failed</strong>
+        <span>{{ error }}</span>
+      </div>
+
+      <button class="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 class="auth-switch">
+      {{ isSignUp ? "Have an account?" : "Need an account?" }}
+      <a :href="isSignUp ? '/sign-in' : '/sign-up'">
+        {{ isSignUp ? "Sign in →" : "Sign up →" }}
+      </a>
+    </p>
+  </div>
+</template>

package/templates/_integrations/better-auth/vue/src/components/auth-shell.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import ResourceLinks from "./resource-links.vue";
+</script>
+
+<template>
+  <main class="auth-shell">
+    <a class="auth-home-link" href="/" aria-label="Back to starter home">
+      <span>00</span>
+      <span>FARMJS / Vue + Better Auth</span>
+    </a>
+
+    <section class="auth-form-side"><slot /></section>
+    <ResourceLinks class="auth-resource-links" />
+  </main>
+</template>

package/templates/_integrations/better-auth/vue/src/components/resource-links.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+defineProps<{
+  primary?: { href: string; label: string };
+}>();
+</script>
+
+<template>
+  <nav aria-label="Starter resources">
+    <span v-if="primary" class="resource-link-item">
+      <a class="resource-link-primary" :href="primary.href">{{ primary.label }}</a>
+    </span>
+    <span class="resource-link-item">
+      <span v-if="primary" class="resource-separator" aria-hidden="true">/</span>
+      <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>
+</template>

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

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

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

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

package/templates/_renderers/preact/package.json

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

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

@@ -0,0 +1,15 @@
+import { createEndpoint } from "@farm.js/core/api";
+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/preact/src/app/layout.tsx

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