@ecomiq/storefront 1.1.5 → 2.0.0

package/package.json

@@ -1,101 +1,89 @@
 {
   "name": "@ecomiq/storefront",
-  "description": "SDK headless de storefront Ecomiq: adapters Next.js y TanStack Start sobre React (sin @ecomiq/ui)",
-  "license": "MIT",
+  "version": "2.0.0",
+  "description": "Micro framework SSR de Ecomiq para storefronts. Páginas, datos y deploy sin configurar nada.",
   "type": "module",
-  "publishConfig": {
-    "access": "public"
+  "license": "MIT",
+  "author": "Ecomiq",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ecomiq/ecomiq-storefront.git",
+    "directory": "packages/ecomiq-storefront"
+  },
+  "homepage": "https://github.com/ecomiq/ecomiq-storefront/tree/main/packages/ecomiq-storefront",
+  "bugs": {
+    "url": "https://github.com/ecomiq/ecomiq-storefront/issues"
   },
   "keywords": [
     "ecomiq",
     "storefront",
     "ecommerce",
-    "nextjs",
-    "tanstack-start",
-    "react"
-  ],
-  "sideEffects": [
-    "**/*.css"
+    "ssr",
+    "tanstack",
+    "cloudflare"
   ],
+  "bin": {
+    "ecomiq": "./bin/ecomiq.mjs"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./config": {
+      "types": "./src/config.d.ts",
+      "default": "./src/config.mjs"
+    },
+    "./ui": "./src/ui/index.ts",
+    "./styles.css": "./src/styles.css",
+    "./internal/page": "./src/runtime/page.tsx",
+    "./internal/context": "./src/runtime/context.ts",
+    "./internal/server-config": "./src/server-config-store.ts",
+    "./internal/head": "./src/runtime/head.ts",
+    "./internal/default-layout": "./src/runtime/default-layout.tsx",
+    "./internal/checkout": "./src/pages/checkout.tsx",
+    "./internal/checkout-session": "./src/pages/checkout.$checkoutId.tsx",
+    "./internal/thank-you": "./src/pages/thank-you.tsx",
+    "./package.json": "./package.json"
+  },
   "files": [
-    "dist",
+    "bin",
+    "src",
+    "templates",
     "README.md"
   ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "react-server": {
-        "types": "./dist/index.server.d.ts",
-        "import": "./dist/index.server.js"
-      },
-      "import": "./dist/index.js"
-    },
-    "./react": {
-      "types": "./dist/react.d.ts",
-      "import": "./dist/react.js"
-    },
-    "./react/checkout-page.css": "./dist/react/checkout-page.css",
-    "./react/payment-provider.css": "./dist/react/payment-provider.css",
-    "./react/thank-you-page.css": "./dist/react/thank-you-page.css",
-    "./react/client.css": "./dist/react/client.css",
-    "./nextjs": {
-      "types": "./dist/nextjs.d.ts",
-      "react-server": {
-        "types": "./dist/nextjs.server.d.ts",
-        "import": "./dist/nextjs.server.js"
-      },
-      "import": "./dist/nextjs.js"
-    },
-    "./nextjs/api": {
-      "types": "./dist/nextjs/api.d.ts",
-      "import": "./dist/nextjs/api.js"
-    },
-    "./nextjs/css": "./dist/nextjs/globals.css",
-    "./nextjs/postcss": "./dist/postcss.config.mjs",
-    "./tanstack": {
-      "types": "./dist/tanstack.d.ts",
-      "react-server": {
-        "types": "./dist/tanstack.server.d.ts",
-        "import": "./dist/tanstack.server.js"
-      },
-      "import": "./dist/tanstack.js"
-    },
-    "./tanstack/api": {
-      "types": "./dist/tanstack/api.d.ts",
-      "import": "./dist/tanstack/api.js"
-    }
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "@cloudflare/vite-plugin": "^1.44.0",
+    "@tailwindcss/vite": "^4.3.0",
+    "@tanstack/react-query": "^5.101.0",
+    "@tanstack/react-router": "^1.170.0",
+    "@tanstack/react-start": "^1.168.0",
+    "@vitejs/plugin-react": "^6.0.0",
+    "better-auth": "^1.6.23",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "embla-carousel-autoplay": "^8.6.0",
+    "embla-carousel-fade": "^8.6.0",
+    "embla-carousel-react": "^8.6.0",
+    "lucide-react": "^0.510.0",
+    "tailwind-merge": "^3.2.0",
+    "tailwindcss": "^4.3.0",
+    "vite": "^8.1.0",
+    "wrangler": "^4.100.0",
+    "zod": "^3.25.0",
+    "@ecomiq/core": "^0.1.1"
   },
   "peerDependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "next": "^15.3.0",
