vite-plugin-react-shopify 1.1.0 → 2.0.0

package/dist/index.js

@@ -1,31 +1,38 @@
-// src/options.ts
+// src/plugin/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/plugin/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/plugin/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,18 +146,19 @@ function shopifyConfig(options) {
   };
 }
 
-// src/entries.ts
+// src/plugin/entries.ts
 import path4 from "path";
 import { normalizePath as normalizePath2 } from "vite";
 
-// src/ssg/scanner.ts
+// src/plugin/ssg/scanner.ts
 import path3 from "path";
 import glob from "fast-glob";
 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);
@@ -174,7 +187,7 @@ 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();
 }
 
-// src/entries.ts
+// src/plugin/entries.ts
 var log2 = logger("entries");
 function shopifyEntries(options) {
   let entries = [];
@@ -214,20 +227,22 @@ function shopifyEntries(options) {
         `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'`,
+        `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 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)))))`,
+        `  const liquidData = readLiquidData(el)`,
+        `  roots.set(h, hydrateRoot(h, createElement(LiquidDataProvider, { value: liquidData }, createElement(Component))))`,
         `}`,
         ``,
         `function unmount(el) {`,
@@ -259,30 +274,45 @@ function shopifyEntries(options) {
   };
 }
 
-// src/ssg/index.ts
+// src/plugin/ssg/index.ts
 import fs2 from "fs";
 import path7 from "path";
 
-// src/ssg/compiler.ts
+// src/plugin/ssg/compiler.ts
 import fs from "fs";
 import path6 from "path";
 import { createRequire } from "module";
 
-// src/ssg/post-process.ts
-var REACT_LIQUID_REGEX = /<\/?react-liquid>/g;
-function stripReactLiquidTags(html) {
-  return html.replace(REACT_LIQUID_REGEX, "");
+// src/plugin/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>");
+}
+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/plugin/ssg/liquid.ts
+import path5 from "path";
+
+// src/plugin/ssg/schema-gen.ts
+var log3 = logger("schema-gen");
 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;
@@ -345,10 +375,9 @@ ${json}
 `;
 }
 
-// src/ssg/liquid.ts
-import path5 from "path";
+// src/plugin/ssg/liquid.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 +385,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 +415,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 +446,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,27 +474,43 @@ 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 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 getOutputPath(entry, options) {
   const type = entry.meta.type ?? entry.targetType;
-  const dirName = type === "block" ? "blocks" : `${type}s`;
+  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);
@@ -476,13 +524,52 @@ function resolveFileName(entry, type, options) {
   return `${prefix}${entry.kebabName}.liquid`;
 }
 
-// src/ssg/compiler.ts
-var log3 = logger("ssg:compiler");
-var SNIPPET_PREFIX = "react-css";
+// 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}`
+    );
+  }
+  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/plugin/ssg/compiler.ts
+var log5 = 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);
+  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();
@@ -494,12 +581,12 @@ async function compileAllEntries(options, manifest) {
     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);
+    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 = `${SNIPPET_PREFIX}-${getCssBaseName(cssFile)}`;
+      const snippetName = `${options.ssg.cssPrefix}-${getCssBaseName(cssFile)}`;
       cssSnippetMap.set(cssFile, snippetName);
       const snippetPath = path6.join(
         path6.resolve(options.themeRoot),
@@ -517,9 +604,9 @@ async function compileAllEntries(options, manifest) {
 ${cssContent.trim()}
 {% endstylesheet %}
 `);
-        log3.debug("generated shared CSS snippet %s (used by %d entries)", snippetName, count);
+        log5.debug("generated shared CSS snippet %s (used by %d entries)", snippetName, count);
       } catch {
-        log3.warn("failed to write CSS snippet for %s", cssFile);
+        log5.warn("failed to write CSS snippet for %s", cssFile);
       }
     }
   }
@@ -529,7 +616,7 @@ ${cssContent.trim()}
       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(
+      log5.debug(
         "compiling %s (type=%s, css inline=%d, css snippets=%d)",
         entry.kebabName,
         entry.targetType,
@@ -538,10 +625,10 @@ ${cssContent.trim()}
       );
       await compileEntry(entry, options, manifest, projectRoot, sourceDir, cssInline, cssSnippets);
     } catch (err) {
-      log3.error("Failed to compile %s:", entry.filePath, err);
+      log5.error("Failed to compile %s:", entry.filePath, err);
     }
   }
-  log3.info("Compiled %d entries", entries.length);
+  log5.info("Compiled %d entries", entries.length);
   const tmpDir = path6.join(sourceDir, ".ssg-tmp");
   try {
     fs.rmSync(tmpDir, { recursive: true, force: true });
@@ -556,26 +643,28 @@ async function compileEntry(entry, options, manifest, projectRoot, sourceDir, cs
     createElement = projectRequire("react").createElement;
     renderToStaticMarkup = projectRequire("react-dom/server").renderToStaticMarkup;
   } catch {
-    log3.warn("react/react-dom not found, skipping SSR for %s", entry.kebabName);
+    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 {
-    log3.warn("esbuild not found, skipping SSR for %s", entry.kebabName);
+    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`);
-  log3.debug("bundling %s via esbuild", entry.kebabName);
+  log5.debug("bundling %s via esbuild", entry.kebabName);
   const startBundled = Date.now();
   await esbuild.build({
     stdin: {
-      contents: sourceCode,
+      contents: finalSource,
       resolveDir: path6.dirname(entry.filePath),
       loader: path6.extname(entry.filePath).slice(1)
     },
@@ -594,6 +683,22 @@ async function compileEntry(entry, options, manifest, projectRoot, sourceDir, cs
     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) {
@@ -617,29 +722,33 @@ async function compileEntry(entry, options, manifest, projectRoot, sourceDir, cs
       }
     ]
   });
-  log3.debug("esbuild bundle took %dms", Date.now() - startBundled);
+  log5.debug("esbuild bundle took %dms", Date.now() - startBundled);
   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);
