vite-plugin-react-shopify 1.1.0 → 2.1.0

package/dist/index.js

@@ -1,31 +1,38 @@
-// src/options.ts
+// src/core/options.ts
 import path from "path";
-var defaultImportMap = {
-  react: "https://esm.sh/react@19",
-  reactDomClient: "https://esm.sh/react-dom@19/client"
-};
 var defaultPrefix = {
   template: "page.react-",
   section: "react-",
-  block: "react-"
+  block: "react-",
+  snippet: "react-"
 };
+function assetRef(buildDir, filename) {
+  if (buildDir === "assets") return filename;
+  const sub = buildDir.startsWith("assets/") ? buildDir.slice(7) : buildDir;
+  return `${sub}/${filename}`;
+}
+function liquidAssetUrl(ref) {
+  return `{{ '${ref}' | asset_url }}`;
+}
 var resolveOptions = (options = {}) => {
   const themeRoot = options.themeRoot ?? "./";
   const sourceCodeDir = options.sourceCodeDir ?? "frontend";
   const snippetFile = options.snippetFile ?? "shopify-importmap.liquid";
   const buildDir = options.buildDir ?? "assets";
   const ssg = {
-    directories: options.ssg?.directories ?? ["sections", "blocks", "templates"],
+    directories: options.ssg?.directories ?? ["sections", "blocks", "templates", "snippets"],
     prefix: {
       template: options.ssg?.prefix?.template ?? defaultPrefix.template,
       section: options.ssg?.prefix?.section ?? defaultPrefix.section,
-      block: options.ssg?.prefix?.block ?? defaultPrefix.block
+      block: options.ssg?.prefix?.block ?? defaultPrefix.block,
+      snippet: options.ssg?.prefix?.snippet ?? defaultPrefix.snippet
     },
-    outputName: options.ssg?.outputName ?? ""
+    outputName: options.ssg?.outputName ?? "",
+    cssPrefix: options.ssg?.cssPrefix ?? "css"
   };
   const importMap = {
-    react: options.importMap?.react ?? defaultImportMap.react,
-    reactDomClient: options.importMap?.reactDomClient ?? defaultImportMap.reactDomClient
+    react: options.importMap?.react ?? liquidAssetUrl(assetRef(buildDir, "react.js")),
+    reactDomClient: options.importMap?.reactDomClient ?? liquidAssetUrl(assetRef(buildDir, "react-dom.js"))
   };
   return {
     themeRoot: path.resolve(themeRoot),
@@ -33,13 +40,12 @@ var resolveOptions = (options = {}) => {
     snippetFile,
     buildDir,
     debug: options.debug ?? false,
-    hash: options.hash ?? false,
     ssg,
     importMap
   };
 };
 
-// src/logger.ts
+// src/core/logger.ts
 import createDebugger from "debug";
 var NAMESPACE = "vite-plugin-shopify";
 var _debugEnabled = false;
@@ -61,7 +67,7 @@ function logger(ns) {
   };
 }
 
