tiendu 0.6.1 → 0.8.0

package/lib/build.mjs

@@ -10,8 +10,7 @@ import {
 } from "node:fs/promises";
 import path from "node:path";
 import * as esbuild from "esbuild";
-import * as p from "@clack/prompts";
-import { readThemeConfig } from "./config.mjs";
+import { getThemePipelineConfig, readThemeConfig } from "./config.mjs";
 import {
   flattenAssetLogicalPath,
   getAssetImportFilter,
@@ -22,17 +21,37 @@ import {
 } from "./assets.mjs";
 import { listFilesRecursive } from "./fs-utils.mjs";
 import { createCssPostCssPlugin } from "./postcss.mjs";
-
-const THEME_SOURCE_OUTPUT_DIRS = ["layout", "templates", "sections", "snippets", "config"];
+import * as ui from "./ui.mjs";
+
+const THEME_SOURCE_OUTPUT_DIRS = [
+  "layout",
+  "templates",
+  "sections",
+  "blocks",
+  "snippets",
+  "config",
+];
 const LIQUID_LIKE_EXTENSIONS = new Set([".liquid", ".html", ".htm"]);
 const ENTRY_SOURCE_EXTENSIONS = new Set([".js", ".ts", ".css"]);
-const NESTED_ASSET_PATH_PATTERN = /\/assets\/([A-Za-z0-9._-]+(?:\/[A-Za-z0-9._/-]+)+)([?#][A-Za-z0-9=&._-]+)?/g;
+const NESTED_ASSET_PATH_PATTERN =
+  /\/assets\/([A-Za-z0-9._-]+(?:\/[A-Za-z0-9._/-]+)+)([?#][A-Za-z0-9=&._-]+)?/g;
+
+const INSTANCE_FILE_PATTERNS = [
+  /^templates\/[^/]+\.json$/,
+  /^sections\/[^/]+\.json$/,
+  /^config\/settings_data\.json$/,
+];
+
+export const isInstanceFile = (relativePath) => {
+  const normalized = relativePath.split(path.sep).join("/");
+  return INSTANCE_FILE_PATTERNS.some((pattern) => pattern.test(normalized));
+};
 
 /**
- * Discover JS/TS and CSS entry points from src/layout and src/templates.
+ * Discover optional JS/TS and CSS entry points from src/layout/templates or layout/templates.
  * Returns separate maps for JS and CSS to avoid key collisions.
  */
-const discoverEntryPoints = async (srcDir) => {
+const discoverEntryPoints = async (rootDir) => {
   const jsEntries = {};
   const cssEntries = {};
 
@@ -40,24 +59,29 @@ const discoverEntryPoints = async (srcDir) => {
     ["layout", "layout"],
     ["templates", "template"],
   ]) {
-    const dirPath = path.join(srcDir, dir);
-    let files;
-    try {
-      files = await readdir(dirPath);
-    } catch {
-      continue;
-    }
-    for (const file of files) {
-      const ext = path.extname(file);
-      if (![".js", ".ts", ".css"].includes(ext)) continue;
-      const name = path.basename(file, ext);
-      const key = `${prefix}-${name}.bundle`;
-      const fullPath = path.join(dirPath, file);
-      if (ext === ".css") {
-        cssEntries[key] = fullPath;
-      } else {
-        jsEntries[key] = fullPath;
+    const sourceCandidates = [path.join(rootDir, "src", dir), path.join(rootDir, dir)];
+
+    for (const dirPath of sourceCandidates) {
+      let files;
+      try {
+        files = await readdir(dirPath);
+      } catch {
+        continue;
+      }
+      for (const file of files) {
+        const ext = path.extname(file);
+        if (![".js", ".ts", ".css"].includes(ext)) continue;
+        const name = path.basename(file, ext);
+        const key = `${prefix}-${name}.bundle`;
+        const fullPath = path.join(dirPath, file);
+        if (ext === ".css") {
+          cssEntries[key] = fullPath;
+        } else {
+          jsEntries[key] = fullPath;
+        }
       }
+
+      break;
     }
   }
 
@@ -105,9 +129,11 @@ const rewriteDirectAssetPaths = (source, knownAssetLogicalPaths) =>
     return flattened ? `/assets/${flattened}${suffix}` : match;
   });
 
-const shouldCopyThemeSourceFile = (sourceRelativePath) => {
+const shouldCopyThemeSourceFile = (sourceRelativePath, outputRelativePath, skipInstances = false) => {
   const extension = path.extname(sourceRelativePath).toLowerCase();
-  return !ENTRY_SOURCE_EXTENSIONS.has(extension);
+  if (ENTRY_SOURCE_EXTENSIONS.has(extension)) return false;
+  if (skipInstances && isInstanceFile(outputRelativePath)) return false;
+  return true;
 };
 
 const copyThemeSourceFile = async (
@@ -123,23 +149,39 @@ const copyThemeSourceFile = async (
 
   if (LIQUID_LIKE_EXTENSIONS.has(path.extname(src).toLowerCase())) {
     const source = await readFile(src, "utf-8");
-    await writeFile(dest, rewriteDirectAssetPaths(source, knownAssetLogicalPaths), "utf-8");
+    await writeFile(
+      dest,
+      rewriteDirectAssetPaths(source, knownAssetLogicalPaths),
+      "utf-8",
+    );
     return;
   }
 
   await copyFile(src, dest);
 };
 
-const copyThemeFiles = async (rootDir, distDir, themeSourceDirs, knownAssetLogicalPaths) => {
+const copyThemeFiles = async (
+  rootDir,
+  distDir,
+  themeSourceDirs,
+  knownAssetLogicalPaths,
+  skipInstances = false,
+) => {
   for (const sourceDir of themeSourceDirs) {
     const absoluteSourceDir = path.join(rootDir, sourceDir.sourceRelativeDir);
     const absoluteFiles = await listFilesRecursive(absoluteSourceDir);
 
     for (const absolutePath of absoluteFiles) {
       const nestedRelativePath = path.relative(absoluteSourceDir, absolutePath);
-      const sourceRelativePath = path.join(sourceDir.sourceRelativeDir, nestedRelativePath);
-      const outputRelativePath = path.join(sourceDir.outputRelativeDir, nestedRelativePath);
-      if (!shouldCopyThemeSourceFile(sourceRelativePath)) continue;
+      const sourceRelativePath = path.join(
+        sourceDir.sourceRelativeDir,
+        nestedRelativePath,
+      );
+      const outputRelativePath = path.join(
+        sourceDir.outputRelativeDir,
+        nestedRelativePath,
+      );
+      if (!shouldCopyThemeSourceFile(sourceRelativePath, outputRelativePath, skipInstances)) continue;
       await copyThemeSourceFile(
         rootDir,
         distDir,
@@ -155,11 +197,17 @@ const shouldTriggerTailwindCssRebuild = (relativePath) => {
   const normalizedPath = relativePath.split(path.sep).join("/");
   const extension = path.extname(normalizedPath).toLowerCase();
 
-  if (!["layout/", "templates/", "sections/", "snippets/"].some((prefix) => normalizedPath.startsWith(prefix))) {
+  if (
+    !["layout/", "templates/", "sections/", "blocks/", "snippets/"].some(
+      (prefix) => normalizedPath.startsWith(prefix),
+    )
+  ) {
     return false;
   }
 
-  return [".liquid", ".html", ".htm", ".js", ".ts", ".json", ".md"].includes(extension);
+  return [".liquid", ".html", ".htm", ".js", ".ts", ".json", ".md"].includes(
+    extension,
+  );
 };
 
 const createSourceAssetImportPlugin = (rootDir, sourceDirs) => ({
@@ -173,7 +221,11 @@ const createSourceAssetImportPlugin = (rootDir, sourceDirs) => ({
       const candidatePath = path.isAbsolute(args.path)
         ? args.path
         : path.resolve(args.resolveDir, args.path);
-      const assetInfo = await getAssetSourceInfo(rootDir, candidatePath, sourceDirs);
+      const assetInfo = await getAssetSourceInfo(
+        rootDir,
+        candidatePath,
+        sourceDirs,
+      );
       if (!assetInfo) return null;
 
       return {
@@ -183,14 +235,17 @@ const createSourceAssetImportPlugin = (rootDir, sourceDirs) => ({
       };
     });
 
-    build.onLoad({ filter: /.*/, namespace: "tiendu-source-asset" }, async (args) => {
-      const assetInfo = args.pluginData;
-      return {
-        contents: `export default ${JSON.stringify(`/${assetInfo.outputRelativePath}`)};`,
-        loader: "js",
-        watchFiles: [assetInfo.absolutePath],
-      };
-    });
+    build.onLoad(
+      { filter: /.*/, namespace: "tiendu-source-asset" },
+      async (args) => {
+        const assetInfo = args.pluginData;
+        return {
+          contents: `export default ${JSON.stringify(`/${assetInfo.outputRelativePath}`)};`,
+          loader: "js",
+          watchFiles: [assetInfo.absolutePath],
+        };
+      },
+    );
   },
 });
 
@@ -206,14 +261,17 @@ const runEntryBuilds = async (jsBuildOptions, cssBuildOptions) => {
  * @param {{ watch?: boolean }} options
  * @returns {Promise<{ ok: boolean, cleanup?: () => Promise<void> }>}
  */
-export const build = async ({ watch: watchMode = false } = {}) => {
+export const build = async ({ watch: watchMode = false, skipInstances = false } = {}) => {
   const rootDir = process.cwd();
-  const srcDir = path.join(rootDir, "src");
   const distDir = path.join(rootDir, "dist");
 
   const themeConfig = await readThemeConfig();
-  if (!themeConfig) {
-    p.log.error("No tiendu.config.json found. This is not a built theme.");
+  const pipeline = getThemePipelineConfig(themeConfig);
+
+  if (pipeline.postcss && !pipeline.compileStyles) {
+    ui.log.error(
+      "Invalid tiendu.config.json: pipeline.postcss requires pipeline.compileStyles to be enabled.",
+    );
     return { ok: false };
   }
 
@@ -222,10 +280,14 @@ export const build = async ({ watch: watchMode = false } = {}) => {
   await mkdir(distDir, { recursive: true });
 
   const themeSourceDirs = await getThemeSourceDirs(rootDir);
-  const staticAssetSourceDirs = await getStaticAssetSourceDirs(rootDir, { refresh: true });
+  const staticAssetSourceDirs = await getStaticAssetSourceDirs(rootDir, {
+    refresh: true,
+  });
 
   // Discover entry points (JS and CSS separately to avoid key collisions)
-  const { jsEntries, cssEntries } = await discoverEntryPoints(srcDir);
+  const discoveredEntries = await discoverEntryPoints(rootDir);
+  const jsEntries = pipeline.compileScripts ? discoveredEntries.jsEntries : {};
+  const cssEntries = pipeline.compileStyles ? discoveredEntries.cssEntries : {};
   const jsCount = Object.keys(jsEntries).length;
   const cssCount = Object.keys(cssEntries).length;
   const entryCount = jsCount + cssCount;
@@ -236,7 +298,9 @@ export const build = async ({ watch: watchMode = false } = {}) => {
   let staticAssetOwners = new Map();
   const knownAssetLogicalPaths = new Set();
   const cssPlugins = [];
-  const jsPlugins = [createSourceAssetImportPlugin(rootDir, staticAssetSourceDirs)];
+  const jsPlugins = pipeline.compileScripts
+    ? [createSourceAssetImportPlugin(rootDir, staticAssetSourceDirs)]
+    : [];
 
   try {
     staticAssetOwners = await syncStaticAssets(
@@ -246,7 +310,7 @@ export const build = async ({ watch: watchMode = false } = {}) => {
       staticAssetSourceDirs,
     );
   } catch (error) {
-    p.log.error(`Static asset build failed: ${error.message}`);
+    ui.log.error(`Static asset build failed: ${error.message}`);
     return { ok: false };
   }
 
@@ -255,42 +319,83 @@ export const build = async ({ watch: watchMode = false } = {}) => {
   }
 
   // Copy theme files after asset paths are known
-  await copyThemeFiles(rootDir, distDir, themeSourceDirs, knownAssetLogicalPaths);
+  await copyThemeFiles(
+    rootDir,
+    distDir,
+    themeSourceDirs,
+    knownAssetLogicalPaths,
+    skipInstances,
+  );
 
-  if (cssCount > 0) {
+  if (cssCount > 0 && pipeline.postcss) {
     try {
       cssPlugins.push(
-        await createCssPostCssPlugin(rootDir, { sourceDirs: staticAssetSourceDirs }),
+        await createCssPostCssPlugin(rootDir, {
+          sourceDirs: staticAssetSourceDirs,
+        }),
       );
     } catch (error) {
-      p.log.error(`CSS pipeline failed to initialize: ${error.message}`);
+      ui.log.error(`CSS pipeline failed to initialize: ${error.message}`);
       return { ok: false };
     }
   }
 
   if (entryCount === 0) {
-    p.log.warn("No entry points found in src/layout or src/templates.");
-    return { ok: true };
+    const hasThemeFiles =
+      themeSourceDirs.length > 0 || staticAssetSourceDirs.length > 0;
+
+    if (!hasThemeFiles) {
+      ui.log.error("No theme source files or entry points found.");
+      return { ok: false };
+    }
+
+    if (!watchMode) {
+      ui.log.success("Prepared theme files to dist/.");
+      return { ok: true };
+    }
   }
 
   const outdir = path.join(distDir, "assets");
-  const jsBuildOptions = jsCount > 0
-    ? { entryPoints: jsEntries, bundle: true, format: "esm", target: "es2020", outdir, logLevel: "warning", write: true, resolveExtensions: [".ts", ".tsx", ".js", ".jsx", ".json"], plugins: jsPlugins }
-    : null;
-  const cssBuildOptions = cssCount > 0
-    ? { entryPoints: cssEntries, bundle: true, outdir, logLevel: "warning", write: true, plugins: cssPlugins }
-    : null;
+  const jsBuildOptions =
+    jsCount > 0
+      ? {
+          entryPoints: jsEntries,
+          bundle: true,
+          format: "esm",
+          target: "es2020",
+          outdir,
+          logLevel: "warning",
+          write: true,
+          resolveExtensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
+          plugins: jsPlugins,
+        }
+      : null;
+  const cssBuildOptions =
+    cssCount > 0
+      ? {
+          entryPoints: cssEntries,
+          bundle: true,
+          outdir,
+          logLevel: "warning",
+          write: true,
+          plugins: cssPlugins,
+        }
+      : null;
 
   if (!watchMode) {
     // One-shot build
     try {
       await runEntryBuilds(jsBuildOptions, cssBuildOptions);
-      p.log.success(
-        `Built ${entryCount} entry point${entryCount === 1 ? "" : "s"} to dist/`,
-      );
+      if (entryCount === 0) {
+        ui.log.success("Prepared theme files to dist/.");
+      } else {
+        ui.log.success(
+          `Built ${entryCount} entry point${entryCount === 1 ? "" : "s"} to dist/`,
+        );
+      }
       return { ok: true };
     } catch (error) {
-      p.log.error(`Build failed: ${error.message}`);
+      ui.log.error(`Build failed: ${error.message}`);
       return { ok: false };
     }
   }
@@ -312,14 +417,18 @@ export const build = async ({ watch: watchMode = false } = {}) => {
       contexts.push(cssCtx);
     }
   } catch (error) {
-    p.log.error(`Build failed: ${error.message}`);
+    ui.log.error(`Build failed: ${error.message}`);
     for (const ctx of contexts) await ctx.dispose();
     return { ok: false };
   }
 
-  p.log.success(
-    `Built ${entryCount} entry point${entryCount === 1 ? "" : "s"}. Watching for changes...`,
-  );
+  if (entryCount === 0) {
+    ui.log.success("Prepared theme files. Watching for changes...");
+  } else {
+    ui.log.success(
+      `Built ${entryCount} entry point${entryCount === 1 ? "" : "s"}. Watching for changes...`,
+    );
+  }
 
   // Watch theme directories for Liquid/static asset changes and copy to dist
   const themeWatchers = [];
@@ -340,9 +449,9 @@ export const build = async ({ watch: watchMode = false } = {}) => {
 
     try {
       await cssCtx.rebuild();
-      console.log("⟳ CSS bundles");
+      console.log("CSS bundles updated");
     } catch (error) {
-      p.log.warn(`Error rebuilding CSS: ${error.message}`);
+      ui.log.warn(`Error rebuilding CSS: ${error.message}`);
     } finally {
       cssRebuildInFlight = false;
       if (cssRebuildQueued) {
@@ -380,83 +489,98 @@ export const build = async ({ watch: watchMode = false } = {}) => {
       knownAssetLogicalPaths.delete(result.logicalPath);
     }
 
-    console.log(`${result.type === "delete" ? "✕" : "⟳"} ${result.outputRelativePath}`);
+    console.log(
+      `${result.type === "delete" ? "DELETE" : "UPDATE"} ${result.outputRelativePath}`,
+    );
   };
 
   for (const sourceDir of themeSourceDirs) {
     const dirPath = path.join(rootDir, sourceDir.sourceRelativeDir);
 
-    const watcher = watch(dirPath, { recursive: true }, (eventType, filename) => {
-      if (!filename) return;
-      const normalizedFilename = filename.split(path.sep).join("/");
-      const sourceRelativePath = `${sourceDir.sourceRelativeDir}/${normalizedFilename}`;
-      const outputRelativePath = `${sourceDir.outputRelativeDir}/${normalizedFilename}`;
-
-      const existing = debounceMap.get(sourceRelativePath);
-      if (existing) clearTimeout(existing);
-
-      const timer = setTimeout(async () => {
-        debounceMap.delete(sourceRelativePath);
-        try {
-          if (!shouldCopyThemeSourceFile(sourceRelativePath)) {
-            return;
-          }
-
-          const fileStat = await stat(path.join(rootDir, sourceRelativePath)).catch(
-            () => null,
-          );
-          if (fileStat && fileStat.isFile()) {
-            await copyThemeSourceFile(
-              rootDir,
-              distDir,
-              sourceRelativePath,
-              outputRelativePath,
-              knownAssetLogicalPaths,
+    const watcher = watch(
+      dirPath,
+      { recursive: true },
+      (eventType, filename) => {
+        if (!filename) return;
+        const normalizedFilename = filename.split(path.sep).join("/");
+        const sourceRelativePath = `${sourceDir.sourceRelativeDir}/${normalizedFilename}`;
+        const outputRelativePath = `${sourceDir.outputRelativeDir}/${normalizedFilename}`;
+
+        const existing = debounceMap.get(sourceRelativePath);
+        if (existing) clearTimeout(existing);
+
+        const timer = setTimeout(async () => {
+          debounceMap.delete(sourceRelativePath);
+          try {
+            if (!shouldCopyThemeSourceFile(sourceRelativePath, outputRelativePath, skipInstances)) {
+              return;
+            }
+
+            const fileStat = await stat(
+              path.join(rootDir, sourceRelativePath),
+            ).catch(() => null);
+            if (fileStat && fileStat.isFile()) {
+              await copyThemeSourceFile(
+                rootDir,
+                distDir,
+                sourceRelativePath,
+                outputRelativePath,
+                knownAssetLogicalPaths,
+              );
+              console.log(`UPDATE ${outputRelativePath}`);
+            } else if (!fileStat) {
+              // File deleted — remove from dist
+              const dest = path.join(distDir, outputRelativePath);
+              await rm(dest, { force: true });
+              console.log(`DELETE ${outputRelativePath}`);
+            }
+
+            if (
+              pipeline.compileStyles &&
+              shouldTriggerTailwindCssRebuild(outputRelativePath)
+            ) {
+              queueCssRebuild();
+            }
+          } catch (error) {
+            ui.log.warn(
+              `Error copying ${sourceRelativePath}: ${error.message}`,
             );
-            console.log(`⟳ ${outputRelativePath}`);
-          } else if (!fileStat) {
-            // File deleted — remove from dist
-            const dest = path.join(distDir, outputRelativePath);
-            await rm(dest, { force: true });
-            console.log(`✕ ${outputRelativePath}`);
-          }
-
-          if (shouldTriggerTailwindCssRebuild(outputRelativePath)) {
-            queueCssRebuild();
           }
-        } catch (error) {
-          p.log.warn(`Error copying ${sourceRelativePath}: ${error.message}`);
-        }
-      }, DEBOUNCE_MS);
+        }, DEBOUNCE_MS);
 
-      debounceMap.set(sourceRelativePath, timer);
-    });
+        debounceMap.set(sourceRelativePath, timer);
+      },
+    );
 
     themeWatchers.push(watcher);
   }
 
   for (const assetDir of await getStaticAssetSourceDirs(rootDir)) {
-    const watcher = watch(assetDir.absoluteDir, { recursive: true }, (eventType, filename) => {
-      if (!filename) return;
-      const relativePath = `${assetDir.relativeDir}/${filename.split(path.sep).join("/")}`;
-
-      const existing = debounceMap.get(relativePath);
-      if (existing) clearTimeout(existing);
-
-      const timer = setTimeout(async () => {
-        debounceMap.delete(relativePath);
-        try {
-          await handleStaticAssetChange(relativePath);
-        } catch (error) {
-          const errorLabel = error.message.includes("Asset collision")
-            ? "Asset collision"
-            : "Error compiling";
-          p.log.warn(`${errorLabel} ${relativePath}: ${error.message}`);
-        }
-      }, DEBOUNCE_MS);
+    const watcher = watch(
+      assetDir.absoluteDir,
+      { recursive: true },
+      (eventType, filename) => {
+        if (!filename) return;
+        const relativePath = `${assetDir.relativeDir}/${filename.split(path.sep).join("/")}`;
+
+        const existing = debounceMap.get(relativePath);
+        if (existing) clearTimeout(existing);
+
+        const timer = setTimeout(async () => {
+          debounceMap.delete(relativePath);
+          try {
+            await handleStaticAssetChange(relativePath);
+          } catch (error) {
+            const errorLabel = error.message.includes("Asset collision")
+              ? "Asset collision"
+              : "Error compiling";
+            ui.log.warn(`${errorLabel} ${relativePath}: ${error.message}`);
+          }
+        }, DEBOUNCE_MS);
 
-      debounceMap.set(relativePath, timer);
-    });
+        debounceMap.set(relativePath, timer);
+      },
+    );
 
     themeWatchers.push(watcher);
   }