@ecomiq/storefront 2.0.0 → 2.0.2

package/README.md

@@ -47,4 +47,11 @@ npx ecomiq build
 npx ecomiq deploy
 ```
 
+Si actualizas el package y `.ecomiq` quedó de una versión anterior:
+
+```bash
+npx ecomiq clean
+npx ecomiq dev
+```
+
 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

@@ -82,7 +82,18 @@ export async function runCli(command = process.argv[2] ?? 'help') {
       const port = config.dev?.port ?? 3000
       banner(`dev · ${config.name ?? 'tienda'} ${c.dim('http://localhost:' + port)}`)
       const { createServer } = await import('vite')
-      const server = await createServer({ ...createViteConfig({ appDir, config }), server: { port, fs: { allow: ['..'] } } })
+      const viteConfig = createViteConfig({ appDir, config, projectRoot: cwd })
+      const server = await createServer({
+        ...viteConfig,
+        server: {
+          ...viteConfig.server,
+          port,
+          fs: {
+            ...viteConfig.server?.fs,
+            allow: [...new Set([...(viteConfig.server?.fs?.allow ?? []), '..', cwd, frameworkRoot])],
+          },
+        },
+      })
       await server.listen()
       const pageWatcher = watchPages({
         cwd,
@@ -104,7 +115,7 @@ 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 }))
+      const builder = await createBuilder(createViteConfig({ appDir, config, projectRoot: cwd }))
       await builder.buildApp()
       console.log(c.green('\n  ✔ Build listo en .ecomiq/dist\n'))
       break
@@ -113,7 +124,7 @@ 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 }))
+      const builder = await createBuilder(createViteConfig({ appDir, config, projectRoot: cwd }))
       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.0",
+  "version": "2.0.2",
   "description": "Micro framework SSR de Ecomiq para storefronts. Páginas, datos y deploy sin configurar nada.",
   "type": "module",
   "license": "MIT",

package/src/codegen.mjs

@@ -30,7 +30,9 @@ import {
   readlinkSync,
   unlinkSync,
   statSync,
+  realpathSync,
 } from 'node:fs'
+import { createRequire } from 'node:module'
 import { resolve, join, relative, dirname, isAbsolute, sep } from 'node:path'
 
 const HEADER = '/* Generado por Ecomiq — no editar. */\n'
@@ -68,7 +70,7 @@ export async function generateApp({ cwd, appDir, frameworkRoot, config }) {
   mkdirSync(routesDir, { recursive: true })
 
   // ── 1. dependencias internas resolubles desde .ecomiq (soporta npm, pnpm y monorepos) ──
-  linkFrameworkDependencies(appDir, frameworkRoot)
+  linkFrameworkDependencies(appDir, frameworkRoot, cwd)
 
   // ── 2. package.json interno (type: module para que Vite resuelva bien) ──
   writeGeneratedFile(
@@ -539,18 +541,18 @@ function writeGeneratedFile(path, contents) {
 }
 
 /**
- * Crea .ecomiq/node_modules con symlinks a las dependencias del framework
- * y al propio framework. Así el código generado resuelve sus imports sin
- * importar el package manager ni el layout (hoisted, pnpm, monorepo).
+ * Crea `.ecomiq/node_modules` con symlinks a las dependencias del framework.
+ *
+ * Workerd (Cloudflare Vite plugin) resuelve desde la raíz `.ecomiq`, así que
+ * no basta con el hoisting del proyecto: hay que materializar los packages
+ * ahí. En installs npm/pnpm/yarn las deps suelen vivir en el node_modules del
+ * proyecto (o en el store de pnpm), no bajo `@ecomiq/storefront/node_modules`.
  */
-function linkFrameworkDependencies(appDir, frameworkRoot) {
-  const source = join(frameworkRoot, 'node_modules')
+function linkFrameworkDependencies(appDir, frameworkRoot, projectRoot = dirname(appDir)) {
   const target = join(appDir, 'node_modules')
   mkdirSync(target, { recursive: true })
 
-  // el framework mismo, para imports '@ecomiq/storefront/...'
   linkInto(join(target, '@ecomiq'), 'storefront', frameworkRoot)
-  // limpia el nombre legacy del paquete renombrado
   const legacyFramework = join(target, '@ecomiq', 'framework')
   try {
     if (lstatSync(legacyFramework).isSymbolicLink()) unlinkSync(legacyFramework)
@@ -558,12 +560,60 @@ function linkFrameworkDependencies(appDir, frameworkRoot) {
     /* no existía */
   }
 
-  if (!existsSync(source)) return // instalación hoisted: se resuelve subiendo directorios
+  const resolveFrom = [
+    join(frameworkRoot, 'package.json'),
+    join(projectRoot, 'package.json'),
+    join(frameworkRoot, 'src', 'codegen.mjs'),
+  ]
+
+  const manifestPath = join(frameworkRoot, 'package.json')
+  let depNames = []
+  try {
+    const manifest = JSON.parse(readFileSync(manifestPath, 'utf8'))
+    depNames = [
+      ...Object.keys(manifest.dependencies ?? {}),
+      ...Object.keys(manifest.peerDependencies ?? {}),
+    ]
+  } catch {
+    depNames = []
+  }
+
+  // Transitive crítico que Vite/TanStack piden explícitamente en SSR.
+  for (const extra of ['@tanstack/react-store', '@tanstack/history', '@tanstack/router-core']) {
+    if (!depNames.includes(extra)) depNames.push(extra)
+  }
+
+  for (const name of depNames) {
+    const pkgDir = resolvePackageDir(name, resolveFrom)
+    if (!pkgDir) continue
+    linkPackage(target, name, pkgDir)
+  }
+
+  // Fallback: mirror de node_modules locales (monorepo / nested installs).
+  for (const source of [join(frameworkRoot, 'node_modules'), join(projectRoot, 'node_modules')]) {
+    linkNodeModulesTree(source, target)
+  }
+}
+
+function linkPackage(targetRoot, packageName, packageDir) {
+  if (packageName.startsWith('@')) {
+    const [scope, name] = packageName.split('/')
+    if (!scope || !name) return
+    linkInto(join(targetRoot, scope), name, packageDir)
+    return
+  }
+  linkInto(targetRoot, packageName, packageDir)
+}
+
+function linkNodeModulesTree(source, target) {
+  if (!existsSync(source)) return
   for (const entry of readdirSync(source)) {
     if (entry === '.bin' || entry.startsWith('.')) continue
     if (entry.startsWith('@')) {
-      for (const scoped of readdirSync(join(source, entry))) {
-        linkInto(join(target, entry), scoped, join(source, entry, scoped))
+      const scopeDir = join(source, entry)
+      if (!statSync(scopeDir).isDirectory()) continue
+      for (const scoped of readdirSync(scopeDir)) {
+        linkInto(join(target, entry), scoped, join(scopeDir, scoped))
       }
     } else {
       linkInto(target, entry, join(source, entry))
@@ -571,14 +621,69 @@ function linkFrameworkDependencies(appDir, frameworkRoot) {
   }
 }
 
+/**
+ * Resuelve el directorio raíz de un package usando la resolución de Node
+ * (funciona con hoisting npm/yarn y el store de pnpm).
+ */
+function resolvePackageDir(packageName, fromFiles) {
+  for (const fromFile of fromFiles) {
+    if (!existsSync(fromFile)) continue
+    try {
+      const require = createRequire(fromFile)
+      try {
+        return dirname(require.resolve(`${packageName}/package.json`))
+      } catch {
+        const entry = require.resolve(packageName)
+        return findPackageRoot(entry, packageName)
+      }
+    } catch {
+      /* probar siguiente origen */
+    }
+  }
+  return null
+}
+
+function findPackageRoot(startPath, packageName) {
+  let dir = dirname(startPath)
+  while (true) {
+    const pkgPath = join(dir, 'package.json')
+    if (existsSync(pkgPath)) {
+      try {
+        const pkg = JSON.parse(readFileSync(pkgPath, 'utf8'))
+        if (pkg.name === packageName) return dir
+      } catch {
+        /* ignore */
+      }
+    }
+    const parent = dirname(dir)
+    if (parent === dir) return null
+    dir = parent
+  }
+}
+
 function linkInto(dir, name, targetPath) {
   mkdirSync(dir, { recursive: true })
   const linkPath = join(dir, name)
+
+  // Target absoluto y ya resuelto: los symlinks relativos se rompen cuando un
+  // directorio padre es a su vez un symlink (p. ej. /var → /private/var en macOS).
+  let destination
+  try {
+    destination = realpathSync(targetPath)
+  } catch {
+    destination = resolve(targetPath)
+  }
+
   try {
     const current = lstatSync(linkPath)
     if (current.isSymbolicLink()) {
-      const resolved = resolve(dir, readlinkSync(linkPath))
-      if (resolved === resolve(targetPath)) return
+      let resolved
+      try {
+        resolved = realpathSync(linkPath)
+      } catch {
+        resolved = resolve(dir, readlinkSync(linkPath))
+      }
+      if (resolved === destination) return
       unlinkSync(linkPath)
     } else if (current.isDirectory() || current.isFile()) {
       return
@@ -587,7 +692,7 @@ function linkInto(dir, name, targetPath) {
     /* no existe aún */
   }
   try {
-    symlinkSync(targetPath, linkPath, 'junction')
+    symlinkSync(destination, linkPath, 'junction')
   } catch {
     /* FS sin symlinks: la resolución cae al hoisting */
   }

package/src/vite-inline.mjs

@@ -4,7 +4,7 @@
  * los plugins se importan aquí (contexto del framework) y se pasan como
  * instancias, así la resolución de módulos nunca depende del proyecto.
  */
-import { resolve } from 'node:path'
+import { dirname, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { tanstackStart } from '@tanstack/react-start/plugin/vite'
 import viteReact from '@vitejs/plugin-react'
@@ -15,6 +15,8 @@ const postcssBrowserStub = fileURLToPath(
   new URL('./runtime/postcss-browser-stub.mjs', import.meta.url),
 )
 
+const frameworkRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..')
+
 function resolveSanitizeHtmlPostcss(source, importer) {
   if (source !== 'postcss') return null
   if (!importer?.includes('/sanitize-html/')) return null
@@ -50,11 +52,49 @@ function sanitizeHtmlClientBoundary() {
   }
 }
 
-export function createViteConfig({ appDir, config }) {
+export function createViteConfig({ appDir, config, projectRoot }) {
+  const root = projectRoot ?? resolve(appDir, '..')
+  const allow = [
+    '..',
+    root,
+    frameworkRoot,
+    resolve(appDir, 'node_modules'),
+    resolve(root, 'node_modules'),
+  ]
+
   return {
     root: appDir,
     configFile: false,
     publicDir: resolve(appDir, '../public'),
+    resolve: {
+      dedupe: [
+        'react',
+        'react-dom',
+        '@tanstack/react-router',
+        '@tanstack/react-start',
+        '@tanstack/react-query',
+      ],
+    },
+    // Evita que Vite externalice TanStack como file:// absoluto (rompe workerd/pnpm).
+    ssr: {
+      noExternal: [
+        '@tanstack/react-start',
+        '@tanstack/react-router',
+        '@tanstack/react-query',
+        '@tanstack/router-core',
+        '@tanstack/history',
+        '@tanstack/react-store',
+        '@ecomiq/storefront',
+        '@ecomiq/core',
+      ],
+    },
+    optimizeDeps: {
+      include: [
+        '@tanstack/react-start',
+        '@tanstack/react-router',
+        '@tanstack/react-query',
+      ],
+    },
     plugins: [
       tailwindcss(),
       // Emula el runtime de Workers en dev y empaqueta para Cloudflare en build.
@@ -88,7 +128,7 @@ export function createViteConfig({ appDir, config }) {
     server: {
       fs: {
         // pages/, lib/ y public/ del usuario viven un nivel arriba de .ecomiq
-        allow: ['..'],
+        allow,
       },
     },
   }