@ecomiq/storefront 2.0.3 → 2.0.7

package/README.md

@@ -54,4 +54,14 @@ npx ecomiq clean
 npx ecomiq dev
 ```
 
+### Runtime de desarrollo
+
+`ecomiq dev` usa **Node** por defecto. Para emular Workers en local:
+
+```js
+dev: { port: 3000, runtime: 'workerd' },
+```
+
+`ecomiq build` / `deploy` siempre empaquetan para Cloudflare Workers.
+
 Ver el monorepo [ecomiq-storefront](https://github.com/ecomiq/ecomiq-storefront) para la app de referencia y más documentación.

package/bin/ecomiq.mjs

@@ -16,7 +16,7 @@ import { resolve, dirname } from 'node:path'
 import { fileURLToPath, pathToFileURL } from 'node:url'
 import { generateApp, watchPages } from '../src/codegen.mjs'
 import { parseConfig } from '../src/config.mjs'
-import { createViteConfig } from '../src/vite-inline.mjs'
+import { createViteConfig, resolveDevRuntime } from '../src/vite-inline.mjs'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
 const cwd = process.cwd()
@@ -80,9 +80,17 @@ export async function runCli(command = process.argv[2] ?? 'help') {
     case 'dev': {
       const config = await prepare()
       const port = config.dev?.port ?? 3000
-      banner(`dev · ${config.name ?? 'tienda'} ${c.dim('http://localhost:' + port)}`)
+      const runtime = resolveDevRuntime({ config })
       const { createServer } = await import('vite')
-      const viteConfig = createViteConfig({ appDir, config, projectRoot: cwd })
+      const viteConfig = createViteConfig({
+        appDir,
+        config,
+        projectRoot: cwd,
+        runtime,
+      })
+      banner(
+        `dev · ${config.name ?? 'tienda'} ${c.dim(`· runtime ${runtime}`)} ${c.dim('http://localhost:' + port)}`,
+      )
       const server = await createServer({
         ...viteConfig,
         server: {
@@ -115,7 +123,9 @@ export async function runCli(command = process.argv[2] ?? 'help') {
       const config = await prepare()
       banner(`build · Cloudflare Workers`)
       const { createBuilder } = await import('vite')
-      const builder = await createBuilder(createViteConfig({ appDir, config, projectRoot: cwd }))
+      const builder = await createBuilder(
+        createViteConfig({ appDir, config, projectRoot: cwd, runtime: 'workerd' }),
+      )
       await builder.buildApp()
       console.log(c.green('\n  ✔ Build listo en .ecomiq/dist\n'))
       break
@@ -124,7 +134,9 @@ export async function runCli(command = process.argv[2] ?? 'help') {
       const config = await prepare()
       banner(`deploy · Cloudflare Workers`)
       const { createBuilder } = await import('vite')
-      const builder = await createBuilder(createViteConfig({ appDir, config, projectRoot: cwd }))
+      const builder = await createBuilder(
+        createViteConfig({ appDir, config, projectRoot: cwd, runtime: 'workerd' }),
+      )
       await builder.buildApp()
       // @cloudflare/vite-plugin emite la config final del Worker junto al build
       const built = resolve(appDir, 'dist', 'server', 'wrangler.json')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecomiq/storefront",
-  "version": "2.0.3",
+  "version": "2.0.7",
   "description": "Micro framework SSR de Ecomiq para storefronts. Páginas, datos y deploy sin configurar nada.",
   "type": "module",
   "license": "MIT",

package/src/config.d.ts

@@ -43,6 +43,8 @@ export interface EcomiqConfigInput {
   dev?: {
     port?: number
     apiBaseUrl?: string
+    /** Default `node`. `workerd` emula Cloudflare en local. */
+    runtime?: 'workerd' | 'node'
   }
   deploy?: {
     target?: 'cloudflare'

package/src/config.mjs

@@ -124,6 +124,12 @@ const configSchema = z.object({
     .object({
       port: z.number().int().default(3000),
       apiBaseUrl: z.string().url(),
+      /**
+       * Runtime SSR en `ecomiq dev`. Default: `node`.
+       * Usa `workerd` para emular Cloudflare Workers en local.
+       * `ecomiq build` / `deploy` siempre usan workerd.
+       */
+      runtime: z.enum(['workerd', 'node']),
     })
     .partial()
     .optional(),

package/src/vite-inline.mjs

@@ -3,6 +3,9 @@
  * No existe vite.config.ts en el proyecto del usuario ni en .ecomiq:
  * los plugins se importan aquí (contexto del framework) y se pasan como
  * instancias, así la resolución de módulos nunca depende del proyecto.
+ *
+ * Alineado con el ejemplo oficial TanStack Start + Cloudflare:
+ * https://github.com/TanStack/router/tree/main/examples/react/start-basic-cloudflare
  */
 import { dirname, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
@@ -17,28 +20,6 @@ const postcssBrowserStub = fileURLToPath(
 
 const frameworkRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..')
 
-/** Packages que workerd debe ver como ESM (sin prebundle CJS con `require`). */
-const SSR_NO_EXTERNAL = [
-  '@tanstack/react-start',
-  '@tanstack/react-router',
-  '@tanstack/react-query',
-  '@tanstack/router-core',
-  '@tanstack/history',
-  '@tanstack/react-store',
-  '@tanstack/start-server-core',
-  '@tanstack/start-client-core',
-  '@tanstack/start-storage-context',
-  '@ecomiq/storefront',
-  '@ecomiq/core',
-]
-
-const OPTIMIZE_EXCLUDE = [
-  '@tanstack/react-start',
-  '@tanstack/start-server-core',
-  '@tanstack/start-client-core',
-  '@tanstack/react-router',
-]
-
 function resolveSanitizeHtmlPostcss(source, importer) {
   if (source !== 'postcss') return null
   if (!importer?.includes('/sanitize-html/')) return null
@@ -74,7 +55,52 @@ function sanitizeHtmlClientBoundary() {
   }
 }
 
-export function createViteConfig({ appDir, config, projectRoot }) {
+/**
+ * TanStack Start marca `@tanstack/react-router` como `resolve.external` fuera de
+ * su monorepo. Cloudflare Vite plugin no lo tolera y workerd acaba ejecutando
+ * CJS con `require` → "require is not defined".
+ *
+ * Solo aplica en runtime `workerd`. En `node`, React y otras deps CJS deben
+ * quedar external: `noExternal` las pasa por el module runner ESM de Vite y
+ * falla con "module is not defined".
+ * @see https://github.com/TanStack/router/issues/5291
+ */
+function bundleSsrDependenciesForWorkerd() {
+  return {
+    name: 'ecomiq:ssr-no-external',
+    configEnvironment(name) {
+      if (name !== 'ssr') return
+      return {
+        resolve: {
+          external: [],
+          noExternal: true,
+        },
+      }
+    },
+    configResolved(config) {
+      const ssr = config.environments?.ssr
+      if (ssr?.resolve) {
+        ssr.resolve.external = []
+        ssr.resolve.noExternal = true
+      }
+    },
+  }
+}
+
+/**
+ * @param {{ appDir: string, config?: object, projectRoot?: string, runtime?: 'workerd' | 'node' }} opts
+ */
+export function resolveDevRuntime({ config, runtime } = {}) {
+  // Default: Node (compatible con npm/CodeSandbox). Opt-in a workerd con
+  // `dev.runtime: 'workerd'` (p. ej. monorepo local). build/deploy siempre
+  // fuerza workerd desde la CLI.
+  return runtime ?? config?.dev?.runtime ?? 'node'
+}
+
+/**
+ * @param {{ appDir: string, config?: object, projectRoot?: string, runtime?: 'workerd' | 'node' }} opts
+ */
+export function createViteConfig({ appDir, config, projectRoot, runtime }) {
   const root = projectRoot ?? resolve(appDir, '..')
   const allow = [
     '..',
@@ -84,6 +110,37 @@ export function createViteConfig({ appDir, config, projectRoot }) {
     resolve(root, 'node_modules'),
   ]
 
+  const resolvedRuntime = resolveDevRuntime({ config, runtime })
+
+  const plugins = [tailwindcss()]
+
+  if (resolvedRuntime === 'workerd') {
+    plugins.unshift(bundleSsrDependenciesForWorkerd())
+  }
+
+  // workerd emula Cloudflare Workers (opt-in en `ecomiq dev`).
+  // Default es Node; build/deploy siempre usan workerd.
+  if (resolvedRuntime === 'workerd') {
+    plugins.push(
+      cloudflare({
+        configPath: resolve(appDir, 'wrangler.jsonc'),
+        viteEnvironment: { name: 'ssr' },
+      }),
+    )
+  }
+
+  plugins.push(
+    tanstackStart({
+      srcDirectory: 'src',
+      router: {
+        routesDirectory: 'routes',
+        generatedRouteTree: 'routeTree.gen.ts',
+      },
+    }),
+    sanitizeHtmlClientBoundary(),
+    viteReact(),
+  )
+
   return {
     root: appDir,
     configFile: false,
@@ -97,35 +154,12 @@ export function createViteConfig({ appDir, config, projectRoot }) {
         '@tanstack/react-query',
       ],
     },
-    // Bundlear TanStack en SSR (no externalizar) evita `file://` de pnpm y
-    // mantiene ESM. No usar optimizeDeps.include: el prebundle mete `require`
-    // y workerd (ESM) falla con "require is not defined".
-    ssr: {
-      noExternal: [...SSR_NO_EXTERNAL],
-    },
-    optimizeDeps: {
-      exclude: [...OPTIMIZE_EXCLUDE],
-    },
-    plugins: [
-      tailwindcss(),
-      // Emula el runtime de Workers en dev y empaqueta para Cloudflare en build.
-      cloudflare({
-        configPath: resolve(appDir, 'wrangler.jsonc'),
-        viteEnvironment: { name: 'ssr' },
-      }),
-      tanstackStart({
-        srcDirectory: 'src',
-        router: {
-          routesDirectory: 'routes',
-          generatedRouteTree: 'routeTree.gen.ts',
-        },
-      }),
-      sanitizeHtmlClientBoundary(),
-      viteReact(),
-    ],
+    plugins,
     build: {
-      // Un solo CSS; nombre estable → SSR y client apuntan al mismo asset en Workers.
       cssCodeSplit: false,
+      commonjsOptions: {
+        transformMixedEsModules: true,
+      },
       rollupOptions: {
         output: {
           assetFileNames: (assetInfo) => {
@@ -137,10 +171,7 @@ export function createViteConfig({ appDir, config, projectRoot }) {
       },
     },
     server: {
-      fs: {
-        // pages/, lib/ y public/ del usuario viven un nivel arriba de .ecomiq
-        allow,
-      },
+      fs: { allow },
     },
   }
 }