@cimplify/sdk 0.38.5 → 0.39.0

package/dist/server.mjs

@@ -0,0 +1,92 @@
+import { createCimplifyClient } from './chunk-3WD6U5RD.mjs';
+import './chunk-EZK2FXTM.mjs';
+export { CimplifyError } from './chunk-6TVQQYQ5.mjs';
+import { cache } from 'react';
+
+var DEFAULT_DEV_URL = "http://127.0.0.1:8787";
+function readEnv(...keys) {
+  const env = globalThis.process?.env;
+  if (!env) return void 0;
+  for (const k of keys) {
+    const v = env[k]?.trim();
+    if (v) return v;
+  }
+  return void 0;
+}
+var getServerClient = cache((opts = {}) => {
+  const baseUrl = opts.apiUrl ?? readEnv("CIMPLIFY_API_URL", "NEXT_PUBLIC_CIMPLIFY_API_URL") ?? DEFAULT_DEV_URL;
+  const publicKey = opts.secretKey ?? readEnv("CIMPLIFY_SECRET_KEY", "NEXT_PUBLIC_CIMPLIFY_PUBLIC_KEY") ?? "mock-dev";
+  const client = createCimplifyClient({
+    baseUrl,
+    publicKey,
+    suppressPublicKeyWarning: true
+  });
+  if (opts.locationId) {
+    client.setLocationId(opts.locationId);
+  }
+  return client;
+});
+
+// src/server/tags.ts
+var tags = {
+  products: () => "cimplify:products",
+  product: (id) => `cimplify:product:${id}`,
+  categories: () => "cimplify:categories",
+  category: (id) => `cimplify:category:${id}`,
+  categoryProducts: (id) => `cimplify:category:${id}:products`,
+  collections: () => "cimplify:collections",
+  collection: (id) => `cimplify:collection:${id}`,
+  collectionProducts: (id) => `cimplify:collection:${id}:products`,
+  business: () => "cimplify:business",
+  locations: () => "cimplify:locations",
+  orders: (customerId) => `cimplify:orders:${customerId}`,
+  order: (id) => `cimplify:order:${id}`
+};
+
+// src/server/revalidate.ts
+var _revalidateTag = null;
+async function getRevalidateTag() {
+  if (_revalidateTag) return _revalidateTag;
+  const specifier = "next/cache";
+  const mod = await import(
+    /* webpackIgnore: true */
+    /* @vite-ignore */
+    specifier
+  );
+  _revalidateTag = mod.revalidateTag;
+  return _revalidateTag;
+}
+async function revalidate(...tagList) {
+  const fn = await getRevalidateTag();
+  for (const t of tagList) fn(t);
+}
+async function revalidateProducts() {
+  return revalidate(tags.products());
+}
+async function revalidateProduct(id) {
+  return revalidate(tags.product(id), tags.products());
+}
+async function revalidateCategories() {
+  return revalidate(tags.categories());
+}
+async function revalidateCategory(id) {
+  return revalidate(tags.category(id), tags.categoryProducts(id), tags.categories());
+}
+async function revalidateCollections() {
+  return revalidate(tags.collections());
+}
+async function revalidateCollection(id) {
+  return revalidate(
+    tags.collection(id),
+    tags.collectionProducts(id),
+    tags.collections()
+  );
+}
+async function revalidateBusiness() {
+  return revalidate(tags.business());
+}
+async function revalidateByTag(tag) {
+  return revalidate(tag);
+}
+
+export { getServerClient, revalidateBusiness, revalidateByTag, revalidateCategories, revalidateCategory, revalidateCollection, revalidateCollections, revalidateProduct, revalidateProducts, tags };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cimplify/sdk",
-  "version": "0.38.5",
+  "version": "0.39.0",
   "description": "Cimplify Commerce SDK for storefronts",
   "keywords": [
     "cimplify",
@@ -45,6 +45,12 @@
       "import": "./dist/advanced.mjs",
       "require": "./dist/advanced.js"
     },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "react-server": "./dist/server.mjs",
