feat: create compiler demo for TanStack Start

.claude/commands/analyze-bucket-type.md

@@ -10,7 +10,6 @@ Given the bucket type ID "$ARGUMENTS" (e.g., "json", "mdx", "typescript"), analy
 1. **Locate where this bucket type is processed** in the codebase by searching for the bucket type string. Start with the main loader composition/pipeline code.
 
 2. **Trace the complete execution pipeline** for this bucket:
-
    - List every function/loader in the processing chain, in order
    - For each function/loader, read its implementation to understand:
      - Input parameters it receives
@@ -19,13 +18,11 @@ Given the bucket type ID "$ARGUMENTS" (e.g., "json", "mdx", "typescript"), analy
      - Any side effects or file operations
 
 3. **Identify configuration parameters** by:
-
    - Finding which variables are passed into the loaders (e.g., lockedKeys, ignoredKeys)
    - Tracing these variables back to their source (configuration parsing)
    - Determining if they're bucket-specific or universal
 
 4. **Analyze file I/O behavior**:
-
    - How are file paths constructed?
    - Does the path pattern contain locale placeholders that would create separate files?
    - What file operations are performed (read, write, create, delete)?
@@ -36,21 +33,18 @@ Given the bucket type ID "$ARGUMENTS" (e.g., "json", "mdx", "typescript"), analy
      - Clarify which pattern the bucket type follows
 
 5. **Examine data transformation logic**:
-
    - How is the file content parsed?
    - What internal data structures are used?
    - How is the data serialized back to file format?
    - Are there any format-preserving mechanisms?
 
 6. **Identify special behaviors** by examining:
-
    - Conditional logic specific to this bucket
    - Error handling unique to this format
    - Any validation or normalization steps
    - Interactions between multiple loaders in the pipeline
 
 7. **Determine constraints and capabilities**:
-
    - What data types/structures are supported?
    - Are there any size or complexity limitations?
    - What happens with edge cases (empty files, malformed content)?

.claude/commands/create-bucket-docs.md

@@ -281,14 +281,12 @@ Choose realistic paths for the bucket type:
 ## Instructions
 
 1. Parse the bucket analysis output provided in the arguments to determine:
-
    - Bucket type name
    - File organization (separate-files if uses [locale] placeholder, in-place if not)
    - Supported features (lockedKeys, ignoredKeys, injectLocale, hints/notes)
    - Typical file extension and paths
 
 2. Based on the analysis, fill in the template with appropriate:
-
    - Description of the file format
    - Realistic path patterns
    - Only the features that are actually supported

.github/workflows/lingodotdev.yml

@@ -45,10 +45,13 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Use Node.js
-        uses: actions/setup-node@v2
+      - name: Use Node.js 22.12
+        uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: 22.12.0
+
+      - name: Enable Corepack
+        run: corepack enable
 
       - name: Lingo.dev
         uses: ./

.github/workflows/pr-check.yml

@@ -30,10 +30,13 @@ jobs:
             exit 0
           fi
 
-      - name: Use Node.js
-        uses: actions/setup-node@v2
+      - name: Use Node.js 22.12
+        uses: actions/setup-node@v4
         with:
-          node-version: 20.12.2
+          node-version: 22.12.0
+
+      - name: Enable Corepack
+        run: corepack enable
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -52,8 +55,8 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
 
-      - name: Install deps
-        run: pnpm install
+      - name: Install deps (frozen lockfile)
+        run: pnpm install --frozen-lockfile
 
       - name: Setup
         run: |

.github/workflows/release.yml

@@ -35,10 +35,13 @@ jobs:
             exit 0
           fi
 
-      - name: Use Node.js
-        uses: actions/setup-node@v2
+      - name: Use Node.js 22.12
+        uses: actions/setup-node@v4
         with:
-          node-version: 20.12.2
+          node-version: 22.12.0
+
+      - name: Enable Corepack
+        run: corepack enable
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -57,8 +60,8 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
 
-      - name: Install deps
-        run: pnpm install
+      - name: Install deps (frozen lockfile)
+        run: pnpm install --frozen-lockfile
 
       - name: Lingo.dev
         if: ${{ !inputs.skip_lingo }}

CONTRIBUTING.md

