@ecomiq/storefront 2.1.3 → 3.0.0

package/src/ui/storefront-error.tsx

@@ -1,49 +0,0 @@
-import { House, RefreshCw, TriangleAlert } from 'lucide-react'
-import { Button, buttonVariants } from './button'
-
-export interface StorefrontErrorProps {
-  title?: string
-  description?: string
-  onRetry?: () => void
-  returnTo?: string
-  returnLabel?: string
-}
-
-export function StorefrontError({
-  title = 'No pudimos cargar esta página',
-  description = 'La tienda no respondió como esperábamos. Inténtalo nuevamente en unos segundos.',
-  onRetry,
-  returnTo = '/',
-  returnLabel = 'Volver al inicio',
-}: StorefrontErrorProps) {
-  return (
-    <section className="mx-auto flex min-h-[55vh] w-full max-w-6xl items-center px-4 py-16" role="alert">
-      <div className="w-full max-w-xl border-l-2 border-primary pl-5 sm:pl-7">
-        <div className="mb-5 flex size-11 items-center justify-center rounded-lg bg-muted text-muted-foreground">
-          <TriangleAlert className="size-5" aria-hidden="true" />
-        </div>
-        <p className="mb-2 text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
-          Interrupción temporal
-        </p>
-        <h1 className="text-balance text-2xl font-semibold tracking-[-0.02em] sm:text-3xl">
-          {title}
-        </h1>
-        <p className="mt-3 max-w-md text-sm leading-6 text-muted-foreground">
-          {description}
-        </p>
-        <div className="mt-6 flex flex-wrap gap-2">
-          {onRetry ? (
-            <Button onClick={onRetry} className="min-h-10">
-              <RefreshCw aria-hidden="true" />
-              Intentar otra vez
-            </Button>
-          ) : null}
-          <a href={returnTo} className={buttonVariants({ variant: 'outline' })}>
-            <House aria-hidden="true" />
-            {returnLabel}
-          </a>
-        </div>
-      </div>
-    </section>
-  )
-}

package/src/utils.ts

@@ -1,36 +0,0 @@
-import type { StorefrontSettings } from "@ecomiq/core";
-
-type StorefrontCmsPage = StorefrontSettings['cms']['pages'][number]
-
-function isRenderableCmsPage(p: StorefrontCmsPage): boolean {
-  return p.status === "published";
-}
-
-export function findStorefrontCmsPageBySlug(
-  settings: StorefrontSettings | null | undefined,
-  slug: string
-) {
-  const pages = settings?.cms?.pages;
-  if (!pages?.length) return null;
-  const raw = pages.find(
-    (p) => p.slug === slug && isRenderableCmsPage(p)
-  );
-  if (!raw) return null;
-  return raw;
-}
-
-export function cmsBranding(settings: StorefrontSettings | null | undefined) {
-  return settings?.cms?.settings?.branding;
-}
-
-export function cmsSeo(settings: StorefrontSettings | null | undefined) {
-  return settings?.cms?.settings?.seo;
-}
-
-export function storeDisplayName(settings: StorefrontSettings | null | undefined) {
-  return settings?.store?.name ?? cmsSeo(settings)?.siteName;
-}
-
-export function storeSeoDescription(settings: StorefrontSettings | null | undefined) {
-  return cmsSeo(settings)?.metaDescription ?? settings?.store?.description;
-}

package/src/vite-inline.mjs