+      "import": "./dist/server.mjs",
+      "require": "./dist/server.js"
+    },
     "./mock": {
       "types": "./dist/mock/library.d.ts",
       "import": "./dist/mock/library.mjs",

package/templates/storefront/app/categories/[slug]/page.tsx

@@ -1,59 +1,55 @@
-"use client";
-
-import { useEffect, useState, use } from "react";
+import type { Metadata } from "next";
 import Link from "next/link";
-import { ProductGrid, useCimplifyClient } from "@cimplify/sdk/react";
-import type { Category, Product } from "@cimplify/sdk";
+import { notFound } from "next/navigation";
+import { cacheTag, cacheLife } from "next/cache";
+import { ProductGrid } from "@cimplify/sdk/react";
+import { getServerClient, tags, type Category, type Product } from "@cimplify/sdk/server";
 import { StoreProductCard } from "@/components/store-product-card";
 
-/**
- * Full grid of products within a single category. Reads `slug` from the
- * route, resolves it against the catalogue API, and renders the SDK
- * <ProductGrid/> with our URL-modal-aware <StoreProductCard/>.
- */
-export default function CategoryPage({ params }: { params: Promise<{ slug: string }> }) {
-  const { slug } = use(params);
-  const { client } = useCimplifyClient();
-  const [category, setCategory] = useState<Category>();
-  const [products, setProducts] = useState<Product[]>([]);
-  const [loading, setLoading] = useState(true);
+async function getCategory(slug: string): Promise<{
+  category: Category;
+  products: Product[];
+} | null> {
+  "use cache";
+  cacheTag(tags.categories());
+  cacheLife("hours");
+
+  const client = getServerClient();
+  const catRes = await client.catalogue.getCategoryBySlug(slug);
+  if (!catRes.ok) return null;
+
+  cacheTag(tags.category(catRes.value.id), tags.categoryProducts(catRes.value.id));
+  const r = await client.catalogue.getCategoryProducts(catRes.value.id);
+  const products = r.ok
+    ? ((r.value as { items?: Product[] }).items ?? (r.value as Product[]))
+    : [];
+  return { category: catRes.value, products };
+}
 
-  useEffect(() => {
-    let cancelled = false;
-    void (async () => {
-      try {
-        const catRes = await client.catalogue.getCategoryBySlug(slug);
-        if (cancelled || !catRes.ok) return;
-        setCategory(catRes.value);
-        const r = await client.catalogue.getCategoryProducts(catRes.value.id);
-        if (cancelled) return;
-        if (r.ok) {
-          const items = (r.value as { items?: Product[] }).items ?? (r.value as Product[]);
-          setProducts(items);
-        }
-      } finally {
-        if (!cancelled) setLoading(false);
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, [client, slug]);
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
+  const { slug } = await params;
+  const data = await getCategory(slug);
+  if (!data) return {};
+  return {
+    title: `${data.category.name} — Akua's Bakery`,
+    description: data.category.description ?? undefined,
+  };
+}
 
-  if (loading) {
-    return <p className="text-center py-20 text-muted-foreground">Loading category…</p>;
-  }
-  if (!category) {
-    return (
-      <div className="text-center py-20 text-muted-foreground">
-        <p>Category not found.</p>
-        <Link href="/" className="text-primary font-semibold">
-          ← Back home
-        </Link>
-      </div>
-    );
-  }
+export default async function CategoryPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  const data = await getCategory(slug);
+  if (!data) notFound();
 
+  const { category, products } = data;
   return (
     <section className="max-w-7xl mx-auto px-8 pt-12">
       <header className="mb-8 text-center">
@@ -64,7 +60,9 @@ export default function CategoryPage({ params }: { params: Promise<{ slug: strin
           {category.name}
         </h1>
         {category.description && (
-          <p className="mx-auto mb-2 max-w-xl text-muted-foreground">{category.description}</p>
+          <p className="mx-auto mb-2 max-w-xl text-muted-foreground">
+            {category.description}
+          </p>
         )}
         <p className="text-sm text-muted-foreground">
           {products.length} item{products.length === 1 ? "" : "s"}
@@ -75,6 +73,13 @@ export default function CategoryPage({ params }: { params: Promise<{ slug: strin
         emptyMessage="No products in this category yet."
         renderCard={(p) => <StoreProductCard product={p} />}
       />
+      {products.length === 0 && (
+        <p className="text-center mt-8">
+          <Link href="/" className="text-primary font-semibold">
+            ← Back home
+          </Link>
+        </p>
+      )}
     </section>
   );
 }

package/templates/storefront/app/collections/[slug]/page.tsx

@@ -1,59 +1,55 @@
-"use client";
-
-import { useEffect, useState, use } from "react";
+import type { Metadata } from "next";
 import Link from "next/link";
-import { ProductGrid, useCimplifyClient } from "@cimplify/sdk/react";
-import type { Collection, Product } from "@cimplify/sdk";
+import { notFound } from "next/navigation";
+import { cacheTag, cacheLife } from "next/cache";
+import { ProductGrid } from "@cimplify/sdk/react";
+import { getServerClient, tags, type Collection, type Product } from "@cimplify/sdk/server";
 import { StoreProductCard } from "@/components/store-product-card";
 
-/**
- * Full grid of products within a single collection. Reads `slug` from the
- * route, resolves it against the catalogue API, and renders the SDK
- * <ProductGrid/> with our URL-modal-aware <StoreProductCard/>.
- */
-export default function CollectionPage({ params }: { params: Promise<{ slug: string }> }) {
-  const { slug } = use(params);
-  const { client } = useCimplifyClient();
-  const [collection, setCollection] = useState<Collection>();
-  const [products, setProducts] = useState<Product[]>([]);
-  const [loading, setLoading] = useState(true);
+async function getCollection(slug: string): Promise<{
+  collection: Collection;
+  products: Product[];
+} | null> {
+  "use cache";
+  cacheTag(tags.collections());
+  cacheLife("hours");
+
+  const client = getServerClient();
+  const colRes = await client.catalogue.getCollectionBySlug(slug);
+  if (!colRes.ok) return null;
+
+  cacheTag(tags.collection(colRes.value.id), tags.collectionProducts(colRes.value.id));
+  const r = await client.catalogue.getCollectionProducts(colRes.value.id);
+  const products = r.ok
+    ? ((r.value as { items?: Product[] }).items ?? (r.value as Product[]))
+    : [];
+  return { collection: colRes.value, products };
+}
 
-  useEffect(() => {
-    let cancelled = false;
-    void (async () => {
-      try {
-        const colRes = await client.catalogue.getCollectionBySlug(slug);
-        if (cancelled || !colRes.ok) return;
-        setCollection(colRes.value);
-        const r = await client.catalogue.getCollectionProducts(colRes.value.id);
-        if (cancelled) return;
-        if (r.ok) {
-          const items = (r.value as { items?: Product[] }).items ?? (r.value as Product[]);
-          setProducts(items);
-        }
-      } finally {
-        if (!cancelled) setLoading(false);
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, [client, slug]);
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
+  const { slug } = await params;
+  const data = await getCollection(slug);
+  if (!data) return {};
+  return {
+    title: `${data.collection.name} — Akua's Bakery`,
+    description: data.collection.description ?? undefined,
+  };
+}
 
-  if (loading) {
-    return <p className="text-center py-20 text-muted-foreground">Loading collection…</p>;
-  }
-  if (!collection) {
-    return (
-      <div className="text-center py-20 text-muted-foreground">
-        <p>Collection not found.</p>
-        <Link href="/" className="text-primary font-semibold">
-          ← Back home
-        </Link>
-      </div>
-    );
-  }
+export default async function CollectionPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  const data = await getCollection(slug);
+  if (!data) notFound();
 
+  const { collection, products } = data;
   return (
     <section className="max-w-7xl mx-auto px-8 pt-12">
       <header className="mb-8 text-center">
@@ -64,7 +60,9 @@ export default function CollectionPage({ params }: { params: Promise<{ slug: str
           {collection.name}
         </h1>
         {collection.description && (
-          <p className="mx-auto mb-2 max-w-xl text-muted-foreground">{collection.description}</p>
+          <p className="mx-auto mb-2 max-w-xl text-muted-foreground">
+            {collection.description}
+          </p>
         )}
         <p className="text-sm text-muted-foreground">
           {products.length} item{products.length === 1 ? "" : "s"}
@@ -75,6 +73,13 @@ export default function CollectionPage({ params }: { params: Promise<{ slug: str
         emptyMessage="No products in this collection yet."
         renderCard={(p) => <StoreProductCard product={p} />}
       />
+      {products.length === 0 && (
+        <p className="text-center mt-8">
+          <Link href="/" className="text-primary font-semibold">
+            ← Back home
+          </Link>
+        </p>
+      )}
     </section>
   );
 }

package/templates/storefront/app/page.tsx

@@ -1,48 +1,47 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { useCimplifyClient } from "@cimplify/sdk/react";
-import type { Category, Collection, Product } from "@cimplify/sdk";
+import type { Metadata } from "next";
+import { cacheTag, cacheLife } from "next/cache";
+import { getServerClient, tags, type Product } from "@cimplify/sdk/server";
 import { Hero } from "@/components/hero";
 import { CollectionStrip } from "@/components/collection-strip";
 import { CategoryGrid } from "@/components/category-grid";
 
-interface CollectionWithProducts {
-  collection: Collection;
-  products: Product[];
-}
+export const metadata: Metadata = {
+  title: "Akua's Bakery — Fresh from the oven, every day",
+  description:
+    "Sourdough, croissants, cakes, and more — handcrafted in East Legon, delivered across Accra.",
+};
+
+async function getHomeData() {
+  "use cache";
+  cacheTag(tags.collections(), tags.categories(), tags.products());
+  cacheLife("hours");
+
+  const client = getServerClient();
+  const [colRes, catRes] = await Promise.all([
+    client.catalogue.getCollections(),
+    client.catalogue.getCategories(),
+  ]);
+  const collections = colRes.ok ? colRes.value : [];
+  const categories = catRes.ok ? catRes.value : [];
 
-export default function HomePage() {
-  const { client } = useCimplifyClient();
-  const [collections, setCollections] = useState<CollectionWithProducts[]>([]);
-  const [categories, setCategories] = useState<Category[]>([]);
+  const collectionsWithProducts = await Promise.all(
+    collections.map(async (col) => {
+      const r = await client.catalogue.getCollectionProducts(col.id);
+      const items = r.ok
+        ? ((r.value as { items?: Product[] }).items ?? (r.value as Product[]))
+        : [];
+      return { collection: col, products: items };
+    }),
+  );
+
+  return {
+    collections: collectionsWithProducts.filter((x) => x.products.length > 0),
+    categories,
+  };
+}
 
-  useEffect(() => {
-    let cancelled = false;
-    void (async () => {
-      const [colRes, catRes] = await Promise.all([
-        client.catalogue.getCollections(),
-        client.catalogue.getCategories(),
-      ]);
-      if (cancelled) return;
-      if (catRes.ok) setCategories(catRes.value);
-      if (colRes.ok) {
-        const withProducts = await Promise.all(
-          colRes.value.map(async (col) => {
-            const r = await client.catalogue.getCollectionProducts(col.id);
-            const items = r.ok
-              ? ((r.value as { items?: Product[] }).items ?? (r.value as Product[]))
-              : [];
-            return { collection: col, products: items };
-          }),
-        );
-        if (!cancelled) setCollections(withProducts.filter((x) => x.products.length > 0));
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, [client]);
+export default async function HomePage() {
+  const { collections, categories } = await getHomeData();
 
   return (
     <>

package/templates/storefront/app/shop/page.tsx

@@ -1,46 +1,30 @@
-"use client";
+import type { Metadata } from "next";
+import { cacheTag, cacheLife } from "next/cache";
+import { getServerClient, tags } from "@cimplify/sdk/server";
+import { ShopClient } from "./shop-client";
 
-import { useEffect, useState } from "react";
-import { CataloguePage, useCimplifyClient } from "@cimplify/sdk/react";
-import type { Category, Product } from "@cimplify/sdk";
-import { StoreProductCard } from "@/components/store-product-card";
+export const metadata: Metadata = {
+  title: "Shop — Akua's Bakery",
+  description: "Browse the full catalogue: breads, pastries, cakes, drinks, merch, and more.",
+};
 
-/** Full catalogue page — every product, with the SDK's filterable layout. */
-export default function ShopPage() {
-  const { client } = useCimplifyClient();
-  const [products, setProducts] = useState<Product[]>();
-  const [categories, setCategories] = useState<Category[]>();
-  const [loading, setLoading] = useState(true);
+async function getShopData() {
+  "use cache";
+  cacheTag(tags.products(), tags.categories());
+  cacheLife("hours");
 
-  useEffect(() => {
-    let cancelled = false;
-    void (async () => {
-      try {
-        const [p, c] = await Promise.all([
-          client.catalogue.getProducts({ limit: 50 }),
-          client.catalogue.getCategories(),
-        ]);
-        if (cancelled) return;
-        if (p.ok) setProducts(p.value.items);
-        if (c.ok) setCategories(c.value);
-      } finally {
-        if (!cancelled) setLoading(false);
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, [client]);
+  const client = getServerClient();
+  const [p, c] = await Promise.all([
+    client.catalogue.getProducts({ limit: 50 }),
+    client.catalogue.getCategories(),
+  ]);
+  return {
+    products: p.ok ? p.value.items : [],
+    categories: c.ok ? c.value : [],
+  };
+}
 
-  if (loading) {
-    return <p className="text-center py-20 text-muted-foreground">Loading shop…</p>;
-  }
-  return (
-    <CataloguePage
-      title="The Menu"
-      products={products}
-      categories={categories}
-      renderCard={(p) => <StoreProductCard product={p} />}
-    />
-  );
+export default async function ShopPage() {
+  const { products, categories } = await getShopData();
+  return <ShopClient products={products} categories={categories} />;
 }

package/templates/storefront/app/shop/shop-client.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { CataloguePage } from "@cimplify/sdk/react";
+import type { Category, Product } from "@cimplify/sdk";
+import { StoreProductCard } from "@/components/store-product-card";
+
+/**
+ * Client island for the shop page. Server-side fetches all products and
+ * categories (cached via `'use cache'` in `app/shop/page.tsx`), then hands
+ * them to `<CataloguePage>` which owns the interactive filter / sort state.
+ */
+export function ShopClient({
+  products,
+  categories,
+}: {
+  products: Product[];
+  categories: Category[];
+}) {
+  return (
+    <CataloguePage
+      title="The Menu"
+      products={products}
+      categories={categories}
+      renderCard={(p) => <StoreProductCard product={p} />}
+    />
+  );
+}

package/templates/storefront/lib/server-client.ts

@@ -0,0 +1,27 @@
+import { createCimplifyClient, type CimplifyClient } from "@cimplify/sdk";
+
+/**
+ * Server-side Cimplify client. Used by Server Components to fetch catalogue
+ * data during SSR/RSC for SEO-friendly product/category/collection pages.
+ *
+ * Cached per-request via React's cache mechanism — calling this multiple
+ * times within the same request returns the same client instance.
+ *
+ * Base-URL resolution:
+ *   1) NEXT_PUBLIC_CIMPLIFY_API_URL (matches the client-side default)
+ *   2) http://127.0.0.1:8787 — the local mock during dev
+ */
+let cached: CimplifyClient | undefined;
+
+export function getServerClient(): CimplifyClient {
+  if (cached) return cached;
+  const baseUrl =
+    process.env.NEXT_PUBLIC_CIMPLIFY_API_URL?.trim() || "http://127.0.0.1:8787";
+  const publicKey = process.env.NEXT_PUBLIC_CIMPLIFY_PUBLIC_KEY ?? "mock-dev";
+  cached = createCimplifyClient({
+    baseUrl,
+    publicKey,
+    suppressPublicKeyWarning: true,
+  });
+  return cached;
+}

package/templates/storefront/next.config.ts

@@ -14,6 +14,11 @@ const MOCK_URL = process.env.NEXT_PUBLIC_CIMPLIFY_API_URL?.trim() || "http://127
  * pass the absolute URL through `<CimplifyProvider/>`).
  */
 const nextConfig: NextConfig = {
+  // Enable Next 16's `cacheComponents` mode so we can use the `'use cache'`
+  // directive + `cacheTag` / `cacheLife` from `next/cache` for SSR caching.
+  // The Cimplify storefront's RSC pages depend on this — disable only if
+  // you've migrated every server fetch to a different caching strategy.
+  cacheComponents: true,
   async rewrites() {
     return [
       { source: "/api/v1/:path*", destination: `${MOCK_URL}/api/v1/:path*` },