Fix create worker manifest loading (#477)

fix create worker manifest loading

Author: tannerlinsley

.changeset/fuzzy-workers-build.md

@@ -0,0 +1,5 @@
+---
+"@tanstack/create": patch
+---
+
+Fix Worker usage by adding a provider-based `@tanstack/create/worker` entry that avoids importing the full generated create manifest at startup.

docs/cli-reference.md

@@ -44,31 +44,76 @@ tanstack create --list-add-ons --framework React --json
 tanstack create --addon-details drizzle --framework React --json
 ```
 
-### Worker-safe programmatic generation
+### Programmatic generation
 
-Use `@tanstack/create/edge` in Cloudflare Workers and other runtimes that do not expose a Node package filesystem. The default `@tanstack/create` export is still the Node/CLI path and scans framework templates from disk.
+Use `@tanstack/create/worker` in Cloudflare Workers and other edge SSR runtimes. It does not import the generated template manifest at module startup. Instead, provide a loader for the framework and add-on chunks your Worker supports.
+
+The default `@tanstack/create` export is still the Node/CLI path and scans framework templates from disk. `@tanstack/create/edge` remains the bundled in-memory manifest path; it is Worker-compatible at runtime, but it imports the full generated manifest and is not appropriate for size-constrained Worker bundles.
 
 ```ts
 import {
-  createApp,
   createMemoryEnvironment,
-  finalizeAddOns,
-  getFrameworkById,
-  populateAddOnOptionsDefaults,
-} from '@tanstack/create/edge'
+  createWorkerCreate,
+  createWorkerManifestLoader,
+} from '@tanstack/create/worker'
+import { manifestCatalog } from '@tanstack/create/worker-manifest/catalog'
+
+import type {
+  WorkerAddOnManifestModule,
+  WorkerFrameworkManifestModule,
+} from '@tanstack/create/worker'
+
+const frameworkLoaders: Record<
+  string,
+  () => Promise<WorkerFrameworkManifestModule>
+> = {
+  react: () => import('@tanstack/create/worker-manifest/frameworks/react'),
+}
+
+const addOnLoaders: Record<
+  string,
+  Record<string, () => Promise<WorkerAddOnManifestModule>>
+> = {
+  react: {
+    'tanstack-query': () =>
+      import(
+        '@tanstack/create/worker-manifest/frameworks/react/add-ons/tanstack-query'
+      ),
+    cloudflare: () =>
+      import(
+        '@tanstack/create/worker-manifest/frameworks/react/add-ons/cloudflare'
+      ),
+  },
+}
 
