@builder.io/sdk-solid 0.0.7 → 0.0.8-10

package/src/components/render-content/render-content.lite.tsx

@@ -2,22 +2,27 @@ import { useContext, Show, onMount } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { createMutable } from "solid-js/store";
 
-import { isBrowser } from "../../functions/is-browser";
+import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
+import { TARGET } from "../../constants/target.js";
 import BuilderContext from "../../context/builder.context";
-import { track } from "../../functions/track";
-import { isEditing } from "../../functions/is-editing";
-import { isPreviewing } from "../../functions/is-previewing";
-import { previewingModelName } from "../../functions/previewing-model-name";
-import { getContent } from "../../functions/get-content";
+import { evaluate } from "../../functions/evaluate.js";
 import {
   convertSearchParamsToQueryObject,
   getBuilderSearchParams,
-} from "../../functions/get-builder-search-params";
+} from "../../functions/get-builder-search-params/index.js";
+import { getContent } from "../../functions/get-content/index.js";
+import { getFetch } from "../../functions/get-fetch.js";
+import { isBrowser } from "../../functions/is-browser.js";
+import { isEditing } from "../../functions/is-editing.js";
+import { isPreviewing } from "../../functions/is-previewing.js";
+import { previewingModelName } from "../../functions/previewing-model-name.js";
+import {
+  components,
+  createRegisterComponentMessage,
+} from "../../functions/register-component.js";
+import { track } from "../../functions/track.js";
 import RenderBlocks from "../render-blocks.lite";
