@orderlyshop/web-components 0.1.0-build.7045

package/bin/orderly-build-category-pages.mjs

@@ -0,0 +1,160 @@
+#!/usr/bin/env node
+import { spawn } from "node:child_process";
+import { fileURLToPath } from "node:url";
+
+const args = parseArgs(process.argv.slice(2));
+
+if (args.help || args.h) {
+  printHelp();
+  process.exit(0);
+}
+
+const generateScript = fileURLToPath(new URL("./orderly-generate-category-pages.mjs", import.meta.url));
+const hydrateScript = fileURLToPath(new URL("./orderly-hydrate-static-pages.mjs", import.meta.url));
+const generatorArgs = passthroughGeneratorArgs(process.argv.slice(2));
+const hydrateArgs = passthroughHydrateArgs(process.argv.slice(2));
+
+if (args["dry-run"]) {
+  await runNode([generateScript, ...generatorArgs]);
+  process.exit(0);
+}
+
+await runNode([generateScript, ...generatorArgs]);
+try {
+  await runCommand(args["build-command"] ?? "npm run build", {
+    VITE_ORDERLY_CATEGORY_URL_MODE: "path",
+    ORDERLY_CATEGORY_URL_MODE: "path"
+  });
+  if (!args["no-hydrate"]) {
+    await runNode([hydrateScript, ...hydrateArgs]);
+  }
+} finally {
+  await runNode([generateScript, "--clean", ...cleanGeneratorArgs(generatorArgs)]);
+}
+
+function runNode(args) {
+  return run(process.execPath, args);
+}
+
+function runCommand(command, env = {}) {
+  return run(command, [], { shell: true, env });
+}
+
+function run(command, args, options = {}) {
+  return new Promise((resolve, reject) => {
+    const child = spawn(command, args, {
+      env: { ...process.env, ...options.env },
+      shell: options.shell ?? false,
+      stdio: "inherit"
+    });
+    child.on("error", reject);
+    child.on("exit", (code) => {
+      if (code === 0) {
+        resolve();
+      } else {
+        reject(new Error(`${command} ${args.join(" ")} exited with code ${code}.`));
+      }
+    });
+  });
+}
+
+function passthroughGeneratorArgs(values) {
+  const result = [];
+  for (let index = 0; index < values.length; index += 1) {
+    const value = values[index];
+    const name = value.startsWith("--") ? value.slice(2).split("=", 1)[0] : "";
+    if (buildOnlyArgs().has(name) || hydrateOnlyArgs().has(name)) {
+      if (!value.includes("=") && values[index + 1] && !values[index + 1].startsWith("--")) {
+        index += 1;
+      }
+      continue;
+    }
+    result.push(value);
+  }
+  return result;
+}
+
+function passthroughHydrateArgs(values) {
+  const result = [];
+  for (let index = 0; index < values.length; index += 1) {
+    const value = values[index];
+    const name = value.startsWith("--") ? value.slice(2).split("=", 1)[0] : "";
+    if (buildOnlyArgs().has(name) || generatorOnlyArgs().has(name) || name === "dry-run") {
+      if (!value.includes("=") && values[index + 1] && !values[index + 1].startsWith("--")) {
+        index += 1;
+      }
+      continue;
+    }
+    if (name === "hydrate") {
+      continue;
+    }
+    result.push(value);
+  }
+  return result;
+}
+
+function cleanGeneratorArgs(values) {
+  const blocked = new Set(["--dry-run", "--clean"]);
+  return values.filter((value) => !blocked.has(value));
+}
+
+function buildOnlyArgs() {
+  return new Set(["build-command", "hydrate", "no-hydrate"]);
+}
+
+function generatorOnlyArgs() {
+  return new Set(["template", "categories-dir", "component-tag", "clean"]);
+}
+
+function hydrateOnlyArgs() {
+  return new Set([
+    "dist",
+    "dist-categories-dir",
+    "shop-query",
+    "shop-query-export",
+    "base-url",
+    "protocol",
+    "products-per-category",
+    "home-products-per-category",
+    "product-page",
+    "product-root",
+    "image-base-url",
+    "skip-products",
+    "strict-products"
+  ]);
+}
+
+function parseArgs(values) {
+  const parsed = {};
+  for (let index = 0; index < values.length; index += 1) {
+    const value = values[index];
+    if (!value.startsWith("--")) {
+      continue;
+    }
+    const [name, inlineValue] = value.slice(2).split("=", 2);
+    if (inlineValue !== undefined) {
+      parsed[name] = inlineValue;
+    } else if (values[index + 1] && !values[index + 1].startsWith("--")) {
+      parsed[name] = values[index + 1];
+      index += 1;
+    } else {
+      parsed[name] = true;
+    }
+  }
+  return parsed;
+}
+
+function printHelp() {
+  console.log(`Usage: orderly-build-category-pages [options]
+
+Generate real URL category pages, run the current project's build, then remove generated source pages.
+
+Options:
+  --build-command <cmd>    Build command. Defaults to "npm run build".
+  --no-hydrate             Skip static homepage/category fallback hydration after build.
+  --dry-run                Forward to orderly-generate-category-pages without building.
+
+Category options are forwarded to orderly-generate-category-pages. Hydration options are forwarded
+to orderly-hydrate-static-pages.
+`);
+}

