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

package/dist/render.js

@@ -1,194 +1,249 @@
-import { d as U } from "./ChaiThemeFn-Cort9tch.js";
-import { a as Rt, b as $t, c as Ft } from "./ChaiThemeFn-Cort9tch.js";
-import { last as V, flattenDeep as k, memoize as j, get as u, filter as h, isEmpty as f, omit as D, has as K, cloneDeep as x, forEach as O, keys as w, isString as v, find as S, includes as E } from "lodash-es";
-import { g as b, S as y } from "./getSplitClasses-DphwgQiE.js";
-import { createTailwindcss as M } from "@mhsdesign/jit-browser-tailwindcss";
-import W from "@tailwindcss/aspect-ratio";
-import Y from "@tailwindcss/container-queries";
-import z from "@tailwindcss/forms";
-import L from "@tailwindcss/typography";
-import { g as Q, c as q } from "./plugin-kUMxtQR5.js";
-import { jsx as d, Fragment as G, jsxs as H } from "react/jsx-runtime";
-import { getRegisteredChaiBlock as R } from "@chaibuilder/runtime";
-import _, { Suspense as C, createElement as X } from "react";
-import { twMerge as Z } from "tailwind-merge";
-const tt = (t, s = "") => {
-  const { classes: n } = b(t), e = n.split(" ").map((r) => r.split(" ").map((o) => {
-    if (o === "") return "";
-    if (o.includes(":")) {
-      const a = o.split(":");
-      return a[a.length - 1] = s + V(a), a.join(":");
-    }
-    return `${s}${o}`;
-  }).join(" "));
-  return k(e).join(" ");
-}, xt = (t) => {
-  if (!t) return [];
+import { d as defaultThemeOptions } from "./ChaiThemeFn-DzirXKjI.js";
+import { a, b, c } from "./ChaiThemeFn-DzirXKjI.js";
+import { last, flattenDeep, memoize, get, filter, isEmpty, omit, has, cloneDeep, forEach, keys, isString, find, includes } from "lodash-es";
+import { g as getSplitChaiClasses, S as STYLES_KEY } from "./getSplitClasses-BuALfSLX.js";
+import { createTailwindcss } from "@mhsdesign/jit-browser-tailwindcss";
+import aspectRatio from "@tailwindcss/aspect-ratio";
+import containerQueries from "@tailwindcss/container-queries";
+import forms from "@tailwindcss/forms";
+import typography from "@tailwindcss/typography";
+import { g as getChaiBuilderTheme, c as chaiBuilderPlugin } from "./plugin-DGEKY3uC.js";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { getRegisteredChaiBlock } from "@chaibuilder/runtime";
+import React__default, { Suspense, createElement } from "react";
+import { twMerge } from "tailwind-merge";
+const addPrefixToClasses = (classes, prefix = "") => {
+  const { classes: classesString } = 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 + last(values);
+        return values.join(":");
+      }
+      return `${prefix}${item2}`;
+    });
+    return newClasses.join(" ");
+  });
+  return flattenDeep(array).join(" ");
+};
+const convertToBlocks = (chaiFormatContent) => {
+  if (!chaiFormatContent) return [];
   try {
-    return JSON.parse(et(t)).filter((n) => !n._type.startsWith("@chai"));
-  } catch {
+    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 et(t) {
-  const s = /(asset:\/\/|https:\/\/asset\.localhost\/)(?:localhost\/)?[^"']+/g;
-  return t.replace(s, (n) => {
-    const e = decodeURIComponent(n), r = e.indexOf("public");
-    return r !== -1 ? e.substring(r + 6) : e;
+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 nt(t, s, n = [], e = "", r) {
-  return await M({
+async function getTailwindCSS(themeOptions, markupString, safelist = [], prefix = "", includeBaseStyles) {
+  const tailwind = createTailwindcss({
     tailwindConfig: {
       darkMode: "class",
-      safelist: n,
-      theme: { extend: Q(t) },
-      plugins: [z, L, W, Y, q],
-      corePlugins: { preflight: r },
-      ...e ? { prefix: `${e}` } : {}
+      safelist,
+      theme: { extend: getChaiBuilderTheme(themeOptions) },
+      plugins: [forms, typography, aspectRatio, containerQueries, chaiBuilderPlugin],
+      corePlugins: { preflight: includeBaseStyles },
+      ...prefix ? { prefix: `${prefix}` } : {}
     }
-  }).generateStylesFromContent(
-    ` ${r ? "@tailwind base;" : ""}
+  });
+  return await tailwind.generateStylesFromContent(
+    ` ${includeBaseStyles ? "@tailwind base;" : ""}
       @tailwind components;
       @tailwind utilities;`,
-    s
+    markupString
   );
 }
-const st = (t, s, n) => {
-  const e = JSON.stringify(t).replace(/#styles:([^"]*)/g, (r, i) => `#styles:${i.replace(/,/g, " ")}`.replace(/#styles:/g, ""));
-  return nt(s, [e], [], "", n);
-}, Ot = async (t, s = U, n = !1) => await st(t, s, n);
-async function rt(t) {
-  const s = await (t == null ? void 0 : t.dataProvider(t.block, t.lang, t.metadata));
-  return /* @__PURE__ */ d(C, { children: _.createElement(t.component, { ...t.props, ...s }) });
+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 = 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__ */ jsx(Suspense, { children: React__default.createElement(props.component, { ...props.props, ...dataProps }) });
 }
-const it = j((t, s) => {
-  const { baseClasses: n, classes: e } = b(t), r = Z(n, e);
-  return s === "" ? r.replace(y, "").trim() : tt(r, s).replace(y, "").trim();
-}), ot = (t, s) => {
-  const n = x(t);
-  return O(w(n), (e) => {
-    if (v(n[e])) {
-      let r = n[e];
-      const i = /\{\{(.*?)\}\}/g, l = r.match(i);
-      l && l.forEach((o) => {
-        const a = o.slice(2, -2), g = u(s, a, o);
-        r = r.replace(o, g);
-      }), n[e] = r;
+const generateClassNames = memoize((styles, classPrefix) => {
+  const { baseClasses, classes: classesString } = getSplitChaiClasses(styles);
+  const classes = twMerge(baseClasses, classesString);
+  if (classPrefix === "") return classes.replace(STYLES_KEY, "").trim();
+  return addPrefixToClasses(classes, classPrefix).replace(STYLES_KEY, "").trim();
+});
+const applyBinding = (block, pageExternalData) => {
+  const clonedBlock = cloneDeep(block);
+  forEach(keys(clonedBlock), (key) => {
+    if (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 = get(pageExternalData, binding, match);
+          value = value.replace(match, bindingValue);
+        });
+      }
+      clonedBlock[key] = value;
     }
-  }), n;
+  });
+  return clonedBlock;
 };
-function ct(t, s) {
-  const n = u(t, `${s}_attrs`, {}), e = w(n).join(" ");
-  return E(e, "x-show") && !E(e, "x-transition") && (n["x-transition"] = ""), n;
+function getElementAttrs(block, key) {
+  const attrs = get(block, `${key}_attrs`, {});
+  const attrsKeys = keys(attrs).join(" ");
+  if (includes(attrsKeys, "x-show") && !includes(attrsKeys, "x-transition")) {
+    attrs["x-transition"] = "";
+  }
+  return attrs;
 }
-function at(t, s) {
-  const n = {};
-  return Object.keys(t).forEach((e) => {
-    if (v(t[e]) && t[e].startsWith(y)) {
-      const r = it(t[e], s);
-      n[e] = {
-        className: r,
-        ...ct(t, e)
+function getStyleAttrs(block, classPrefix) {
+  const styles = {};
+  Object.keys(block).forEach((key) => {
+    if (isString(block[key]) && block[key].startsWith(STYLES_KEY)) {
+      const classes = generateClassNames(block[key], classPrefix);
+      styles[key] = {
+        className: classes,
+        ...getElementAttrs(block, key)
       };
     }
-  }), n;
+  });
+  return styles;
 }
-function lt(t, s, n) {
-  if (f(s)) return t;
-  const e = x(t), r = u(n, "i18nProps", []);
-  return O(w(e), (i) => {
-    r.includes(i) && !f(s) && (e[i] = u(e, `${i}-${s}`, e[i]));
-  }), e;
+function applyLanguage(_block, lang, blockDefinition) {
+  if (isEmpty(lang)) return _block;
+  const block = cloneDeep(_block);
+  const i18nProps = get(blockDefinition, "i18nProps", []);
+  forEach(keys(block), (key) => {
+    if (i18nProps.includes(key) && !isEmpty(lang)) {
+      block[key] = get(block, `${key}-${lang}`, block[key]);
+    }
+  });
+  return block;
 }
-const ut = j((t) => {
-  const s = R(t), n = u(s, "schema.properties", {});
-  return Object.fromEntries(Object.entries(n).filter(([, e]) => u(e, "runtime", !1)));
-}), pt = (t, s, n) => f(n) ? {} : Object.entries(n).reduce((e, [r, i]) => {
-  const l = [];
-  let o = S(t, { _id: s });
-  for (; o; )
-    l.push(o), o = S(t, { _id: o._parent });
-  const a = S(l, { _type: i.block });
-  return a && (e[r] = u(a, u(i, "prop"), null)), e;
-}, {}), dt = () => /* @__PURE__ */ d("span", { children: "Loading..." });
-function mt({
-  blocks: t,
-  parent: s,
-  classPrefix: n = "",
-  externalData: e = {},
-  blockModifierCallback: r = null,
-  lang: i = "",
-  fallbackLang: l = "",
-  metadata: o = {}
+const getRuntimeProps = memoize((blockType) => {
+  const chaiBlock = getRegisteredChaiBlock(blockType);
+  const props = get(chaiBlock, "schema.properties", {});
+  return Object.fromEntries(Object.entries(props).filter(([, value]) => get(value, "runtime", false)));
+});
+const getRuntimePropValues = (allBlocks, blockId, runtimeProps) => {
+  if (isEmpty(runtimeProps)) return {};
+  return Object.entries(runtimeProps).reduce((acc, [key, schema]) => {
+    const hierarchy = [];
+    let block = find(allBlocks, { _id: blockId });
+    while (block) {
+      hierarchy.push(block);
+      block = find(allBlocks, { _id: block._parent });
+    }
+    const matchingBlock = find(hierarchy, { _type: schema.block });
+    if (matchingBlock) {
+      acc[key] = get(matchingBlock, get(schema, "prop"), null);
+    }
+    return acc;
+  }, {});
+};
+const SuspenseFallback = () => /* @__PURE__ */ jsx("span", { children: "Loading..." });
+function RenderChaiBlocks({
+  blocks,
+  parent,
+  classPrefix = "",
+  externalData = {},
+  blockModifierCallback = null,
+  lang = "",
+  fallbackLang = "",
+  metadata = {}
 }) {
-  const a = t, g = (c) => at(c, n), $ = s ? h(t, { _parent: s }) : h(t, (c) => f(c._parent));
-  return /* @__PURE__ */ d(G, { children: _.Children.toArray(
-    $.map((c, F) => {
-      const P = {}, N = h(a, { _parent: c._id });
-      P.children = N.length > 0 ? /* @__PURE__ */ d(
-        mt,
+  const allBlocks = blocks;
+  const getStyles = (block) => getStyleAttrs(block, classPrefix);
+  const filteredBlocks = parent ? filter(blocks, { _parent: parent }) : filter(blocks, (block) => isEmpty(block._parent));
+  return /* @__PURE__ */ jsx(Fragment, { children: React__default.Children.toArray(
+    filteredBlocks.map((block, index) => {
+      const attrs = {};
+      const blocks2 = filter(allBlocks, { _parent: block._id });
+      attrs.children = blocks2.length > 0 ? /* @__PURE__ */ jsx(
+        RenderChaiBlocks,
         {
-          externalData: e,
-          classPrefix: n,
-          parent: c._id,
-          blocks: a,
-          lang: i || l,
-          metadata: o
+          externalData,
+          classPrefix,
+          parent: block._id,
+          blocks: allBlocks,
+          lang: lang || fallbackLang,
+          metadata
         }
       ) : null;
-      const p = R(c._type);
-      if (p !== null) {
-        let m = c;
-        const B = p.component;
-        m = { ...p.defaults, ...c }, r && (m = r(m));
-        const A = i === l ? "" : i, I = pt(a, c._id, ut(c._type)), T = D(
+      const blockDefinition = 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 = omit(
           {
             blockProps: {},
-            inBuilder: !1,
-            ...m,
-            index: F,
-            ...ot(lt(c, A, p), e),
-            ...g(m),
-            ...P,
-            ...I,
-            metadata: o,
-            lang: i || l
+            inBuilder: false,
+            ...syncedBlock,
+            index,
+            ...applyBinding(applyLanguage(block, langToUse, blockDefinition), externalData),
+            ...getStyles(syncedBlock),
+            ...attrs,
+            ...runtimeProps,
+            metadata,
+            lang: lang || fallbackLang
           },
           ["_parent"]
         );
-        if (K(p, "dataProvider")) {
-          const J = u(
-            p,
+        if (has(blockDefinition, "dataProvider")) {
+          const suspenseFallback = get(
+            blockDefinition,
             "suspenseFallback",
-            dt
+            SuspenseFallback
           );
-          return /* @__PURE__ */ d(C, { fallback: X(J), children: /* @__PURE__ */ d(
-            rt,
+          return /* @__PURE__ */ jsx(Suspense, { fallback: createElement(suspenseFallback), children: /* @__PURE__ */ jsx(
+            AsyncPropsBlock,
             {
-              lang: i || l,
-              metadata: o,
-              dataProvider: p.dataProvider,
-              block: c,
-              component: B,
-              props: T
+              lang: lang || fallbackLang,
+              metadata,
+              dataProvider: blockDefinition.dataProvider,
+              block,
+              component: Component,
+              props
             }
           ) });
         }
-        return /* @__PURE__ */ d(C, { children: _.createElement(B, T) });
+        return /* @__PURE__ */ jsx(Suspense, { children: React__default.createElement(Component, props) });
       }
-      return /* @__PURE__ */ H("noscript", { children: [
-        c._type,
+      return /* @__PURE__ */ jsxs("noscript", { children: [
+        block._type,
         " not found"
       ] });
     })
   ) });
 }
 export {
-  mt as RenderChaiBlocks,
-  xt as convertToBlocks,
-  Rt as getChaiThemeCssVariables,
-  Ot as getStylesForBlocks,
-  $t as getThemeFontsCSSImport,
-  Ft as getThemeFontsLinkMarkup
+  RenderChaiBlocks,
+  convertToBlocks,
+  a as getChaiThemeCssVariables,
+  getStylesForBlocks,
+  b as getThemeFontsCSSImport,
+  c as getThemeFontsLinkMarkup
 };

package/dist/runtime.cjs

@@ -1 +1,9 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@chaibuilder/runtime");Object.keys(t).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})});
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const runtime = require("@chaibuilder/runtime");
+Object.keys(runtime).forEach((k) => {
+  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: () => runtime[k]
+  });
+});