@tanstack/cta-engine 0.10.0-alpha.6

package/templates/react/add-on/form/assets/src/routes/demo.form.address.tsx.ejs

@@ -0,0 +1,213 @@
+import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router'
+
+import { useAppForm } from '../hooks/demo.form'
+
+<% if (codeRouter) { %>
+import type { RootRoute } from '@tanstack/react-router'
+<% } else { %>
+export const Route = createFileRoute('/demo/form')({
+  component: AddressForm,
+})
+<% } %>
+
+function AddressForm() {
+  const form = useAppForm({
+    defaultValues: {
+      fullName: '',
+      email: '',
+      address: {
+        street: '',
+        city: '',
+        state: '',
+        zipCode: '',
+        country: '',
+      },
+      phone: '',
+    },
+    validators: {
+      onBlur: ({ value }) => {
+        const errors = {
+          fields: {},
+        } as {
+          fields: Record<string, string>
+        }
+        if (value.fullName.trim().length === 0) {
+          errors.fields.fullName = 'Full name is required'
+        }
+        return errors
+      },
+    },
+    onSubmit: ({ value }) => {
+      console.log(value)
+      // Show success message
+      alert('Form submitted successfully!')
+    },
+  })
+
+  return (
+    <div
+      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white"
+      style={{
+        backgroundImage:
+          'radial-gradient(50% 50% at 5% 40%, #f4a460 0%, #8b4513 70%, #1a0f0a 100%)',
+      }}
+    >
+      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            form.handleSubmit()
+          }}
+          className="space-y-6"
+        >
+          <form.AppField name="fullName">
+            {(field) => <field.TextField label="Full Name" />}
+          </form.AppField>
+
+          <form.AppField
+            name="email"
+            validators={{
+              onBlur: ({ value }) => {
+                if (!value || value.trim().length === 0) {
+                  return 'Email is required'
+                }
+                if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(value)) {
+                  return 'Invalid email address'
+                }
+                return undefined
+              },
+            }}
+          >
+            {(field) => <field.TextField label="Email" />}
+          </form.AppField>
+
+          <form.AppField
+            name="address.street"
+            validators={{
+              onBlur: ({ value }) => {
+                if (!value || value.trim().length === 0) {
+                  return 'Street address is required'
+                }
+                return undefined
+              },
+            }}
+          >
+            {(field) => <field.TextField label="Street Address" />}
+          </form.AppField>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <form.AppField
+              name="address.city"
+              validators={{
+                onBlur: ({ value }) => {
+                  if (!value || value.trim().length === 0) {
+                    return 'City is required'
+                  }
+                  return undefined
+                },
+              }}
+            >
+              {(field) => <field.TextField label="City" />}
+            </form.AppField>
+            <form.AppField
+              name="address.state"
+              validators={{
+                onBlur: ({ value }) => {
+                  if (!value || value.trim().length === 0) {
+                    return 'State is required'
+                  }
+                  return undefined
+                },
+              }}
+            >
+              {(field) => <field.TextField label="State" />}
+            </form.AppField>
+            <form.AppField
+              name="address.zipCode"
+              validators={{
+                onBlur: ({ value }) => {
+                  if (!value || value.trim().length === 0) {
+                    return 'Zip code is required'
+                  }
+                  if (!/^\d{5}(-\d{4})?$/.test(value)) {
+                    return 'Invalid zip code format'
+                  }
+                  return undefined
+                },
+              }}
+            >
+              {(field) => <field.TextField label="Zip Code" />}
+            </form.AppField>
+          </div>
+
+          <form.AppField
+            name="address.country"
+            validators={{
+              onBlur: ({ value }) => {
+                if (!value || value.trim().length === 0) {
+                  return 'Country is required'
+                }
+                return undefined
+              },
+            }}
+          >
+            {(field) => (
+              <field.Select
+                label="Country"
+                values={[
+                  { label: 'United States', value: 'US' },
+                  { label: 'Canada', value: 'CA' },
+                  { label: 'United Kingdom', value: 'UK' },
+                  { label: 'Australia', value: 'AU' },
+                  { label: 'Germany', value: 'DE' },
+                  { label: 'France', value: 'FR' },
+                  { label: 'Japan', value: 'JP' },
+                ]}
+                placeholder="Select a country"
+              />
+            )}
+        </form.AppField>
+
+          <form.AppField
+            name="phone"
+            validators={{
+              onBlur: ({ value }) => {
+                if (!value || value.trim().length === 0) {
+                  return 'Phone number is required'
+                }
+                if (
+                  !/^(\+\d{1,3})?\s?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/.test(
+                    value,
+                  )
+                ) {
+                  return 'Invalid phone number format'
+                }
+                return undefined
+              },
+            }}
+          >
+            {(field) => (
+              <field.TextField label="Phone" placeholder="123-456-7890" />
+            )}
+          </form.AppField>
+
+          <div className="flex justify-end">
+            <form.AppForm>
+              <form.SubscribeButton label="Submit" />
+            </form.AppForm>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+
+<% if (codeRouter) { %>
+export default (parentRoute: RootRoute) => createRoute({
+  path: '/demo/form/address',
+  component: AddressForm,
+  getParentRoute: () => parentRoute,
+})
+<% } %>

