@commercebuild/extension 0.0.16 → 0.0.18

package/config/host-libs.json

@@ -1,18 +1,11 @@
 {
   "//": "AUTO-GENERATED from packages/extension-host-libs — do not edit. Regenerate with `yarn generate-extension-host-types`.",
-  "external": [
-    "react",
-    "react-dom",
-    "firebase/app",
-    "firebase/firestore"
-  ],
+  "external": ["react", "react-dom", "firebase/app", "firebase/firestore"],
   "globals": {
     "react": "cb.lib.React",
     "react-dom": "cb.lib.ReactDOM",
     "firebase/app": "cb.lib.firebase.app",
     "firebase/firestore": "cb.lib.firebase.firestore"
   },
-  "forbidden": [
-    "firebase/firestore/lite"
-  ]
+  "forbidden": ["firebase/firestore/lite"]
 }

package/config/tsconfig.extension.json

@@ -5,7 +5,7 @@
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,

package/config/vite.config.mjs

@@ -66,6 +66,32 @@ function cbManifestPlugin() {
           used.add(spec);
         }
       }
+
+      // The admin invocation MERGES its per-bundle hostLibs into the
+      // manifest the storefront build just emitted — never a union
+      // list (a union would make every shopper preload admin-only host
+      // libs). The `admin` key's presence doubles as the "this upload
+      // has an admin bundle" signal for the store admin's loader.
+      if (buildTarget === "admin") {
+        const manifestPath = path.resolve(
+          process.cwd(),
+          "dist/cb-manifest.json",
+        );
+        if (!existsSync(manifestPath)) {
+          throw new Error(
+            "dist/cb-manifest.json is missing — the storefront build must run before the admin build",
+          );
+        }
+        const manifest = JSON.parse(readFileSync(manifestPath, "utf8"));
+        manifest.admin = { hostLibs: [...used].sort() };
+        this.emitFile({
+          type: "asset",
+          fileName: "cb-manifest.json",
+          source: JSON.stringify(manifest, null, 2) + "\n",
+        });
+        return;
+      }
+
       let connections = [];
       let declaredHostLibs = [];
       try {
@@ -132,20 +158,114 @@ function forbiddenImportsPlugin() {
   };
 }
 