-// src/config.ts
+// src/core/config.ts
 import path2 from "path";
 var log = logger("config");
 function isWatchMode() {
@@ -73,32 +79,38 @@ function shopifyConfig(options) {
     config(config) {
       const sourceDirAbs = path2.resolve(options.themeRoot, options.sourceCodeDir);
       const watch = isWatchMode();
-      const entryFileNames = options.hash ? "[name]-[hash].js" : "[name].js";
-      const chunkFileNames = options.hash ? "[name]-[hash].js" : "[name].js";
-      const assetFileNames = options.hash ? "[name]-[hash][extname]" : "[name][extname]";
-      log.debug("hash=%s watch=%s", options.hash, watch);
+      log.debug("watch=%s", watch);
       const generated = {
         base: config.base ?? "./",
         publicDir: config.publicDir ?? false,
         build: {
           outDir: config.build?.outDir ?? path2.join(options.themeRoot, options.buildDir),
           assetsDir: config.build?.assetsDir ?? "",
-          emptyOutDir: config.build?.emptyOutDir ?? false,
+          emptyOutDir: config.build?.emptyOutDir ?? true,
           manifest: config.build?.manifest ?? true,
           minify: config.build?.minify ?? (watch || options.debug ? false : void 0),
           sourcemap: config.build?.sourcemap ?? (watch || options.debug ? "inline" : void 0),
-          rollupOptions: {
-            ...config.build?.rollupOptions,
-            external: [
-              ...Array.isArray(config.build?.rollupOptions?.external) ? config.build.rollupOptions.external : [],
-              "react",
-              "react-dom/client"
-            ],
+          rolldownOptions: {
+            ...config.build?.rolldownOptions ?? config.build?.rollupOptions,
+            external: Array.isArray((config.build?.rolldownOptions ?? config.build?.rollupOptions)?.external) ? (config.build?.rolldownOptions ?? config.build?.rollupOptions).external : [],
             output: {
-              ...config.build?.rollupOptions?.output,
-              entryFileNames,
-              chunkFileNames,
-              assetFileNames
+              ...(config.build?.rolldownOptions ?? config.build?.rollupOptions)?.output,
+              entryFileNames: "[name]-[hash].js",
+              chunkFileNames(chunkInfo) {
+                if (["react", "react-dom"].includes(chunkInfo.name)) {
+                  return `${chunkInfo.name}.js`;
+                }
+                return "[name]-[hash].js";
+              },
+              assetFileNames: "[name]-[hash][extname]",
+              manualChunks(id) {
+                if (id.includes("/node_modules/react-dom/")) {
+                  return "react-dom";
+                }
+                if (id.includes("/node_modules/react/") || id.includes("/node_modules/scheduler/")) {
+                  return "react";
+                }
+              }
             }
           }
         },
@@ -134,7 +146,7 @@ function shopifyConfig(options) {
   };
 }
 
-// src/entries.ts
+// src/core/entries.ts
 import path4 from "path";
 import { normalizePath as normalizePath2 } from "vite";
 
@@ -145,7 +157,8 @@ import { normalizePath } from "vite";
 var TYPE_BY_DIR = {
   templates: "template",
   sections: "section",
-  blocks: "block"
+  blocks: "block",
+  snippets: "snippet"
 };
 function scanEntries(options) {
   const sourceDir = path3.resolve(options.themeRoot, options.sourceCodeDir);
@@ -164,7 +177,7 @@ function scanEntries(options) {
         componentName,
         kebabName,
         targetType,
-        meta: { name: componentName }
+        meta: { name: deriveName(fileName) }
       });
     }
   }
@@ -173,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/entries.ts
+// 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/core/entries.ts
 var log2 = logger("entries");
 function shopifyEntries(options) {
   let entries = [];
@@ -210,74 +279,316 @@ 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 { SettingsProvider } from 'vite-plugin-react-shopify/runtime/settings'`,
-        `import { ParamsProvider } from 'vite-plugin-react-shopify/runtime/settings'`,
-        ``,
-        `const SELECTOR = '[data-ssg-component="${kebabName}"]'`,
-        `const roots = new Map()`,
-        ``,
-        `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 propsEl = el.querySelector(':scope > script[data-ssg-props]')`,
-        `  const props = propsEl ? JSON.parse(propsEl.textContent || '{}') : {}`,
-        `  const paramsEl = el.querySelector(':scope > script[data-ssg-params]')`,
-        `  const params = paramsEl ? JSON.parse(paramsEl.textContent || '{}') : {}`,
-        `  roots.set(h, hydrateRoot(h, createElement(SettingsProvider, { value: props }, createElement(ParamsProvider, { value: params }, 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/ssg/index.ts
-import fs2 from "fs";
-import path7 from "path";
+import fs4 from "fs";
+import path10 from "path";
 
 // src/ssg/compiler.ts
+import fs3 from "fs";
+import path9 from "path";
+
+// 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/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}`
+    );
+  }
+  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;
+  }
+  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 {
+            }
+            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 REACT_LIQUID_REGEX = /<\/?react-liquid>/g;
-function stripReactLiquidTags(html) {
-  return html.replace(REACT_LIQUID_REGEX, "");
+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>");
+}
+function normalizeStyleAttributes(html) {
+  return html.replace(/ style="([^"]+)"/g, (_match, content) => {
+    const normalized = content.replace(/:(\S)/g, ": $1").replace(/;\s*$/, "");
+    return ` style="${normalized};"`;
+  });
 }
 function unwrapHtmlEntities(html) {
   return html.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#x27;/g, "'");
 }
 
-// src/ssg/schema-gen.ts
+// 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/ssg/schema.ts
 function serializeSetting(setting) {
   const s = { type: setting.type };
   if ("id" in setting) s.id = setting.id;
@@ -345,10 +656,35 @@ ${json}
 `;
 }
 
-// src/ssg/liquid.ts
-import path5 from "path";
+// 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) {
+function assembleLiquidFile(html, entry, scriptAsset, cssContents, options, trackedExpressions = []) {
   const type = entry.meta.type ?? entry.targetType;
   const parts = [DISCLAIMER];
   switch (type) {
@@ -356,13 +692,16 @@ function assembleLiquidFile(html, entry, scriptAsset, cssContents, options) {
       parts.push(html);
       break;
     case "section":
-      parts.push(...buildSection(html, entry));
+      parts.push(...buildSection(html, entry, trackedExpressions));
       break;
     case "block":
-      parts.push(...buildBlock(html, entry));
+      parts.push(...buildBlock(html, entry, trackedExpressions));
+      break;
+    case "snippet":
+      parts.push(...buildSnippet(html, entry, trackedExpressions));
       break;
     default:
-      parts.push(...buildSection(html, entry));
+      parts.push(...buildSection(html, entry, trackedExpressions));
       break;
   }
   for (const snippet of cssContents.snippets) {
@@ -383,21 +722,27 @@ function assembleLiquidFile(html, entry, scriptAsset, cssContents, options) {
       `<script type="module" src="{{ '${assetPath}' | asset_url }}"></script>`
     );
   }
-  parts.push(generateSchema(entry.meta));
+  if (type !== "snippet") {
+    parts.push(generateSchema(entry.meta));
+  }
   return parts.join("\n") + "\n";
 }
 var hasBlocks = (entry) => !!entry.meta.blocks && entry.meta.blocks.length > 0;
-var SETTINGS_SECTION = `  <script type="application/json" data-ssg-props>{{ section.settings | json }}</script>`;
-var SETTINGS_BLOCK = `  <script type="application/json" data-ssg-props>{{ block.settings | json }}</script>`;
-function buildParamsBridge(params) {
-  const entries = params.map((p) => `    "${p}": {{ ${p} | json }}`).join(",\n");
-  return `  <script type="application/json" data-ssg-params>
-  {
-${entries}
-  }
-  </script>`;
+function buildLiquidBridge(trackedExpressions) {
+  if (trackedExpressions.length === 0) return "";
+  const entries = trackedExpressions.map((expr, i) => {
+    const comma = i < trackedExpressions.length - 1 ? "," : "";
+    return `    "${expr}": {{ ${expr} | json }}${comma}`;
+  });
+  return [
+    '  <script type="application/json" data-ssg-liquid>',
+    "  {",
+    entries.join("\n"),
+    "  }",
+    "  </script>"
+  ].join("\n");
 }
-function buildSection(html, entry) {
+function buildSection(html, entry, trackedExpressions) {
   const tag = entry.meta.tag ?? "div";
   const cls = entry.meta.class ?? "";
   const lines = [
@@ -408,23 +753,17 @@ function buildSection(html, entry) {
     `  data-ssg-component="${entry.kebabName}"`
   ];
   if (cls) lines.push(`  class="${cls}"`);
+  lines.push(`>`);
+  const liquidBridge = buildLiquidBridge(trackedExpressions);
+  if (liquidBridge) lines.push(liquidBridge);
   lines.push(
-    `>`,
-    SETTINGS_SECTION
-  );
-  if (entry.meta.params?.length) {
-    lines.push(buildParamsBridge(entry.meta.params));
-  }
-  lines.push(
-    `  <div data-ssg-hydrate>`,
-    `    ${html}`,
-    `  </div>`
+    `  <div data-ssg-hydrate>${html}</div>`
   );
   if (hasBlocks(entry)) lines.push(`  {% content_for 'blocks' %}`);
   lines.push(`</${tag}>`);
   return lines;
 }
-function buildBlock(html, entry) {
+function buildBlock(html, entry, trackedExpressions) {
   const tag = entry.meta.tag ?? "div";
   const cls = entry.meta.class ?? "";
   const lines = [
@@ -442,282 +781,138 @@ function buildBlock(html, entry) {
   if (cls) lines.push(`  class="${cls}"`);
   lines.push(
     `  {{ block.shopify_attributes }}`,
-    `>`,
-    SETTINGS_BLOCK
+    `>`
   );
-  if (entry.meta.params?.length) {
-    lines.push(buildParamsBridge(entry.meta.params));
-  }
+  const liquidBridge = buildLiquidBridge(trackedExpressions);
+  if (liquidBridge) lines.push(liquidBridge);
   lines.push(
-    `  <div data-ssg-hydrate>`,
-    `    ${html}`,
-    `  </div>`
+    `  <div data-ssg-hydrate>${html}</div>`
   );
   if (hasBlocks(entry)) lines.push(`  {% content_for 'blocks' %}`);
   lines.push(`</${tag}>`);
   return lines;
 }
-function getOutputPath(entry, options) {
-  const type = entry.meta.type ?? entry.targetType;
-  const dirName = type === "block" ? "blocks" : `${type}s`;
-  const fileName = resolveFileName(entry, type, options);
-  return path5.join(options.themeRoot, dirName, fileName);
+function buildSnippet(html, entry, trackedExpressions) {
+  const lines = [
+    "",
+    `<div data-ssg-component="${entry.kebabName}">`
+  ];
+  const liquidBridge = buildLiquidBridge(trackedExpressions);
+  if (liquidBridge) lines.push(liquidBridge);
+  lines.push(
+    `  <div data-ssg-hydrate>`,
+    `    ${html}`,
+    `  </div>`,
+    `</div>`
+  );
+  return lines;
 }
-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/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);
+    }
+  }
+  for (const w of warnings) {
+    log7.warn(w);
+  }
+  return warnings;
 }
 
 // src/ssg/compiler.ts
-var log3 = logger("ssg:compiler");
-var SNIPPET_PREFIX = "react-css";
+var log8 = logger("ssg:compiler");
 async function compileAllEntries(options, manifest) {
   const entries = scanEntries(options);
   if (entries.length === 0) return;
-  log3.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);
-    }
-    log3.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 = `${SNIPPET_PREFIX}-${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 %}
-`);
-        log3.debug("generated shared CSS snippet %s (used by %d entries)", snippetName, count);
-      } catch {
-        log3.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);
-      log3.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) {
-      log3.error("Failed to compile %s:", entry.filePath, err);
+      log8.error("Failed to compile %s:", entry.filePath, err);
     }
   }
-  log3.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 {
-    log3.warn("react/react-dom not found, skipping SSR for %s", entry.kebabName);
-    return;
-  }
-  const sourceCode = fs.readFileSync(entry.filePath, "utf-8");
-  let esbuild;
-  try {
-    esbuild = projectRequire("esbuild");
-  } catch {
-    log3.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`);
-  log3.debug("bundling %s via esbuild", entry.kebabName);
-  const startBundled = Date.now();
-  await esbuild.build({
-    stdin: {
-      contents: sourceCode,
-      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-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"
-          }));
-        }
-      }
-    ]
-  });
-  log3.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) {
-      log3.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 element = createElement(Component);
-    let html = renderToStaticMarkup(element);
-    html = stripReactLiquidTags(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
-    });
+    }, [...trackedExpressions]);
     const outputPath = getOutputPath(entry, {
       prefix: options.ssg.prefix,
       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);
-    } 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");
+      fs3.unlinkSync(bundleResult.tmpFile);
     } 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/ssg/index.ts