+      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);
-    html = stripReactLiquidTags(html);
+    delete globalThis.__shopify_ssg_liquid_track;
+    html = normalizeVoidElements(html);
+    html = normalizeStyleAttributes(html);
     html = unwrapHtmlEntities(html);
     const scriptAsset = resolveScriptAsset(entry.kebabName, manifest);
     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,
@@ -716,8 +825,8 @@ function pathToFileURL(filePath) {
   return "file://" + absPath;
 }
 
-// src/ssg/index.ts
-var log4 = logger("ssg");
+// src/plugin/ssg/index.ts
+var log6 = logger("ssg");
 function shopifySSG(options) {
   return {
     name: "vite-plugin-shopify:ssg",
@@ -733,16 +842,16 @@ function shopifySSG(options) {
         "manifest.json"
       );
       if (!fs2.existsSync(manifestPath)) {
-        log4.warn("No manifest.json found, skipping SSG");
+        log6.warn("No manifest.json found, skipping SSG");
         return;
       }
-      log4.debug("reading manifest from %s", manifestPath);
+      log6.debug("reading manifest from %s", manifestPath);
       const manifest = JSON.parse(fs2.readFileSync(manifestPath, "utf-8"));
-      log4.info("Starting SSG compilation...");
+      log6.info("Starting SSG compilation...");
       await compileAllEntries(options, manifest);
-      log4.info("SSG compilation complete");
+      log6.info("SSG compilation complete");
       writeImportMapSnippet(options);
-      log4.debug("wrote import map snippet");
+      log6.debug("wrote import map snippet");
     },
     resolveId(id) {
       if (id === "vite-plugin-shopify/runtime") {
@@ -751,7 +860,11 @@ 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");
       }
     }
   };

package/dist/runtime/index.d.ts

@@ -0,0 +1,32 @@
+import * as react from 'react';
+
+declare function useLiquid(expr: string): {
+    value: string | undefined;
+};
+declare function useLiquidValues<T extends Record<string, string>>(map: T): {
+    values: {
+        [K in keyof T]: string | undefined;
+    };
+};
+declare function useSectionSettings(key: string): {
+    value: string | undefined;
+};
+declare function useBlockSettings(key: string): {
+    value: string | undefined;
+};
+declare function useSnippetParams(key: string): {
+    value: string | undefined;
+};
+declare function useBlockParams(key: string): {
+    value: string | undefined;
+};
+
+/** SSR-safe boolean parser: treats Liquid expression strings as truthy, real booleans as-is */
+declare function parseLiquidBoolean(value: string | boolean | undefined | null): boolean;
+/** SSR-safe number parser: returns defaultVal for unparseable SSR placeholders */
+declare function parseLiquidNumber(value: string | number | undefined | null, defaultVal?: number): number;
+
+declare const LiquidDataContext: react.Context<Record<string, any>>;
+declare const LiquidDataProvider: react.Provider<Record<string, any>>;
+
+export { LiquidDataContext, LiquidDataProvider, parseLiquidBoolean, parseLiquidNumber, useBlockParams, useBlockSettings, useLiquid, useLiquidValues, useSectionSettings, useSnippetParams };