vite-plugin-react-shopify 2.0.0 → 2.1.1

package/dist/index.d.ts

@@ -24,14 +24,14 @@ interface ImportMapOptions {
     react?: string;
     reactDomClient?: string;
 }
-type ShopifyBlockType = "template" | "section" | "block" | "snippet";
-type SettingValue = string | number | boolean;
-type InputSettings = Record<string, SettingValue>;
+
 interface BaseSettingSchema {
     id: string;
     label: string;
     info?: string;
 }
+type SettingValue = string | number | boolean;
+type InputSettings = Record<string, SettingValue>;
 interface CheckboxSetting extends BaseSettingSchema {
     type: "checkbox";
     default?: boolean;
@@ -230,9 +230,18 @@ type EmptyDefaultsExist<T extends readonly any[]> = true extends {
     [K in keyof T]: IsEmptyStringDefault<T[K]>;
 }[number] ? true : false;
 type AssertNoEmptyDefaults<T extends readonly SettingSchema[]> = EmptyDefaultsExist<T> extends true ? never : true;
+type ValueForType<T extends string> = T extends "checkbox" ? boolean : T extends "number" | "range" ? number : string;
+type InferSettings<T extends readonly {
+    type: string;
+    id: string;
+}[]> = {
+    [K in T[number] as K["id"]]: ValueForType<K["type"]>;
+};
+
+type ShopifyBlockType = "template" | "section" | "block" | "snippet";
 interface ShopifyMeta {
     type?: ShopifyBlockType;
-    name: string;
+    name?: string;
     tag?: string;
     class?: string;
     limit?: number;
@@ -262,6 +271,7 @@ interface PresetBlock {
     settings?: InputSettings;
     blocks?: PresetBlock[];
 }
+
 interface SSGEntry {
     filePath: string;
     componentName: string;
@@ -269,13 +279,6 @@ interface SSGEntry {
     targetType: ShopifyBlockType;
     meta: Required<Pick<ShopifyMeta, "name">> & ShopifyMeta;
 }
-type ValueForType<T extends string> = T extends "checkbox" ? boolean : T extends "number" | "range" ? number : string;
-type InferSettings<T extends readonly {
-    type: string;
-    id: string;
-}[]> = {
-    [K in T[number] as K["id"]]: ValueForType<K["type"]>;
-};
 
 declare const vitePluginShopify: (options?: Options) => Plugin[];
 

package/dist/index.js

@@ -1,4 +1,4 @@
-// src/plugin/options.ts
+// src/core/options.ts
 import path from "path";
 var defaultPrefix = {
   template: "page.react-",
@@ -45,7 +45,7 @@ var resolveOptions = (options = {}) => {
   };
 };
 
-// src/plugin/logger.ts
+// src/core/logger.ts
 import createDebugger from "debug";
 var NAMESPACE = "vite-plugin-shopify";
 var _debugEnabled = false;
@@ -67,7 +67,7 @@ function logger(ns) {
   };
 }
 
-// src/plugin/config.ts
+// src/core/config.ts
 import path2 from "path";
 var log = logger("config");
 function isWatchMode() {
@@ -146,11 +146,11 @@ function shopifyConfig(options) {
   };
 }
 
-// src/plugin/entries.ts
+// src/core/entries.ts
 import path4 from "path";
 import { normalizePath as normalizePath2 } from "vite";
 
-// src/plugin/ssg/scanner.ts
+// src/ssg/scanner.ts
 import path3 from "path";
 import glob from "fast-glob";
 import { normalizePath } from "vite";
@@ -177,7 +177,7 @@ function scanEntries(options) {
         componentName,
         kebabName,
         targetType,
-        meta: { name: componentName }
+        meta: { name: deriveName(fileName) }
       });
     }
   }
