vite-plugin-react-shopify 1.0.0

package/dist/index.js

@@ -0,0 +1,638 @@
+// src/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-"
+};
+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"],
+    prefix: {
+      template: options.ssg?.prefix?.template ?? defaultPrefix.template,
+      section: options.ssg?.prefix?.section ?? defaultPrefix.section,
+      block: options.ssg?.prefix?.block ?? defaultPrefix.block
+    },
+    outputName: options.ssg?.outputName ?? ""
+  };
+  const importMap = {
+    react: options.importMap?.react ?? defaultImportMap.react,
+    reactDomClient: options.importMap?.reactDomClient ?? defaultImportMap.reactDomClient
+  };
+  return {
+    themeRoot: path.resolve(themeRoot),
+    sourceCodeDir,
+    snippetFile,
+    buildDir,
+    ssg,
+    importMap
+  };
+};
+
+// src/config.ts
+import path2 from "path";
+import createDebugger from "debug";
+var debug = createDebugger("vite-plugin-shopify:config");
+function shopifyConfig(options) {
+  const isDebug = process.env.VITE_SHOPIFY_DEBUG === "true";
+  return {
+    name: "vite-plugin-shopify:config",
+    config(config) {
+      const sourceDirAbs = path2.resolve(options.themeRoot, options.sourceCodeDir);
+      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,
+          manifest: config.build?.manifest ?? true,
+          minify: config.build?.minify ?? (isDebug ? false : void 0),
+          sourcemap: config.build?.sourcemap ?? (isDebug ? true : void 0),
+          rollupOptions: {
+            ...config.build?.rollupOptions,
+            external: [
+              ...Array.isArray(config.build?.rollupOptions?.external) ? config.build.rollupOptions.external : [],
+              "react",
+              "react-dom/client"
+            ],
+            output: {
+              ...config.build?.rollupOptions?.output,
+              entryFileNames: "[name]-[hash].js",
+              chunkFileNames: "[name]-[hash].js",
+              assetFileNames: "[name]-[hash][extname]"
+            }
+          }
+        },
+        resolve: {
+          alias: Array.isArray(config.resolve?.alias) ? [
+            ...config.resolve.alias,
+            { find: "~", replacement: sourceDirAbs },
+            { find: "@", replacement: sourceDirAbs }
+          ] : {
+            "~": sourceDirAbs,
+            "@": sourceDirAbs,
+            ...config.resolve?.alias
+          }
+        },
+        server: {
+          host: config.server?.host ?? "localhost",
+          https: config.server?.https,
+          port: config.server?.port ?? 5173,
+          cors: config.server?.cors ?? {
+            origin: [
+              /^https?:\/\/(?:(?:[^:]+\.)?localhost|127\.0\.0\.1|\[::1\])(?::\d+)?$/,
+              /\.myshopify\.com$/
+            ]
+          }
+        },
+        css: {
+          modules: config.css?.modules
+        }
+      };
+      debug(generated);
+      return generated;
+    }
+  };
+}
+
+// src/entries.ts
+import path4 from "path";
+import { normalizePath as normalizePath2 } from "vite";
+
+// src/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"
+};
+function scanEntries(options) {
+  const sourceDir = path3.resolve(options.themeRoot, options.sourceCodeDir);
+  const entries = [];
+  for (const dir of options.ssg.directories) {
+    const scanPath = normalizePath(path3.join(sourceDir, dir, "**/*.{tsx,jsx}"));
+    const files = glob.sync(scanPath, { onlyFiles: true });
+    for (const filePath of files) {
+      const absPath = path3.resolve(filePath);
+      const fileName = path3.basename(filePath, path3.extname(filePath));
+      const componentName = fileName;
+      const kebabName = toKebabCase(fileName);
+      const targetType = TYPE_BY_DIR[dir] ?? "section";
+      entries.push({
+        filePath: absPath,
+        componentName,
+        kebabName,
+        targetType,
+        meta: { name: componentName }
+      });
+    }
+  }
+  return entries;
+}
+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
+function shopifyEntries(options) {
+  let entries = [];
+  return {
+    name: "vite-plugin-shopify:entries",
+    config(config) {
+      entries = scanEntries(options);
+      if (entries.length === 0) return {};
+      const input = {};
+      for (const entry of entries) {
+        input[entry.kebabName] = `\0shopify:entry:${entry.kebabName}`;
+      }
+      const existingInput = config.build?.rollupOptions?.input;
+      const merged = existingInput ? { ...existingInput, ...input } : input;
+      return {
+        build: {
+          rollupOptions: { input: merged }
+        }
+      };
+    },
+    resolveId(id) {
+      if (id.startsWith("\0shopify:entry:")) return `\0${id}`;
+    },
+    load(id) {
+      if (!id.startsWith("\0\0shopify:entry:")) return;
+      const kebabName = id.replace("\0\0shopify:entry:", "");
+      const entry = entries.find((e) => e.kebabName === kebabName);
+      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");
+    }
+  };
+}
+
+// src/ssg/index.ts
+import fs2 from "fs";
+import path7 from "path";
+
+// src/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, "");
+}
+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
+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) {
+    s.default = setting.default;
+  }
+  if ("info" in setting && setting.info) s.info = setting.info;
+  if ("placeholder" in setting && setting.placeholder) {
+    s.placeholder = setting.placeholder;
+  }
+  if ("options" in setting && setting.options) s.options = setting.options;
+  if ("min" in setting && setting.min !== void 0) s.min = setting.min;
+  if ("max" in setting && setting.max !== void 0) s.max = setting.max;
+  if ("step" in setting && setting.step !== void 0) s.step = setting.step;
+  if ("unit" in setting && setting.unit) s.unit = setting.unit;
+  if ("accept" in setting && setting.accept) s.accept = setting.accept;
+  if ("metaobject_type" in setting && setting.metaobject_type) {
+    s.metaobject_type = setting.metaobject_type;
+  }
+  if ("limit" in setting && setting.limit !== void 0) s.limit = setting.limit;
+  if ("content" in setting && setting.content) s.content = setting.content;
+  if ("definition" in setting && setting.definition) {
+    s.definition = setting.definition.map(serializeSetting);
+  }
+  if ("role" in setting && setting.role) s.role = setting.role;
+  return s;
+}
+function generateSchema(meta) {
+  const schema = {
+    name: meta.name
+  };
+  if (meta.tag) schema.tag = meta.tag;
+  if (meta.class) schema.class = meta.class;
+  if (meta.limit !== void 0) schema.limit = meta.limit;
+  if (meta.max_blocks !== void 0) schema.max_blocks = meta.max_blocks;
+  if (meta.settings && meta.settings.length > 0) {
+    schema.settings = meta.settings.map(serializeSetting);
+  }
+  if (meta.blocks && meta.blocks.length > 0) {
+    schema.blocks = meta.blocks.map((block) => {
+      const b = { type: block.type };
+      if (block.name) b.name = block.name;
+      if (block.settings) b.settings = block.settings;
+      return b;
+    });
+  }
+  if (meta.presets && meta.presets.length > 0) {
+    schema.presets = meta.presets.map((preset) => {
+      const p = { name: preset.name };
+      if (preset.category) p.category = preset.category;
+      if (preset.settings) p.settings = preset.settings;
+      if (preset.blocks) p.blocks = preset.blocks;
+      return p;
+    });
+  }
+  if (meta.enabled_on) schema.enabled_on = meta.enabled_on;
+  if (meta.disabled_on) schema.disabled_on = meta.disabled_on;
+  if (meta.templates) schema.templates = meta.templates;
+  const json = JSON.stringify(schema, null, 2);
+  return `
+{% schema %}
+${json}
+{% endschema %}
+`;
+}
+
+// src/ssg/liquid.ts
+import path5 from "path";
+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) {
+  const type = entry.meta.type ?? entry.targetType;
+  const parts = [DISCLAIMER];
+  switch (type) {
+    case "template":
+      parts.push(html);
+      break;
+    case "section":
+      parts.push(...buildSection(html, entry));
+      break;
+    case "block":
+      parts.push(...buildBlock(html, entry));
+      break;
+    default:
+      parts.push(...buildSection(html, entry));
+      break;
+  }
+  if (cssContents.length > 0) {
+    parts.push(
+      "",
+      "{% stylesheet %}",
+      ...cssContents.map((c) => c.trim()),
+      "{% endstylesheet %}"
+    );
+  }
+  if (scriptAsset) {
+    const assetPath = getAssetRelativePath(options.buildDir, scriptAsset);
+    parts.push(
+      "",
+      `<script type="module" src="{{ '${assetPath}' | asset_url }}"></script>`
+    );
+  }
+  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 buildSection(html, entry) {
+  const tag = entry.meta.tag ?? "div";
+  const cls = entry.meta.class ?? "";
+  const lines = [
+    "",
+    `<${tag}`,
+    `  id="{{ section.id }}"`,
+    `  data-section-id="{{ section.id }}"`,
+    `  data-ssg-component="${entry.kebabName}"`
+  ];
+  if (cls) lines.push(`  class="${cls}"`);
+  lines.push(
+    `>`,
+    SETTINGS_SECTION
+  );
+  if (entry.meta.params?.length) {
+    lines.push(buildParamsBridge(entry.meta.params));
+  }
+  lines.push(
+    `  <div data-ssg-hydrate>`,
+    `    ${html}`,
+    `  </div>`
+  );
+  if (hasBlocks(entry)) lines.push(`  {% content_for 'blocks' %}`);
+  lines.push(`</${tag}>`);
+  return lines;
+}
+function buildBlock(html, entry) {
+  const tag = entry.meta.tag ?? "div";
+  const cls = entry.meta.class ?? "";
+  const lines = [
+    "",
+    `{%- doc -%}`,
+    `  @name ${entry.meta.name}`,
+    `  @context theme-block`,
+    `{%- enddoc -%}`,
+    "",
+    `<${tag}`,
+    `  id="{{ block.id }}"`,
+    `  data-section-id="{{ section.id }}"`,
+    `  data-ssg-component="${entry.kebabName}"`
+  ];
+  if (cls) lines.push(`  class="${cls}"`);
+  lines.push(
+    `  {{ block.shopify_attributes }}`,
+    `>`,
+    SETTINGS_BLOCK
+  );
+  if (entry.meta.params?.length) {
+    lines.push(buildParamsBridge(entry.meta.params));
+  }
+  lines.push(
+    `  <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 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/compiler.ts
+async function compileAllEntries(options, manifest) {
+  const entries = scanEntries(options);
+  if (entries.length === 0) return;
+  const projectRoot = path6.resolve(options.themeRoot);
+  const sourceDir = path6.resolve(options.themeRoot, options.sourceCodeDir);
+  for (const entry of entries) {
+    try {
+      await compileEntry(entry, options, manifest, projectRoot, sourceDir);
+    } catch (err) {
+      console.error(`[vite-plugin-shopify] Failed to compile ${entry.filePath}:`, err);
+    }
+  }
+  console.log(`[vite-plugin-shopify] Compiled ${entries.length} entries`);
+}
+async function compileEntry(entry, options, manifest, projectRoot, sourceDir) {
+  const projectRequire = createRequire(path6.join(projectRoot, "package.json"));
+  let createElement;
+  let renderToStaticMarkup;
+  try {
+    createElement = projectRequire("react").createElement;
+    renderToStaticMarkup = projectRequire("react-dom/server").renderToStaticMarkup;
+  } catch {
+    console.warn(`[vite-plugin-shopify] react/react-dom not found, skipping SSR`);
+    return;
+  }
+  const sourceCode = fs.readFileSync(entry.filePath, "utf-8");
+  const ssgSource = sourceCode.replace(
+    /import\s+(\w+)\s+from\s+["'][^"']*\.module\.css["'];?\s*/g,
+    (_, name) => `const ${name} = new Proxy({},{get:(_,k)=>k});`
+  ).replace(
+    /import\s+["'][^"']*\.css["'];?\s*/g,
+    ""
+  );
+  let esbuild;
+  try {
+    esbuild = projectRequire("esbuild");
+  } catch {
+    console.warn(`[vite-plugin-shopify] esbuild not found, skipping SSR`);
+    return;
+  }
+  const result = await esbuild.transform(ssgSource, {
+    loader: path6.extname(entry.filePath).slice(1),
+    format: "esm",
+    jsx: "automatic",
+    sourcefile: entry.filePath
+  });
+  const ts = Date.now();
+  const tmpFile = path6.join(sourceDir, ".ssg-tmp-" + ts + ".mjs");
+  fs.writeFileSync(tmpFile, result.code);
+  try {
+    const mod = await import(pathToFileURL(tmpFile));
+    const Component = mod.default;
+    const shopifyMeta = mod.shopifyMeta;
+    if (!Component) {
+      console.warn(
+        `[vite-plugin-shopify] No default export found in ${entry.filePath}, skipping`
+      );
+      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 scriptAsset = resolveScriptAsset(entry.kebabName, manifest);
+    const cssContents = readCssAssets(entry.kebabName, manifest, options.buildDir, options.themeRoot);
+    const liquidContent = assembleLiquidFile(html, entry, scriptAsset, cssContents, {
+      prefix: options.ssg.prefix,
+      outputName: options.ssg.outputName || void 0,
+      buildDir: options.buildDir
+    });
+    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 });
+    }
+    fs.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 readCssAssets(kebabName, manifest, buildDir, themeRoot) {
+  const manifestKey = `shopify:entry:${kebabName}`;
+  const entryChunk = manifest[manifestKey];
+  if (!entryChunk) return [];
+  const css = entryChunk.css;
+  if (!css || !Array.isArray(css)) return [];
+  const assetsDir = path6.resolve(themeRoot, buildDir);
+  return css.map((file) => {
+    const cssPath = path6.join(assetsDir, file);
+    try {
+      return fs.readFileSync(cssPath, "utf-8");
+    } catch {
+      return "";
+    }
+  }).filter(Boolean);
+}
+function pathToFileURL(filePath) {
+  const absPath = path6.resolve(filePath);
+  if (process.platform === "win32") {
+    return "file:///" + absPath.replace(/\\/g, "/");
+  }
+  return "file://" + absPath;
+}
+
+// src/ssg/index.ts
+function shopifySSG(options) {
+  return {
+    name: "vite-plugin-shopify:ssg",
+    enforce: "post",
+    config() {
+      return {};
+    },
+    async closeBundle() {
+      const manifestPath = path7.resolve(
+        options.themeRoot,
+        options.buildDir,
+        ".vite",
+        "manifest.json"
+      );
+      if (!fs2.existsSync(manifestPath)) {
+        console.warn("[vite-plugin-shopify] No manifest.json found, skipping SSG");
+        return;
+      }
+      const manifest = JSON.parse(fs2.readFileSync(manifestPath, "utf-8"));
+      console.log("[vite-plugin-shopify] Starting SSG compilation...");
+      await compileAllEntries(options, manifest);
+      console.log("[vite-plugin-shopify] SSG compilation complete");
+      writeImportMapSnippet(options);
+    },
+    resolveId(id) {
+      if (id === "vite-plugin-shopify/runtime") {
+        return "\0vite-plugin-shopify:runtime";
+      }
+    },
+    load(id) {
+      if (id === "\0vite-plugin-shopify:runtime") {
+        return `export { Liquid } from 'vite-plugin-shopify/runtime/Liquid'`;
+      }
+    }
+  };
+}
+function writeImportMapSnippet(options) {
+  const snippetPath = path7.resolve(
+    options.themeRoot,
+    "snippets",
+    options.snippetFile
+  );
+  const content = [
+    "{% comment %}IMPORTANT: Auto-generated by vite-plugin-react-shopify{% endcomment %}",
+    '<script type="importmap">',
+    "{",
+    '  "imports": {',
+    `    "react": "${options.importMap.react}",`,
+    `    "react-dom/client": "${options.importMap.reactDomClient}"`,
+    "  }",
+    "}",
+    "</script>",
+    ""
+  ].join("\n");
+  const dir = path7.dirname(snippetPath);
+  if (!fs2.existsSync(dir)) {
+    fs2.mkdirSync(dir, { recursive: true });
+  }
+  fs2.writeFileSync(snippetPath, content);
+}
+
+// src/index.ts
+var vitePluginShopify = (options = {}) => {
+  const resolvedOptions = resolveOptions(options);
+  return [
+    shopifyConfig(resolvedOptions),
+    shopifyEntries(resolvedOptions),
+    shopifySSG(resolvedOptions)
+  ];
+};
+var src_default = vitePluginShopify;
+export {
+  src_default as default
+};

package/dist/runtime/Liquid.client.d.ts

@@ -0,0 +1,6 @@
+interface LiquidProps {
+    code: string;
+}
+declare function Liquid(_props: LiquidProps): null;
+
+export { Liquid };

package/dist/runtime/Liquid.client.js

@@ -0,0 +1,7 @@
+// src/runtime/Liquid.client.tsx
+function Liquid(_props) {
+  return null;
+}
+export {
+  Liquid
+};

package/dist/runtime/Liquid.d.ts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+
+declare function Liquid({ code }: {
+    code: string;
+}): react.DOMElement<{
+    dangerouslySetInnerHTML: {
+        __html: string;
+    };
+}, Element>;
+
+export { Liquid };

package/dist/runtime/Liquid.js

@@ -0,0 +1,10 @@
+// src/runtime/Liquid.tsx
+import { createElement } from "react";
+function Liquid({ code }) {
+  return createElement("react-liquid", {
+    dangerouslySetInnerHTML: { __html: code }
+  });
+}
+export {
+  Liquid
+};

package/dist/runtime/settings.d.ts

@@ -0,0 +1,8 @@
+import * as react from 'react';
+
+declare const SettingsProvider: react.Provider<Record<string, any>>;
+declare function useShopifySettings<T = Record<string, any>>(): T;
+declare const ParamsProvider: react.Provider<Record<string, any>>;
+declare function useShopifyParams<T = Record<string, any>>(): T;
+
+export { ParamsProvider, SettingsProvider, useShopifyParams, useShopifySettings };