@tanstack/create 0.68.2 → 0.68.3

package/src/manifest-types.ts

@@ -0,0 +1,8 @@
+import type { AddOnCompiled, FrameworkDefinition } from './types.js'
+
+export type ManifestFrameworkDefinition = Omit<
+  FrameworkDefinition,
+  'addOns'
+> & {
+  addOns: Array<AddOnCompiled>
+}

package/src/manifest.ts

@@ -0,0 +1 @@
+export * from './edge.js'

package/src/types.ts

@@ -72,8 +72,9 @@ export const AddOnBaseSchema = z.object({
       z.object({
         url: z.string().optional(),
         name: z.string().optional(),
-        path: z.string(),
-        jsName: z.string(),
+        path: z.string().optional(),
+        jsName: z.string().optional(),
+        icon: z.string().optional(),
       }),
     )
     .optional(),
@@ -84,6 +85,7 @@ export const AddOnBaseSchema = z.object({
       scripts: z.record(z.string(), z.string()).optional(),
     })
     .optional(),
+  variables: z.array(z.unknown()).optional(),
   shadcnComponents: z.array(z.string()).optional(),
   dependsOn: z.array(z.string()).optional(),
   smallLogo: z.string().optional(),
@@ -130,7 +132,7 @@ export const IntegrationSchema = z.object({
 export const AddOnInfoSchema = AddOnBaseSchema.extend({
   modes: z.array(z.string()),
   integrations: z.array(IntegrationSchema).optional(),
-  phase: z.enum(['setup', 'add-on']),
+  phase: z.enum(['setup', 'add-on', 'example']),
   readme: z.string().optional(),
   readmeIsEjs: z.boolean().optional(),
 })

package/tests/edge-import.test.ts

@@ -0,0 +1,31 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+const blockedModules = [
+  'node:fs',
+  'node:fs/promises',
+  'node:path',
+  'node:url',
+  'execa',
+]
+
+describe('@tanstack/create/edge import', () => {
+  afterEach(() => {
+    for (const moduleName of blockedModules) {
+      vi.doUnmock(moduleName)
+    }
+    vi.resetModules()
+  })
+
+  it('does not import Node-only modules', async () => {
+    vi.resetModules()
+    for (const moduleName of blockedModules) {
+      vi.doMock(moduleName, () => {
+        throw new Error(`${moduleName} is unavailable`)
+      })
+    }
+
+    const edge = await import('../src/edge.js')
+
+    expect(edge.getFrameworkById('react')?.id).toBe('react')
+  })
+})

package/tests/edge-manifest.test.ts

@@ -0,0 +1,168 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import {
+  createApp,
+  createMemoryEnvironment,
+  finalizeAddOns,
+  getAllAddOns,
+  getFrameworkById,
+  populateAddOnOptionsDefaults,
+} from '../src/edge.js'
+import { getAllAddOns as getAllNodeAddOns } from '../src/add-ons.js'
+import { createFrameworkDefinition as createReactFrameworkDefinition } from '../src/frameworks/react/index.js'
+import { createFrameworkDefinition as createSolidFrameworkDefinition } from '../src/frameworks/solid/index.js'
+
+import type {
+  AddOn,
+  Framework,
+  FrameworkDefinition,
+  Options,
+} from '../src/types.js'
+
+function frameworkFromDefinition(definition: FrameworkDefinition): Framework {
+  const { addOns, base, ...rest } = definition
+
+  return {
+    ...rest,
+    getFiles: () => Promise.resolve(Object.keys(base)),
+    getFileContents: (path: string) => Promise.resolve(base[path]),
+    getDeletedFiles: () => Promise.resolve([]),
+    getAddOns: () => addOns,
+  }
+}
+
+async function materializeFiles(bundle: {
+  getFiles: () => Promise<Array<string>>
+  getFileContents: (path: string) => Promise<string>
+}) {
+  const files: Record<string, string> = {}
+  for (const file of (await bundle.getFiles()).sort()) {
+    files[file] = await bundle.getFileContents(file)
+  }
+  return files
+}
+
+async function materializeAddOn(addOn: AddOn) {
+  const {
+    getFiles: _getFiles,
+    getFileContents: _getFileContents,
+    getDeletedFiles: _getDeletedFiles,
+    files: _files,
+    deletedFiles: _deletedFiles,
+    ...metadata
+  } = addOn
+
+  return JSON.parse(
+    JSON.stringify({
+      ...metadata,
+      files: await materializeFiles(addOn),
+      deletedFiles: (await addOn.getDeletedFiles()).sort(),
+    }),
+  )
+}
+
+async function materializeAddOns(addOns: Array<AddOn>) {
+  const materialized = await Promise.all(addOns.map(materializeAddOn))
+  return materialized.sort((a, b) => a.id.localeCompare(b.id))
+}
+
+describe('@tanstack/create/edge manifest', () => {
+  it.each([
+    ['react', createReactFrameworkDefinition],
+    ['solid', createSolidFrameworkDefinition],
+  ])('matches the Node-scanned %s framework catalog', async (frameworkId, scan) => {
+    const nodeDefinition = scan()
+    const nodeFramework = frameworkFromDefinition(nodeDefinition)
+    const edgeFramework = getFrameworkById(frameworkId)
+
+    expect(edgeFramework).toBeDefined()
+    expect(edgeFramework?.id).toBe(nodeDefinition.id)
+    expect(edgeFramework?.name).toBe(nodeDefinition.name)
+    expect(edgeFramework?.description).toBe(nodeDefinition.description)
+    expect(edgeFramework?.version).toBe(nodeDefinition.version)
+    expect(edgeFramework?.supportedModes).toEqual(nodeDefinition.supportedModes)
+    expect(edgeFramework?.basePackageJSON).toEqual(
+      nodeDefinition.basePackageJSON,
+    )
+    expect(edgeFramework?.optionalPackages).toEqual(
+      nodeDefinition.optionalPackages,
+    )
+    expect(await materializeFiles(edgeFramework!)).toEqual(nodeDefinition.base)
+    expect(await materializeAddOns(edgeFramework!.getAddOns())).toEqual(
+      await materializeAddOns(nodeFramework.getAddOns()),
+    )
+  })
+
+  it('returns the same React add-ons as the Node filesystem-backed path', () => {
+    const nodeFramework = frameworkFromDefinition(createReactFrameworkDefinition())
+    const edgeFramework = getFrameworkById('react')
+
+    expect(edgeFramework).toBeDefined()
+    expect(getAllAddOns(edgeFramework!, 'file-router').map((addOn) => addOn.id))
+      .toEqual(
+        getAllNodeAddOns(nodeFramework, 'file-router').map((addOn) => addOn.id),
+      )
+  })
+
+  it('generates a React app from the manifest-backed catalog', async () => {
+    vi.stubGlobal(
+      'fetch',
+      vi.fn(async () => {
+        return new Response(JSON.stringify({ version: '1.0.0' }), {
+          status: 200,
+        })
+      }),
+    )
+
+    const framework = getFrameworkById('react')
+    expect(framework).toBeDefined()
+
+    const featureIds = getAllAddOns(framework!, 'file-router').map(
+      (addOn) => addOn.id,
+    )
+    expect(featureIds).toContain('tanstack-query')
+    expect(featureIds).toContain('clerk')
+    expect(featureIds).toContain('cloudflare')
+
+    const chosenAddOns = await finalizeAddOns(framework!, 'file-router', [
+      'tanstack-query',
+      'clerk',
+      'cloudflare',
+      'biome',
+    ])
+    const addOnOptions = populateAddOnOptionsDefaults(chosenAddOns)
+    const { environment, output } = createMemoryEnvironment('/worker-app')
+
+    await createApp(environment, {
+      projectName: 'worker-app',
+      targetDir: '/worker-app',
+      framework: framework!,
+      mode: 'file-router',
+      typescript: true,
+      tailwind: true,
+      packageManager: 'pnpm',
+      git: false,
+      install: false,
+      intent: false,
+      chosenAddOns,
+      addOnOptions,
+      includeExamples: false,
+    } satisfies Options)
+
+    const packageJSON = JSON.parse(output.files['package.json'])
+
+    expect(packageJSON.scripts.dev).toBe('vite dev --port 3000')
+    expect(packageJSON.scripts.deploy).toBe(
+      'pnpm run build && wrangler deploy',
+    )
+    expect(packageJSON.dependencies).toHaveProperty('@tanstack/react-start')
+    expect(packageJSON.dependencies).toHaveProperty('@tanstack/react-query')
+    expect(packageJSON.dependencies).toHaveProperty('@clerk/clerk-react')
+    expect(packageJSON.devDependencies).toHaveProperty('wrangler')
+    expect(output.files['wrangler.jsonc']).toContain('tanstack-start-app')
+    expect(output.files['.env.example']).toContain(
+      'VITE_CLERK_PUBLISHABLE_KEY=',
+    )
+    expect(output.files['src/routes/index.tsx']).toContain('createFileRoute')
+  })
+})

package/dist/frameworks/react/add-ons/storybook/assets/_dot_storybook/main.ts

@@ -1,17 +0,0 @@
-import type { StorybookConfig } from "@storybook/react-vite";
-
-const config: StorybookConfig = {
-  stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: [],
-  framework: {
-    name: "@storybook/react-vite",
-    options: {},
-  },
-  async viteFinal(config) {
-    const { default: tailwindcss } = await import("@tailwindcss/vite");
-    config.plugins = config.plugins || [];
-    config.plugins.push(tailwindcss());
-    return config;
-  },
-};
-export default config;

package/dist/frameworks/react/add-ons/storybook/assets/_dot_storybook/preview.ts

@@ -1,15 +0,0 @@
-import type { Preview } from "@storybook/react-vite";
-import "../src/styles.css";
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;

package/dist/frameworks/react/add-ons/storybook/assets/src/components/storybook/button.stories.ts

@@ -1,67 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-
-import { Button } from "./button";
-
-const meta = {
-  title: "Form/Button",
-  component: Button,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  args: { onClick: fn() },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    variant: "primary",
-    children: "Primary Button",
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    variant: "secondary",
-    children: "Secondary Button",
-  },
-};
-
-export const Danger: Story = {
-  args: {
-    variant: "danger",
-    children: "Delete Account",
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: "small",
-    children: "Small Button",
-  },
-};
-
-export const Medium: Story = {
-  args: {
-    size: "medium",
-    children: "Medium Button",
-  },
-};
-
-export const Large: Story = {
-  args: {
-    size: "large",
-    children: "Large Button",
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    variant: "primary",
-    children: "Disabled Button",
-    disabled: true,
-  },
-};

package/dist/frameworks/react/add-ons/storybook/assets/src/components/storybook/button.tsx

@@ -1,47 +0,0 @@
-import React from 'react'
-
-export interface ButtonProps {
-  variant?: 'primary' | 'secondary' | 'danger'
-  size?: 'small' | 'medium' | 'large'
-  children: React.ReactNode
-  onClick?: () => void
-  disabled?: boolean
-  type?: 'button' | 'submit' | 'reset'
-  className?: string
-}
-
-export const Button: React.FC<ButtonProps> = ({
-  variant = 'primary',
-  size = 'medium',
-  children,
-  onClick,
-  disabled = false,
-  type = 'button',
-  className = '',
-}) => {
-  const baseStyles =
-    'demo-button disabled:opacity-50 disabled:cursor-not-allowed'
-
-  const variantStyles = {
-    primary: '',
-    secondary: 'demo-button-secondary',
-    danger: 'demo-button-danger',
-  }
-
-  const sizeStyles = {
-    small: 'px-3 py-1.5 text-sm',
-    medium: 'px-4 py-2 text-base',
-    large: 'px-6 py-3 text-lg',
-  }
-
-  return (
-    <button
-      type={type}
-      onClick={onClick}
-      disabled={disabled}
-      className={`${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${className}`}
-    >
-      {children}
-    </button>
-  )
-}

package/dist/frameworks/react/add-ons/storybook/assets/src/components/storybook/dialog.stories.tsx

@@ -1,92 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { Dialog } from "./dialog";
-import { Button } from "./button";
-
-const meta = {
-  title: "Form/Dialog",
-  component: Dialog,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof Dialog>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    title: "User Profile",
-    children: (
-      <div className="space-y-4">
-        <p className="text-gray-700 dark:text-gray-300">
-          This is a simple dialog component with a title and content area.
-        </p>
-      </div>
-    ),
-  },
-};
-
-export const WithFooter: Story = {
-  args: {
-    title: "Confirm Action",
-    children: (
-      <div className="space-y-4">
-        <p className="text-gray-700 dark:text-gray-300">
-          Are you sure you want to proceed with this action?
-        </p>
-      </div>
-    ),
-    footer: (
-      <div className="flex gap-3 justify-end">
-        <Button variant="secondary" size="medium">
-          Cancel
-        </Button>
-        <Button variant="primary" size="medium">
-          Confirm
-        </Button>
-      </div>
-    ),
-  },
-};
-
-export const Form: Story = {
-  args: {
-    title: "Create Account",
-    children: (
-      <div className="space-y-4 min-w-80">
-        <div className="flex flex-col gap-2">
-          <label className="text-sm font-medium text-gray-700 dark:text-gray-200">
-            Email
-          </label>
-          <input
-            type="email"
-            placeholder="you@example.com"
-            className="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
-          />
-        </div>
-        <div className="flex flex-col gap-2">
-          <label className="text-sm font-medium text-gray-700 dark:text-gray-200">
-            Password
-          </label>
-          <input
-            type="password"
-            placeholder="••••••••"
-            className="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
-          />
-        </div>
-      </div>
-    ),
-    footer: (
-      <div className="flex gap-3 justify-end">
-        <Button variant="secondary" size="medium">
-          Cancel
-        </Button>
-        <Button variant="primary" size="medium">
-          Create Account
-        </Button>
-      </div>
-    ),
-  },
-};

package/dist/frameworks/react/add-ons/storybook/assets/src/components/storybook/dialog.tsx

@@ -1,29 +0,0 @@
-import React from 'react'
-
-export interface DialogProps {
-  title: string
-  children: React.ReactNode
-  footer?: React.ReactNode
-  className?: string
-}
-
-export const Dialog: React.FC<DialogProps> = ({
-  title,
-  children,
-  footer,
-  className = '',
-}) => {
-  return (
-    <div className={`demo-panel overflow-hidden p-0 ${className}`}>
-      <div className="border-b border-[var(--line)] px-6 py-4">
-        <h2 className="demo-section-title">{title}</h2>
-      </div>
-      <div className="px-6 py-6">{children}</div>
-      {footer && (
-        <div className="border-t border-[var(--line)] bg-[var(--chip-bg)] px-6 py-4">
-          {footer}
-        </div>
-      )}
-    </div>
-  )
-}

package/dist/frameworks/react/add-ons/storybook/assets/src/components/storybook/index.ts

@@ -1,14 +0,0 @@
-export { Input } from "./input";
-export type { InputProps } from "./input";
-
-export { RadioGroup } from "./radio-group";
-export type { RadioGroupProps, RadioOption } from "./radio-group";
-
-export { Slider } from "./slider";
-export type { SliderProps } from "./slider";
-
-export { Dialog } from "./dialog";
-export type { DialogProps } from "./dialog";
-
-export { Button } from "./button";
-export type { ButtonProps } from "./button";

package/dist/frameworks/react/add-ons/storybook/assets/src/components/storybook/input.stories.ts

@@ -1,43 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-
-import { Input } from "./input";
-
-const meta = {
-  title: "Form/Input",
-  component: Input,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  args: { onChange: fn() },
-} satisfies Meta<typeof Input>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    label: "Email Address",
-    id: "email",
-    placeholder: "Enter your email",
-  },
-};
-
-export const Required: Story = {
-  args: {
-    label: "First Name",
-    id: "firstName",
-    placeholder: "John",
-    required: true,
-  },
-};
-
-export const WithValue: Story = {
-  args: {
-    label: "Last Name",
-    id: "lastName",
-    value: "Doe",
-    placeholder: "Enter last name",
-  },
-};