-const jsEntry = path.resolve(process.cwd(), "src/index.js");
-const tsEntry = path.resolve(process.cwd(), "src/index.ts");
-const entryFile = existsSync(tsEntry) ? tsEntry : jsEntry;
+// UN-3206: the OPTIONAL admin area (src/admin/) compiles to a second,
+// self-contained bundle — dist/admin.js + admin.css — rendered inside
+// the store admin. CB_BUILD_TARGET=admin selects it; the CLI always
+// runs the storefront build first and the admin one only when the
+// admin entry exists (see scripts/cli.js). Both bundles share the
+// CBExtension global/banner protocol: they execute in different
+// documents and never collide.
+const buildTarget =
+  process.env.CB_BUILD_TARGET === "admin" ? "admin" : "storefront";
+
+function resolveEntry(dir) {
+  const ts = path.resolve(process.cwd(), dir, "index.ts");
+  const js = path.resolve(process.cwd(), dir, "index.js");
+  return existsSync(ts) ? ts : existsSync(js) ? js : null;
+}
+
+const storefrontEntry =
+  resolveEntry("src") ?? path.resolve(process.cwd(), "src/index.js");
+const adminEntry = resolveEntry("src/admin");
+
+if (buildTarget === "admin") {
+  if (!adminEntry) {
+    throw new Error(
+      "CB_BUILD_TARGET=admin but src/admin/index.ts does not exist",
+    );
+  }
+  if (!existsSync(path.resolve(process.cwd(), "src/admin/styles/index.css"))) {
+    throw new Error(
+      "src/admin/index.ts requires src/admin/styles/index.css (the admin stylesheet entry)",
+    );
+  }
+}
+
+const entryFile = buildTarget === "admin" ? adminEntry : storefrontEntry;
+
+// Import boundary rules, mirroring the in-browser editor compiler in
+// cb-store (apps/storeadmin extension-editor esbuild plugin) — the two
+// pipelines MUST agree, or code that fails in editor preview would
+// still publish:
+//   - src/admin/** may import only src/admin/** and src/shared/**;
+//   - src/shared/** may import only src/shared/**;
+//   - nothing outside src/admin/** may import src/admin/**.
+// These keep each bundle's module set structurally clean, which is what
+// makes the per-target Tailwind source scopes exact.
+function projectRelative(file) {
+  const abs = path.resolve(file.split("?")[0]);
+  const rel = path.relative(process.cwd(), abs).split(path.sep).join("/");
+  return rel.startsWith("..") ? null : rel;
+}
+
+export function importBoundaryViolation(importer, resolved) {
+  const fromAdmin = importer.startsWith("src/admin/");
+  const fromShared = importer.startsWith("src/shared/");
+  const toAdmin = resolved.startsWith("src/admin/");
+  const toShared = resolved.startsWith("src/shared/");
+  if (fromAdmin && !toAdmin && !toShared) {
+    return "files under src/admin/ may only import src/admin/ or src/shared/ (the admin bundle must stay independent of storefront code)";
+  }
+  if (fromShared && !toShared) {
+    return "files under src/shared/ may only import src/shared/ (shared code is part of both bundles)";
+  }
+  if (!fromAdmin && toAdmin) {
+    return "only files under src/admin/ may import src/admin/ (admin code never ships in the storefront bundle)";
+  }
+  return null;
+}
+
+function importBoundaryPlugin() {
+  return {
+    name: "cb-import-boundaries",
+    enforce: "pre",
+    resolveId(source, importer) {
+      if (!importer || !source.startsWith(".")) return null;
+      const from = projectRelative(importer);
+      // Directory prefixes are all the rules need — a missing extension
+      // or /index resolution never changes which subtree a path is in.
+      const to = projectRelative(
+        path.resolve(path.dirname(importer.split("?")[0]), source),
+      );
+      if (!from || !to) return null;
+      const violation = importBoundaryViolation(from, to);
+      if (violation) {
+        throw new Error(
+          `Forbidden import of "${source}" from "${from}": ${violation}`,
+        );
+      }
+      return null;
+    },
+  };
+}
 
 const baseBuildConfig = {
   lib: {
     entry: entryFile,
     name: "CBExtension",
     formats: ["umd"],
-    fileName: (format, entryName) =>
-      `${entryName}.${format === "es" ? "mjs" : "js"}`,
+    // Both entries are index.ts, so the entry name can't distinguish
+    // the bundles — name the artifacts by target explicitly.
+    fileName: () => (buildTarget === "admin" ? "admin.js" : "index.js"),
+    cssFileName: buildTarget === "admin" ? "admin" : "style",
   },
   minify: "esbuild",
   sourcemap: false,
+  // The admin invocation writes into the dist/ the storefront build
+  // just produced — vite's default would empty it and delete
+  // index.js/style.css/cb-manifest.json (which the manifest merge
+  // below depends on).
+  emptyOutDir: buildTarget !== "admin",
   rollupOptions: {
     external: hostLibs.external,
     output: {
@@ -153,7 +273,9 @@ const baseBuildConfig = {
       globals: hostLibs.globals,
       assetFileNames: (assetInfo) => {
         if (assetInfo.name.endsWith(".css")) {
-          return assetInfo.originalFileName || assetInfo.name || "asset.css";
+          // The lib css asset is named per target here — both entries
+          // are index.ts, so nothing upstream distinguishes them.
+          return buildTarget === "admin" ? "admin.css" : "style.css";
         }
         return assetInfo.name;
       },
@@ -164,6 +286,7 @@ const baseBuildConfig = {
 const prodConfig = {
   plugins: [
     forbiddenImportsPlugin(),
+    importBoundaryPlugin(),
     cbManifestPlugin(),
     react({
       jsxRuntime: "classic",
@@ -205,6 +328,7 @@ export default defineConfig(({ mode, command }) => {
       root: ".",
       plugins: [
         forbiddenImportsPlugin(),
+        importBoundaryPlugin(),
         cbManifestPlugin(),
         ViteHMRNotifierPlugin(),
         react({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercebuild/extension",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "types": "./types/index.d.ts",
   "exports": {
     ".": {
@@ -10,8 +10,8 @@
     "./config/tsconfig.extension.json": "./config/tsconfig.extension.json"
   },
   "dependencies": {
-    "@commercebuild/platform-api": "^0.*",
-    "@commercebuild/ui": "^0.*",
+    "@commercebuild/platform-api": "^0.11.33",
+    "@commercebuild/ui": "~0.0.9",
     "@headlessui/react": "^2.2.4",
     "@tailwindcss/postcss": "^4.1.10",
     "@tailwindcss/vite": "^4.1.11",
@@ -34,5 +34,8 @@
   },
   "bin": {
     "commercebuild-extension": "./scripts/cli.js"
+  },
+  "scripts": {
+    "test": "node scripts/test-build.mjs"
   }
-}
+}

package/schemas/config.schema.json

@@ -19,9 +19,7 @@
   "$defs": {
     "connection": {
       "type": "object",
-      "required": [
-        "name"
-      ],
+      "required": ["name"],
       "properties": {
         "name": {
           "type": "string",
@@ -30,16 +28,11 @@
         },
         "provider": {
           "description": "Backing service. Absent means \"firebase\".",
-          "enum": [
-            "firebase"
-          ]
+          "enum": ["firebase"]
         },
         "scope": {
           "description": "\"store\" (the default): the merchant supplies the config per store under Installed Apps → Configure data — do not put a config here. \"app\": the config is fixed in this declaration (required below), owned by the app and not merchant-overridable.",
-          "enum": [
-            "store",
-            "app"
-          ],
+          "enum": ["store", "app"],
           "default": "store"
         },
         "label": {
@@ -63,14 +56,10 @@
                 "const": "app"
               }
             },
-            "required": [
-              "scope"
-            ]
+            "required": ["scope"]
           },
           "then": {
-            "required": [
-              "config"
-            ]
+            "required": ["config"]
           }
         }
       ]
@@ -78,18 +67,13 @@
     "firebaseConfig": {
       "type": "object",
       "description": "Firebase web config (the firebaseConfig snippet from the Firebase console). Public by design — access control lives in the project's Security Rules.",
-      "required": [
-        "apiKey",
-        "projectId"
-      ],
+      "required": ["apiKey", "projectId"],
       "properties": {
         "apiKey": {
-          "type": "string",
-          "minLength": 1
+          "type": "string"
         },
         "projectId": {
-          "type": "string",
-          "minLength": 1
+          "type": "string"
         },
         "authDomain": {
           "type": "string"

package/scripts/cli.js

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 
 import { execSync } from "child_process";
+import { existsSync } from "fs";
 import path from "path";
 import { fileURLToPath } from "url";
 import { displayError } from "./utils.mjs";
@@ -8,18 +9,40 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const args = process.argv.slice(2);
 
+const viteConfigPath = path.resolve(__dirname, "../config/vite.config.mjs");
+
+// Two independent bundles from one project: the storefront build always
+// runs; the admin build runs only when the OPTIONAL admin area exists,
+// and always AFTER the storefront one — its cb-manifest plugin merges
+// an `admin` section into the manifest the storefront build emitted,
+// and it keeps dist/ intact (emptyOutDir: false in the vite config).
+function hasAdminEntry() {
+  return (
+    existsSync(path.resolve(process.cwd(), "src/admin/index.ts")) ||
+    existsSync(path.resolve(process.cwd(), "src/admin/index.js"))
+  );
+}
+
+function build() {
+  execSync(`vite build --config ${viteConfigPath}`, { stdio: "inherit" });
+  if (hasAdminEntry()) {
+    execSync(`vite build --config ${viteConfigPath}`, {
+      stdio: "inherit",
+      env: { ...process.env, CB_BUILD_TARGET: "admin" },
+    });
+  }
+}
+
 if (args.includes("dev")) {
   try {
-    const viteConfigPath = path.resolve(__dirname, "../config/vite.config.mjs");
-    execSync(`vite build --config ${viteConfigPath}`, { stdio: "inherit" });
+    build();
     execSync(`vite --config ${viteConfigPath}`, { stdio: "inherit" });
   } catch (error) {
     displayError("Failed to start commercebuild extension server:", error);
   }
 } else if (args.includes("build")) {
   try {
-    const viteConfigPath = path.resolve(__dirname, "../config/vite.config.mjs");
-    execSync(`vite build --config ${viteConfigPath}`, { stdio: "inherit" });
+    build();
   } catch (error) {
     displayError("Failed to build with commercebuild extension:", error);
   }

package/scripts/test-build.mjs

@@ -0,0 +1,223 @@
+#!/usr/bin/env node
+/**
+ * Integration test for the dual-bundle build (UN-3206): builds a scratch
+ * fixture project with the real vite pipeline and asserts the artifact
+ * contract the hosts depend on — storefront trio untouched by the admin
+ * invocation, per-target CSS scan scopes, cb-manifest merge semantics,
+ * and the import boundary rules. Run with `node scripts/test-build.mjs`.
+ *
+ * These scopes/rules MUST stay in lockstep with the in-browser editor
+ * compiler in cb-store (apps/storeadmin extension-editor) — this test is
+ * the canonical side of that parity contract.
+ */
+import assert from "node:assert/strict";
+import { execFileSync } from "node:child_process";
+import {
+  cpSync,
+  existsSync,
+  mkdirSync,
+  mkdtempSync,
+  readFileSync,
+  rmSync,
+  symlinkSync,
+  writeFileSync,
+} from "node:fs";
+import { tmpdir } from "node:os";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const pkgRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
+const viteBin = path.join(pkgRoot, "node_modules", ".bin", "vite");
+const viteConfig = path.join(pkgRoot, "config", "vite.config.mjs");
+
+const fixture = mkdtempSync(path.join(tmpdir(), "cb-ext-build-"));
+
+function write(rel, content) {
+  const target = path.join(fixture, rel);
+  mkdirSync(path.dirname(target), { recursive: true });
+  writeFileSync(target, content);
+}
+
+const STOREFRONT_CSS = `@reference "tailwindcss/theme.css";
+@import "tailwindcss/utilities.css" layer(utilities) source(none);
+@config "@commercebuild/extension/config/tailwind.config.js";
+@source "../";
+@source not "../admin";
+`;
+
+const ADMIN_CSS = `@reference "tailwindcss/theme.css";
+@import "tailwindcss/utilities.css" layer(utilities) source(none);
+@config "@commercebuild/extension/config/tailwind.config.js";
+@source "../";
+@source "../../shared";
+`;
+
+function scaffold() {
+  write(
+    "commercebuild.json",
+    JSON.stringify({
+      id: "fixture",
+      name: "Fixture",
+      type: "extension",
+      description: "",
+      version: "0.0.1",
+      cbApiVersion: "^0.6",
+    }),
+  );
+  write(
+    "src/index.ts",
+    'import "./styles/index.css";\nexport * as components from "./cms";\nexport * as pages from "./pages";\n',
+  );
+  write("src/cms/index.ts", "export {};\n");
+  write("src/pages/index.ts", 'export * as Shop from "./shop";\n');
+  write(
+    "src/pages/shop.tsx",
+    'import React from "react";\nimport { shared } from "../shared/util";\nexport default function Shop() {\n  const [n] = React.useState(0);\n  return <div className="p-1">{shared()}{n}</div>;\n}\n',
+  );
+  write(
+    "src/shared/util.tsx",
+    'import React from "react";\nexport function shared() {\n  return <span className="p-2">shared</span>;\n}\n',
+  );
+  write("src/styles/index.css", STOREFRONT_CSS);
+  write(
+    "src/admin/index.ts",
+    'import "./styles/index.css";\nexport * as adminPages from "./pages";\n',
+  );
+  write("src/admin/pages/index.ts", 'export * as Dashboard from "./dashboard";\n');
+  write(
+    "src/admin/pages/dashboard.tsx",
+    'import React from "react";\nimport { getFirestore } from "firebase/firestore";\nimport { shared } from "../../shared/util";\nexport default function Dashboard() {\n  const [n] = React.useState(0);\n  return <div className="p-3">{String(!!getFirestore)}{shared()}{n}</div>;\n}\n',
+  );
+  write("src/admin/styles/index.css", ADMIN_CSS);
+
+  // The fixture resolves the package (for @config) and tailwindcss (for
+  // the layer stylesheets) through symlinks into this repo's own
+  // installation — no network install.
+  const nm = path.join(fixture, "node_modules");
+  mkdirSync(path.join(nm, "@commercebuild"), { recursive: true });
+  symlinkSync(pkgRoot, path.join(nm, "@commercebuild", "extension"));
+  // pnpm layout: this entry is itself a symlink into the store — a
+  // symlink to a symlink resolves fine.
+  symlinkSync(
+    path.join(pkgRoot, "node_modules", "tailwindcss"),
+    path.join(nm, "tailwindcss"),
+  );
+}
+
+function build(env = {}) {
+  execFileSync(viteBin, ["build", "--config", viteConfig], {
+    cwd: fixture,
+    stdio: "pipe",
+    env: { ...process.env, ...env },
+  });
+}
+
+function dist(name) {
+  return readFileSync(path.join(fixture, "dist", name), "utf8");
+}
+
+try {
+  scaffold();
+
+  // --- Dual build: storefront first, then admin (matching cli.js). ---
+  build();
+  build({ CB_BUILD_TARGET: "admin" });
+
+  for (const file of [
+    "index.js",
+    "style.css",
+    "admin.js",
+    "admin.css",
+    "cb-manifest.json",
+  ]) {
+    assert.ok(
+      existsSync(path.join(fixture, "dist", file)),
+      `dist/${file} exists after the dual build`,
+    );
+  }
+
+  // Per-target CSS scan scopes (p-1=storefront page, p-2=shared, p-3=admin).
+  const style = dist("style.css");
+  assert.match(style, /\.p-1\b/, "style.css has storefront utilities");
+  assert.match(style, /\.p-2\b/, "style.css has shared utilities");
+  assert.doesNotMatch(style, /\.p-3\b/, "style.css has NO admin utilities");
+  const adminCss = dist("admin.css");
+  assert.doesNotMatch(adminCss, /\.p-1\b/, "admin.css has NO storefront utilities");
+  assert.match(adminCss, /\.p-2\b/, "admin.css has shared utilities");
+  assert.match(adminCss, /\.p-3\b/, "admin.css has admin utilities");
+
+  // Manifest merge: storefront fields retained, admin.hostLibs per-bundle.
+  const manifest = JSON.parse(dist("cb-manifest.json"));
+  assert.equal(manifest.cbApiVersion, "^0.6");
+  assert.deepEqual(manifest.hostLibs, ["react"]);
+  assert.deepEqual(manifest.admin, {
+    hostLibs: ["firebase/firestore", "react"],
+  });
+
+  // Both bundles carry the meta banner and the shared global protocol.
+  assert.match(dist("admin.js"), /__CBExtensionMeta/);
+  assert.match(dist("admin.js"), /CBExtension/);
+  assert.match(dist("index.js"), /__CBExtensionMeta/);
+
+  // --- Boundary rules fail the build, all three directions. ---
+  const violations = [
+    [
+      "src/admin/pages/bad.ts",
+      'export { x } from "../../cms/bad-target";\n',
+      "src/admin/pages/index.ts",
+      './bad',
+    ],
+    [
+      "src/pages/bad.ts",
+      'export { helper } from "../admin/helper";\n',
+      "src/pages/index.ts",
+      './bad',
+    ],
+    [
+      "src/shared/bad.ts",
+      'export { helper } from "../admin/helper";\n',
+      "src/pages/index.ts",
+      '../shared/bad',
+    ],
+  ];
+  write("src/cms/bad-target.ts", "export const x = 1;\n");
+  write("src/admin/helper.ts", "export const helper = 1;\n");
+  for (const [file, source, barrel, specifier] of violations) {
+    write(file, source);
+    const original = readFileSync(path.join(fixture, barrel), "utf8");
+    write(barrel, `${original}export * from "${specifier}";\n`);
+    let failed = false;
+    try {
+      build(file.startsWith("src/admin/") ? { CB_BUILD_TARGET: "admin" } : {});
+    } catch (err) {
+      failed = true;
+      assert.match(
+        String(err.stderr ?? err),
+        /Forbidden import/,
+        `${file} violation names the rule`,
+      );
+    }
+    assert.ok(failed, `${file} boundary violation fails the build`);
+    rmSync(path.join(fixture, file));
+    write(barrel, original);
+  }
+
+  // --- Admin-less project: classic three artifacts, nothing extra. ---
+  rmSync(path.join(fixture, "src/admin"), { recursive: true });
+  rmSync(path.join(fixture, "dist"), { recursive: true });
+  build();
+  assert.ok(existsSync(path.join(fixture, "dist", "index.js")));
+  assert.ok(existsSync(path.join(fixture, "dist", "style.css")));
+  assert.ok(!existsSync(path.join(fixture, "dist", "admin.js")));
+  assert.ok(!existsSync(path.join(fixture, "dist", "admin.css")));
+  assert.equal(JSON.parse(dist("cb-manifest.json")).admin, undefined);
+  // Admin invocation without an admin entry is an explicit error.
+  assert.throws(
+    () => build({ CB_BUILD_TARGET: "admin" }),
+    /src\/admin\/index\.ts/,
+  );
+
+  console.log("extension dual-build integration test: OK");
+} finally {
+  rmSync(fixture, { recursive: true, force: true });
+}

package/types/css.d.ts

@@ -0,0 +1,7 @@
+// Stylesheet imports are side-effect only: the build extracts them into
+// the bundle's CSS artifact (style.css / admin.css) and they resolve to
+// no JS value. This ambient declaration is what lets the entry barrels'
+// `import "./styles/index.css"` type-check — newer TypeScript
+// (noUncheckedSideEffectImports) errors on side-effect imports that
+// resolve to neither a module nor a type declaration.
+declare module "*.css";

package/types/global.d.ts

@@ -8,7 +8,12 @@ import React__default, { CSSProperties } from "react";
 import * as ReactDOM from "react-dom";
 import * as FirebaseAppNs from "firebase/app";
 import * as FirebaseFirestoreNs from "firebase/firestore";
-import { cart_v2, catalog_v1, Platform, customer_v1 } from "@commercebuild/platform-api";
+import {
+  cart_v2,
+  catalog_v1,
+  Platform,
+  customer_v1,
+} from "@commercebuild/platform-api";
 import * as icons from "lucide-react";
 import * as uis from "@commercebuild/ui";
 import {
@@ -54,6 +59,12 @@ interface AddToCartProps {
   className?: string;
   /** Inline style forwarded to the button (e.g. Product Card button-scheme vars). */
   style?: CSSProperties;
+  /**
+   * Button-scheme variant forwarded to the button, which opts it into the
+   * `data-btn-variant` colour and hover-animation rules in globals.css. Only
+   * set by callers that also apply a `button-scheme-{key}` class.
+   */
+  btnVariant?: "primary" | "secondary" | "outline";
   /**
    * Width control (opt-in). Omit for the default responsive width; `true` = full
    * width at all breakpoints; `false` = content width (auto).
@@ -66,6 +77,7 @@ declare function AddToCart({
   onSuccessCallback,
   className,
   style,
+  btnVariant,
   fullWidth,
 }: AddToCartProps): React.JSX.Element;
 

package/types/index.d.ts

@@ -1,3 +1,2 @@
 import "./global";
-import "./product";
-import "./category";
+import "./css";

package/types/category.d.ts

@@ -1,7 +0,0 @@
-import { catalog_v1 } from "@commercebuild/platform-api";
-
-declare global {
-  type Category = catalog_v1.CatalogHierarchyBrandCategoryDto;
-}
-
-export {};

package/types/product.d.ts

@@ -1,14 +0,0 @@
-import { catalog_v1 } from "@commercebuild/platform-api";
-
-declare global {
-  interface Product extends catalog_v1.CatalogProductSearchProduct {
-    image: Required<
-      Pick<catalog_v1.CatalogProductSearchProduct["details"]["images"], "main">
-    >["main"];
-    originalPrice?: catalog_v1.CatalogPriceItemDto;
-    formattedPrice: string;
-    href: string;
-  }
-}
-
-export {};