package/templates/react/add-on/form/assets/src/routes/demo.form.simple.tsx.ejs

@@ -0,0 +1,77 @@
+import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router'
+import { z } from 'zod'
+
+import { useAppForm } from '../hooks/demo.form'
+
+<% if (codeRouter) { %>
+  import type { RootRoute } from '@tanstack/react-router'
+<% } else { %>
+export const Route = createFileRoute('/demo/form')({
+  component: SimpleForm,
+})
+<% } %>
+
+const schema = z.object({
+  title: z.string().min(1, 'Title is required'),
+  description: z.string().min(1, 'Description is required'),
+})
+
+function SimpleForm() {
+  const form = useAppForm({
+    defaultValues: {
+      title: '',
+      description: '',
+    },
+    validators: {
+      onBlur: schema,
+    },
+    onSubmit: ({ value }) => {
+      console.log(value)
+      // Show success message
+      alert('Form submitted successfully!')
+    },
+  })
+
+  return (
+    <div
+      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white"
+      style={{
+        backgroundImage:
+          'radial-gradient(50% 50% at 5% 40%, #add8e6 0%, #0000ff 70%, #00008b 100%)',
+      }}
+    >
+      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            form.handleSubmit()
+          }}
+          className="space-y-6"
+        >
+          <form.AppField name="title">
+            {(field) => <field.TextField label="Title" />}
+          </form.AppField>
+
+          <form.AppField name="description">
+            {(field) => <field.TextArea label="Description" />}
+          </form.AppField>
+
+          <div className="flex justify-end">
+            <form.AppForm>
+              <form.SubscribeButton label="Submit" />
+            </form.AppForm>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+<% if (codeRouter) { %>
+export default (parentRoute: RootRoute) => createRoute({
+  path: '/demo/form/simple',
+  component: SimpleForm,
+  getParentRoute: () => parentRoute,
+})
+<% } %>

package/templates/react/add-on/form/info.json

@@ -0,0 +1,26 @@
+{
+  "name": "Form",
+  "description": "TanStack Form",
+  "phase": "add-on",
+  "templates": ["file-router", "code-router"],
+  "link": "https://tanstack.com/form/latest",
+  "routes": [
+    {
+      "url": "/demo/form/simple",
+      "name": "Simple Form"
+    },
+    {
+      "url": "/demo/form/address",
+      "name": "Address Form"
+    }
+  ],
+  "shadcnComponents": [
+    "button",
+    "select",
+    "input",
+    "textarea",
+    "slider",
+    "switch",
+    "label"
+  ]
+}

package/templates/react/add-on/form/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@tanstack/react-form": "^1.0.0",
+    "zod": "^3.24.2"
+  }
+}

package/templates/react/add-on/module-federation/assets/module-federation.config.js.ejs