-const framework = getFrameworkById('react')!
-const chosenAddOns = await finalizeAddOns(framework, 'file-router', [
+const create = createWorkerCreate(
+  createWorkerManifestLoader({
+    loadCatalog: async () => manifestCatalog,
+    async loadFramework(frameworkId) {
+      const load = frameworkLoaders[frameworkId]
+      if (!load) throw new Error(`Unsupported framework: ${frameworkId}`)
+      return load()
+    },
+    async loadAddOn(frameworkId, addOnId) {
+      const load = addOnLoaders[frameworkId]?.[addOnId]
+      if (!load) throw new Error(`Unsupported add-on: ${addOnId}`)
+      return load()
+    },
+  }),
+)
+
+const framework = await create.getFrameworkById('react')
+const chosenAddOns = await create.finalizeAddOns(framework!, 'file-router', [
   'tanstack-query',
   'cloudflare',
 ])
-const addOnOptions = populateAddOnOptionsDefaults(chosenAddOns)
+const addOnOptions = create.populateAddOnOptionsDefaults(chosenAddOns)
 const { environment, output } = createMemoryEnvironment('/app')
 
-await createApp(environment, {
+await create.createApp(environment, {
   projectName: 'app',
   targetDir: '/app',
-  framework,
+  framework: framework!,
   mode: 'file-router',
   typescript: true,
   tailwind: true,

packages/create/package.json

@@ -16,6 +16,21 @@
       "import": "./dist/edge.js",
       "default": "./dist/edge.js"
     },
+    "./worker": {
+      "types": "./dist/types/worker.d.ts",
+      "import": "./dist/worker.js",
+      "default": "./dist/worker.js"
+    },
+    "./worker/bundled": {
+      "types": "./dist/types/worker-bundled.d.ts",
+      "import": "./dist/worker-bundled.js",
+      "default": "./dist/worker-bundled.js"
+    },
+    "./worker-manifest/*": {
+      "types": "./dist/types/generated/worker/*.d.ts",
+      "import": "./dist/generated/worker/*.js",
+      "default": "./dist/generated/worker/*.js"
+    },
     "./manifest": {
       "types": "./dist/types/manifest.d.ts",
       "import": "./dist/manifest.js",
@@ -31,7 +46,7 @@
     "dev": "npm run generate-manifest && tsc --watch",
     "test": "npm run generate-manifest && eslint ./src && vitest run",
     "test:watch": "npm run generate-manifest && vitest",
-    "test:coverage": "vitest run --coverage"
+    "test:coverage": "npm run generate-manifest && vitest run --coverage"
   },
   "repository": {
     "type": "git",

packages/create/scripts/generate-manifest.mjs

@@ -3,6 +3,7 @@ import {
   mkdirSync,
   readFileSync,
   readdirSync,
+  rmSync,
   writeFileSync,
 } from 'node:fs'
 import { dirname, extname, join, relative, resolve } from 'node:path'
@@ -11,6 +12,7 @@ import { fileURLToPath } from 'node:url'
 const packageDir = resolve(dirname(fileURLToPath(import.meta.url)), '..')
 const frameworksDir = resolve(packageDir, 'src/frameworks')
 const outputFile = resolve(packageDir, 'src/generated/create-manifest.ts')
+const workerOutputDir = resolve(packageDir, 'src/generated/worker')
 
 const binaryExtensions = new Set(['.png', '.jpg', '.jpeg', '.gif', '.svg', '.ico'])
 const templateRenderers = new Map()
@@ -250,8 +252,8 @@ function compileTemplate(template) {
   return lines.join('\n')
 }
 
-function createTemplateRendererSource() {
-  const entries = Array.from(templateRenderers.entries()).sort(([a], [b]) =>
+function createTemplateRendererSource(renderers = templateRenderers) {
+  const entries = Array.from(renderers.entries()).sort(([a], [b]) =>
     a.localeCompare(b),
   )
 
@@ -331,7 +333,7 @@ type TemplateRenderContext = {
   getPackageManagerExecuteScript: (...args: Array<any>) => string
   relativePath: (...args: Array<any>) => string
   integrationImportContent: (...args: Array<any>) => string
-  integrationImportCode: (...args: Array<any>) => string
+  integrationImportCode: (...args: Array<any>) => string | undefined
   renderTemplate: (content: string) => string
   ignoreFile: () => never
 }
@@ -376,6 +378,10 @@ const templateRenderers: Record<string, TemplateRenderer> = {
 ${mapEntries}
 }
 
+export function hasManifestTemplate(template: string) {
+  return getManifestTemplateKey(template) in templateRenderers
+}
+
 export function renderManifestTemplate(
   template: string,
   context: TemplateRenderContext,
@@ -390,6 +396,162 @@ export function renderManifestTemplate(
 `
 }
 
+function createTemplateRenderersForFrameworkBase(framework) {
+  const renderers = new Map()
+
+  for (const [file, contents] of Object.entries(framework.base)) {
+    if (file.endsWith('.ejs')) {
+      renderers.set(getTemplateKey(contents), compileTemplate(contents))
+    }
+  }
+
+  return renderers
+}
+
+function createTemplateRenderersForAddOn(addOn) {
+  const renderers = new Map()
+
+  for (const [file, contents] of Object.entries(addOn.files)) {
+    if (file.endsWith('.ejs')) {
+      renderers.set(getTemplateKey(contents), compileTemplate(contents))
+    }
+  }
+
+  if (addOn.packageTemplate) {
+    renderers.set(
+      getTemplateKey(addOn.packageTemplate),
+      compileTemplate(addOn.packageTemplate),
+    )
+  }
+
+  if (addOn.readmeIsEjs && addOn.readme) {
+    renderers.set(getTemplateKey(addOn.readme), compileTemplate(addOn.readme))
+  }
+
+  return renderers
+}
+
+function stripAddOnForCatalog(addOn) {
+  const {
+    files: _files,
+    deletedFiles: _deletedFiles,
+    packageTemplate: _packageTemplate,
+    readme: _readme,
+    readmeIsEjs: _readmeIsEjs,
+    ...metadata
+  } = addOn
+
+  return metadata
+}
+
+function stripFrameworkForCatalog(framework) {
+  const { base: _base, addOns, ...metadata } = framework
+
+  return {
+    ...metadata,
+    addOns: addOns.map(stripAddOnForCatalog),
+  }
+}
+
+function toModuleSegment(value) {
+  return value.toLowerCase().replace(/[^a-z0-9_-]+/g, '-')
+}
+
+function writeGeneratedModule(file, source) {
+  mkdirSync(dirname(file), { recursive: true })
+  writeFileSync(
+    file,
+    `// Generated by scripts/generate-manifest.mjs. Do not edit by hand.\n${source}`,
+  )
+}
+
+function writeWorkerManifest(manifest) {
+  rmSync(workerOutputDir, { recursive: true, force: true })
+
+  writeGeneratedModule(
+    join(workerOutputDir, 'catalog.ts'),
+    `export const manifestCatalog = ${JSON.stringify(
+      {
+        frameworks: manifest.map(stripFrameworkForCatalog),
+      },
+      null,
+      2,
+    )}\n`,
+  )
+
+  const frameworkLoaders = []
+  const addOnLoaders = []
+
+  for (const framework of manifest) {
+    const frameworkSegment = toModuleSegment(framework.id)
+    const frameworkModule = `./frameworks/${frameworkSegment}.js`
+    frameworkLoaders.push([framework.id, frameworkModule])
+
+    writeGeneratedModule(
+      join(workerOutputDir, 'frameworks', `${frameworkSegment}.ts`),
+      `${createTemplateRendererSource(
+        createTemplateRenderersForFrameworkBase(framework),
+      )}\n\nexport const framework = ${JSON.stringify(
+        {
+          id: framework.id,
+          base: framework.base,
+        },
+        null,
+        2,
+      )}\n`,
+    )
+
+    for (const addOn of framework.addOns) {
+      const addOnSegment = toModuleSegment(addOn.id)
+      const addOnModule = `./frameworks/${frameworkSegment}/add-ons/${addOnSegment}.js`
+      addOnLoaders.push([framework.id, addOn.id, addOnModule])
+
+      writeGeneratedModule(
+        join(
+          workerOutputDir,
+          'frameworks',
+          frameworkSegment,
+          'add-ons',
+          `${addOnSegment}.ts`,
+        ),
+        `${createTemplateRendererSource(
+          createTemplateRenderersForAddOn(addOn),
+        )}\n\nexport const addOn = ${JSON.stringify(addOn, null, 2)}\n`,
+      )
+    }
+  }
+
+  const frameworkLoaderSource = frameworkLoaders
+    .map(
+      ([frameworkId, modulePath]) =>
+        `    ${JSON.stringify(frameworkId)}: () => import(${JSON.stringify(
+          modulePath,
+        )}),`,
+    )
+    .join('\n')
+
+  const addOnLoaderGroups = manifest
+    .map((framework) => {
+      const entries = addOnLoaders
+        .filter(([frameworkId]) => frameworkId === framework.id)
+        .map(
+          ([, addOnId, modulePath]) =>
+            `      ${JSON.stringify(addOnId)}: () => import(${JSON.stringify(
+              modulePath,
+            )}),`,
+        )
+        .join('\n')
+
+      return `    ${JSON.stringify(framework.id)}: {\n${entries}\n    },`
+    })
+    .join('\n')
+
+  writeGeneratedModule(
+    join(workerOutputDir, 'bundled-loader.ts'),
+    `const frameworkLoaders = {\n${frameworkLoaderSource}\n}\n\nconst addOnLoaders = {\n${addOnLoaderGroups}\n}\n\nexport function createBundledWorkerManifestLoader() {\n  return {\n    async loadCatalog() {\n      const module = await import('./catalog.js')\n      return module.manifestCatalog\n    },\n    async loadFramework(frameworkId: string) {\n      const load = frameworkLoaders[frameworkId as keyof typeof frameworkLoaders]\n      if (!load) {\n        throw new Error(\`Framework \${frameworkId} not found in bundled worker manifest\`)\n      }\n      const module = await load()\n      return {\n        ...module.framework,\n        renderManifestTemplate: module.renderManifestTemplate,\n        hasManifestTemplate: module.hasManifestTemplate,\n      }\n    },\n    async loadAddOn(frameworkId: string, addOnId: string) {\n      const frameworkAddOnLoaders = addOnLoaders[frameworkId as keyof typeof addOnLoaders]\n      const load = frameworkAddOnLoaders?.[addOnId as keyof typeof frameworkAddOnLoaders]\n      if (!load) {\n        throw new Error(\`Add-on \${addOnId} not found in bundled worker manifest for framework \${frameworkId}\`)\n      }\n      const module = await load()\n      return {\n        ...module.addOn,\n        renderManifestTemplate: module.renderManifestTemplate,\n        hasManifestTemplate: module.hasManifestTemplate,\n      }\n    },\n  }\n}\n`,
+  )
+}
+
 const manifest = [createFramework('react'), createFramework('solid')]
 
 mkdirSync(dirname(outputFile), { recursive: true })
@@ -405,3 +567,5 @@ writeFileSync(
       2,
     )}\n`,
 )
+
+writeWorkerManifest(manifest)

packages/create/src/edge-frameworks.ts

@@ -1,4 +1,11 @@
-import { createManifestFrameworks } from './generated/create-manifest.js'
+import {
+  createManifestFrameworks,
+  renderManifestTemplate,
+} from './generated/create-manifest.js'
+import {
+  registerTemplateRenderer,
+  setDefaultTemplateRenderer,
+} from './edge-render.js'
 
 import type {
   AddOn,
@@ -33,7 +40,13 @@ export function createFrameworkFromManifest(
   }
 }
 
-const frameworks = createManifestFrameworks().map(createFrameworkFromManifest)
+setDefaultTemplateRenderer(renderManifestTemplate)
+
+const frameworks = createManifestFrameworks().map((frameworkDefinition) => {
+  const framework = createFrameworkFromManifest(frameworkDefinition)
+  registerTemplateRenderer(framework, renderManifestTemplate)
+  return framework
+})
 
 export function getFrameworkById(id: string) {
   if (id === 'react-cra') {

packages/create/src/edge-package-json.ts

@@ -1,4 +1,4 @@
-import { render } from './edge-render.js'
+import { renderForOptions } from './edge-render.js'
 import { formatCommand, sortObject } from './utils.js'
 import { getPackageManagerExecuteCommand } from './package-manager.js'
 
@@ -151,7 +151,9 @@ export function createPackageJSON(options: Options) {
       }
 
       try {
-        addOnPackageJSON = JSON.parse(render(addOn.packageTemplate, templateValues))
+        addOnPackageJSON = JSON.parse(
+          renderForOptions(options, addOn.packageTemplate, templateValues),
+        )
       } catch (error) {
         console.error(
           `Error processing package.json.ejs for add-on ${addOn.id}:`,