package/dist/frameworks/react/add-ons/storybook/assets/src/components/storybook/input.tsx

@@ -1,39 +0,0 @@
-import React from 'react'
-
-export interface InputProps {
-  label: string
-  id: string
-  value?: string
-  onChange?: (value: string) => void
-  placeholder?: string
-  required?: boolean
-  className?: string
-}
-
-export const Input: React.FC<InputProps> = ({
-  label,
-  id,
-  value = '',
-  onChange,
-  placeholder,
-  required = false,
-  className = '',
-}) => {
-  return (
-    <div className={`flex flex-col gap-2 ${className}`}>
-      <label htmlFor={id} className="text-sm font-medium text-[var(--sea-ink)]">
-        {label}
-        {required && <span className="text-red-500 ml-1">*</span>}
-      </label>
-      <input
-        type="text"
-        id={id}
-        value={value}
-        onChange={(e) => onChange?.(e.target.value)}
-        placeholder={placeholder}
-        required={required}
-        className="demo-input"
-      />
-    </div>
-  )
-}

package/dist/frameworks/react/add-ons/storybook/assets/src/components/storybook/radio-group.stories.ts

@@ -1,53 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-
-import { RadioGroup } from "./radio-group";
-
-const meta = {
-  title: "Form/RadioGroup",
-  component: RadioGroup,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  args: { onChange: fn() },
-} satisfies Meta<typeof RadioGroup>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    label: "Employment Type",
-    name: "employmentType",
-    options: [
-      { value: "full-time", label: "Full Time" },
-      { value: "part-time", label: "Part Time" },
-    ],
-  },
-};
-
-export const Selected: Story = {
-  args: {
-    label: "Employment Type",
-    name: "employmentType",
-    options: [
-      { value: "full-time", label: "Full Time" },
-      { value: "part-time", label: "Part Time" },
-    ],
-    value: "full-time",
-  },
-};
-
-export const MultipleOptions: Story = {
-  args: {
-    label: "Subscription Plan",
-    name: "plan",
-    options: [
-      { value: "basic", label: "Basic" },
-      { value: "pro", label: "Pro" },
-      { value: "enterprise", label: "Enterprise" },
-    ],
-    value: "pro",
-  },
-};