-import { evaluate } from "../../functions/evaluate";
-import { getFetch } from "../../functions/get-fetch";
-import { TARGET } from "../../constants/target";
-import RenderStyles from "./components/render-styles.lite";
+import RenderContentStyles from "./components/render-styles.lite";
 
 function RenderContent(props) {
   const state = createMutable({
@@ -36,7 +41,7 @@ function RenderContent(props) {
     overrideContent: null,
     update: 0,
     overrideState: {},
-    get state() {
+    get contentState() {
       return {
         ...props.content?.data?.state,
         ...props.data,
@@ -44,9 +49,23 @@ function RenderContent(props) {
       };
     },
     get context() {
-      return {} as {
-        [index: string]: any;
-      };
+      return {} as Dictionary<any>;
+    },
+    get allRegisteredComponents() {
+      const allComponentsArray = [
+        ...getDefaultRegisteredComponents(), // While this `components` object is deprecated, we must maintain support for it.
+        // Since users are able to override our default components, we need to make sure that we do not break such
+        // existing usage.
+        // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
+        // which is the new standard way of providing custom components, and must therefore take precedence.
+        ...components,
+        ...(props.customComponents || []),
+      ];
+      const allComponents = allComponentsArray.reduce(
+        (acc, curr) => ({ ...acc, [curr.name]: curr }),
+        {} as RegisteredComponents
+      );
+      return allComponents;
     },
     processMessage(event: MessageEvent) {
       const { data } = event;
@@ -84,7 +103,7 @@ function RenderContent(props) {
         evaluate({
           code: jsCode,
           context: state.context,
-          state: state.state,
+          state: state.contentState,
         });
       }
     },
@@ -96,13 +115,14 @@ function RenderContent(props) {
         evaluate({
           code: group,
           context: state.context,
-          state: state.state,
+          state: state.contentState,
         })
       );
     },
     handleRequest({ url, key }: { key: string; url: string }) {
       const fetchAndSetState = async () => {
-        const response = await getFetch()(url);
+        const fetch = await getFetch();
+        const response = await fetch(url);
         const json = await response.json();
         const newOverrideState = { ...state.overrideState, [key]: json };
         state.overrideState = newOverrideState;
@@ -123,25 +143,33 @@ function RenderContent(props) {
       });
     },
     emitStateUpdate() {
-      window.dispatchEvent(
-        new CustomEvent<BuilderComponentStateChange>(
-          "builder:component:stateChange",
-          {
-            detail: {
-              state: state.state,
-              ref: {
-                name: props.model,
+      if (isEditing()) {
+        window.dispatchEvent(
+          new CustomEvent<BuilderComponentStateChange>(
+            "builder:component:stateChange",
+            {
+              detail: {
+                state: state.contentState,
+                ref: {
+                  name: props.model,
+                },
               },
-            },
-          }
-        )
-      );
+            }
+          )
+        );
+      }
     },
   });
 
   onMount(() => {
     if (isBrowser()) {
       if (isEditing()) {
+        Object.values(state.allRegisteredComponents).forEach(
+          (registeredComponent) => {
+            const message = createRegisterComponentMessage(registeredComponent);
+            window.parent?.postMessage(message, "*");
+          }
+        );
         window.addEventListener("message", state.processMessage);
         window.addEventListener(
           "builder:component:stateChangeListenerActivated",
@@ -189,7 +217,7 @@ function RenderContent(props) {
           return state.useContent;
         },
         get state() {
-          return state.state;
+          return state.contentState;
         },
         get context() {
           return state.context;
@@ -197,6 +225,9 @@ function RenderContent(props) {
         get apiKey() {
           return props.apiKey;
         },
+        get registeredComponents() {
+          return state.allRegisteredComponents;
+        },
       }}
       component={BuilderContext.Provider}
     >
@@ -216,10 +247,10 @@ function RenderContent(props) {
               TARGET !== "reactNative"
             }
           >
-            <RenderStyles
+            <RenderContentStyles
               cssCode={state.useContent.data.cssCode}
               customFonts={state.useContent.data.customFonts}
-            ></RenderStyles>
+            ></RenderContentStyles>
           </Show>
           <RenderBlocks blocks={state.useContent?.data?.blocks}></RenderBlocks>
         </div>

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

@@ -0,0 +1,24 @@
+import { Show } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { createMutable } from "solid-js/store";
+import { TARGET } from "../constants/target.js";
+
+function RenderInlinedStyles(props) {
+  const state = createMutable({
+    get injectedStyleScript() {
+      return `<${state.tagName}>${props.styles}</${state.tagName}>`;
+    },
+
+    get tagName() {
+      // NOTE: we have to obfusctate the name of the tag due to a limitation in the svelte-preprocessor plugin.
+      // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
+      return "sty" + "le";
+    }
+
+  });
+  return <Show fallback={<Dynamic component={state.tagName}>{props.styles}</Dynamic>} when={TARGET === "svelte"}>
+      <div innerHTML={state.injectedStyleScript}></div>
+    </Show>;
+}
+
+export default RenderInlinedStyles;

package/src/components/render-inlined-styles.lite.tsx

@@ -0,0 +1,29 @@
+import { Show } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { createMutable } from "solid-js/store";
+
+import { TARGET } from "../constants/target.js";
+
+function RenderInlinedStyles(props) {
+  const state = createMutable({
+    get injectedStyleScript() {
+      return `<${state.tagName}>${props.styles}</${state.tagName}>`;
+    },
+    get tagName() {
+      // NOTE: we have to obfusctate the name of the tag due to a limitation in the svelte-preprocessor plugin.
+      // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
+      return "sty" + "le";
+    },
+  });
+
+  return (
+    <Show
+      fallback={<Dynamic component={state.tagName}>{props.styles}</Dynamic>}
+      when={TARGET === "svelte"}
+    >
+      <div innerHTML={state.injectedStyleScript}></div>
+    </Show>
+  );
+}
+
+export default RenderInlinedStyles;

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

@@ -0,0 +1,45 @@
+var __defProp = Object.defineProperty;
+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;
+};
+import { default as Button } from "../blocks/button/button.jsx";
+import { componentInfo as buttonComponentInfo } from "../blocks/button/component-info";
+import { default as Columns } from "../blocks/columns/columns.jsx";
+import { componentInfo as columnsComponentInfo } from "../blocks/columns/component-info";
+import { componentInfo as fragmentComponentInfo } from "../blocks/fragment/component-info";
+import { default as Fragment } from "../blocks/fragment/fragment.jsx";
+import { componentInfo as imageComponentInfo } from "../blocks/image/component-info";
+import { default as Image } from "../blocks/image/image.jsx";
+import { componentInfo as sectionComponentInfo } from "../blocks/section/component-info";
+import { default as Section } from "../blocks/section/section.jsx";
+import { componentInfo as symbolComponentInfo } from "../blocks/symbol/component-info";
+import { default as Symbol } from "../blocks/symbol/symbol.jsx";
+import { componentInfo as textComponentInfo } from "../blocks/text/component-info";
+import { default as Text } from "../blocks/text/text.jsx";
+import { componentInfo as videoComponentInfo } from "../blocks/video/component-info";
+import { default as Video } from "../blocks/video/video.jsx";
+const getDefaultRegisteredComponents = () => [
+  __spreadValues({ component: Columns }, columnsComponentInfo),
+  __spreadValues({ component: Image }, imageComponentInfo),
+  __spreadValues({ component: Text }, textComponentInfo),
+  __spreadValues({ component: Video }, videoComponentInfo),
+  __spreadValues({ component: Symbol }, symbolComponentInfo),
+  __spreadValues({ component: Button }, buttonComponentInfo),
+  __spreadValues({ component: Section }, sectionComponentInfo),
+  __spreadValues({ component: Fragment }, fragmentComponentInfo)
+];
+export {
+  getDefaultRegisteredComponents
+};

package/src/context/builder.context.js

@@ -3,7 +3,8 @@ var stdin_default = createContext({
   content: null,
   context: {},
   state: {},
-  apiKey: null
+  apiKey: null,
+  registeredComponents: {}
 });
 export {
   stdin_default as default

package/src/functions/evaluate.js

@@ -1,5 +1,5 @@
-import { isBrowser } from "./is-browser";
-import { isEditing } from "./is-editing";
+import { isBrowser } from "./is-browser.js";
+import { isEditing } from "./is-editing.js";
 function evaluate({
   code,
   context,

package/src/functions/fast-clone.js

@@ -0,0 +1,4 @@
+const fastClone = (obj) => JSON.parse(JSON.stringify(obj));
+export {
+  fastClone
+};

package/src/functions/get-block-actions.js

@@ -1,5 +1,5 @@
-import { evaluate } from "./evaluate";
-import { getEventHandlerName } from "./event-handler-name";
+import { evaluate } from "./evaluate.js";
+import { getEventHandlerName } from "./event-handler-name.js";
 function getBlockActions(options) {
   var _a;
   const obj = {};

package/src/functions/get-block-styles.js

@@ -30,10 +30,10 @@ function getBlockStyles(block) {
   var _a, _b, _c, _d, _e;
   const styles = __spreadValues({}, convertStyleObject((_a = block.responsiveStyles) == null ? void 0 : _a.large));
   if ((_b = block.responsiveStyles) == null ? void 0 : _b.medium) {
-    styles[`@media (max-width: ${sizes.medium})`] = convertStyleObject((_c = block.responsiveStyles) == null ? void 0 : _c.medium);
+    styles[`@media (max-width: ${sizes.medium.max})`] = convertStyleObject((_c = block.responsiveStyles) == null ? void 0 : _c.medium);
   }
   if ((_d = block.responsiveStyles) == null ? void 0 : _d.small) {
-    styles[`@media (max-width: ${sizes.small})`] = convertStyleObject((_e = block.responsiveStyles) == null ? void 0 : _e.small);
+    styles[`@media (max-width: ${sizes.small.max})`] = convertStyleObject((_e = block.responsiveStyles) == null ? void 0 : _e.small);
   }
   return styles;
 }

package/src/functions/get-builder-search-params/fn.test.js

@@ -1,4 +1,4 @@
-import { getBuilderSearchParams, convertSearchParamsToQueryObject } from ".";
+import { convertSearchParamsToQueryObject, getBuilderSearchParams } from ".";
 const querystring = "someotherValue=jklsjfdal&abc=klfdjklgfds&builder.cachebust=true&builder.preview=page&builder.noCache=true&__builder_editing__=true&builder.overrides.page=037948e52eaf4743afed464f02c70da4&builder.overrides.037948e52eaf4743afed464f02c70da4=037948e52eaf4743afed464f02c70da4&builder.overrides.page%3A%2F=037948e52eaf4743afed464f02c70da4&preview_theme_id=128854393017";
 const url = new URL(`localhost:3000/about-us?${querystring}`);
 describe("Get Builder SearchParams", () => {

package/src/functions/get-content/index.js

@@ -37,8 +37,8 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { getFetch } from "../get-fetch";
-const fetch = getFetch();
+import { getFetch } from "../get-fetch.js";
+const fetch$ = getFetch();
 function flatten(object, path = null, separator = ".") {
   return Object.keys(object).reduce((acc, key) => {
     const value = object[key];
@@ -123,6 +123,7 @@ const handleABTesting = (content, testGroups) => {
 function getAllContent(options) {
   return __async(this, null, function* () {
     const url = generateContentUrl(options);
+    const fetch = yield fetch$;
     const content = yield fetch(url.href).then((res) => res.json());
     if (options.testGroups) {
       handleABTesting(content, options.testGroups);

package/src/functions/get-fetch.js

@@ -1,11 +1,33 @@
-import { getGlobalThis } from "./get-global-this";
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { getGlobalThis } from "./get-global-this.js";
 function getFetch() {
-  let fetch = getGlobalThis().fetch;
-  if (typeof fetch === "undefined" && typeof global !== "undefined") {
-    const _require = eval("require");
-    fetch = _require("node-fetch");
-  }
-  return fetch;
+  return __async(this, null, function* () {
+    const globalFetch = getGlobalThis().fetch;
+    if (typeof globalFetch === "undefined" && typeof global !== "undefined") {
+      const nodeFetch = import("node-fetch").then((d) => d.default);
+      return nodeFetch;
+    }
+    return globalFetch;
+  });
 }
 export {
   getFetch

package/src/functions/get-processed-block.js

@@ -17,9 +17,9 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { evaluate } from "./evaluate";
-import { set } from "./set";
-import { transformBlock } from "./transform-block";
+import { evaluate } from "./evaluate.js";
+import { set } from "./set.js";
+import { transformBlock } from "./transform-block.js";
 function getProcessedBlock(options) {
   const { state, context } = options;
   const block = transformBlock(options.block);

package/src/functions/get-processed-block.test.js

@@ -1,4 +1,4 @@
-import { getProcessedBlock } from "./get-processed-block";
+import { getProcessedBlock } from "./get-processed-block.js";
 test("Can process bindings", () => {
   var _a, _b, _c, _d, _e, _f;
   const block = {

package/src/functions/if-target.js

@@ -1,4 +1,4 @@
-import { TARGET } from "../constants/target";
+import { TARGET } from "../constants/target.js";
 function ifTarget({
   targets,
   doThing,

package/src/functions/is-editing.js

@@ -1,4 +1,4 @@
-import { isIframe } from "./is-iframe";
+import { isIframe } from "./is-iframe.js";
 function isEditing() {
   return isIframe() && window.location.search.indexOf("builder.frameEditing=") !== -1;
 }

package/src/functions/is-iframe.js

@@ -1,4 +1,4 @@
-import { isBrowser } from "./is-browser";
+import { isBrowser } from "./is-browser.js";
 function isIframe() {
   return isBrowser() && window.self !== window.top;
 }

package/src/functions/is-previewing.js

@@ -1,5 +1,5 @@
-import { isBrowser } from "./is-browser";
-import { isEditing } from "./is-editing";
+import { isBrowser } from "./is-browser.js";
+import { isEditing } from "./is-editing.js";
 function isPreviewing() {
   if (!isBrowser()) {
     return false;

package/src/functions/on-change.test.js

@@ -1,4 +1,4 @@
-import { onChange } from "./on-change";
+import { onChange } from "./on-change.js";
 test("onChange can observe a shallow change", () => {
   let changeHappend = false;
   const obj = onChange({ foo: "hi" }, () => changeHappend = true);

package/src/functions/previewing-model-name.js

@@ -1,4 +1,4 @@
-import { isPreviewing } from "./is-previewing";
+import { isPreviewing } from "./is-previewing.js";
 function previewingModelName() {
   if (!isPreviewing()) {
     return null;

package/src/functions/register-component.js

@@ -17,27 +17,43 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { isBrowser } from "./is-browser";
-const components = {};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { fastClone } from "./fast-clone.js";
+const components = [];
 function registerComponent(component, info) {
-  var _a;
-  components[info.name] = { component, info };
-  if (isBrowser()) {
-    const sendInfo = prepareComponentInfoToSend(info);
-    (_a = window.parent) == null ? void 0 : _a.postMessage({
-      type: "builder.registerComponent",
-      data: sendInfo
-    }, "*");
-  }
+  components.push(__spreadValues({ component }, info));
+  console.warn("registerComponent is deprecated. Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.");
   return component;
 }
+const createRegisterComponentMessage = (_a) => {
+  var _b = _a, {
+    component
+  } = _b, info = __objRest(_b, [
+    "component"
+  ]);
+  return {
+    type: "builder.registerComponent",
+    data: prepareComponentInfoToSend(fastClone(info))
+  };
+};
 function prepareComponentInfoToSend(info) {
   return __spreadValues(__spreadValues({}, info), info.inputs && {
     inputs: info.inputs.map((input) => {
       const keysToConvertFnToString = ["onChange", "showIf"];
       for (const key of keysToConvertFnToString) {
-        if (input[key] && typeof input[key] === "function") {
-          const fn = input[key];
+        const fn = input[key];
+        if (fn && typeof fn === "function") {
           input = __spreadProps(__spreadValues({}, input), {
             [key]: `return (${fn.toString()}).apply(this, arguments)`
           });
@@ -49,5 +65,6 @@ function prepareComponentInfoToSend(info) {
 }
 export {
   components,
+  createRegisterComponentMessage,
   registerComponent
 };

package/src/functions/register.js

@@ -1,4 +1,4 @@
-import { isBrowser } from "./is-browser";
+import { isBrowser } from "./is-browser.js";
 const registry = {};
 function register(type, info) {
   let typeList = registry[type];

package/src/functions/set-editor-settings.js

@@ -1,4 +1,4 @@
-import { isBrowser } from "./is-browser";
+import { isBrowser } from "./is-browser.js";
 const settings = {};
 function setEditorSettings(newSettings) {
   if (isBrowser()) {

package/src/functions/set.test.js

@@ -1,4 +1,4 @@
-import { set } from "./set";
+import { set } from "./set.js";
 test("can shallow set a property", () => {
   const obj = { foo: "bar" };
   set(obj, "foo", "baz");

package/src/functions/track.js

@@ -1,6 +1,6 @@
-import { TARGET } from "../constants/target";
-import { isBrowser } from "./is-browser";
-import { isEditing } from "./is-editing";
+import { TARGET } from "../constants/target.js";
+import { isBrowser } from "./is-browser.js";
+import { isEditing } from "./is-editing.js";
 function track(event, properties) {
   if (isEditing()) {
     return;

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

@@ -1,12 +1,12 @@
-import { default as default2 } from "../blocks/columns";
-import { default as default3 } from "../blocks/image";
-import { default as default4 } from "../blocks/text";
-import { default as default5 } from "../blocks/video";
-import { default as default6 } from "../blocks/symbol";
-import { default as default7 } from "../blocks/button";
-import { default as default8 } from "../blocks/section";
-import { default as default9 } from "../blocks/fragment";
-import { default as default10 } from "../components/render-content/render-content";
+import { default as default2 } from "../blocks/columns/columns.jsx";
+import { default as default3 } from "../blocks/image/image.jsx";
+import { default as default4 } from "../blocks/text/text.jsx";
+import { default as default5 } from "../blocks/video/video.jsx";
+import { default as default6 } from "../blocks/symbol/symbol.jsx";
+import { default as default7 } from "../blocks/button/button.jsx";
+import { default as default8 } from "../blocks/section/section.jsx";
+import { default as default9 } from "../blocks/fragment/fragment.jsx";
+import { default as default10 } from "../components/render-content/render-content.jsx";
 export {
   default7 as Button,
   default2 as Columns,

package/src/index.js

@@ -1,13 +1,10 @@
-import("./index-helpers/top-of-file");
-import { isEditing } from "./functions/is-editing";
-if (isEditing()) {
-  import("./scripts/init-editing");
-}
-export * from "./index-helpers/blocks-exports";
-export * from "./functions/is-editing";
-export * from "./functions/is-previewing";
-export * from "./functions/register-component";
-export * from "./functions/register";
-export * from "./functions/set-editor-settings";
-export * from "./functions/get-content";
-export * from "./functions/get-builder-search-params";
+import "./index-helpers/top-of-file.js";
+import "./scripts/init-editing.js";
+export * from "./index-helpers/blocks-exports.js";
+export * from "./functions/is-editing.js";
+export * from "./functions/is-previewing.js";
+export * from "./functions/register-component.js";
+export * from "./functions/register.js";
+export * from "./functions/set-editor-settings.js";
+export * from "./functions/get-content/index.js";
+export * from "./functions/get-builder-search-params/index.js";