@builder.io/sdk-solid 0.1.4 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "",
   "type": "module",
   "main": "./solid-index.jsx",

package/src/components/render-block/render-block.jsx

@@ -48,10 +48,30 @@ function RenderBlock(props) {
         });
   }
 
+  function proxyState() {
+    if (typeof Proxy === "undefined") {
+      console.error(
+        "no Proxy available in this environment, cannot proxy state."
+      );
+      return props.context.state;
+    }
+    const useState = new Proxy(props.context.state, {
+      set: (obj, prop, value) => {
+        // set the value on the state object, so that the event handler instantly gets the update.
+        obj[prop] = value;
+
+        // set the value in the context, so that the rest of the app gets the update.
+        props.context.setState?.(obj);
+        return true;
+      },
+    });
+    return useState;
+  }
+
   function actions() {
     return getBlockActions({
       block: useBlock(),
-      state: props.context.state,
+      state: proxyState(),
       context: props.context.context,
     });
   }
@@ -126,6 +146,7 @@ function RenderBlock(props) {
       state: props.context.state,
       content: props.context.content,
       context: props.context.context,
+      setState: props.context.setState,
       registeredComponents: props.context.registeredComponents,
       inheritedStyles: getInheritedTextStyles(),
     };

package/src/components/render-block/render-repeated-block.jsx

