@chaibuilder/sdk 2.0.0-beta.81 → 2.0.0-beta.82

package/dist/render.cjs

@@ -1,3 +1,248 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("./ChaiThemeFn-DQu-2Eh9.cjs"),n=require("lodash-es"),f=require("./getSplitClasses-DodqA_KW.cjs"),F=require("@mhsdesign/jit-browser-tailwindcss"),O=require("@tailwindcss/aspect-ratio"),R=require("@tailwindcss/container-queries"),b=require("@tailwindcss/forms"),k=require("@tailwindcss/typography"),_=require("./plugin-2xcljWGM.cjs"),d=require("react/jsx-runtime"),w=require("@chaibuilder/runtime"),p=require("react"),$=require("tailwind-merge"),N=(e,r="")=>{const{classes:s}=f.getSplitChaiClasses(e),t=s.split(" ").map(i=>i.split(" ").map(c=>{if(c==="")return"";if(c.includes(":")){const l=c.split(":");return l[l.length-1]=r+n.last(l),l.join(":")}return`${r}${c}`}).join(" "));return n.flattenDeep(t).join(" ")},Y=e=>{if(!e)return[];try{return JSON.parse(A(e)).filter(s=>!s._type.startsWith("@chai"))}catch{return[{_type:"Paragraph",_id:"error",content:"Invalid JSON. Please check the JSON string."}]}};function A(e){const r=/(asset:\/\/|https:\/\/asset\.localhost\/)(?:localhost\/)?[^"']+/g;return e.replace(r,s=>{const t=decodeURIComponent(s),i=t.indexOf("public");return i!==-1?t.substring(i+6):t})}async function I(e,r,s=[],t="",i){return await F.createTailwindcss({tailwindConfig:{darkMode:"class",safelist:s,theme:{extend:_.getChaiBuilderTheme(e)},plugins:[b,k,O,R,_.chaiBuilderPlugin],corePlugins:{preflight:i},...t?{prefix:`${t}`}:{}}}).generateStylesFromContent(` ${i?"@tailwind base;":""}
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ChaiThemeFn = require("./ChaiThemeFn-DcE5RdLQ.cjs");
+const lodashEs = require("lodash-es");
+const getSplitClasses = require("./getSplitClasses-mbQmvwI3.cjs");
+const jitBrowserTailwindcss = require("@mhsdesign/jit-browser-tailwindcss");
+const aspectRatio = require("@tailwindcss/aspect-ratio");
+const containerQueries = require("@tailwindcss/container-queries");
+const forms = require("@tailwindcss/forms");
+const typography = require("@tailwindcss/typography");
+const plugin = require("./plugin-BcTnEZwx.cjs");
+const jsxRuntime = require("react/jsx-runtime");
+const runtime = require("@chaibuilder/runtime");
+const React = require("react");
+const tailwindMerge = require("tailwind-merge");
+const addPrefixToClasses = (classes, prefix = "") => {
+  const { classes: classesString } = getSplitClasses.getSplitChaiClasses(classes);
+  const array = classesString.split(" ").map((item) => {
+    const classes2 = item.split(" ");
+    const newClasses = classes2.map((item2) => {
+      if (item2 === "") return "";
+      if (item2.includes(":")) {
+        const values = item2.split(":");
+        values[values.length - 1] = prefix + lodashEs.last(values);
+        return values.join(":");
+      }
+      return `${prefix}${item2}`;
+    });
+    return newClasses.join(" ");
+  });
+  return lodashEs.flattenDeep(array).join(" ");
+};
+const convertToBlocks = (chaiFormatContent) => {
+  if (!chaiFormatContent) return [];
+  try {
+    const blocks = JSON.parse(removeAssetPrefix(chaiFormatContent));
+    return blocks.filter((block) => !block._type.startsWith("@chai"));
+  } catch (error) {
+    return [{ _type: "Paragraph", _id: "error", content: "Invalid JSON. Please check the JSON string." }];
+  }
+};
+function removeAssetPrefix(input) {
+  const regex = /(asset:\/\/|https:\/\/asset\.localhost\/)(?:localhost\/)?[^"']+/g;
+  return input.replace(regex, (match) => {
+    const decodedUrl = decodeURIComponent(match);
+    const publicIndex = decodedUrl.indexOf("public");
+    if (publicIndex !== -1) {
+      return decodedUrl.substring(publicIndex + 6);
+    }
+    return decodedUrl;
+  });
+}
+async function getTailwindCSS(themeOptions, markupString, safelist = [], prefix = "", includeBaseStyles) {
+  const tailwind = jitBrowserTailwindcss.createTailwindcss({
+    tailwindConfig: {
+      darkMode: "class",
+      safelist,
+      theme: { extend: plugin.getChaiBuilderTheme(themeOptions) },
+      plugins: [forms, typography, aspectRatio, containerQueries, plugin.chaiBuilderPlugin],
+      corePlugins: { preflight: includeBaseStyles },
+      ...prefix ? { prefix: `${prefix}` } : {}
+    }
+  });
+  return await tailwind.generateStylesFromContent(
+    ` ${includeBaseStyles ? "@tailwind base;" : ""}
       @tailwind components;
-      @tailwind utilities;`,r)}const M=(e,r,s)=>{const t=JSON.stringify(e).replace(/#styles:([^"]*)/g,(i,o)=>`#styles:${o.replace(/,/g," ")}`.replace(/#styles:/g,""));return I(r,[t],[],"",s)},J=async(e,r=m.defaultThemeOptions,s=!1)=>await M(e,r,s);async function K(e){const r=await(e==null?void 0:e.dataProvider(e.block,e.lang,e.metadata));return d.jsx(p.Suspense,{children:p.createElement(e.component,{...e.props,...r})})}const L=n.memoize((e,r)=>{const{baseClasses:s,classes:t}=f.getSplitChaiClasses(e),i=$.twMerge(s,t);return r===""?i.replace(f.STYLES_KEY,"").trim():N(i,r).replace(f.STYLES_KEY,"").trim()}),V=(e,r)=>{const s=n.cloneDeep(e);return n.forEach(n.keys(s),t=>{if(n.isString(s[t])){let i=s[t];const o=/\{\{(.*?)\}\}/g,u=i.match(o);u&&u.forEach(c=>{const l=c.slice(2,-2),S=n.get(r,l,c);i=i.replace(c,S)}),s[t]=i}}),s};function D(e,r){const s=n.get(e,`${r}_attrs`,{}),t=n.keys(s).join(" ");return n.includes(t,"x-show")&&!n.includes(t,"x-transition")&&(s["x-transition"]=""),s}function U(e,r){const s={};return Object.keys(e).forEach(t=>{if(n.isString(e[t])&&e[t].startsWith(f.STYLES_KEY)){const i=L(e[t],r);s[t]={className:i,...D(e,t)}}}),s}function z(e,r,s){if(n.isEmpty(r))return e;const t=n.cloneDeep(e),i=n.get(s,"i18nProps",[]);return n.forEach(n.keys(t),o=>{i.includes(o)&&!n.isEmpty(r)&&(t[o]=n.get(t,`${o}-${r}`,t[o]))}),t}const W=n.memoize(e=>{const r=w.getRegisteredChaiBlock(e),s=n.get(r,"schema.properties",{});return Object.fromEntries(Object.entries(s).filter(([,t])=>n.get(t,"runtime",!1)))}),Q=(e,r,s)=>n.isEmpty(s)?{}:Object.entries(s).reduce((t,[i,o])=>{const u=[];let c=n.find(e,{_id:r});for(;c;)u.push(c),c=n.find(e,{_id:c._parent});const l=n.find(u,{_type:o.block});return l&&(t[i]=n.get(l,n.get(o,"prop"),null)),t},{}),G=()=>d.jsx("span",{children:"Loading..."});function E({blocks:e,parent:r,classPrefix:s="",externalData:t={},blockModifierCallback:i=null,lang:o="",fallbackLang:u="",metadata:c={}}){const l=e,S=a=>U(a,s),j=r?n.filter(e,{_parent:r}):n.filter(e,a=>n.isEmpty(a._parent));return d.jsx(d.Fragment,{children:p.Children.toArray(j.map((a,B)=>{const y={},P=n.filter(l,{_parent:a._id});y.children=P.length>0?d.jsx(E,{externalData:t,classPrefix:s,parent:a._id,blocks:l,lang:o||u,metadata:c}):null;const g=w.getRegisteredChaiBlock(a._type);if(g!==null){let h=a;const C=g.component;h={...g.defaults,...a},i&&(h=i(h));const x=o===u?"":o,q=Q(l,a._id,W(a._type)),T=n.omit({blockProps:{},inBuilder:!1,...h,index:B,...V(z(a,x,g),t),...S(h),...y,...q,metadata:c,lang:o||u},["_parent"]);if(n.has(g,"dataProvider")){const v=n.get(g,"suspenseFallback",G);return d.jsx(p.Suspense,{fallback:p.createElement(v),children:d.jsx(K,{lang:o||u,metadata:c,dataProvider:g.dataProvider,block:a,component:C,props:T})})}return d.jsx(p.Suspense,{children:p.createElement(C,T)})}return d.jsxs("noscript",{children:[a._type," not found"]})}))})}exports.getChaiThemeCssVariables=m.getChaiThemeCssVariables;exports.getThemeFontsCSSImport=m.getThemeFontsCSSImport;exports.getThemeFontsLinkMarkup=m.getThemeFontsLinkMarkup;exports.RenderChaiBlocks=E;exports.convertToBlocks=Y;exports.getStylesForBlocks=J;
+      @tailwind utilities;`,
+    markupString
+  );
+}
+const getBlocksTailwindCSS = (blocks, themeOptions, includeBaseStyles) => {
+  const blocksString = JSON.stringify(blocks).replace(/#styles:([^"]*)/g, (_match, content) => {
+    return `#styles:${content.replace(/,/g, " ")}`.replace(/#styles:/g, "");
+  });
+  return getTailwindCSS(themeOptions, [blocksString], [], "", includeBaseStyles);
+};
+const getStylesForBlocks = async (blocks, themeOptions = ChaiThemeFn.defaultThemeOptions, includeBaseStyles = false) => {
+  return await getBlocksTailwindCSS(blocks, themeOptions, includeBaseStyles);
+};
+async function AsyncPropsBlock(props) {
+  const dataProps = await (props == null ? void 0 : props.dataProvider(props.block, props.lang, props.metadata));
+  return /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { children: React.createElement(props.component, { ...props.props, ...dataProps }) });
+}
+const generateClassNames = lodashEs.memoize((styles, classPrefix) => {
+  const { baseClasses, classes: classesString } = getSplitClasses.getSplitChaiClasses(styles);
+  const classes = tailwindMerge.twMerge(baseClasses, classesString);
+  if (classPrefix === "") return classes.replace(getSplitClasses.STYLES_KEY, "").trim();
+  return addPrefixToClasses(classes, classPrefix).replace(getSplitClasses.STYLES_KEY, "").trim();
+});
+const applyBinding = (block, pageExternalData) => {
+  const clonedBlock = lodashEs.cloneDeep(block);
+  lodashEs.forEach(lodashEs.keys(clonedBlock), (key) => {
+    if (lodashEs.isString(clonedBlock[key])) {
+      let value = clonedBlock[key];
+      const bindingRegex = /\{\{(.*?)\}\}/g;
+      const matches = value.match(bindingRegex);
+      if (matches) {
+        matches.forEach((match) => {
+          const binding = match.slice(2, -2);
+          const bindingValue = lodashEs.get(pageExternalData, binding, match);
+          value = value.replace(match, bindingValue);
+        });
+      }
+      clonedBlock[key] = value;
+    }
+  });
+  return clonedBlock;
+};
+function getElementAttrs(block, key) {
+  const attrs = lodashEs.get(block, `${key}_attrs`, {});
+  const attrsKeys = lodashEs.keys(attrs).join(" ");
+  if (lodashEs.includes(attrsKeys, "x-show") && !lodashEs.includes(attrsKeys, "x-transition")) {
+    attrs["x-transition"] = "";
+  }
+  return attrs;
+}
+function getStyleAttrs(block, classPrefix) {
+  const styles = {};
+  Object.keys(block).forEach((key) => {
+    if (lodashEs.isString(block[key]) && block[key].startsWith(getSplitClasses.STYLES_KEY)) {
+      const classes = generateClassNames(block[key], classPrefix);
+      styles[key] = {
+        className: classes,
+        ...getElementAttrs(block, key)
+      };
+    }
+  });
+  return styles;
+}
+function applyLanguage(_block, lang, blockDefinition) {
+  if (lodashEs.isEmpty(lang)) return _block;
+  const block = lodashEs.cloneDeep(_block);
+  const i18nProps = lodashEs.get(blockDefinition, "i18nProps", []);
+  lodashEs.forEach(lodashEs.keys(block), (key) => {
+    if (i18nProps.includes(key) && !lodashEs.isEmpty(lang)) {
+      block[key] = lodashEs.get(block, `${key}-${lang}`, block[key]);
+    }
+  });
+  return block;
+}
+const getRuntimeProps = lodashEs.memoize((blockType) => {
+  const chaiBlock = runtime.getRegisteredChaiBlock(blockType);
+  const props = lodashEs.get(chaiBlock, "schema.properties", {});
+  return Object.fromEntries(Object.entries(props).filter(([, value]) => lodashEs.get(value, "runtime", false)));
+});
+const getRuntimePropValues = (allBlocks, blockId, runtimeProps) => {
+  if (lodashEs.isEmpty(runtimeProps)) return {};
+  return Object.entries(runtimeProps).reduce((acc, [key, schema]) => {
+    const hierarchy = [];
+    let block = lodashEs.find(allBlocks, { _id: blockId });
+    while (block) {
+      hierarchy.push(block);
+      block = lodashEs.find(allBlocks, { _id: block._parent });
+    }
+    const matchingBlock = lodashEs.find(hierarchy, { _type: schema.block });
+    if (matchingBlock) {
+      acc[key] = lodashEs.get(matchingBlock, lodashEs.get(schema, "prop"), null);
+    }
+    return acc;
+  }, {});
+};
+const SuspenseFallback = () => /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Loading..." });
+function RenderChaiBlocks({
+  blocks,
+  parent,
+  classPrefix = "",
+  externalData = {},
+  blockModifierCallback = null,
+  lang = "",
+  fallbackLang = "",
+  metadata = {}
+}) {
+  const allBlocks = blocks;
+  const getStyles = (block) => getStyleAttrs(block, classPrefix);
+  const filteredBlocks = parent ? lodashEs.filter(blocks, { _parent: parent }) : lodashEs.filter(blocks, (block) => lodashEs.isEmpty(block._parent));
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: React.Children.toArray(
+    filteredBlocks.map((block, index) => {
+      const attrs = {};
+      const blocks2 = lodashEs.filter(allBlocks, { _parent: block._id });
+      attrs.children = blocks2.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+        RenderChaiBlocks,
+        {
+          externalData,
+          classPrefix,
+          parent: block._id,
+          blocks: allBlocks,
+          lang: lang || fallbackLang,
+          metadata
+        }
+      ) : null;
+      const blockDefinition = runtime.getRegisteredChaiBlock(block._type);
+      if (blockDefinition !== null) {
+        let syncedBlock = block;
+        const Component = blockDefinition.component;
+        syncedBlock = { ...blockDefinition.defaults, ...block };
+        if (blockModifierCallback) {
+          syncedBlock = blockModifierCallback(syncedBlock);
+        }
+        const langToUse = lang === fallbackLang ? "" : lang;
+        const runtimeProps = getRuntimePropValues(allBlocks, block._id, getRuntimeProps(block._type));
+        const props = lodashEs.omit(
+          {
+            blockProps: {},
+            inBuilder: false,
+            ...syncedBlock,
+            index,
+            ...applyBinding(applyLanguage(block, langToUse, blockDefinition), externalData),
+            ...getStyles(syncedBlock),
+            ...attrs,
+            ...runtimeProps,
+            metadata,
+            lang: lang || fallbackLang
+          },
+          ["_parent"]
+        );
+        if (lodashEs.has(blockDefinition, "dataProvider")) {
+          const suspenseFallback = lodashEs.get(
+            blockDefinition,
+            "suspenseFallback",
+            SuspenseFallback
+          );
+          return /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: React.createElement(suspenseFallback), children: /* @__PURE__ */ jsxRuntime.jsx(
+            AsyncPropsBlock,
+            {
+              lang: lang || fallbackLang,
+              metadata,
+              dataProvider: blockDefinition.dataProvider,
+              block,
+              component: Component,
+              props
+            }
+          ) });
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { children: React.createElement(Component, props) });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsxs("noscript", { children: [
+        block._type,
+        " not found"
+      ] });
+    })
+  ) });
+}
+exports.getChaiThemeCssVariables = ChaiThemeFn.getChaiThemeCssVariables;
+exports.getThemeFontsCSSImport = ChaiThemeFn.getThemeFontsCSSImport;
+exports.getThemeFontsLinkMarkup = ChaiThemeFn.getThemeFontsLinkMarkup;
+exports.RenderChaiBlocks = RenderChaiBlocks;
+exports.convertToBlocks = convertToBlocks;
+exports.getStylesForBlocks = getStylesForBlocks;