@ecomiq/storefront 2.0.20 → 2.0.22

package/src/storefront-layout.ts

@@ -0,0 +1,37 @@
+import { useRouterState } from '@tanstack/react-router'
+import {
+  StorefrontDefinitionSchema,
+  type StorefrontDefinition,
+} from '@ecomiq/storefront-definition'
+
+export function definitionForRoute(
+  pathname: string,
+  loaderData: unknown,
+): StorefrontDefinition | null {
+  if (
+    pathname !== '/' ||
+    loaderData === null ||
+    typeof loaderData !== 'object'
+  ) {
+    return null
+  }
+  if (!('kind' in loaderData) || loaderData.kind !== 'definition') {
+    return null
+  }
+  if (!('definition' in loaderData)) {
+    return null
+  }
+
+  const definition = StorefrontDefinitionSchema.safeParse(loaderData.definition)
+  return definition.success ? definition.data : null
+}
+
+export function useDefinition(): StorefrontDefinition | null {
+  return useRouterState({
+    select: (state) =>
+      definitionForRoute(
+        state.location.pathname,
+        state.matches.at(-1)?.loaderData,
+      ),
+  })
+}

package/src/storefront-runtime.ts

@@ -0,0 +1,277 @@
+import type {
+  Collection,
+  Collections,
+  ProductsParamsInput,
+  ProductsResponse,
+  ProductSummary,
+} from '@ecomiq/core'
+import {
+  CloudRuntimeStoreSlugSchema,
+  getCloudRuntimeClient,
+  type ActiveStorefrontRuntime,
+} from './cloud-runtime-client'
+import { getStorefrontClient } from './client'
+import {
+  getServerConfig,
+  type ServerEcomiqConfig,
+} from './server-config-store'
+import type {
+  CollectionGridStorefrontSection,
+  ProductGridStorefrontSection,
+  StorefrontDefinition,
+} from '@ecomiq/storefront-definition'
+import type { DefinitionData } from './storefront-definition/renderer'
+
+const MAX_UNIQUE_PRODUCT_SOURCES = 12
+const MANUAL_PRODUCT_PAGE_SIZE = 100
+const MAX_MANUAL_PRODUCT_SCAN_PAGES = 5
+
+export interface StorefrontRuntimeCatalogClient {
+  getProducts(params?: ProductsParamsInput): Promise<ProductsResponse>
+  getCollections(): Promise<Collections>
+}
+
+export interface StorefrontRuntimeCloudClient {
+  resolveActiveStorefront(
+    storeSlug: string,
+  ): Promise<ActiveStorefrontRuntime | null>
+}
+
+export interface ResolvedStorefrontDefinitionData
+  extends DefinitionData {
+  productsBySectionId: Record<string, ProductSummary[]>
+  collectionsBySectionId: Record<string, Collection[]>
+}
+
+export type ActiveStorefrontHome =
+  | {
+      kind: 'legacy'
+    }
+  | {
+      kind: 'definition'
+      definition: StorefrontDefinition
+      publication: ActiveStorefrontRuntime['publication']
+      data: ResolvedStorefrontDefinitionData
+    }
+
+function emptyRendererData(): ResolvedStorefrontDefinitionData {
+  return {
+    productsBySectionId: {},
+    collectionsBySectionId: {},
+  }
+}
+
+function productSourceKey(
+  section: ProductGridStorefrontSection,
+): string | null {
+  if (section.source.kind === 'manual') return null
+  if (section.source.kind === 'collection') {
+    return `collection:${section.source.slug}`
+  }
+  return 'all'
+}
+
+async function loadProductSource(
+  section: ProductGridStorefrontSection,
+  client: StorefrontRuntimeCatalogClient,
+): Promise<ProductSummary[]> {
+  const params: ProductsParamsInput = {
+    page: 1,
+    pageSize: section.limit,
+    sort: 'newest',
+  }
+  if (section.source.kind === 'collection') {
+    params.collection = section.source.slug
+  }
+  const response = await client.getProducts(params)
+  return response.products.slice(0, section.limit)
+}
+
+async function scanManualProducts(
+  productIds: ReadonlySet<string>,
+  client: StorefrontRuntimeCatalogClient,
+): Promise<Map<string, ProductSummary>> {
+  const found = new Map<string, ProductSummary>()
+
+  for (let page = 1; page <= MAX_MANUAL_PRODUCT_SCAN_PAGES; page += 1) {
+    const response = await client.getProducts({
+      page,
+      pageSize: MANUAL_PRODUCT_PAGE_SIZE,
+      sort: 'newest',
+    })
+    for (const product of response.products) {
+      if (productIds.has(product.id)) found.set(product.id, product)
+    }
+
+    if (
+      found.size === productIds.size ||
+      page >= response.totalPages ||
+      response.products.length === 0
+    ) {
+      break
+    }
+  }
+
+  return found
+}
+
+export async function resolveStorefrontDefinitionData(
+  definition: StorefrontDefinition,
+  client: StorefrontRuntimeCatalogClient,
+): Promise<ResolvedStorefrontDefinitionData> {
+  const data = emptyRendererData()
+  const productSections = definition.sections.filter(
+    (section): section is ProductGridStorefrontSection =>
+      section.enabled && section.type === 'product-grid',
+  )
+  const collectionSections = definition.sections.filter(
+    (section): section is CollectionGridStorefrontSection =>
+      section.enabled && section.type === 'collection-grid',
+  )
+
+  const sourceSections = new Map<string, ProductGridStorefrontSection>()
+  for (const section of productSections) {
+    const sourceKey = productSourceKey(section)
+    if (!sourceKey) continue
+    const current = sourceSections.get(sourceKey)
+    if (current) {
+      if (section.limit > current.limit) sourceSections.set(sourceKey, section)
+      continue
+    }
+    if (sourceSections.size >= MAX_UNIQUE_PRODUCT_SOURCES) continue
+    sourceSections.set(sourceKey, section)
+  }
+
+  const sourceRequests = new Map<string, Promise<ProductSummary[]>>()
+  for (const [sourceKey, section] of sourceSections) {
+    sourceRequests.set(
+      sourceKey,
+      loadProductSource(section, client).catch(() => []),
+    )
+  }
+
+  const manualIds = new Set(
+    productSections.flatMap((section) =>
+      section.source.kind === 'manual' ? section.source.productIds : [],
+    ),
+  )
+  const manualProducts =
+    manualIds.size > 0
+      ? scanManualProducts(manualIds, client).catch(
+          () => new Map<string, ProductSummary>(),
+        )
+      : Promise.resolve(new Map<string, ProductSummary>())
+
+  await Promise.all(
+    productSections.map(async (section) => {
+      if (section.source.kind === 'manual') {
+        const productsById = await manualProducts
+        data.productsBySectionId[section.id] = section.source.productIds
+          .map((productId) => productsById.get(productId))
+          .filter(
+            (product): product is ProductSummary => product !== undefined,
+          )
+          .slice(0, section.limit)
+        return
+      }
+
+      const sourceKey = productSourceKey(section)
+      const products = sourceKey
+        ? await (sourceRequests.get(sourceKey) ?? Promise.resolve([]))
+        : []
+      data.productsBySectionId[section.id] = products.slice(0, section.limit)
+    }),
+  )
+
+  if (collectionSections.length > 0) {
+    const collections = await client.getCollections().catch(() => [])
+    const collectionsBySlug = new Map(
+      collections.map((collection) => [collection.slug, collection]),
+    )
+
+    for (const section of collectionSections) {
+      if (section.source.kind === 'manual') {
+        data.collectionsBySectionId[section.id] = section.source.slugs
+          .map((slug) => collectionsBySlug.get(slug))
+          .filter(
+            (collection): collection is Collection =>
+              collection !== undefined,
+          )
+          .slice(0, section.limit)
+        continue
+      }
+      data.collectionsBySectionId[section.id] = collections.slice(
+        0,
+        section.limit,
+      )
+    }
+  }
+
+  return data
+}
+
+export function deriveCloudStoreSlug(domain: string): string | null {
+  const normalized = domain.trim().toLowerCase()
+  if (!normalized) return null
+
+  let hostname: string
+  try {
+    hostname = new URL(
+      normalized.includes('://') ? normalized : `https://${normalized}`,
+    ).hostname
+  } catch {
+    return null
+  }
+
+  const candidate = hostname.split('.')[0] ?? ''
+  const parsed = CloudRuntimeStoreSlugSchema.safeParse(candidate)
+  return parsed.success ? parsed.data : null
+}
+
+export interface LoadActiveStorefrontHomeDependencies {
+  config?: ServerEcomiqConfig
+  cloudClient?: StorefrontRuntimeCloudClient
+  catalogClient?: StorefrontRuntimeCatalogClient
+}
+
+export async function loadActiveStorefrontHome(
+  dependencies: LoadActiveStorefrontHomeDependencies = {},
+): Promise<ActiveStorefrontHome> {
+  const config = dependencies.config ?? getServerConfig()
+  const cloudConfig = config.cloud
+  if (!cloudConfig?.baseUrl) return { kind: 'legacy' }
+
+  const storeSlug =
+    cloudConfig.storeSlug ?? deriveCloudStoreSlug(config.domain)
+  if (!storeSlug) return { kind: 'legacy' }
+
+  const cloudClient =
+    dependencies.cloudClient ??
+    getCloudRuntimeClient({
+      baseUrl: cloudConfig.baseUrl,
+      timeoutMs: cloudConfig.timeoutMs,
+      cacheTtlMs: cloudConfig.cacheTtlMs,
+    })
+
+  let runtime: ActiveStorefrontRuntime | null
+  try {
+    runtime = await cloudClient.resolveActiveStorefront(storeSlug)
+  } catch {
+    return { kind: 'legacy' }
+  }
+  if (!runtime) return { kind: 'legacy' }
+
+  const catalogClient =
+    dependencies.catalogClient ?? getStorefrontClient()
+  const data = await resolveStorefrontDefinitionData(
+    runtime.definition,
+    catalogClient,
+  ).catch(emptyRendererData)
+
+  return {
+    kind: 'definition',
+    definition: runtime.definition,
+    publication: runtime.publication,
+    data,
+  }
+}

package/src/styles.css

@@ -5,6 +5,7 @@
 /* Escanear los componentes UI del propio framework */
 @source './ui';
 @source './components';
+@source './storefront-definition';
 @source './runtime';
 @source './pages';
 @source '../templates';
@@ -74,3 +75,15 @@
     transition-duration: 0.01ms !important;
   }
 }
+
+.storefront-definition {
+  font-family: var(--storefront-font-body);
+}
+
+.storefront-definition :where(h1, h2, h3, h4, h5, h6) {
+  font-family: var(--storefront-font-heading);
+}
+
+.storefront-definition-section {
+  padding-block: var(--storefront-section-padding);
+}