@@ -7,6 +7,7 @@ function RenderRepeatedBlock(props) {
       value={{
         content: props.repeatContext.content,
         state: props.repeatContext.state,
+        setState: props.repeatContext.setState,
         context: props.repeatContext.context,
         apiKey: props.repeatContext.apiKey,
         registeredComponents: props.repeatContext.registeredComponents,

package/src/components/render-content/components/render-styles.helpers.js

@@ -0,0 +1,57 @@
+const getCssFromFont = (font) => {
+  var _a, _b;
+  const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
+  const name = family.split(",")[0];
+  const url = (_b = font.fileUrl) != null ? _b : (_a = font == null ? void 0 : font.files) == null ? void 0 : _a.regular;
+  let str = "";
+  if (url && family && name) {
+    str += `
+@font-face {
+font-family: "${family}";
+src: local("${name}"), url('${url}') format('woff2');
+font-display: fallback;
+font-weight: 400;
+}
+      `.trim();
+  }
+  if (font.files) {
+    for (const weight in font.files) {
+      const isNumber = String(Number(weight)) === weight;
+      if (!isNumber) {
+        continue;
+      }
+      const weightUrl = font.files[weight];
+      if (weightUrl && weightUrl !== url) {
+        str += `
+@font-face {
+font-family: "${family}";
+src: url('${weightUrl}') format('woff2');
+font-display: fallback;
+font-weight: ${weight};
+}
+        `.trim();
+      }
+    }
+  }
+  return str;
+};
+const getFontCss = ({ customFonts }) => {
+  var _a;
+  return ((_a = customFonts == null ? void 0 : customFonts.map((font) => getCssFromFont(font))) == null ? void 0 : _a.join(" ")) || "";
+};
+const getCss = ({
+  cssCode,
+  contentId
+}) => {
+  if (!cssCode) {
+    return "";
+  }
+  if (!contentId) {
+    return cssCode;
+  }
+  return (cssCode == null ? void 0 : cssCode.replace(/&/g, `div[builder-content-id="${contentId}"]`)) || "";
+};
+export {
+  getCss,
+  getFontCss
+};

package/src/components/render-content/components/render-styles.jsx

@@ -1,67 +1,19 @@
 import { createSignal } from "solid-js";
 
 import RenderInlinedStyles from "../../render-inlined-styles.jsx";
+import { getCss } from "./render-styles.helpers";
+import { getFontCss } from "./render-styles.helpers";
 
 function RenderContentStyles(props) {
-  function getCssFromFont(font) {
-    // TODO: compute what font sizes are used and only load those.......
-    const family =
-      font.family +
-      (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
-    const name = family.split(",")[0];
-    const url = font.fileUrl ?? font?.files?.regular;
-    let str = "";
-    if (url && family && name) {
-      str += `
-@font-face {
-  font-family: "${family}";
-  src: local("${name}"), url('${url}') format('woff2');
-  font-display: fallback;
-  font-weight: 400;
-}
-        `.trim();
-    }
-    if (font.files) {
-      for (const weight in font.files) {
-        const isNumber = String(Number(weight)) === weight;
-        if (!isNumber) {
-          continue;
-        }
-        // TODO: maybe limit number loaded
-        const weightUrl = font.files[weight];
-        if (weightUrl && weightUrl !== url) {
-          str += `
-@font-face {
-  font-family: "${family}";
-  src: url('${weightUrl}') format('woff2');
-  font-display: fallback;
-  font-weight: ${weight};
-}
-          `.trim();
-        }
-      }
-    }
-    return str;
-  }
-
-  function getFontCss({ customFonts }) {
-    // TODO: flag for this
-    // if (!this.builder.allowCustomFonts) {
-    //   return '';
-    // }
-    // TODO: separate internal data from external
-    return (
-      customFonts?.map((font) => this.getCssFromFont(font))?.join(" ") || ""
-    );
-  }
-
-  function injectedStyles() {
-    return `
-${props.cssCode || ""}
+  const [injectedStyles, setInjectedStyles] = createSignal(`
+${getCss({
+  cssCode: props.cssCode,
+  contentId: props.contentId,
+})}
 ${getFontCss({
   customFonts: props.customFonts,
-})}`;
-  }
+})}
+`);
 
   return <RenderInlinedStyles styles={injectedStyles()}></RenderInlinedStyles>;
 }

package/src/components/render-content/render-content.helpers.js

@@ -0,0 +1,48 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const getContextStateInitialValue = ({
+  content,
+  data,
+  locale
+}) => {
+  var _a, _b, _c;
+  const defaultValues = {};
+  (_b = (_a = content == null ? void 0 : content.data) == null ? void 0 : _a.inputs) == null ? void 0 : _b.forEach((input) => {
+    var _a2;
+    if (input.name && input.defaultValue !== void 0 && ((_a2 = content == null ? void 0 : content.data) == null ? void 0 : _a2.state) && content.data.state[input.name] === void 0) {
+      defaultValues[input.name] = input.defaultValue;
+    }
+  });
+  const stateToUse = __spreadValues(__spreadValues(__spreadValues({}, (_c = content == null ? void 0 : content.data) == null ? void 0 : _c.state), data), locale ? { locale } : {});
+  return __spreadValues(__spreadValues({}, defaultValues), stateToUse);
+};
+const getContentInitialValue = ({
+  content,
+  data
+}) => {
+  return !content ? void 0 : __spreadProps(__spreadValues({}, content), {
+    data: __spreadValues(__spreadValues({}, content == null ? void 0 : content.data), data),
+    meta: content == null ? void 0 : content.meta
+  });
+};
+export {
+  getContentInitialValue,
+  getContextStateInitialValue
+};

package/src/components/render-content/render-content.jsx

@@ -24,6 +24,10 @@ import {
 } from "../../scripts/init-editing.js";
 import { checkIsDefined } from "../../helpers/nullable.js";
 import { getInteractionPropertiesForEvent } from "../../functions/track/interaction.js";
+import {
+  getContentInitialValue,
+  getContextStateInitialValue,
+} from "./render-content.helpers.js";
 
 function RenderContent(props) {
   const [forceReRenderCount, setForceReRenderCount] = createSignal(0);
@@ -32,15 +36,17 @@ function RenderContent(props) {
 
   const [update, setUpdate] = createSignal(0);
 
-  const [useBreakpoints, setUseBreakpoints] = createSignal(null);
-
   const [canTrackToUse, setCanTrackToUse] = createSignal(
     checkIsDefined(props.canTrack) ? props.canTrack : true
   );
 
-  const [overrideState, setOverrideState] = createSignal({});
-
-  const [contextContext, setContextContext] = createSignal(props.context || {});
+  const [contentState, setContentState] = createSignal(
+    getContextStateInitialValue({
+      content: props.content,
+      data: props.data,
+      locale: props.locale,
+    })
+  );
 
   const [allRegisteredComponents, setAllRegisteredComponents] = createSignal(
     [
@@ -65,17 +71,35 @@ function RenderContent(props) {
 
   const [clicked, setClicked] = createSignal(false);
 
-  function contentState() {
-    return {
-      ...props.content?.data?.state,
-      ...props.data,
-      ...(props.locale
-        ? {
-            locale: props.locale,
-          }
-        : {}),
-      ...overrideState(),
-    };
+  function mergeNewContent(newContent) {
+    setUseContent({
+      ...useContent,
+      ...newContent,
+      data: {
+        ...useContent?.data,
+        ...newContent?.data,
+      },
+      meta: {
+        ...useContent?.meta,
+        ...newContent?.meta,
+        breakpoints:
+          newContent?.meta?.breakpoints || useContent?.meta?.breakpoints,
+      },
+    });
+  }
+
+  function setBreakpoints(breakpoints) {
+    setUseContent({
+      ...useContent,
+      meta: {
+        ...useContent?.meta,
+        breakpoints,
+      },
+    });
+  }
+
+  function setContextState(newState) {
+    setContentState(newState);
   }
 
   function processMessage(event) {
@@ -88,7 +112,9 @@ function RenderContent(props) {
           if (!contentId || contentId !== useContent?.id) {
             return;
           }
-          setUseBreakpoints(breakpoints);
+          if (breakpoints) {
+            setBreakpoints(breakpoints);
+          }
           setForceReRenderCount(forceReRenderCount() + 1); // This is a hack to force Qwik to re-render.
           break;
         }
@@ -101,7 +127,7 @@ function RenderContent(props) {
             messageContent.modelName;
           const contentData = messageContent.data;
           if (key === props.model) {
-            setOverrideContent(contentData);
+            mergeNewContent(contentData);
             setForceReRenderCount(forceReRenderCount() + 1); // This is a hack to force Qwik to re-render.
           }
 
@@ -121,7 +147,7 @@ function RenderContent(props) {
     if (jsCode) {
       evaluate({
         code: jsCode,
-        context: contextContext(),
+        context: props.context || {},
         state: contentState(),
       });
     }
@@ -150,7 +176,7 @@ function RenderContent(props) {
     return expression.replace(/{{([^}]+)}}/g, (_match, group) =>
       evaluate({
         code: group,
-        context: contextContext(),
+        context: props.context || {},
         state: contentState(),
       })
     );
@@ -160,11 +186,11 @@ function RenderContent(props) {
     fetch(url)
       .then((response) => response.json())
       .then((json) => {
-        const newOverrideState = {
-          ...overrideState(),
+        const newState = {
+          ...contentState(),
           [key]: json,
         };
-        setOverrideState(newOverrideState);
+        setContextState(newState);
       })
       .catch((err) => {
         console.log("error fetching dynamic data", url, err);
@@ -205,35 +231,11 @@ function RenderContent(props) {
         TARGET !== "reactNative"
     );
   }
-
-  const updateUseContent = function useContent() {
-    if (!props.content && !overrideContent()) {
-      return undefined;
-    }
-    return {
-      ...props.content,
-      ...overrideContent(),
-      data: {
-        ...props.content?.data,
-        ...props.data,
-        ...overrideContent()?.data,
-      },
-      meta: {
-        ...props.content?.meta,
-        ...overrideContent()?.meta,
-        breakpoints:
-          useBreakpoints() ||
-          overrideContent()?.meta?.breakpoints ||
-          props.content?.meta?.breakpoints,
-      },
-    };
-  };
-  const [useContent, setUseContent] = createStore(updateUseContent());
-  createEffect(
-    on(
-      () => [overrideContent(), useBreakpoints(), props.content, props.data],
-      () => setUseContent(reconcile(updateUseContent()))
-    )
+  const [useContent, setUseContent] = createStore(
+    getContentInitialValue({
+      content: props.content,
+      data: props.data,
+    })
   );
 
   let elementRef;
@@ -311,7 +313,7 @@ function RenderContent(props) {
             apiKey: props.apiKey,
           }).then((content) => {
             if (content) {
-              setOverrideContent(content);
+              mergeNewContent(content);
             }
           });
         }
@@ -344,7 +346,8 @@ function RenderContent(props) {
       value={{
         content: useContent,
         state: contentState(),
-        context: contextContext(),
+        setState: setContextState,
+        context: props.context || {},
         apiKey: props.apiKey,
         registeredComponents: allRegisteredComponents(),
       }}
@@ -358,6 +361,7 @@ function RenderContent(props) {
         >
           <Show when={shouldRenderContentStyles()}>
             <RenderContentStyles
+              contentId={useContent?.id}
               cssCode={useContent?.data?.cssCode}
               customFonts={useContent?.data?.customFonts}
             ></RenderContentStyles>

package/src/constants/builder-registered-components.js

@@ -37,17 +37,17 @@ import { componentInfo as imgComponentInfo } from "../blocks/img/component-info.
 import { default as customCode } from "../blocks/custom-code/custom-code";
 import { componentInfo as customCodeInfo } from "../blocks/custom-code/component-info.js";
 const getDefaultRegisteredComponents = () => [
+  __spreadValues({ component: Button }, buttonComponentInfo),
   __spreadValues({ component: Columns }, columnsComponentInfo),
+  __spreadValues({ component: customCode }, customCodeInfo),
+  __spreadValues({ component: embed }, embedComponentInfo),
+  __spreadValues({ component: Fragment }, fragmentComponentInfo),
   __spreadValues({ component: Image }, imageComponentInfo),
   __spreadValues({ component: Img }, imgComponentInfo),
-  __spreadValues({ component: Text }, textComponentInfo),
-  __spreadValues({ component: Video }, videoComponentInfo),
-  __spreadValues({ component: Symbol }, symbolComponentInfo),
-  __spreadValues({ component: Button }, buttonComponentInfo),
   __spreadValues({ component: Section }, sectionComponentInfo),
-  __spreadValues({ component: Fragment }, fragmentComponentInfo),
-  __spreadValues({ component: embed }, embedComponentInfo),
-  __spreadValues({ component: customCode }, customCodeInfo)
+  __spreadValues({ component: Symbol }, symbolComponentInfo),
+  __spreadValues({ component: Text }, textComponentInfo),
+  __spreadValues({ component: Video }, videoComponentInfo)
 ];
 export {
   getDefaultRegisteredComponents

package/src/context/builder.context.js

@@ -3,6 +3,8 @@ var stdin_default = createContext({
   content: null,
   context: {},
   state: {},
+  setState() {
+  },
   apiKey: null,
   registeredComponents: {},
   inheritedStyles: {}

package/src/index-helpers/blocks-exports.js

@@ -1,22 +1,22 @@
-import { default as default2 } from "../blocks/columns/columns";
-import { default as default3 } from "../blocks/image/image";
-import { default as default4 } from "../blocks/text/text";
-import { default as default5 } from "../blocks/video/video";
-import { default as default6 } from "../blocks/symbol/symbol";
-import { default as default7 } from "../blocks/button/button";
+import { default as default2 } from "../blocks/button/button";
+import { default as default3 } from "../blocks/columns/columns";
+import { default as default4 } from "../blocks/fragment/fragment";
+import { default as default5 } from "../blocks/image/image";
+import { default as default6 } from "../components/render-blocks";
+import { default as default7 } from "../components/render-content/render-content";
 import { default as default8 } from "../blocks/section/section";
-import { default as default9 } from "../blocks/fragment/fragment";
-import { default as default10 } from "../components/render-content/render-content";
-import { default as default11 } from "../components/render-blocks";
+import { default as default9 } from "../blocks/symbol/symbol";
+import { default as default10 } from "../blocks/text/text";
+import { default as default11 } from "../blocks/video/video";
 export {
-  default7 as Button,
-  default2 as Columns,
-  default9 as Fragment,
-  default3 as Image,
-  default11 as RenderBlocks,
-  default10 as RenderContent,
+  default2 as Button,
+  default3 as Columns,
+  default4 as Fragment,
+  default5 as Image,
+  default6 as RenderBlocks,
+  default7 as RenderContent,
   default8 as Section,
-  default6 as Symbol,
-  default4 as Text,
-  default5 as Video
+  default9 as Symbol,
+  default10 as Text,
+  default11 as Video
 };