package/bin/orderly-generate-category-pages.mjs

@@ -0,0 +1,308 @@
+#!/usr/bin/env node
+import { existsSync, mkdirSync, readFileSync, readdirSync, rmSync, statSync, writeFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import { basename, dirname, extname, resolve } from "node:path";
+import { pathToFileURL } from "node:url";
+import {
+  createCategoryNavigation,
+  flattenCategoryNavigation
+} from "../dist/taxonomy.js";
+
+const root = process.cwd();
+const args = parseArgs(process.argv.slice(2));
+
+if (args.help || args.h) {
+  printHelp();
+  process.exit(0);
+}
+
+const navigationFile = resolve(root, args.navigation ?? args.taxonomy ?? defaultNavigationPath());
+const categoriesDir = resolve(root, args["categories-dir"] ?? defaultCategoriesDir());
+const templateFile = resolve(root, args.template ?? defaultTemplatePath());
+const exportName = args.export;
+const pageRoot = args["page-root"] ?? "/categories/";
+const componentTag = args["component-tag"] ?? "orderly-category-page";
+const siteTitle = args["site-title"] ?? defaultSiteTitle();
+const generatedMarker = `<!-- Generated by orderly-generate-category-pages from ${relativePath(navigationFile)}. Do not edit directly. -->`;
+const dryRun = Boolean(args["dry-run"]);
+const cleanOnly = Boolean(args.clean);
+
+if (!existsSync(navigationFile)) {
+  throw new Error(`Navigation file not found: ${relativePath(navigationFile)}`);
+}
+
+const navigationModule = await loadNavigationModule(navigationFile);
+const definitions = navigationDefinitions(navigationModule, exportName);
+if (!Array.isArray(definitions)) {
+  const expected = exportName ? `an array named ${exportName}` : "navigationDefinitions";
+  throw new Error(`${relativePath(navigationFile)} must export ${expected}.`);
+}
+
+const navigation = createCategoryNavigation(definitions, {
+  pageRoot,
+  urlMode: "path"
+});
+const categories = flattenCategoryNavigation(navigation);
+
+if (cleanOnly) {
+  const removed = cleanGeneratedPages();
+  console.log(`Removed ${removed} generated category page${removed === 1 ? "" : "s"}.`);
+  process.exit(0);
+}
+
+if (!existsSync(templateFile)) {
+  throw new Error(`Category page template not found: ${relativePath(templateFile)}`);
+}
+
+const template = readFileSync(templateFile, "utf8");
+const pages = categories.map((category) => {
+  const file = resolve(categoriesDir, ...category.metadata.pathSegments, "index.html");
+  return {
+    category,
+    file,
+    html: renderCategoryPage(template, category)
+  };
+});
+
+if (dryRun) {
+  for (const page of pages) {
+    console.log(`${page.category.id} -> ${relativePath(page.file)}`);
+  }
+  console.log(`Would generate ${pages.length} category page${pages.length === 1 ? "" : "s"}.`);
+  process.exit(0);
+}
+
+cleanGeneratedPages();
+for (const page of pages) {
+  mkdirSync(dirname(page.file), { recursive: true });
+  writeFileSync(page.file, page.html, "utf8");
+}
+console.log(`Generated ${pages.length} category page${pages.length === 1 ? "" : "s"}.`);
+
+function renderCategoryPage(templateHtml, category) {
+  let html = templateHtml.replace("<!doctype html>", `<!doctype html>\n${generatedMarker}`);
+  html = html.replace(/<title>.*?<\/title>/, `<title>${escapeHtml(category.label)} | ${escapeHtml(siteTitle)}</title>`);
+  html = replaceCategoryElement(html, category);
+  html = injectDescription(html, category.metadata.description);
+  return html;
+}
+
+function replaceCategoryElement(html, category) {
+  const emptyElement = `<${componentTag}></${componentTag}>`;
+  if (html.includes(emptyElement)) {
+    return html.replace(emptyElement, `<${componentTag} slug="${escapeAttribute(category.id)}"></${componentTag}>`);
+  }
+  const selfClosingPattern = new RegExp(`<${escapeRegExp(componentTag)}\\b([^>]*)/>`);
+  if (selfClosingPattern.test(html)) {
+    return html.replace(selfClosingPattern, (_match, attributes) => `<${componentTag}${setAttribute(attributes, "slug", category.id)}></${componentTag}>`);
+  }
+  const openingPattern = new RegExp(`<${escapeRegExp(componentTag)}\\b([^>]*)>`);
+  if (openingPattern.test(html)) {
+    return html.replace(openingPattern, (_match, attributes) => `<${componentTag}${setAttribute(attributes, "slug", category.id)}>`);
+  }
+  throw new Error(`${relativePath(templateFile)} must contain <${componentTag}></${componentTag}>.`);
+}
+
+function injectDescription(html, description) {
+  const meta = `<meta name="description" content="${escapeAttribute(description)}">`;
+  if (html.includes("<!-- orderly-head-includes -->")) {
+    return html.replace("<!-- orderly-head-includes -->", `<!-- orderly-head-includes -->\n    ${meta}`);
+  }
+  if (html.includes("</head>")) {
+    return html.replace("</head>", `    ${meta}\n  </head>`);
+  }
+  return html;
+}
+
+function cleanGeneratedPages() {
+  let removed = 0;
+  for (const file of generatedCategoryFiles(categoriesDir)) {
+    if (readFileSync(file, "utf8").includes("Generated by orderly-generate-category-pages")) {
+      rmSync(file);
+      removed += 1;
+    }
+  }
+  if (existsSync(categoriesDir)) {
+    removeEmptyDirectories(categoriesDir);
+    if (readdirSync(categoriesDir).length === 0) {
+      rmSync(categoriesDir, { recursive: true });
+    }
+  }
+  return removed;
+}
+
+function generatedCategoryFiles(dir) {
+  if (!existsSync(dir)) {
+    return [];
+  }
+  const files = [];
+  for (const entry of readdirSync(dir)) {
+    const fullPath = resolve(dir, entry);
+    const stat = statSync(fullPath);
+    if (stat.isDirectory()) {
+      files.push(...generatedCategoryFiles(fullPath));
+    } else if (entry === "index.html" && fullPath !== templateFile) {
+      files.push(fullPath);
+    }
+  }
+  return files;
+}
+
+function removeEmptyDirectories(dir) {
+  for (const entry of readdirSync(dir)) {
+    const fullPath = resolve(dir, entry);
+    if (statSync(fullPath).isDirectory()) {
+      removeEmptyDirectories(fullPath);
+      if (readdirSync(fullPath).length === 0) {
+        rmSync(fullPath, { recursive: true });
+      }
+    }
+  }
+}
+
+async function loadNavigationModule(file) {
+  const extension = extname(file).toLowerCase();
+  if (extension === ".ts" || extension === ".tsx") {
+    return loadTypeScriptNavigationModule(file);
+  }
+  return import(pathToFileURL(file).href);
+}
+
+async function loadTypeScriptNavigationModule(file) {
+  const require = createRequire(resolve(root, "package.json"));
+  let typescript;
+  try {
+    typescript = require("typescript");
+  } catch (error) {
+    throw new Error(`TypeScript navigation files require the current shop project to install typescript. Could not load typescript while reading ${relativePath(file)}.`, { cause: error });
+  }
+
+  const output = typescript.transpileModule(readFileSync(file, "utf8"), {
+    fileName: file,
+    compilerOptions: {
+      module: typescript.ModuleKind.ES2022,
+      target: typescript.ScriptTarget.ES2022,
+      esModuleInterop: true,
+      importsNotUsedAsValues: typescript.ImportsNotUsedAsValues?.Remove
+    }
+  }).outputText;
+  const temporaryFile = resolve(dirname(file), `.orderly-${basename(file, extname(file))}-${process.pid}-${Date.now()}.mjs`);
+  writeFileSync(temporaryFile, output, "utf8");
+  try {
+    return await import(pathToFileURL(temporaryFile).href);
+  } finally {
+    rmSync(temporaryFile, { force: true });
+  }
+}
+
+function defaultNavigationPath() {
+  for (const candidate of ["src/navigation.ts", "src/navigation.js", "src/navigation.mjs", "navigation.ts", "navigation.js", "navigation.mjs", "src/taxonomy.ts", "src/taxonomy.js", "src/taxonomy.mjs", "taxonomy.ts", "taxonomy.js", "taxonomy.mjs"]) {
+    if (existsSync(resolve(root, candidate))) {
+      return candidate;
+    }
+  }
+  return "src/navigation.ts";
+}
+
+function defaultTemplatePath() {
+  if (existsSync(resolve(root, "src/category.html"))) {
+    return "src/category.html";
+  }
+  return "category.html";
+}
+
+function defaultCategoriesDir() {
+  if (existsSync(resolve(root, "src/category.html"))) {
+    return "src/categories";
+  }
+  return "categories";
+}
+
+function navigationDefinitions(module, exportName) {
+  if (exportName) {
+    return module[exportName];
+  }
+  return module.navigationDefinitions ?? module.categoryDefinitions;
+}
+
+function defaultSiteTitle() {
+  const packageFile = resolve(root, "package.json");
+  if (!existsSync(packageFile)) {
+    return "Shop";
+  }
+  try {
+    const packageJson = JSON.parse(readFileSync(packageFile, "utf8"));
+    return packageJson.displayName ?? packageJson.description ?? packageJson.name ?? "Shop";
+  } catch {
+    return "Shop";
+  }
+}
+
+function parseArgs(values) {
+  const parsed = {};
+  for (let index = 0; index < values.length; index += 1) {
+    const value = values[index];
+    if (!value.startsWith("--")) {
+      continue;
+    }
+    const [name, inlineValue] = value.slice(2).split("=", 2);
+    if (inlineValue !== undefined) {
+      parsed[name] = inlineValue;
+    } else if (values[index + 1] && !values[index + 1].startsWith("--")) {
+      parsed[name] = values[index + 1];
+      index += 1;
+    } else {
+      parsed[name] = true;
+    }
+  }
+  return parsed;
+}
+
+function printHelp() {
+  console.log(`Usage: orderly-generate-category-pages [options]
+
+Generate real URL category pages for the current shop from NavigationDefinition data.
+
+Options:
+  --navigation <file>      Navigation module. Defaults to src/navigation.ts or src/navigation.js when present.
+  --taxonomy <file>        Backward-compatible alias for --navigation.
+  --export <name>          Export name for navigation definitions. Defaults to navigationDefinitions.
+  --template <file>        Category page template. Defaults to src/category.html when present, otherwise category.html.
+  --categories-dir <dir>   Output directory. Defaults to src/categories when src/category.html is present, otherwise categories.
+  --page-root <path>       Category page root used for navigation. Defaults to /categories/.
+  --component-tag <tag>    Category page custom element tag. Defaults to orderly-category-page.
+  --site-title <title>     Site title suffix used in generated <title> tags.
+  --dry-run                Print generated pages without writing files.
+  --clean                  Remove generated category pages.
+  --help, -h               Show this help.
+`);
+}
+
+function relativePath(file) {
+  return file.replace(`${root}/`, "");
+}
+
+function escapeHtml(value) {
+  return String(value)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+}
+
+function escapeAttribute(value) {
+  return escapeHtml(value).replace(/"/g, "&quot;");
+}
+
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+function setAttribute(attributes, name, value) {
+  const cleanAttributes = attributes.replace(/\s*\/\s*$/g, "");
+  const escapedValue = escapeAttribute(value);
+  const pattern = new RegExp(`\\s${escapeRegExp(name)}=["'][^"']*["']`, "i");
+  if (pattern.test(cleanAttributes)) {
+    return cleanAttributes.replace(pattern, ` ${name}="${escapedValue}"`);
+  }
+  return `${cleanAttributes} ${name}="${escapedValue}"`;
+}