@ecomiq/storefront 2.0.21 → 2.1.3

package/src/storefront-layout.ts

@@ -1,18 +1,21 @@
 import { useRouterState } from '@tanstack/react-router'
 import {
   StorefrontDefinitionSchema,
+  resolveStorefrontRoute,
   type StorefrontDefinition,
+  type StorefrontPage,
 } from '@ecomiq/storefront-definition'
 
-export function definitionForRoute(
+export type StorefrontDefinitionRoute = {
+  definition: StorefrontDefinition
+  page: StorefrontPage
+}
+
+export function definitionRouteFor(
   pathname: string,
   loaderData: unknown,
-): StorefrontDefinition | null {
-  if (
-    pathname !== '/' ||
-    loaderData === null ||
-    typeof loaderData !== 'object'
-  ) {
+): StorefrontDefinitionRoute | null {
+  if (loaderData === null || typeof loaderData !== 'object') {
     return null
   }
   if (!('kind' in loaderData) || loaderData.kind !== 'definition') {
@@ -22,16 +25,35 @@ export function definitionForRoute(
     return null
   }
 
-  const definition = StorefrontDefinitionSchema.safeParse(loaderData.definition)
-  return definition.success ? definition.data : null
+  const parsed = StorefrontDefinitionSchema.safeParse(loaderData.definition)
+  if (!parsed.success) return null
+
+  const resolution = resolveStorefrontRoute(pathname, parsed.data.pages)
+  if (resolution.kind !== 'page') return null
+  const page = parsed.data.pages.find(
+    (candidate) => candidate.id === resolution.pageId,
+  )
+  if (!page) return null
+  return { definition: parsed.data, page }
 }
 
-export function useDefinition(): StorefrontDefinition | null {
+export function definitionForRoute(
+  pathname: string,
+  loaderData: unknown,
+): StorefrontDefinition | null {
+  return definitionRouteFor(pathname, loaderData)?.definition ?? null
+}
+
+export function useDefinitionRoute(): StorefrontDefinitionRoute | null {
   return useRouterState({
     select: (state) =>
-      definitionForRoute(
+      definitionRouteFor(
         state.location.pathname,
         state.matches.at(-1)?.loaderData,
       ),
   })
 }
+
+export function useDefinition(): StorefrontDefinition | null {
+  return useDefinitionRoute()?.definition ?? null
+}

package/src/storefront-runtime.ts

@@ -1,10 +1,3 @@
-import type {
-  Collection,
-  Collections,
-  ProductsParamsInput,
-  ProductsResponse,
-  ProductSummary,
-} from '@ecomiq/core'
 import {
   CloudRuntimeStoreSlugSchema,
   getCloudRuntimeClient,
@@ -15,21 +8,24 @@ import {
   getServerConfig,
   type ServerEcomiqConfig,
 } from './server-config-store'
-import type {
-  CollectionGridStorefrontSection,
-  ProductGridStorefrontSection,
-  StorefrontDefinition,
+import {
+  resolveStorefrontRoute,
+  type StorefrontDefinition,
+  type StorefrontPage,
 } 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>
-}
+import { storefrontPageFor } from './storefront-definition/renderer'
+import {
+  emptyRendererData,
+  resolveStorefrontDefinitionData,
+  type ResolvedStorefrontDefinitionData,
+  type StorefrontRuntimeCatalogClient,
+} from './storefront-definition/data'
+
+export {
+  resolveStorefrontDefinitionData,
+  type ResolvedStorefrontDefinitionData,
+  type StorefrontRuntimeCatalogClient,
+} from './storefront-definition/data'
 
 export interface StorefrontRuntimeCloudClient {
   resolveActiveStorefront(
@@ -37,12 +33,6 @@ export interface StorefrontRuntimeCloudClient {
   ): Promise<ActiveStorefrontRuntime | null>
 }
 
-export interface ResolvedStorefrontDefinitionData
-  extends DefinitionData {
-  productsBySectionId: Record<string, ProductSummary[]>
-  collectionsBySectionId: Record<string, Collection[]>
-}
-
 export type ActiveStorefrontHome =
   | {
       kind: 'legacy'
@@ -50,165 +40,25 @@ export type ActiveStorefrontHome =
   | {
       kind: 'definition'
       definition: StorefrontDefinition
+      page: StorefrontPage
       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
+export type ActiveStorefrontPage =
+  | {
+      kind: 'unpublished'
     }
-  }
-
-  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
+  | {
+      kind: 'not-found'
     }
-    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,
-      )
+  | {
+      kind: 'definition'
+      definition: StorefrontDefinition
+      page: StorefrontPage
+      publication: ActiveStorefrontRuntime['publication']
+      data: ResolvedStorefrontDefinitionData
     }
-  }
-
-  return data
-}
 
 export function deriveCloudStoreSlug(domain: string): string | null {
   const normalized = domain.trim().toLowerCase()
@@ -234,43 +84,89 @@ export interface LoadActiveStorefrontHomeDependencies {
   catalogClient?: StorefrontRuntimeCatalogClient
 }
 
-export async function loadActiveStorefrontHome(
-  dependencies: LoadActiveStorefrontHomeDependencies = {},
-): Promise<ActiveStorefrontHome> {
+async function resolveActiveRuntime(
+  dependencies: LoadActiveStorefrontHomeDependencies,
+): Promise<ActiveStorefrontRuntime | null> {
   const config = dependencies.config ?? getServerConfig()
   const cloudConfig = config.cloud
-  if (!cloudConfig?.baseUrl) return { kind: 'legacy' }
+  if (!cloudConfig?.baseUrl) return null
 
   const storeSlug =
     cloudConfig.storeSlug ?? deriveCloudStoreSlug(config.domain)
-  if (!storeSlug) return { kind: 'legacy' }
+  if (!storeSlug) return null
 
   const cloudClient =
     dependencies.cloudClient ??
     getCloudRuntimeClient({
       baseUrl: cloudConfig.baseUrl,
+      artifactBaseUrl: cloudConfig.artifactBaseUrl,
       timeoutMs: cloudConfig.timeoutMs,
       cacheTtlMs: cloudConfig.cacheTtlMs,
     })
 
-  let runtime: ActiveStorefrontRuntime | null
   try {
-    runtime = await cloudClient.resolveActiveStorefront(storeSlug)
+    return await cloudClient.resolveActiveStorefront(storeSlug)
   } catch {
-    return { kind: 'legacy' }
+    return null
   }
+}
+
+export async function loadActiveStorefrontHome(
+  dependencies: LoadActiveStorefrontHomeDependencies = {},
+): Promise<ActiveStorefrontHome> {
+  const runtime = await resolveActiveRuntime(dependencies)
   if (!runtime) return { kind: 'legacy' }
 
+  const page = storefrontPageFor(runtime.definition)
+  if (!page) return { kind: 'legacy' }
+
+  const catalogClient =
+    dependencies.catalogClient ?? getStorefrontClient()
+  const data = await resolveStorefrontDefinitionData(
+    runtime.definition,
+    catalogClient,
+    page.id,
+  ).catch(emptyRendererData)
+
+  return {
+    kind: 'definition',
+    definition: runtime.definition,
+    page,
+    publication: runtime.publication,
+    data,
+  }
+}
+
+export async function loadActiveStorefrontPage(
+  pathname: string,
+  dependencies: LoadActiveStorefrontHomeDependencies = {},
+): Promise<ActiveStorefrontPage> {
+  const runtime = await resolveActiveRuntime(dependencies)
+  if (!runtime) return { kind: 'unpublished' }
+
+  const resolution = resolveStorefrontRoute(
+    pathname,
+    runtime.definition.pages,
+  )
+  if (resolution.kind !== 'page') return { kind: 'not-found' }
+
+  const page = runtime.definition.pages.find(
+    (candidate) => candidate.id === resolution.pageId,
+  )
+  if (!page) return { kind: 'not-found' }
+
   const catalogClient =
     dependencies.catalogClient ?? getStorefrontClient()
   const data = await resolveStorefrontDefinitionData(
     runtime.definition,
     catalogClient,
+    page.id,
   ).catch(emptyRendererData)
 
   return {
     kind: 'definition',
     definition: runtime.definition,
+    page,
     publication: runtime.publication,
     data,
   }

package/src/styles.css

@@ -78,6 +78,7 @@
 
 .storefront-definition {
   font-family: var(--storefront-font-body);
+  --storefront-content-width: 72rem;
 }
 
 .storefront-definition :where(h1, h2, h3, h4, h5, h6) {
@@ -85,5 +86,12 @@
 }
 
 .storefront-definition-section {
-  padding-block: var(--storefront-section-padding);
+  padding-block: var(
+      --storefront-section-padding-top,
+      var(--storefront-section-padding)
+    )
+    var(
+      --storefront-section-padding-bottom,
+      var(--storefront-section-padding)
+    );
 }