@@ -1,263 +0,0 @@
-/**
- * Config interna de Vite, construida en memoria por la CLI.
- * 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 { readFileSync } from 'node:fs'
-import { dirname, isAbsolute, resolve } from 'node:path'
-import { fileURLToPath } from 'node:url'
-import { tanstackStart } from '@tanstack/react-start/plugin/vite'
-import viteReact from '@vitejs/plugin-react'
-import tailwindcss from '@tailwindcss/vite'
-import { cloudflare } from '@cloudflare/vite-plugin'
-import basicSsl from '@vitejs/plugin-basic-ssl'
-
-const postcssBrowserStub = fileURLToPath(
-  new URL('./runtime/postcss-browser-stub.mjs', import.meta.url),
-)
-
-const frameworkRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..')
-const designBridgePath = resolve(frameworkRoot, 'public', 'design-bridge.js')
-
-/** Sirve /design-bridge.js desde el package (no desde public/ del usuario). */
-function designBridgePlugin() {
-  return {
-    name: 'ecomiq:design-bridge',
-    configureServer(server) {
-      server.middlewares.use((req, res, next) => {
-        const url = req.url?.split('?')[0]
-        if (url !== '/design-bridge.js') return next()
-        try {
-          const body = readFileSync(designBridgePath)
-          res.setHeader('Content-Type', 'application/javascript; charset=utf-8')
-          res.setHeader('Cache-Control', 'no-store')
-          res.end(body)
-        } catch (error) {
-          next(error)
-        }
-      })
-    },
-  }
-}
-function resolveSanitizeHtmlPostcss(source, importer) {
-  if (source !== 'postcss') return null
-  if (!importer?.includes('/sanitize-html/')) return null
-  return postcssBrowserStub
-}
-
-function sanitizeHtmlClientBoundary() {
-  return {
-    name: 'ecomiq:sanitize-html-client-boundary',
-    enforce: 'pre',
-    applyToEnvironment(environment) {
-      return environment.name === 'client'
-    },
-    configEnvironment(name, config) {
-      if (name !== 'client') return
-      const rolldownOptions = config.optimizeDeps?.rolldownOptions ?? {}
-      return {
-        optimizeDeps: {
-          rolldownOptions: {
-            ...rolldownOptions,
-            plugins: [
-              ...(rolldownOptions.plugins ?? []),
-              {
-                name: 'ecomiq:sanitize-html-optimizer-boundary',
-                resolveId: resolveSanitizeHtmlPostcss,
-              },
-            ],
-          },
-        },
-      }
-    },
-    resolveId: resolveSanitizeHtmlPostcss,
-  }
-}
-
-/**
- * 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'
-}
-
-/**
- * HTTPS en `ecomiq dev` (localhost).
- * - `dev.https: true` → certificado auto (plugin-basic-ssl)
- * - `dev.https: { cert, key }` → PEM propios (paths relativos al project root)
- *
- * @param {{ config?: object, projectRoot?: string, appDir?: string }} opts
- * @returns {{ enabled: boolean, plugin?: object, https?: import('node:https').ServerOptions }}
- */
-export function resolveDevHttps({ config, projectRoot, appDir } = {}) {
-  const https = config?.dev?.https
-  if (!https) return { enabled: false }
-
-  if (https === true) {
-    return {
-      enabled: true,
-      plugin: basicSsl({
-        name: 'ecomiq',
-        domains: ['localhost', '127.0.0.1', '::1'],
-      }),
-    }
-  }
-
-  if (typeof https === 'object' && https !== null) {
-    const root = projectRoot ?? (appDir ? resolve(appDir, '..') : process.cwd())
-    const certPath = resolvePathFromRoot(root, https.cert)
-    const keyPath = resolvePathFromRoot(root, https.key)
-    return {
-      enabled: true,
-      https: {
-        cert: readFileSync(certPath),
-        key: readFileSync(keyPath),
-      },
-    }
-  }
-
-  return { enabled: false }
-}
-
-function resolvePathFromRoot(root, value) {
-  if (typeof value !== 'string' || !value.trim()) {
-    throw new Error('dev.https.cert y dev.https.key deben ser paths a archivos PEM')
-  }
-  return isAbsolute(value) ? value : resolve(root, value)
-}
-
-/**
- * @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 = [
-    '..',
-    root,
-    frameworkRoot,
-    resolve(appDir, 'node_modules'),
-    resolve(root, 'node_modules'),
-  ]
-
-  const resolvedRuntime = resolveDevRuntime({ config, runtime })
-  const resolvedHttps = resolveDevHttps({ config, projectRoot: root, appDir })
-
-  const plugins = [tailwindcss(), designBridgePlugin()]
-
-  if (resolvedHttps.plugin) {
-    plugins.push(resolvedHttps.plugin)
-  }
-
-  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,
-    publicDir: resolve(appDir, '../public'),
-    resolve: {
-      // Evita dos copias de React/context: el template resuelve desde
-      // node_modules del proyecto y `.ecomiq` desde symlinks — sin dedupe,
-      // AppEcomiqProvider y useSettings no comparten el mismo createContext
-      // (falla al re-render post useSession de Better Auth).
-      // No aliasar `@ecomiq/storefront` → rompe subpaths (`/internal/*`).
-      dedupe: [
-        'react',
-        'react-dom',
-        '@ecomiq/storefront',
-        '@ecomiq/core',
-        '@tanstack/react-router',
-        '@tanstack/react-start',
-        '@tanstack/react-query',
-        'better-auth',
-      ],
-    },
-    plugins,
-    build: {
-      cssCodeSplit: false,
-      commonjsOptions: {
-        transformMixedEsModules: true,
-      },
-      rollupOptions: {
-        output: {
-          assetFileNames: (assetInfo) => {
-            const name = assetInfo.names?.join('') ?? assetInfo.name ?? ''
-            if (name.endsWith('.css')) return 'assets/styles[extname]'
-            return 'assets/[name]-[hash][extname]'
-          },
-        },
-      },
-    },
-    server: {
-      // `true` → escucha en 0.0.0.0 y muestra Network URL (IP local), no solo localhost.
-      // Override: `dev.host: false | 'localhost' | string` en ecomiq.config.
-      host: config?.dev?.host ?? true,
-      allowedHosts: config?.dev?.host ?? true,
-      fs: { allow },
-      ...(resolvedHttps.https ? { https: resolvedHttps.https } : {}),
-    },
-  }
-}

package/templates/__root.tsx

@@ -1,83 +0,0 @@
-/* Generado por Ecomiq — no editar. */
-import { useState, type ReactNode } from 'react'
-import { createRootRoute, HeadContent, Scripts, Outlet, Link } from '@tanstack/react-router'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { AppEcomiqProvider, AuthProvider } from '@ecomiq/storefront/internal/context'
-import { buildRootHead } from '@ecomiq/storefront/internal/head'
-import { serverApi } from '@ecomiq/storefront'
-import { StorefrontError } from '@ecomiq/storefront/ui'
-import Layout from '../user-layout'
-import publicConfig from '../app-config'
-// Side-effect: Start lo trata como asset del manifest (mismo URL en SSR y client).
-// Evita el FOUC por hashes distintos con `?url` en head().
-import '../styles.css'
-
-export const Route = createRootRoute({
-  loader: () => serverApi.getSettings(),
-  head: ({ loaderData }) => buildRootHead(loaderData),
-  component: RootComponent,
-  errorComponent: RootError,
-  notFoundComponent: NotFound,
-})
-
-function RootComponent() {
-  const settings = Route.useLoaderData()
-  const [queryClient] = useState(
-    () =>
-      new QueryClient({
-        defaultOptions: { queries: { staleTime: 30_000, retry: 1 } },
-      }),
-  )
-
-  return (
-    <RootDocument language={settings.store.language}>
-      <QueryClientProvider client={queryClient}>
-        <AppEcomiqProvider config={publicConfig} settings={settings}>
-          <AuthProvider>
-            <Layout config={publicConfig} settings={settings}>
-              <Outlet />
-            </Layout>
-          </AuthProvider>
-        </AppEcomiqProvider>
-      </QueryClientProvider>
-    </RootDocument>
-  )
-}
-
-function RootDocument({ children, language }: { children: ReactNode; language: string }) {
-  return (
-    <html lang={language} suppressHydrationWarning>
-      <head>
-        <HeadContent />
-      </head>
-      <body className="bg-background text-foreground antialiased">
-        {children}
-        {/* Puente de design mode (solo dev): el parent (admin) pinta hover/select. */}
-        {import.meta.env.DEV ? (
-          <script src="/design-bridge.js?v=1.0.0" defer />
-        ) : null}
-        <Scripts />
-      </body>
-    </html>
-  )
-}
-
-function RootError({ reset }: { reset: () => void }) {
-  return (
-    <RootDocument language="es">
-      <StorefrontError onRetry={reset} />
-    </RootDocument>
-  )
-}
-
-function NotFound() {
-  return (
-    <div className="flex flex-col items-center gap-3 py-24 text-center">
-      <p className="text-6xl font-bold tracking-tight">404</p>
-      <p className="text-muted-foreground">Esta página no existe.</p>
-      <Link to="/" className="text-sm underline underline-offset-4">
-        Volver al inicio
-      </Link>
-    </div>
-  )
-}

package/templates/router.tsx

@@ -1,19 +0,0 @@
-/* Generado por Ecomiq — no editar. */
-import { createRouter } from '@tanstack/react-router'
-import { routeTree } from './routeTree.gen'
-
-export function getRouter() {
-  return createRouter({
-    routeTree,
-    defaultPreload: 'intent',
-    defaultPreloadDelay: 200,
-    scrollRestoration: true,
-    defaultStaleTime: 30_000,
-  })
-}
-
-declare module '@tanstack/react-router' {
-  interface Register {
-    router: ReturnType<typeof getRouter>
-  }
-}