@@ -0,0 +1,31 @@
+import packageJSON from './package.json'
+
+function remoteConfig(name, url) {
+  return {
+    type: 'module',
+    name,
+    entry: url,
+    entryGlobalName: 'remote',
+    shareScope: 'default',
+  }
+}
+
+export default {
+  filename: 'remoteEntry.js',
+  name: '<%= projectName %>',
+  exposes: {
+    './DemoMfComponent': './src/demo-mf-component.tsx',
+    './DemoMfSelfContained': './src/demo-mf-self-contained.tsx',
+  },
+  remotes: {},
+  shared: {
+    react: {
+      singleton: true,
+      requiredVersion: packageJSON.dependencies.react,
+    },
+    'react-dom': {
+      singleton: true,
+      requiredVersion: packageJSON.dependencies['react-dom'],
+    },
+  },
+}

package/templates/react/add-on/module-federation/assets/src/demo-mf-component.tsx

@@ -0,0 +1,3 @@
+export function DemoMfComponent() {
+  return <div>Demo Mf Component</div>
+}

package/templates/react/add-on/module-federation/assets/src/demo-mf-self-contained.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+
+function App() {
+  return <div>Hello from self-contained module federation</div>
+}
+
+export function DemoMfSelfContained(rootElement: HTMLElement) {
+  const root = ReactDOM.createRoot(rootElement)
+  root.render(<App />)
+}

package/templates/react/add-on/module-federation/info.json

@@ -0,0 +1,7 @@
+{
+  "name": "Module Federation",
+  "description": "Module Federation",
+  "phase": "add-on",
+  "templates": ["code-router"],
+  "link": "https://module-federation.io/"
+}

package/templates/react/add-on/module-federation/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@module-federation/vite": "^1.1.9"
+  }
+}

package/templates/react/add-on/netlify/README.md

@@ -0,0 +1,11 @@
+## Setting up Netlify
+
+First install the Netlify CLI with:
+
+```bash
+npm install -g netlify-cli`
+```
+
+```bash
+netlify init
+```

package/templates/react/add-on/netlify/info.json

@@ -0,0 +1,7 @@
+{
+  "name": "Netlify",
+  "description": "Netlify deployment setup",
+  "link": "https://docs.netlify.com",
+  "phase": "add-on",
+  "templates": ["file-router", "code-router"]
+}

package/templates/react/add-on/sentry/assets/_dot_cursorrules.append

@@ -0,0 +1,22 @@
+We use Sentry for watching for errors in our deployed application, as well as for instrumentation of our application.
+
+## Error collection
+
+Error collection is automatic and configured in `src/router.tsx`.
+
+## Instrumentation
+
+We want our server functions intstrumented. So if you see a function name like `createServerFn`, you can instrument it with Sentry. You'll need to import `Sentry`:
+
+```tsx
+import * as Sentry from '@sentry/browser'
+```
+
+And then wrap the implementation of the server function with `Sentry.startSpan`, liks so:
+
+```tsx
+Sentry.startSpan({ name: 'Requesting all the pokemon' }, async () => {
+  // Some lengthy operation here
+  await fetch('https://api.pokemon.com/data/')
+})
+```

package/templates/react/add-on/sentry/assets/_dot_env.local.append

@@ -0,0 +1,2 @@
+# Your Sentry DSN (from your Sentry account)
+VITE_SENTRY_DSN=

package/templates/react/add-on/sentry/assets/src/app/global-middleware.ts

@@ -0,0 +1,25 @@
+import { createIsomorphicFn } from '@tanstack/react-start'
+import * as Sentry from "@sentry/react";
+import * as SentryServer from "@sentry/node";
+
+createIsomorphicFn().server(() => {
+    console.log('Sentry init server')
+    SentryServer.init({
+        dsn: import.meta.env.VITE_SENTRY_DSN,
+        tracesSampleRate: 1.0,
+        profilesSampleRate: 1.0,
+    })
+}).client(() => {
+    console.log('Sentry init client')
+    Sentry.init({
+        dsn: import.meta.env.VITE_SENTRY_DSN,
+        tracesSampleRate: 1.0,
+        profilesSampleRate: 1.0,
+        integrations: [
+            Sentry.replayIntegration({
+                maskAllText: false,
+                blockAllMedia: false,
+              })
+        ]
+    })
+})()