@@ -186,8 +186,64 @@ function scanEntries(options) {
 function toKebabCase(str) {
   return str.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/([A-Z])([A-Z][a-z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
 }
+function deriveName(fileName) {
+  const readable = fileName.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/([A-Z])([A-Z][a-z])/g, "$1 $2").replace(/[-_]/g, " ").replace(/\s+/g, " ").trim();
+  return readable.length > 25 ? readable.slice(0, 25) : readable;
+}
+
+// src/core/entry-template.ts
+function generateEntryModule(entry, componentRel) {
+  const { kebabName } = entry;
+  return [
+    `import { createElement } from 'react'`,
+    `import Component from '~/${componentRel}'`,
+    `import { hydrateRoot } from 'react-dom/client'`,
+    `import { LiquidDataProvider } from 'vite-plugin-react-shopify/runtime'`,
+    ``,
+    `const SELECTOR = '[data-ssg-component="${kebabName}"]'`,
+    `const roots = new Map()`,
+    ``,
+    `function readLiquidData(el) {`,
+    `  const script = el.querySelector(':scope > script[data-ssg-liquid]')`,
+    `  if (!script) return {}`,
+    `  try { return JSON.parse(script.textContent || '{}') } catch { return {} }`,
+    `}`,
+    ``,
+    `function hydrate(el) {`,
+    `  const h = el.querySelector(':scope > [data-ssg-hydrate]') || (el.matches('[data-ssg-hydrate]') ? el : null)`,
+    `  if (!h || roots.has(h)) return`,
+    `  const liquidData = readLiquidData(el)`,
+    `  roots.set(h, hydrateRoot(h, createElement(LiquidDataProvider, { value: liquidData }, createElement(Component))))`,
+    `}`,
+    ``,
+    `function unmount(el) {`,
+    `  const h = el.querySelector(':scope > [data-ssg-hydrate]') || (el.matches('[data-ssg-hydrate]') ? el : null)`,
+    `  if (h && roots.has(h)) { roots.get(h).unmount(); roots.delete(h) }`,
+    `}`,
+    ``,
+    `function scan(target) {`,
+    `  if (target.matches?.(SELECTOR)) hydrate(target)`,
+    `  target.querySelectorAll(SELECTOR).forEach(hydrate)`,
+    `}`,
+    ``,
+    `function sweep(target) {`,
+    `  if (target.matches?.(SELECTOR)) unmount(target)`,
+    `  target.querySelectorAll(SELECTOR).forEach(unmount)`,
+    `}`,
+    ``,
+    `scan(document)`,
+    ``,
+    `document.addEventListener('shopify:section:load', (e) => {`,
+    `  scan(e.target)`,
+    `})`,
+    ``,
+    `document.addEventListener('shopify:section:unload', (e) => {`,
+    `  sweep(e.target)`,
+    `})`
+  ].join("\n");
+}
 
-// src/plugin/entries.ts
+// src/core/entries.ts
 var log2 = logger("entries");
 function shopifyEntries(options) {
   let entries = [];
@@ -223,67 +279,294 @@ function shopifyEntries(options) {
       if (!entry) return;
       const sourceDir = path4.resolve(options.themeRoot, options.sourceCodeDir);
       const componentRel = normalizePath2(path4.relative(sourceDir, entry.filePath));
-      return [
-        `import { createElement } from 'react'`,
-        `import Component from '~/${componentRel}'`,
-        `import { hydrateRoot } from 'react-dom/client'`,
-        `import { LiquidDataProvider } from 'vite-plugin-react-shopify/runtime'`,
-        ``,
-        `const SELECTOR = '[data-ssg-component="${kebabName}"]'`,
-        `const roots = new Map()`,
-        ``,
-        `function readLiquidData(el) {`,
-        `  const script = el.querySelector(':scope > script[data-ssg-liquid]')`,
-        `  if (!script) return {}`,
-        `  try { return JSON.parse(script.textContent || '{}') } catch { return {} }`,
-        `}`,
-        ``,
-        `function hydrate(el) {`,
-        `  const h = el.querySelector(':scope > [data-ssg-hydrate]') || (el.matches('[data-ssg-hydrate]') ? el : null)`,
-        `  if (!h || roots.has(h)) return`,
-        `  const liquidData = readLiquidData(el)`,
-        `  roots.set(h, hydrateRoot(h, createElement(LiquidDataProvider, { value: liquidData }, createElement(Component))))`,
-        `}`,
-        ``,
-        `function unmount(el) {`,
-        `  const h = el.querySelector(':scope > [data-ssg-hydrate]') || (el.matches('[data-ssg-hydrate]') ? el : null)`,
-        `  if (h && roots.has(h)) { roots.get(h).unmount(); roots.delete(h) }`,
-        `}`,
-        ``,
-        `function scan(target) {`,
-        `  if (target.matches?.(SELECTOR)) hydrate(target)`,
-        `  target.querySelectorAll(SELECTOR).forEach(hydrate)`,
-        `}`,
-        ``,
-        `function sweep(target) {`,
-        `  if (target.matches?.(SELECTOR)) unmount(target)`,
-        `  target.querySelectorAll(SELECTOR).forEach(unmount)`,
-        `}`,
-        ``,
-        `scan(document)`,
-        ``,
-        `document.addEventListener('shopify:section:load', (e) => {`,
-        `  scan(e.target)`,
-        `})`,
-        ``,
-        `document.addEventListener('shopify:section:unload', (e) => {`,
-        `  sweep(e.target)`,
-        `})`
-      ].join("\n");
+      return generateEntryModule(entry, componentRel);
     }
   };
 }
 
-// src/plugin/ssg/index.ts
-import fs2 from "fs";
-import path7 from "path";
+// src/ssg/index.ts
+import fs4 from "fs";
+import path10 from "path";
+
+// src/ssg/compiler.ts
+import fs3 from "fs";
+import path9 from "path";
 
-// src/plugin/ssg/compiler.ts
+// src/ssg/css-manager.ts
 import fs from "fs";
+import path5 from "path";
+var log3 = logger("ssg:css");
+function collectCssFiles(manifestKey, manifest) {
+  const collected = /* @__PURE__ */ new Set();
+  const visited = /* @__PURE__ */ new Set();
+  collectCssFilesRecursive(manifestKey, manifest, collected, visited);
+  return [...collected];
+}
+function collectCssFilesRecursive(chunkKey, manifest, collected, visited) {
+  if (visited.has(chunkKey)) return;
+  visited.add(chunkKey);
+  const chunk = manifest[chunkKey];
+  if (!chunk) return;
+  if (chunk.css && Array.isArray(chunk.css)) {
+    for (const cssFile of chunk.css) {
+      collected.add(cssFile);
+    }
+  }
+  if (chunk.imports && Array.isArray(chunk.imports)) {
+    for (const imported of chunk.imports) {
+      collectCssFilesRecursive(imported, manifest, collected, visited);
+    }
+  }
+}
+function readCssFileContents(cssFiles, buildDir, themeRoot) {
+  const assetsDir = path5.resolve(themeRoot, buildDir);
+  return cssFiles.map((file) => {
+    try {
+      return fs.readFileSync(path5.join(assetsDir, file), "utf-8");
+    } catch {
+      return "";
+    }
+  }).filter(Boolean);
+}
+function getCssBaseName(cssFile) {
+  const name = cssFile.replace(/\.css$/, "");
+  const lastHyphen = name.lastIndexOf("-");
+  if (lastHyphen > 0) {
+    const possibleHash = name.slice(lastHyphen + 1);
+    if (/^[A-Za-z0-9_-]{8,}$/.test(possibleHash)) {
+      return name.slice(0, lastHyphen);
+    }
+  }
+  return name;
+}
+function analyzeCssDistribution(entries, manifest) {
+  const entryCssFiles = /* @__PURE__ */ new Map();
+  const cssRefCount = /* @__PURE__ */ new Map();
+  for (const entry of entries) {
+    const manifestKey = `shopify:entry:${entry.kebabName}`;
+    const files = collectCssFiles(manifestKey, manifest);
+    entryCssFiles.set(entry.kebabName, files);
+    for (const f of files) {
+      cssRefCount.set(f, (cssRefCount.get(f) || 0) + 1);
+    }
+    log3.debug("entry %s has %d CSS files", entry.kebabName, files.length);
+  }
+  return { entryCssFiles, cssRefCount };
+}
+function generateSharedCssSnippets(cssRefCount, options) {
+  const cssSnippetMap = /* @__PURE__ */ new Map();
+  for (const [cssFile, count] of cssRefCount) {
+    if (count > 1) {
+      const snippetName = `${options.ssg.cssPrefix}-${getCssBaseName(cssFile)}`;
+      cssSnippetMap.set(cssFile, snippetName);
+      const snippetPath = path5.join(
+        path5.resolve(options.themeRoot),
+        "snippets",
+        `${snippetName}.liquid`
+      );
+      const cssPath = path5.join(
+        path5.resolve(options.themeRoot, options.buildDir),
+        cssFile
+      );
+      try {
+        const cssContent = fs.readFileSync(cssPath, "utf-8");
+        fs.mkdirSync(path5.dirname(snippetPath), { recursive: true });
+        fs.writeFileSync(snippetPath, `{% stylesheet %}
+${cssContent.trim()}
+{% endstylesheet %}
+`);
+        log3.debug("generated shared CSS snippet %s (used by %d entries)", snippetName, count);
+      } catch {
+        log3.warn("failed to write CSS snippet for %s", cssFile);
+      }
+    }
+  }
+  return cssSnippetMap;
+}
+function categorizeCss(cssFiles, cssSnippetMap) {
+  const snippets = cssFiles.filter((f) => cssSnippetMap.has(f)).map((f) => cssSnippetMap.get(f));
+  const inlineFiles = cssFiles.filter((f) => !cssSnippetMap.has(f));
+  return { inline: inlineFiles, snippets };
+}
+
+// src/ssg/bundler.ts
+import fs2 from "fs";
 import path6 from "path";
 import { createRequire } from "module";
 
-// src/plugin/ssg/post-process.ts
+// src/hydration-fix/index.ts
+import { parseSync } from "oxc-parser";
+import { walk } from "oxc-walker";
+var log4 = logger("hydration-fix");
+function autoFixAdjacentText(source, filePath) {
+  const parseResult = parseSync(filePath, source);
+  if (parseResult.errors.length > 0) {
+    log4.debug("OXC parse errors for %s, skipping hydration fix", filePath);
+    return { result: source, fixCount: 0 };
+  }
+  const replacements = [];
+  walk(parseResult.program, {
+    enter(node) {
+      if (node.type === "JSXElement" || node.type === "JSXFragment") {
+        const children = node.children;
+        if (children.length > 0) {
+          processChildren(children, source, replacements);
+        }
+      }
+    }
+  });
+  if (replacements.length === 0) {
+    return { result: source, fixCount: 0 };
+  }
+  replacements.sort((a, b) => b.start - a.start);
+  let fixed = source;
+  for (const { start, end, replacement } of replacements) {
+    fixed = fixed.slice(0, start) + replacement + fixed.slice(end);
+  }
+  log4.warn(
+    `auto-fixed ${replacements.length} adjacent text+expression issue(s) in ${filePath}`
+  );
+  return { result: fixed, fixCount: replacements.length };
+}
+function processChildren(children, source, replacements) {
+  let i = 0;
+  while (i < children.length) {
+    if (children[i].type !== "JSXText" && children[i].type !== "JSXExpressionContainer") {
+      i++;
+      continue;
+    }
+    let runEnd = i;
+    let hasText = children[i].type === "JSXText";
+    let hasExpr = children[i].type === "JSXExpressionContainer";
+    while (runEnd + 1 < children.length && (children[runEnd + 1].type === "JSXText" || children[runEnd + 1].type === "JSXExpressionContainer")) {
+      runEnd++;
+      if (children[runEnd].type === "JSXText") hasText = true;
+      if (children[runEnd].type === "JSXExpressionContainer") hasExpr = true;
+    }
+    if (!hasText || !hasExpr) {
+      i = runEnd + 1;
+      continue;
+    }
+    const sliceStart = children[i].start;
+    const sliceEnd = children[runEnd].end;
+    const runText = source.slice(sliceStart, sliceEnd);
+    const trimmed = runText.trim();
+    if (!needsFix(trimmed)) {
+      i = runEnd + 1;
+      continue;
+    }
+    const tpl = trimmed.replace(/\{([^}]+)\}/g, "${$1}");
+    replacements.push({
+      start: sliceStart,
+      end: sliceEnd,
+      replacement: `{\`${tpl}\`}`
+    });
+    i = runEnd + 1;
+  }
+}
+function needsFix(content) {
+  const trimmed = content.trim();
+  if (!trimmed) return false;
+  if (trimmed.startsWith("{") && trimmed.endsWith("}")) {
+    const inner = trimmed.slice(1, -1).trim();
+    if (inner.startsWith("`") && inner.endsWith("`")) return false;
+    if (inner.length > 0 && !/<[a-zA-Z]/.test(inner)) return false;
+  }
+  if (!/\{/.test(trimmed)) return false;
+  if (/<[a-zA-Z]/.test(trimmed)) return false;
+  return true;
+}
+
+// src/ssg/bundler.ts
+var log5 = logger("ssg:bundler");
+async function bundleEntry(entry, projectRoot, sourceDir) {
+  const projectRequire = createRequire(path6.join(projectRoot, "package.json"));
+  let esbuild;
+  try {
+    esbuild = projectRequire("esbuild");
+  } catch {
+    log5.warn("esbuild not found, skipping SSR for %s", entry.kebabName);
+    return null;
+  }
+  const sourceCode = fs2.readFileSync(entry.filePath, "utf-8");
+  const { result: fixedSource, fixCount } = autoFixAdjacentText(sourceCode, entry.filePath);
+  const finalSource = fixCount > 0 ? fixedSource : sourceCode;
+  const ts = Date.now();
+  const tmpDir = path6.join(sourceDir, ".ssg-tmp");
+  fs2.mkdirSync(tmpDir, { recursive: true });
+  const tmpFile = path6.join(tmpDir, `.ssg-entry-${ts}.mjs`);
+  log5.debug("bundling %s via esbuild", entry.kebabName);
+  const startBundled = Date.now();
+  await esbuild.build({
+    stdin: {
+      contents: finalSource,
+      resolveDir: path6.dirname(entry.filePath),
+      loader: path6.extname(entry.filePath).slice(1)
+    },
+    outfile: tmpFile,
+    bundle: true,
+    format: "esm",
+    jsx: "automatic",
+    platform: "node",
+    external: [
+      "react",
+      "react-dom",
+      "react-dom/*",
+      "vite-plugin-react-shopify",
+      "vite-plugin-react-shopify/*"
+    ],
+    write: true,
+    allowOverwrite: true,
+    plugins: [
+      {
+        name: "ssg-hydration-fix",
+        setup(build) {
+          build.onLoad({ filter: /\.(tsx|jsx)$/ }, (args) => {
+            try {
+              const source = fs2.readFileSync(args.path, "utf-8");
+              const { result, fixCount: fixCount2 } = autoFixAdjacentText(source, args.path);
+              if (fixCount2 > 0) {
+                return { contents: result, loader: args.path.endsWith(".tsx") ? "tsx" : "jsx" };
+              }
+            } catch (e) {
+              log5.debug("SSG hydration-fix failed for %s: %s", args.path, e);
+            }
+            return void 0;
+          });
+        }
+      },
+      {
+        name: "ssg-strip-css",
+        setup(build) {
+          build.onResolve({ filter: /\.module\.css$/ }, (args) => ({
+            namespace: "ssg-css-module",
+            path: args.path
+          }));
+          build.onResolve({ filter: /\.css$/ }, (args) => ({
+            namespace: "ssg-css-plain",
+            path: args.path
+          }));
+          build.onLoad({ filter: /.*/, namespace: "ssg-css-module" }, () => ({
+            contents: "export default new Proxy({},{get:(_,k)=>k});",
+            loader: "js"
+          }));
+          build.onLoad({ filter: /.*/, namespace: "ssg-css-plain" }, () => ({
+            contents: "",
+            loader: "js"
+          }));
+        }
+      }
+    ]
+  });
+  log5.debug("esbuild bundle took %dms", Date.now() - startBundled);
+  return { tmpFile };
+}
+
+// src/ssg/renderer.ts
+import path7 from "path";
+import { createRequire as createRequire2 } from "module";
+
+// src/ssg/post-process.ts
 var VOID_ELEMENTS = /<(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)([^>]*)\/>/g;
 function normalizeVoidElements(html) {
   return html.replace(VOID_ELEMENTS, "<$1$2>");
@@ -298,21 +581,63 @@ function unwrapHtmlEntities(html) {
   return html.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#x27;/g, "'");
 }
 
-// src/plugin/ssg/liquid.ts
-import path5 from "path";
+// src/ssg/renderer.ts
+function pathToFileURL(filePath) {
+  const absPath = path7.resolve(filePath);
+  if (process.platform === "win32") {
+    return "file:///" + absPath.replace(/\\/g, "/");
+  }
+  return "file://" + absPath;
+}
+var log6 = logger("ssg:renderer");
+function renderEntry(tmpFile, entry, projectRoot) {
+  return import(pathToFileURL(tmpFile)).then((mod) => {
+    const Component = mod.default;
+    const shopifyMeta = mod.shopifyMeta;
+    if (!Component) {
+      log6.warn("No default export found in %s, skipping", entry.filePath);
+      return null;
+    }
+    if (shopifyMeta) {
+      entry.meta = { ...entry.meta, ...shopifyMeta, name: shopifyMeta.name ?? entry.meta.name };
+    }
+    const projectRequire = createRequire2(path7.join(projectRoot, "package.json"));
+    let createElement;
+    let renderToStaticMarkup;
+    try {
+      createElement = projectRequire("react").createElement;
+      renderToStaticMarkup = projectRequire("react-dom/server").renderToStaticMarkup;
+    } catch {
+      log6.warn("react/react-dom not found, skipping SSR for %s", entry.kebabName);
+      return null;
+    }
+    globalThis.__shopify_ssg_target = entry.targetType;
+    const trackedExpressions = /* @__PURE__ */ new Set();
+    globalThis.__shopify_ssg_liquid_track = trackedExpressions;
+    const element = createElement(Component);
+    let html = renderToStaticMarkup(element);
+    delete globalThis.__shopify_ssg_liquid_track;
+    html = normalizeVoidElements(html);
+    html = normalizeStyleAttributes(html);
+    html = unwrapHtmlEntities(html);
+    return { html, trackedExpressions, entryMeta: entry.meta };
+  });
+}
+function resolveScriptAsset(kebabName, manifest) {
+  const manifestKey = `shopify:entry:${kebabName}`;
+  const entryChunk = manifest[manifestKey];
+  if (!entryChunk) return null;
+  const file = entryChunk.file;
+  if (!file) return null;
+  return path7.basename(file);
+}
 
-// src/plugin/ssg/schema-gen.ts
-var log3 = logger("schema-gen");
+// src/ssg/schema.ts
 function serializeSetting(setting) {
   const s = { type: setting.type };
   if ("id" in setting) s.id = setting.id;
   if ("label" in setting) s.label = setting.label;
   if ("default" in setting && setting.default !== void 0) {
-    if (setting.default === "") {
-      log3.warn(
-        `Setting "${"id" in setting ? setting.id : "(no id)"}" has empty string default. Use a non-empty string or remove the default.`
-      );
-    }
     s.default = setting.default;
   }
   if ("info" in setting && setting.info) s.info = setting.info;
@@ -375,7 +700,33 @@ ${json}
 `;
 }
 
-// src/plugin/ssg/liquid.ts
+// src/ssg/liquid-paths.ts
+import path8 from "path";
+function getOutputPath(entry, options) {
+  const type = entry.meta.type ?? entry.targetType;
+  const dirName = typeToDir(type);
+  const fileName = resolveFileName(entry, type, options);
+  return path8.join(options.themeRoot, dirName, fileName);
+}
+function typeToDir(type) {
+  if (type === "snippet") return "snippets";
+  if (type === "block") return "blocks";
+  return `${type}s`;
+}
+function getAssetRelativePath(buildDir, filename) {
+  if (!buildDir.startsWith("assets/")) return filename;
+  const prefix = buildDir.slice("assets/".length);
+  return prefix ? `${prefix}/${filename}` : filename;
+}
+function resolveFileName(entry, type, options) {
+  if (options.outputName) {
+    return options.outputName.replace(/\{type\}/g, type).replace(/\{kebab\}/g, entry.kebabName).replace(/\{pascal\}/g, entry.componentName).replace(/\{target\}/g, entry.targetType) + ".liquid";
+  }
+  const prefix = options.prefix[type] ?? "react-";
+  return `${prefix}${entry.kebabName}.liquid`;
+}
+
+// src/ssg/liquid-assembler.ts
 var DISCLAIMER = "{% comment %}\n  IMPORTANT: This file is automatically generated by vite-plugin-shopify.\n  Do not attempt to modify this file directly, as any changes will be overwritten by the next build.\n{% endcomment %}\n";
 function assembleLiquidFile(html, entry, scriptAsset, cssContents, options, trackedExpressions = []) {
   const type = entry.meta.type ?? entry.targetType;
@@ -500,251 +851,88 @@ function buildSnippet(html, entry, trackedExpressions) {
   );
   return lines;
 }
-function getOutputPath(entry, options) {
-  const type = entry.meta.type ?? entry.targetType;
-  const dirName = typeToDir(type);
-  const fileName = resolveFileName(entry, type, options);
-  return path5.join(options.themeRoot, dirName, fileName);
-}
-function typeToDir(type) {
-  if (type === "snippet") return "snippets";
-  if (type === "block") return "blocks";
-  return `${type}s`;
-}
-function getAssetRelativePath(buildDir, filename) {
-  if (!buildDir.startsWith("assets/")) return filename;
-  const prefix = buildDir.slice("assets/".length);
-  return prefix ? `${prefix}/${filename}` : filename;
+
+// src/validate/rules.ts
+var MAX_NAME_LENGTH = 25;
+function checkNameLength(meta, kebabName) {
+  if (meta.name.length > MAX_NAME_LENGTH) {
+    return `[${kebabName}] shopifyMeta.name "${meta.name}" is ${meta.name.length} chars (Shopify limit: ${MAX_NAME_LENGTH})`;
+  }
+  return null;
 }
-function resolveFileName(entry, type, options) {
-  if (options.outputName) {
-    return options.outputName.replace(/\{type\}/g, type).replace(/\{kebab\}/g, entry.kebabName).replace(/\{pascal\}/g, entry.componentName).replace(/\{target\}/g, entry.targetType) + ".liquid";
+function checkEmptyStringDefault(setting) {
+  if (setting.default === "") {
+    const label = "id" in setting && setting.id ? setting.id : "(no id)";
+    return `Setting "${label}" (type: ${setting.type}) has empty string default`;
   }
-  const prefix = options.prefix[type] ?? "react-";
-  return `${prefix}${entry.kebabName}.liquid`;
+  return null;
 }
 
-// src/plugin/ssg/hydration-fix.ts
-var log4 = logger("hydration-fix");
-function autoFixAdjacentText(source, filePath) {
-  let fixCount = 0;
-  const lines = source.split("\n");
-  const fixed = [];
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-    const replaced = line.replace(
-      /<(\w+)([^>]*?)>([^<]*?\{[^}]*\}[^<]*?)<\/\1>/g,
-      (match, tagName, attrs, content) => {
-        const trimmed = content.trim();
-        if (!needsFix(trimmed)) return match;
-        fixCount++;
-        const tpl = trimmed.replace(/\{([^}]+)\}/g, "${$1}");
-        return `<${tagName}${attrs}>{\`${tpl}\`}</${tagName}>`;
-      }
-    );
-    fixed.push(replaced);
-  }
-  if (fixCount > 0) {
-    log4.warn(
-      `auto-fixed ${fixCount} adjacent text+expression issue(s) in ${filePath}`
-    );
+// src/validate/index.ts
+var log7 = logger("validate");
+function validateShopifyMeta(meta, context) {
+  const warnings = [];
+  const nameWarning = checkNameLength(meta, context.kebabName);
+  if (nameWarning) warnings.push(nameWarning);
+  if (meta.settings) {
+    for (const s of meta.settings) {
+      const w = checkEmptyStringDefault(s);
+      if (w) warnings.push(w);
+    }
   }
-  return { result: fixed.join("\n"), fixCount };
-}
-function needsFix(content) {
-  const trimmed = content.trim();
-  if (!trimmed) return false;
-  if (trimmed.startsWith("{") && trimmed.endsWith("}")) {
-    const inner = trimmed.slice(1, -1).trim();
-    if (inner.startsWith("`") && inner.endsWith("`")) return false;
-    if (inner.length > 0 && !/<[a-zA-Z]/.test(inner)) return false;
+  for (const w of warnings) {
+    log7.warn(w);
   }
-  if (!/\{/.test(trimmed)) return false;
-  if (/<[a-zA-Z]/.test(trimmed)) return false;
-  return true;
+  return warnings;
 }
 
-// src/plugin/ssg/compiler.ts
-var log5 = logger("ssg:compiler");
+// src/ssg/compiler.ts
+var log8 = logger("ssg:compiler");
 async function compileAllEntries(options, manifest) {
   const entries = scanEntries(options);
   if (entries.length === 0) return;
-  log5.debug("found %d entries to compile", entries.length);
-  const projectRoot = path6.resolve(options.themeRoot);
-  const sourceDir = path6.resolve(options.themeRoot, options.sourceCodeDir);
-  const entryCssFiles = /* @__PURE__ */ new Map();
-  const cssRefCount = /* @__PURE__ */ new Map();
-  for (const entry of entries) {
-    const manifestKey = `shopify:entry:${entry.kebabName}`;
-    const files = collectCssFiles(manifestKey, manifest);
-    entryCssFiles.set(entry.kebabName, files);
-    for (const f of files) {
-      cssRefCount.set(f, (cssRefCount.get(f) || 0) + 1);
-    }
-    log5.debug("entry %s has %d CSS files", entry.kebabName, files.length);
-  }
-  const cssSnippetMap = /* @__PURE__ */ new Map();
-  for (const [cssFile, count] of cssRefCount) {
-    if (count > 1) {
-      const snippetName = `${options.ssg.cssPrefix}-${getCssBaseName(cssFile)}`;
-      cssSnippetMap.set(cssFile, snippetName);
-      const snippetPath = path6.join(
-        path6.resolve(options.themeRoot),
-        "snippets",
-        `${snippetName}.liquid`
-      );
-      const cssPath = path6.join(
-        path6.resolve(options.themeRoot, options.buildDir),
-        cssFile
-      );
-      try {
-        const cssContent = fs.readFileSync(cssPath, "utf-8");
-        fs.mkdirSync(path6.dirname(snippetPath), { recursive: true });
-        fs.writeFileSync(snippetPath, `{% stylesheet %}
-${cssContent.trim()}
-{% endstylesheet %}
-`);
-        log5.debug("generated shared CSS snippet %s (used by %d entries)", snippetName, count);
-      } catch {
-        log5.warn("failed to write CSS snippet for %s", cssFile);
-      }
-    }
-  }
+  log8.debug("found %d entries to compile", entries.length);
+  const projectRoot = path9.resolve(options.themeRoot);
+  const sourceDir = path9.resolve(options.themeRoot, options.sourceCodeDir);
+  const { entryCssFiles, cssRefCount } = analyzeCssDistribution(entries, manifest);
+  const cssSnippetMap = generateSharedCssSnippets(cssRefCount, options);
   for (const entry of entries) {
     try {
-      const cssFiles = entryCssFiles.get(entry.kebabName) || [];
-      const cssSnippets = cssFiles.filter((f) => cssSnippetMap.has(f)).map((f) => cssSnippetMap.get(f));
-      const cssInlineFiles = cssFiles.filter((f) => !cssSnippetMap.has(f));
-      const cssInline = readCssFileContents(cssInlineFiles, options.buildDir, options.themeRoot);
-      log5.debug(
-        "compiling %s (type=%s, css inline=%d, css snippets=%d)",
-        entry.kebabName,
-        entry.targetType,
-        cssInline.length,
-        cssSnippets.length
-      );
-      await compileEntry(entry, options, manifest, projectRoot, sourceDir, cssInline, cssSnippets);
+      await compileEntry(entry, options, manifest, projectRoot, sourceDir, entryCssFiles, cssSnippetMap);
     } catch (err) {
-      log5.error("Failed to compile %s:", entry.filePath, err);
+      log8.error("Failed to compile %s:", entry.filePath, err);
     }
   }
-  log5.info("Compiled %d entries", entries.length);
-  const tmpDir = path6.join(sourceDir, ".ssg-tmp");
+  log8.info("Compiled %d entries", entries.length);
+  const tmpDir = path9.join(sourceDir, ".ssg-tmp");
   try {
-    fs.rmSync(tmpDir, { recursive: true, force: true });
+    fs3.rmSync(tmpDir, { recursive: true, force: true });
   } catch {
   }
 }
-async function compileEntry(entry, options, manifest, projectRoot, sourceDir, cssInline, cssSnippets) {
-  const projectRequire = createRequire(path6.join(projectRoot, "package.json"));
-  let createElement;
-  let renderToStaticMarkup;
-  try {
-    createElement = projectRequire("react").createElement;
-    renderToStaticMarkup = projectRequire("react-dom/server").renderToStaticMarkup;
-  } catch {
-    log5.warn("react/react-dom not found, skipping SSR for %s", entry.kebabName);
-    return;
-  }
-  const sourceCode = fs.readFileSync(entry.filePath, "utf-8");
-  const { result: fixedSource, fixCount } = autoFixAdjacentText(sourceCode, entry.filePath);
-  const finalSource = fixCount > 0 ? fixedSource : sourceCode;
-  let esbuild;
-  try {
-    esbuild = projectRequire("esbuild");
-  } catch {
-    log5.warn("esbuild not found, skipping SSR for %s", entry.kebabName);
-    return;
-  }
-  const ts = Date.now();
-  const tmpDir = path6.join(sourceDir, ".ssg-tmp");
-  fs.mkdirSync(tmpDir, { recursive: true });
-  const tmpFile = path6.join(tmpDir, `.ssg-entry-${ts}.mjs`);
-  log5.debug("bundling %s via esbuild", entry.kebabName);
-  const startBundled = Date.now();
-  await esbuild.build({
-    stdin: {
-      contents: finalSource,
-      resolveDir: path6.dirname(entry.filePath),
-      loader: path6.extname(entry.filePath).slice(1)
-    },
-    outfile: tmpFile,
-    bundle: true,
-    format: "esm",
-    jsx: "automatic",
-    platform: "node",
-    external: [
-      "react",
-      "react-dom",
-      "react-dom/*",
-      "vite-plugin-react-shopify",
-      "vite-plugin-react-shopify/*"
-    ],
-    write: true,
-    allowOverwrite: true,
-    plugins: [
-      {
-        name: "ssg-hydration-fix",
-        setup(build) {
-          build.onLoad({ filter: /\.(tsx|jsx)$/ }, (args) => {
-            try {
-              const source = fs.readFileSync(args.path, "utf-8");
-              const { result, fixCount: fixCount2 } = autoFixAdjacentText(source, args.path);
-              if (fixCount2 > 0) {
-                return { contents: result, loader: args.path.endsWith(".tsx") ? "tsx" : "jsx" };
-              }
-            } catch {
-            }
-            return void 0;
-          });
-        }
-      },
-      {
-        name: "ssg-strip-css",
-        setup(build) {
-          build.onResolve({ filter: /\.module\.css$/ }, (args) => ({
-            namespace: "ssg-css-module",
-            path: args.path
-          }));
-          build.onResolve({ filter: /\.css$/ }, (args) => ({
-            namespace: "ssg-css-plain",
-            path: args.path
-          }));
-          build.onLoad({ filter: /.*/, namespace: "ssg-css-module" }, () => ({
-            contents: "export default new Proxy({},{get:(_,k)=>k});",
-            loader: "js"
-          }));
-          build.onLoad({ filter: /.*/, namespace: "ssg-css-plain" }, () => ({
-            contents: "",
-            loader: "js"
-          }));
-        }
-      }
-    ]
-  });
-  log5.debug("esbuild bundle took %dms", Date.now() - startBundled);
+async function compileEntry(entry, options, manifest, projectRoot, sourceDir, entryCssFiles, cssSnippetMap) {
+  const bundleResult = await bundleEntry(entry, projectRoot, sourceDir);
+  if (!bundleResult) return;
   try {
-    const mod = await import(pathToFileURL(tmpFile));
-    const Component = mod.default;
-    const shopifyMeta = mod.shopifyMeta;
-    if (!Component) {
-      log5.warn("No default export found in %s, skipping", entry.filePath);
-      return;
-    }
-    if (shopifyMeta) {
-      entry.meta = { ...entry.meta, ...shopifyMeta };
-    }
-    globalThis.__shopify_ssg_target = entry.targetType;
-    const trackedExpressions = /* @__PURE__ */ new Set();
-    globalThis.__shopify_ssg_liquid_track = trackedExpressions;
-    const element = createElement(Component);
-    let html = renderToStaticMarkup(element);
-    delete globalThis.__shopify_ssg_liquid_track;
-    html = normalizeVoidElements(html);
-    html = normalizeStyleAttributes(html);
-    html = unwrapHtmlEntities(html);
+    const renderResult = await renderEntry(bundleResult.tmpFile, entry, projectRoot);
+    if (!renderResult) return;
+    const { html, trackedExpressions } = renderResult;
+    validateShopifyMeta(entry.meta, { kebabName: entry.kebabName, filePath: entry.filePath });
+    const cssFiles = entryCssFiles.get(entry.kebabName) || [];
+    const { inline: cssInlineFiles, snippets: cssSnippets } = categorizeCss(cssFiles, cssSnippetMap);
+    const cssInline = readCssFileContents(cssInlineFiles, options.buildDir, options.themeRoot);
+    log8.debug(
+      "compiling %s (type=%s, css inline=%d, css snippets=%d)",
+      entry.kebabName,
+      entry.targetType,
+      cssInline.length,
+      cssSnippets.length
+    );
     const scriptAsset = resolveScriptAsset(entry.kebabName, manifest);
-    const liquidContent = assembleLiquidFile(html, entry, scriptAsset, { inline: cssInline, snippets: cssSnippets }, {
+    const liquidContent = assembleLiquidFile(html, entry, scriptAsset, {
+      inline: cssInline,
+      snippets: cssSnippets
+    }, {
       prefix: options.ssg.prefix,
       outputName: options.ssg.outputName || void 0,
       buildDir: options.buildDir
@@ -754,79 +942,21 @@ async function compileEntry(entry, options, manifest, projectRoot, sourceDir, cs
       outputName: options.ssg.outputName || void 0,
       themeRoot: options.themeRoot
     });
-    const dir = path6.dirname(outputPath);
-    if (!fs.existsSync(dir)) {
-      fs.mkdirSync(dir, { recursive: true });
+    const dir = path9.dirname(outputPath);
+    if (!fs3.existsSync(dir)) {
+      fs3.mkdirSync(dir, { recursive: true });
     }
-    fs.writeFileSync(outputPath, liquidContent);
+    fs3.writeFileSync(outputPath, liquidContent);
   } finally {
     try {
-      fs.unlinkSync(tmpFile);
+      fs3.unlinkSync(bundleResult.tmpFile);
     } catch {
     }
   }
 }
-function resolveScriptAsset(kebabName, manifest) {
-  const manifestKey = `shopify:entry:${kebabName}`;
-  const entryChunk = manifest[manifestKey];
-  if (!entryChunk) return null;
-  const file = entryChunk.file;
-  if (!file) return null;
-  return path6.basename(file);
-}
-function collectCssFiles(manifestKey, manifest) {
-  const collected = /* @__PURE__ */ new Set();
-  const visited = /* @__PURE__ */ new Set();
-  collectCssFilesRecursive(manifestKey, manifest, collected, visited);
-  return [...collected];
-}
-function collectCssFilesRecursive(chunkKey, manifest, collected, visited) {
-  if (visited.has(chunkKey)) return;
-  visited.add(chunkKey);
-  const chunk = manifest[chunkKey];
-  if (!chunk) return;
-  if (chunk.css && Array.isArray(chunk.css)) {
-    for (const cssFile of chunk.css) {
-      collected.add(cssFile);
-    }
-  }
-  if (chunk.imports && Array.isArray(chunk.imports)) {
-    for (const imported of chunk.imports) {
-      collectCssFilesRecursive(imported, manifest, collected, visited);
-    }
-  }
-}
-function readCssFileContents(cssFiles, buildDir, themeRoot) {
-  const assetsDir = path6.resolve(themeRoot, buildDir);
-  return cssFiles.map((file) => {
-    try {
-      return fs.readFileSync(path6.join(assetsDir, file), "utf-8");
-    } catch {
-      return "";
-    }
-  }).filter(Boolean);
-}
-function getCssBaseName(cssFile) {
-  const name = cssFile.replace(/\.css$/, "");
-  const lastHyphen = name.lastIndexOf("-");
-  if (lastHyphen > 0) {
-    const possibleHash = name.slice(lastHyphen + 1);
-    if (/^[A-Za-z0-9_-]{8,}$/.test(possibleHash)) {
-      return name.slice(0, lastHyphen);
-    }
-  }
-  return name;
-}
-function pathToFileURL(filePath) {
-  const absPath = path6.resolve(filePath);
-  if (process.platform === "win32") {
-    return "file:///" + absPath.replace(/\\/g, "/");
-  }
-  return "file://" + absPath;
-}
 
-// src/plugin/ssg/index.ts
-var log6 = logger("ssg");
+// src/ssg/index.ts
+var log9 = logger("ssg");
 function shopifySSG(options) {
   return {
     name: "vite-plugin-shopify:ssg",
@@ -835,23 +965,23 @@ function shopifySSG(options) {
       return {};
     },
     async closeBundle() {
-      const manifestPath = path7.resolve(
+      const manifestPath = path10.resolve(
         options.themeRoot,
         options.buildDir,
         ".vite",
         "manifest.json"
       );
-      if (!fs2.existsSync(manifestPath)) {
-        log6.warn("No manifest.json found, skipping SSG");
+      if (!fs4.existsSync(manifestPath)) {
+        log9.warn("No manifest.json found, skipping SSG");
         return;
       }
-      log6.debug("reading manifest from %s", manifestPath);
-      const manifest = JSON.parse(fs2.readFileSync(manifestPath, "utf-8"));
-      log6.info("Starting SSG compilation...");
+      log9.debug("reading manifest from %s", manifestPath);
+      const manifest = JSON.parse(fs4.readFileSync(manifestPath, "utf-8"));
+      log9.info("Starting SSG compilation...");
       await compileAllEntries(options, manifest);
-      log6.info("SSG compilation complete");
+      log9.info("SSG compilation complete");
       writeImportMapSnippet(options);
-      log6.debug("wrote import map snippet");
+      log9.debug("wrote import map snippet");
     },
     resolveId(id) {
       if (id === "vite-plugin-shopify/runtime") {
@@ -870,7 +1000,7 @@ function shopifySSG(options) {
   };
 }
 function writeImportMapSnippet(options) {
-  const snippetPath = path7.resolve(
+  const snippetPath = path10.resolve(
     options.themeRoot,
     "snippets",
     options.snippetFile
@@ -887,11 +1017,30 @@ function writeImportMapSnippet(options) {
     "</script>",
     ""
   ].join("\n");
-  const dir = path7.dirname(snippetPath);
-  if (!fs2.existsSync(dir)) {
-    fs2.mkdirSync(dir, { recursive: true });
+  const dir = path10.dirname(snippetPath);
+  if (!fs4.existsSync(dir)) {
+    fs4.mkdirSync(dir, { recursive: true });
   }
-  fs2.writeFileSync(snippetPath, content);
+  fs4.writeFileSync(snippetPath, content);
+}
+
+// src/hydration-fix/vite-plugin.ts
+import path11 from "path";
+function hydrationFix(options) {
+  const sourceDir = path11.resolve(options.themeRoot, options.sourceCodeDir);
+  return {
+    name: "vite-plugin-shopify:hydration-fix",
+    enforce: "pre",
+    transform(code, id) {
+      if (!/\.(tsx|jsx)$/.test(id)) return;
+      if (!id.startsWith(sourceDir)) return;
+      const { result, fixCount } = autoFixAdjacentText(code, id);
+      if (fixCount > 0) {
+        return result;
+      }
+      return;
+    }
+  };
 }
 
 // src/index.ts
@@ -901,6 +1050,7 @@ var vitePluginShopify = (options = {}) => {
     enableDebug();
   }
   return [
+    hydrationFix(resolvedOptions),
     shopifyConfig(resolvedOptions),
     shopifyEntries(resolvedOptions),
     shopifySSG(resolvedOptions)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-react-shopify",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "description": "Vite plugin for React Shopify themes",
   "files": [
     "dist"
@@ -17,19 +17,11 @@
       "default": "./dist/runtime/index.js"
     }
   },
-  "scripts": {
-    "dev": "tsup --watch",
-    "build": "tsup && cp dev-server-index.html dist/",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run",
-    "release": "bumpp && pnpm publish",
-    "release:patch": "bumpp --patch",
-    "release:minor": "bumpp --minor",
-    "release:major": "bumpp --major"
-  },
   "dependencies": {
     "debug": "^4.4.0",
-    "fast-glob": "^3.3.0"
+    "fast-glob": "^3.3.0",
+    "oxc-parser": "^0.133.0",
+    "oxc-walker": "^1.0.0"
   },
   "devDependencies": {
     "@types/debug": "^4.1.0",
@@ -42,5 +34,15 @@
   },
   "peerDependencies": {
     "vite": "^8.0.0"
+  },
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup && cp dev-server-index.html dist/",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "release": "bumpp && pnpm publish",
+    "release:patch": "bumpp --patch",
+    "release:minor": "bumpp --minor",
+    "release:major": "bumpp --major"
   }
-}
+}