-    "@tanstack/react-start": "^1.0.0"
+    "react-dom": "^19.0.0"
   },
-  "peerDependenciesMeta": {
-    "next": {
-      "optional": true
-    },
-    "@tanstack/react-start": {
-      "optional": true
-    }
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0"
   },
-  "version": "1.1.5",
-  "dependencies": {
-    "@hookform/resolvers": "^5.2.2",
-    "@tanstack/react-query": "^5.66.9",
-    "axios": "^1.8.2",
-    "better-auth": "^1.6.0",
-    "canvas-confetti": "^1.9.3",
-    "embla-carousel": "8.5.1",
-    "embla-carousel-autoplay": "8.5.1",
-    "embla-carousel-fade": "8.5.1",
-    "embla-carousel-react": "8.5.1",
-    "lucide-react": "^0.475.0",
-    "next-themes": "^0.4.4",
-    "react-hook-form": "^7.56.1",
-    "sonner": "^2.0.6",
-    "tailwindcss": "^4.0.12",
-    "zod": "^3.25.62",
-    "zustand": "^5.0.3"
-  }
-}
+  "scripts": {}
+}

package/src/api-proxy.ts

@@ -0,0 +1,194 @@
+/**
+ * Proxy HTTP hacia la API storefront de Ecomiq.
+ * /api/settings → {baseUrl}/v1/settings (con x-Store-Domain / x-Store-Id).
+ */
+import { resolveApiBaseUrl } from '@ecomiq/core'
+import { STOREFRONT_ECOMIQ_OAUTH_COOKIE_NAME } from './auth/ecomiq-oauth-password-constants'
+import { getStorefrontClient } from './client'
+import { getServerConfig } from './server-config-store'
+const ALLOWED_METHODS = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE']
+
+const INCOMING_HEADER_ALLOWLIST = new Set([
+  'accept',
+  'accept-language',
+  'content-type',
+])
+
+const RESPONSE_HEADER_ALLOWLIST = new Set([
+  'cache-control',
+  'content-type',
+  'etag',
+  'last-modified',
+  'retry-after',
+  'vary',
+])
+
+const FORBIDDEN_SERVER_HEADERS = new Set([
+  'connection',
+  'keep-alive',
+  'proxy-authenticate',
+  'proxy-authorization',
+  'te',
+  'trailers',
+  'transfer-encoding',
+  'upgrade',
+  'host',
+  'content-length',
+  'cookie',
+  'cookie2',
+  'set-cookie',
+  'forwarded',
+  'x-forwarded-for',
+  'x-forwarded-host',
+  'x-forwarded-proto',
+  'x-real-ip',
+])
+
+/**
+ * Reenvía un Request del store (`/api/...`) al storefront (`/v1/...`).
+ * Settings usa `x-Store-Domain`; el resto usa `x-Store-Id` (vía cache de settings).
+ */
+export async function proxyStorefrontRequest(
+  request: Request,
+  splat: string | undefined,
+): Promise<Response> {
+  const method = request.method.toUpperCase()
+  if (!ALLOWED_METHODS.includes(method)) {
+    return Response.json(
+      { error: 'Method not allowed', status: 405 },
+      {
+        status: 405,
+        headers: { allow: ALLOWED_METHODS.join(', ') },
+      },
+    )
+  }
+
+  const config = getServerConfig()
+  const base = new URL(resolveApiBaseUrl(config.api?.baseUrl, config.api?.version))
+  const rawPath = splat ?? ''
+  let path = rawPath
+  let invalidPath =
+    /^[a-z][a-z\d+.-]*:/i.test(rawPath) ||
+    rawPath.startsWith('//') ||
+    rawPath.includes('\\') ||
+    rawPath.includes('?') ||
+    rawPath.includes('#') ||
+    /%(?:2f|5c)/i.test(rawPath)
+
+  if (path.startsWith('/')) path = path.slice(1)
+  for (const rawSegment of path.split('/')) {
+    let decoded = rawSegment
+    try {
+      for (let pass = 0; pass < 3; pass += 1) {
+        const next = decodeURIComponent(decoded)
+        if (next === decoded) break
+        decoded = next
+      }
+    } catch {
+      invalidPath = true
+    }
+    if (
+      decoded === '.' ||
+      decoded === '..' ||
+      decoded.includes('/') ||
+      decoded.includes('\\') ||
+      /[\u0000-\u001f\u007f]/.test(decoded)
+    ) {
+      invalidPath = true
+    }
+  }
+
+  if (invalidPath) {
+    return Response.json(
+      { error: 'Invalid proxy path', status: 400 },
+      { status: 400 },
+    )
+  }
+
+  const apiPrefix = base.pathname.endsWith('/') ? base.pathname : `${base.pathname}/`
+  const target = new URL(base)
+  target.pathname = `${apiPrefix}${path}`
+  const incoming = new URL(request.url)
+  target.search = incoming.search
+
+  if (target.origin !== base.origin || !target.pathname.startsWith(apiPrefix)) {
+    return Response.json(
+      { error: 'Invalid proxy path', status: 400 },
+      { status: 400 },
+    )
+  }
+
+  const headers = new Headers()
+  for (const [key, value] of request.headers) {
+    if (INCOMING_HEADER_ALLOWLIST.has(key.toLowerCase())) headers.set(key, value)
+  }
+  for (const [key, value] of Object.entries(config.api?.headers ?? {})) {
+    const lower = key.toLowerCase()
+    if (FORBIDDEN_SERVER_HEADERS.has(lower) || lower.startsWith('cf-')) continue
+    headers.set(key, value)
+  }
+  headers.set('accept', headers.get('accept') ?? 'application/json')
+
+  const cookieHeader = request.headers.get('cookie')
+  if (cookieHeader) {
+    for (const part of cookieHeader.split(';')) {
+      const [rawName, ...rawValue] = part.trim().split('=')
+      if (rawName !== STOREFRONT_ECOMIQ_OAUTH_COOKIE_NAME) continue
+      try {
+        const accessToken = decodeURIComponent(rawValue.join('=')).trim()
+        if (accessToken) headers.set('authorization', `Bearer ${accessToken}`)
+      } catch {}
+      break
+    }
+  }
+
+  const isSettings = path === 'settings' || path.startsWith('settings/')
+  if (isSettings) {
+    headers.delete('x-Store-Id')
+    headers.set('x-Store-Domain', config.slug)
+  } else {
+    try {
+      const storeId = await getStorefrontClient().getStoreId()
+      headers.set('x-Store-Id', storeId)
+    } catch {
+      return Response.json(
+        { error: 'Bad gateway', status: 502 },
+        { status: 502 },
+      )
+    }
+  }
+
+  const body =
+    method === 'GET' || method === 'HEAD' ? undefined : await request.arrayBuffer()
+
+  let upstream: Response
+  try {
+    upstream = await fetch(target.toString(), { method, headers, body })
+  } catch {
+    return Response.json(
+      { error: 'Bad gateway', status: 502 },
+      { status: 502 },
+    )
+  }
+
+  const responseHeaders = new Headers()
+  for (const header of RESPONSE_HEADER_ALLOWLIST) {
+    const value = upstream.headers.get(header)
+    if (value) responseHeaders.set(header, value)
+  }
+
+  if (upstream.status === 204 || upstream.status === 205 || upstream.status === 304) {
+    responseHeaders.delete('content-type')
+    return new Response(null, {
+      status: upstream.status,
+      statusText: upstream.statusText,
+      headers: responseHeaders,
+    })
+  }
+
+  return new Response(upstream.body, {
+    status: upstream.status,
+    statusText: upstream.statusText,
+    headers: responseHeaders,
+  })
+}