-var log4 = logger("ssg");
+var log9 = logger("ssg");
 function shopifySSG(options) {
   return {
     name: "vite-plugin-shopify:ssg",
@@ -726,23 +921,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)) {
-        log4.warn("No manifest.json found, skipping SSG");
+      if (!fs4.existsSync(manifestPath)) {
+        log9.warn("No manifest.json found, skipping SSG");
         return;
       }
-      log4.debug("reading manifest from %s", manifestPath);
-      const manifest = JSON.parse(fs2.readFileSync(manifestPath, "utf-8"));
-      log4.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);
-      log4.info("SSG compilation complete");
+      log9.info("SSG compilation complete");
       writeImportMapSnippet(options);
-      log4.debug("wrote import map snippet");
+      log9.debug("wrote import map snippet");
     },
     resolveId(id) {
       if (id === "vite-plugin-shopify/runtime") {
@@ -751,13 +946,17 @@ function shopifySSG(options) {
     },
     load(id) {
       if (id === "\0vite-plugin-shopify:runtime") {
-        return `export { Liquid } from 'vite-plugin-shopify/runtime/Liquid'`;
+        const exports = [
+          `export { LiquidDataProvider, LiquidDataContext } from 'vite-plugin-shopify/runtime'`,
+          `export { useLiquid, useLiquidValues, useSectionSettings, useBlockSettings, useSnippetParams, useBlockParams } from 'vite-plugin-shopify/runtime'`
+        ];
+        return exports.join("\n");
       }
     }
   };
 }
 function writeImportMapSnippet(options) {
-  const snippetPath = path7.resolve(
+  const snippetPath = path10.resolve(
     options.themeRoot,
     "snippets",
     options.snippetFile
@@ -774,11 +973,11 @@ 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/index.ts