@chaibuilder/sdk 2.0.0-beta.9 → 2.0.0-beta.90

package/dist/render.cjs

@@ -1,3 +1,248 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("lodash-es"),a=require("./STRINGS-Yl7cSWDc.cjs"),d=require("./jsx-runtime-JYMCiFoE.cjs"),y=require("react"),x=require("tailwind-merge"),T=require("@chaibuilder/runtime"),B=require("@mhsdesign/jit-browser-tailwindcss"),C=require("@tailwindcss/forms"),q=require("@tailwindcss/typography"),R=require("@tailwindcss/aspect-ratio"),j=require("./plugin-Dm5EFGnP.cjs");require("./plugin-KIpT3NWi.cjs");const Y=(t,n="")=>{const s=t.replace(a.STYLES_KEY,"").split(",").map(i=>i.split(" ").map(l=>{if(l==="")return"";if(l.includes(":")){const u=l.split(":");return u[u.length-1]=n+r.last(u),u.join(":")}return`${n}${l}`}).join(" "));return r.flattenDeep(s).join(" ")},O=t=>{if(!t)return[];try{return JSON.parse(A(t)).filter(e=>!e._type.startsWith("@chai"))}catch{return[{_type:"Paragraph",_id:"error",content:"Invalid JSON. Please check the JSON string."}]}};function A(t){const n=/(asset:\/\/|https:\/\/asset\.localhost\/)(?:localhost\/)?[^"']+/g;return t.replace(n,e=>{const s=decodeURIComponent(e),i=s.indexOf("public");return i!==-1?s.substring(i+6):s})}const K=t=>{const n={};return Object.keys(t).forEach(e=>{r.isString(t[e])&&t[e].startsWith(a.SLOT_KEY)&&(n[e]=t[e].replace(a.SLOT_KEY,"").split(","))}),n},L=r.memoize((t,n)=>{const e=t.replace(a.STYLES_KEY,"").split(","),s=x.twMerge(e[0],e[1]);return n===""?s.replace(a.STYLES_KEY,"").trim():Y(s,n).replace(a.STYLES_KEY,"").trim()});function N(t,n){const e=r.get(t,`${n}_attrs`,{});r.has(e,"data-ai-key")&&delete e["data-ai-key"];const s=r.keys(e).join(" ");return r.includes(s,"x-show")&&!r.includes(s,"x-transition")&&(e["x-transition"]=""),e}function $(t,n){const e={};return Object.keys(t).forEach(s=>{if(r.isString(t[s])&&t[s].startsWith(a.STYLES_KEY)){const i=L(t[s],n);e[s]={className:i,...N(t,s)}}}),e}function P(t,n){const e=r.get(t,"_bindings",{});return r.isEmpty(e)?{...t}:(r.each(e,(s,i)=>{r.isString(s)&&r.get(n,s,null)&&(t[i]=r.get(n,s,null))}),t)}function v(t,n,e){if(r.isEmpty(n))return t;const s=r.cloneDeep(t);return r.forEach(r.keys(s),i=>{r.get(e,["props",i,"i18n"])&&!r.isEmpty(n)&&(s[i]=r.get(s,`${i}-${n}`,s[i]))}),s}function E({blocks:t,parent:n,classPrefix:e="",externalData:s={},blockModifierCallback:i,lang:p}){const g=t,l=o=>$(o,e),u=n?r.filter(t,{_parent:n}):r.filter(t,o=>r.isEmpty(o._parent));return d.jsxRuntimeExports.jsx(d.jsxRuntimeExports.Fragment,{children:y.Children.toArray(u.map((o,_)=>{const m=K(o),h={};r.isEmpty(m)||Object.keys(m).forEach(c=>{h[c]=y.Children.toArray(m[c].map(S=>d.jsxRuntimeExports.jsx(E,{externalData:s,classPrefix:e,blocks:g,parent:S,lang:p})))});const w=r.filter(g,{_parent:o._id});h.children=w.length>0?d.jsxRuntimeExports.jsx(E,{externalData:s,classPrefix:e,parent:o._id,blocks:g,lang:p}):null;const f=T.getBlockComponent(o._type);if(f!==null){let c=o;const S=f.component;return c={...f.defaults,...o},i&&(c=i(c)),y.createElement(S,r.omit({blockProps:{},inBuilder:!1,...c,index:_,...P(v(o,p,f),s),...l(c),...h},["_parent"]))}return d.jsxRuntimeExports.jsxs("noscript",{children:[o._type," not found"]})}))})}async function I(t,n,e=[],s="",i=!1){return await B.createTailwindcss({tailwindConfig:{darkMode:"class",safelist:e,theme:{extend:j.getChaiBuilderTheme(t)},plugins:[C,q,R,j.chaiBuilderPlugin],corePlugins:{preflight:i},...s?{prefix:`${s}`}:{}}}).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;`,n)}const J=(t,n,e=!1)=>I(n,[r.replace(JSON.stringify(t),/#styles:,?/g,"")],[],"",e),F=async(t,n={},e=!0)=>await J(t,n,e);exports.RenderChaiBlocks=E;exports.convertToBlocks=O;exports.getStylesForBlocks=F;
+      @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;

package/dist/render.d.ts

@@ -1,40 +1,65 @@
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 
-declare type ChaiBlock = {
+declare type BorderRadiusValue = false | string;
+
+declare type ChaiBlock<T = Record<string, any>> = {
     _id: string;
-    _type: string;
     _name?: string;
     _parent?: string | null | undefined;
     _bindings?: Record<string, string>;
-} & Record<string, any>;
-
-declare type ChaiBuilderTailwindTheme<T extends Record<string, unknown> = Record<string, unknown>> = {
-    primaryColor: string;
-    secondaryColor: string;
-    headingFont: string;
-    bodyFont: string;
-    roundedCorners: string;
-    bodyBgLightColor: string;
-    bodyBgDarkColor: string;
-    bodyTextLightColor: string;
-    bodyTextDarkColor: string;
+    _type: string;
 } & T;
 
+declare type ChaiBuilderThemeOptions = {
+    fontFamily: false | Record<VariableKey, string>;
+    borderRadius: BorderRadiusValue;
+    colors: false | {
+        group: string;
+        items: Record<VariableKey, [HSLColor, HSLColor]>;
+    }[];
+};
+
+declare type ChaiBuilderThemeValues = {
+    fontFamily: Record<string, string>;
+    borderRadius: string;
+    colors: Record<string, string[]>;
+};
+
 /**
  * This function converts the chai format content to chai blocks
  * @param chaiFormatContent
  */
 export declare const convertToBlocks: (chaiFormatContent: string) => ChaiBlock[];
 
-export declare const getStylesForBlocks: (blocks: ChaiBlock[], theme?: ChaiBuilderTailwindTheme | Record<string, string>, includeBaseStyles?: boolean) => Promise<string>;
+export declare const getChaiThemeCssVariables: (chaiTheme: Partial<ChaiBuilderThemeValues>) => string;
 
-export declare function RenderChaiBlocks({ blocks, parent, classPrefix, externalData, blockModifierCallback, lang, }: {
+export declare const getStylesForBlocks: (blocks: ChaiBlock[], themeOptions?: ChaiBuilderThemeOptions, includeBaseStyles?: boolean) => Promise<string>;
+
+export declare const getThemeFontsCSSImport: (chaiTheme: {
+    fontFamily: Record<string, string>;
+}) => any;
+
+export declare const getThemeFontsLinkMarkup: (chaiTheme: Pick<Partial<ChaiBuilderThemeValues>, "fontFamily">) => any;
+
+declare type HSLColor = string;
+
+export declare function RenderChaiBlocks({ blocks, parent, classPrefix, externalData, blockModifierCallback, lang, fallbackLang, metadata, }: {
     blocks: ChaiBlock[];
     parent?: string;
     classPrefix?: string;
     externalData?: Record<string, any>;
     blockModifierCallback?: (block: ChaiBlock) => ChaiBlock;
     lang?: string;
+    fallbackLang?: string;
+    metadata?: Record<string, any>;
 }): JSX_2.Element;
 
+declare type VariableKey = string;
+
 export { }
+
+declare global {
+    interface Window {
+        clarity: any;
+    }
+}