package/src/auth/create-storefront-auth.ts

@@ -0,0 +1,35 @@
+import { betterAuth } from 'better-auth'
+import type { BetterAuthPlugin } from 'better-auth'
+import { tanstackStartCookies } from 'better-auth/tanstack-start'
+import { ecomiqOAuthPassword } from './ecomiq-oauth-password-plugin'
+import { readProcessEnv } from './env'
+
+export type CreateStorefrontAuthOptions = {
+  secret?: string
+  baseURL?: string
+  /** Opciones adicionales pasadas a `betterAuth` (p. ej. `database`). */
+  [key: string]: unknown
+}
+
+/**
+ * Instancia Better Auth del storefront (servidor).
+ * Usa el plugin `ecomiqOAuthPassword` + cookies de TanStack Start.
+ *
+ * Si no pasas `secret`/`baseURL`, lee `BETTER_AUTH_SECRET` y `BETTER_AUTH_URL`.
+ */
+export function createStorefrontAuth(options: CreateStorefrontAuthOptions = {}) {
+  const { secret, baseURL, advanced, ...rest } = options
+  return betterAuth({
+    ...rest,
+    secret: (secret as string | undefined) ?? readProcessEnv('BETTER_AUTH_SECRET'),
+    baseURL: (baseURL as string | undefined) ?? readProcessEnv('BETTER_AUTH_URL'),
+    advanced: {
+      disableCSRFCheck: true,
+      ...(typeof advanced === 'object' && advanced !== null ? advanced : {}),
+    },
+    plugins: [
+      ecomiqOAuthPassword() as BetterAuthPlugin,
+      tanstackStartCookies(),
+    ],
+  })
+}