@@ -65,28 +65,22 @@ Feel free to ask questions on our [Discord server](https://lingo.dev/go/discord)
 Want to add support for a new LLM provider to Lingo.dev? Here's a checklist to help you get started:
 
 1. **Add Your Dependency**
-
    - Install the relevant SDK/package for your provider in the necessary `package.json` (usually `cli` and/or `compiler`). Lingo.dev uses the [AI SDK](https://ai-sdk.dev) and its [providers](https://ai-sdk.dev/providers/ai-sdk-providers), so check first to make sure the AI SDK supports your provider.
 
 2. **Update the Config Schema**
-
    - Edit [`packages/spec/src/config.ts`](./packages/spec/src/config.ts) and update the list of allowed provider `id` values to include your new provider.
 
 3. **Provider Details**
-
    - Add your provider to [`packages/compiler/src/lib/lcp/api/provider-details.ts`](./packages/compiler/src/lib/lcp/api/provider-details.ts) with name, env var, config key, API docs, and signup link.
 
 4. **API Key Handling**
-
    - Update [`packages/compiler/src/utils/llm-api-key.ts`](./packages/compiler/src/utils/llm-api-key.ts) to add functions for getting the API key from environment/config.
 
 5. **CLI and Compiler Logic**
-
    - Update the CLI (e.g., [`packages/cli/src/cli/localizer/explicit.ts`](./packages/cli/src/cli/localizer/explicit.ts), [`packages/cli/src/cli/processor/index.ts`](./packages/cli/src/cli/processor/index.ts)) to support your provider.
    - Update the compiler's translation logic to instantiate your provider's client (see [`packages/compiler/src/lib/lcp/api/index.ts`](./packages/compiler/src/lib/lcp/api/index.ts)).
 
 6. **Error Handling**
-
    - Ensure user-facing error messages are updated to mention your provider where relevant (API key checks, troubleshooting, etc).
 
 7. **Test and Document**

demo/react-router-app/app/app.css

@@ -1,8 +1,9 @@
 @import "tailwindcss";
 
 @theme {
-  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-sans:
+    "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
 html,

demo/tanstack-start/.gitignore

@@ -0,0 +1,20 @@
+node_modules
+package-lock.json
+yarn.lock
+
+.DS_Store
+.cache
+.env
+.vercel
+.output
+.nitro
+/build/
+/api/
+/server/build
+/public/build# Sentry Config File
+.env.sentry-build-plugin
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+.tanstack

demo/tanstack-start/.prettierignore

@@ -0,0 +1,4 @@
+**/build
+**/public
+pnpm-lock.yaml
+routeTree.gen.ts

demo/tanstack-start/.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "files.watcherExclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "search.exclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "files.readonlyInclude": {
+    "**/routeTree.gen.ts": true
+  }
+}

demo/tanstack-start/README.md

@@ -0,0 +1,46 @@
+# Lingo.dev Compiler with TanStack Start
+
+## Introduction
+
+This example demonstrates how to set up [Lingo.dev Compiler](https://lingo.dev/en/compiler/) with [TanStack Start](https://tanstack.com/start/latest).
+
+## Running this example
+
+To run this example:
+
+1. Set the `LINGODOTDEV_API_KEY` environment variable:
+
+   ```bash
+   export LINGODOTDEV_API_KEY="<your_api_key>"
+   ```
+
+   To get an API key, sign up for a free account at [lingo.dev](https://lingo.dev).
+
+2. Navigate into this example's directory:
+
+   ```bash
+   cd demo/tanstack-start
+   ```
+
+3. Install the dependencies:
+
+   ```bash
+   pnpm install
+   ```
+
+4. Run the development server:
+
+   ```bash
+   pnpm run dev
+   ```
+
+5. Navigate to <http://localhost:3000>.
+
+## Changed files
+
+These are the files that were changed to get **Lingo.dev Compiler** up and running:
+
+- [src/routes/\_\_root.tsx](./src/routes/__root.tsx)
+- [vite.config.ts](./vite.config.ts)
+
+You can use these files as a reference when setting up the compiler in your own project.

demo/tanstack-start/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "tanstack-start-example-basic",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && tsc --noEmit",
+    "start": "node .output/server/index.mjs"
+  },
+  "dependencies": {
+    "@tanstack/react-router": "^1.130.9",
+    "@tanstack/react-router-devtools": "^1.130.9",
+    "@tanstack/react-start": "^1.130.9",
+    "lingo.dev": "workspace:*",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwind-merge": "^2.6.0",
+    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "@types/node": "^22.5.4",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.6.0",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.5.1",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.7.2",
+    "vite": "^6.3.5",
+    "vite-tsconfig-paths": "^5.1.4"
+  }
+}

demo/tanstack-start/postcss.config.mjs

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

demo/tanstack-start/public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

demo/tanstack-start/src/components/DefaultCatchBoundary.tsx

@@ -0,0 +1,53 @@
+import {
+  ErrorComponent,
+  Link,
+  rootRouteId,
+  useMatch,
+  useRouter,
+} from "@tanstack/react-router";
+import type { ErrorComponentProps } from "@tanstack/react-router";
+
+export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
+  const router = useRouter();
+  const isRoot = useMatch({
+    strict: false,
+    select: (state) => state.id === rootRouteId,
+  });
+
+  console.error("DefaultCatchBoundary Error:", error);
+
+  return (
+    <div className="min-w-0 flex-1 p-4 flex flex-col items-center justify-center gap-6">
+      <ErrorComponent error={error} />
+      <div className="flex gap-2 items-center flex-wrap">
+        <button
+          onClick={() => {
+            router.invalidate();
+          }}
+          className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+        >
+          Try Again
+        </button>
+        {isRoot ? (
+          <Link
+            to="/"
+            className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+          >
+            Home
+          </Link>
+        ) : (
+          <Link
+            to="/"
+            className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+            onClick={(e) => {
+              e.preventDefault();
+              window.history.back();
+            }}
+          >
+            Go Back
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+}