package/src/auth/ecomiq-oauth-password-client.ts

@@ -0,0 +1,26 @@
+import type { BetterAuthClientPlugin } from 'better-auth/client'
+import { PLUGIN_ID } from './ecomiq-oauth-password-constants'
+
+/**
+ * Cliente Better Auth para el plugin `ecomiqOAuthPassword` (login `/v1/customer/login`).
+ * Tras añadirlo a `createAuthClient`, refresca la sesión al llamar al sign-in.
+ *
+ * Ejemplo:
+ * `authClient.$fetch("/ecomiq-oauth/sign-in", { method: "POST", headers, body: { email, password } })`
+ *
+ * Importante: no anotar el retorno como `BetterAuthClientPlugin` (rompe la inferencia de sesión).
+ */
+export function ecomiqOAuthPasswordClient() {
+  return {
+    id: PLUGIN_ID,
+    pathMethods: {
+      '/ecomiq-oauth/sign-in': 'POST',
+    },
+    atomListeners: [
+      {
+        matcher: (path: string) => path === '/ecomiq-oauth/sign-in',
+        signal: '$sessionSignal' as const,
+      },
+    ],
+  } satisfies BetterAuthClientPlugin
+}

package/src/auth/ecomiq-oauth-password-constants.ts

@@ -0,0 +1,26 @@
+import { DEFAULT_API_BASE_URL, DEFAULT_API_VERSION } from '@ecomiq/core'
+
+/** Id del plugin servidor/cliente Better Auth (debe coincidir en ambos lados). */
+export const PLUGIN_ID = 'ecomiq-oauth-password'
+
+/** Base storefront (override con `STOREFRONT_API_URL`). */
+export const DEFAULT_STOREFRONT_API_URL = DEFAULT_API_BASE_URL
+
+/** Prefijo de versión en storefront API (`/v1/...`). */
+export const STOREFRONT_API_PATH_PREFIX = DEFAULT_API_VERSION
+
+/**
+ * Cookie HttpOnly con el bearer de customer login.
+ * Debe coincidir con el nombre que lee el proxy BFF (`api-proxy`).
+ */
+export const STOREFRONT_ECOMIQ_OAUTH_COOKIE_NAME = 'ecomiq_sf_oauth_at'
+
+/** Path de la cookie (debe llegar a `/api/*` del proxy). */
+export const STOREFRONT_ECOMIQ_OAUTH_COOKIE_PATH = '/api'
+
+/** Headers de identidad tipados para login storefront. */
+export const STOREFRONT_HEADERS = {
+  identityScope: 'x-Identity-Scope',
+  tenantId: 'x-Tenant-Id',
+  storeId: 'x-Store-Id',
+} as const