@builder.io/sdk-solid 0.2.2 → 0.3.1

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+### 0.2.3
+
+- No Changes.
+
 ### 0.2.2
 
 - Fix: dynamic bindings for Link URLs.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "description": "",
   "type": "module",
   "main": "./solid-index.jsx",
@@ -12,10 +12,7 @@
     }
   },
   "scripts": {
-    "build": "echo 'no need to build solid SDK'",
-    "release:patch": "yarn run build && npm version patch && npm publish",
-    "release:minor": "yarn run build && npm version minor && npm publish",
-    "release:dev": "yarn run build && npm version prerelease && npm publish --tag dev"
+    "build": "echo 'no need to build solid SDK'"
   },
   "dependencies": {
     "solid-styled-components": "^0.27.6"

package/src/blocks/columns/columns.jsx

@@ -65,7 +65,7 @@ function Columns(props) {
       };
     }
     const width = getColumnCssWidth(index);
-    const gutterPixels = `${gutterSize()}px`;
+    const gutterPixels = `${gutter}px`;
     const mobileWidth = "100%";
     const mobileMarginLeft = 0;
     return {
@@ -99,30 +99,30 @@ function Columns(props) {
 
   function columnsStyles() {
     return `
-      @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
-        .${props.builderBlock.id}-breakpoints {
-          flex-direction: var(--flex-dir-tablet);
-          align-items: stretch;
+        @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
+          .${props.builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir-tablet);
+            align-items: stretch;
+          }
+
+          .${props.builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-tablet) !important;
+            margin-left: var(--column-margin-left-tablet) !important;
+          }
         }
 
-        .${props.builderBlock.id}-breakpoints > .builder-column {
-          width: var(--column-width-tablet) !important;
-          margin-left: var(--column-margin-left-tablet) !important;
-        }
-      }
-
-      @media (max-width: ${getWidthForBreakpointSize("small")}px) {
-        .${props.builderBlock.id}-breakpoints {
-          flex-direction: var(--flex-dir);
-          align-items: stretch;
-        }
-
-        .${props.builderBlock.id}-breakpoints > .builder-column {
-          width: var(--column-width-mobile) !important;
-          margin-left: var(--column-margin-left-mobile) !important;
-        }
-      },
-    `;
+        @media (max-width: ${getWidthForBreakpointSize("small")}px) {
+          .${props.builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir);
+            align-items: stretch;
+          }
+
+          .${props.builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-mobile) !important;
+            margin-left: var(--column-margin-left-mobile) !important;
+          }
+        },
+      `;
   }
 
   const builderContext = useContext(BuilderContext);

package/src/blocks/symbol/symbol.jsx

@@ -85,7 +85,7 @@ function Symbol(props) {
         customComponents={Object.values(builderContext.registeredComponents)}
         data={{
           ...props.symbol?.data,
-          ...builderContext.state,
+          ...builderContext.localState,
           ...contentToUse()?.data?.state,
         }}
         model={props.symbol?.model}

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

@@ -14,7 +14,9 @@ function BlockStyles(props) {
   function useBlock() {
     return getProcessedBlock({
       block: props.block,
-      state: props.context.state,
+      localState: props.context.localState,
+      rootState: props.context.rootState,
+      rootSetState: props.context.rootSetState,
       context: props.context.context,
       shouldEvaluateBindings: true,
     });

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

@@ -58,7 +58,9 @@ const getComponent = ({
   var _a;
   const componentName = (_a = getProcessedBlock({
     block,
-    state: context.state,
+    localState: context.localState,
+    rootState: context.rootState,
+    rootSetState: context.rootSetState,
     context: context.context,
     shouldEvaluateBindings: false
   }).component) == null ? void 0 : _a.name;
@@ -85,7 +87,9 @@ const getRepeatItemData = ({
   }
   const itemsArray = evaluate({
     code: repeat.collection,
-    state: context.state,
+    localState: context.localState,
+    rootState: context.rootState,
+    rootSetState: context.rootSetState,
     context: context.context
   });
   if (!Array.isArray(itemsArray)) {
@@ -95,7 +99,7 @@ const getRepeatItemData = ({
   const itemNameToUse = repeat.itemName || (collectionName ? collectionName + "Item" : "item");
   const repeatArray = itemsArray.map((item, index) => ({
     context: __spreadProps(__spreadValues({}, context), {
-      state: __spreadProps(__spreadValues({}, context.state), {
+      localState: __spreadProps(__spreadValues({}, context.localState), {
         $index: index,
         $item: item,
         [itemNameToUse]: item,
@@ -106,24 +110,8 @@ const getRepeatItemData = ({
   }));
   return repeatArray;
 };
-const getProxyState = (context) => {
-  if (typeof Proxy === "undefined") {
-    console.error("no Proxy available in this environment, cannot proxy state.");
-    return context.state;
-  }
-  const useState = new Proxy(context.state, {
-    set: (obj, prop, value) => {
-      var _a;
-      obj[prop] = value;
-      (_a = context.setState) == null ? void 0 : _a.call(context, obj);
-      return true;
-    }
-  });
-  return useState;
-};
 export {
   getComponent,
-  getProxyState,
   getRepeatItemData,
   isEmptyHtmlElement
 };

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

@@ -8,7 +8,6 @@ import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import BlockStyles from "./block-styles.jsx";
 import {
   getComponent,
-  getProxyState,
   getRepeatItemData,
   isEmptyHtmlElement,
 } from "./render-block.helpers.js";
@@ -26,25 +25,23 @@ function RenderBlock(props) {
     })
   );
 
-  const [repeatItemData, setRepeatItemData] = createSignal(
-    getRepeatItemData({
-      block: props.block,
-      context: props.context,
-    })
-  );
-
   const [tag, setTag] = createSignal(props.block.tagName || "div");
 
-  const [proxyState, setProxyState] = createSignal(
-    getProxyState(props.context)
-  );
+  function repeatItem() {
+    return getRepeatItemData({
+      block: props.block,
+      context: props.context,
+    });
+  }
 
   function useBlock() {
-    return repeatItemData()
+    return repeatItem()
       ? props.block
       : getProcessedBlock({
           block: props.block,
-          state: props.context.state,
+          localState: props.context.localState,
+          rootState: props.context.rootState,
+          rootSetState: props.context.rootSetState,
           context: props.context.context,
           shouldEvaluateBindings: true,
         });
@@ -63,7 +60,9 @@ function RenderBlock(props) {
   function actions() {
     return getBlockActions({
       block: useBlock(),
-      state: TARGET === "qwik" ? props.context.state : proxyState(),
+      rootState: props.context.rootState,
+      rootSetState: props.context.rootSetState,
+      localState: props.context.localState,
       context: props.context.context,
     });
   }
@@ -92,7 +91,7 @@ function RenderBlock(props) {
      * blocks, and the children will be repeated within those blocks.
      */
     const shouldRenderChildrenOutsideRef =
-      !component()?.component && !repeatItemData();
+      !component()?.component && !repeatItem();
     return shouldRenderChildrenOutsideRef ? useBlock().children ?? [] : [];
   }
 
@@ -112,10 +111,11 @@ function RenderBlock(props) {
     return {
       apiKey: props.context.apiKey,
       apiVersion: props.context.apiVersion,
-      state: props.context.state,
+      localState: props.context.localState,
+      rootState: props.context.rootState,
+      rootSetState: props.context.rootSetState,
       content: props.context.content,
       context: props.context.context,
-      setState: props.context.setState,
       registeredComponents: props.context.registeredComponents,
       inheritedStyles: getInheritedTextStyles(),
     };
@@ -155,8 +155,8 @@ function RenderBlock(props) {
         <Show when={isEmptyHtmlElement(tag())}>
           <Dynamic {...attributes()} {...actions()} component={tag()}></Dynamic>
         </Show>
-        <Show when={!isEmptyHtmlElement(tag()) && repeatItemData()}>
-          <For each={repeatItemData()}>
+        <Show when={!isEmptyHtmlElement(tag()) && repeatItem()}>
+          <For each={repeatItem()}>
             {(data, _index) => {
               const index = _index();
               return (
@@ -169,7 +169,7 @@ function RenderBlock(props) {
             }}
           </For>
         </Show>
-        <Show when={!isEmptyHtmlElement(tag()) && !repeatItemData()}>
+        <Show when={!isEmptyHtmlElement(tag()) && !repeatItem()}>
           <Dynamic {...attributes()} {...actions()} component={tag()}>
             <RenderComponent {...renderComponentProps()}></RenderComponent>
             <For each={childrenWithoutParentComponent()}>

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

@@ -6,12 +6,14 @@ function RenderRepeatedBlock(props) {
     <BuilderContext.Provider
       value={{
         content: props.repeatContext.content,
-        state: props.repeatContext.state,
-        setState: props.repeatContext.setState,
+        localState: props.repeatContext.localState,
+        rootState: props.repeatContext.rootState,
+        rootSetState: props.repeatContext.rootSetState,
         context: props.repeatContext.context,
         apiKey: props.repeatContext.apiKey,
         registeredComponents: props.repeatContext.registeredComponents,
         inheritedStyles: props.repeatContext.inheritedStyles,
+        apiVersion: props.repeatContext.apiVersion,
       }}
     >
       <RenderBlock

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

@@ -15,16 +15,16 @@ ${getFontCss({
 })}
 
 .builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
-margin: 0;
+  margin: 0;
 }
 .builder-text > p, .builder-text > .builder-paragraph {
-color: inherit;
-line-height: inherit;
-letter-spacing: inherit;
-font-weight: inherit;
-font-size: inherit;
-text-align: inherit;
-font-family: inherit;
+  color: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  text-align: inherit;
+  font-family: inherit;
 }
 `);
 

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

@@ -99,8 +99,8 @@ function RenderContent(props) {
     });
   }
 
-  function setContextState(newState) {
-    setContentState(newState);
+  function contentSetState(newRootState) {
+    setContentState(newRootState);
   }
 
   function processMessage(event) {
@@ -149,7 +149,9 @@ function RenderContent(props) {
       evaluate({
         code: jsCode,
         context: props.context || {},
-        state: contentState(),
+        localState: undefined,
+        rootState: contentState(),
+        rootSetState: contentSetState,
       });
     }
   }
@@ -178,7 +180,9 @@ function RenderContent(props) {
       evaluate({
         code: group,
         context: props.context || {},
-        state: contentState(),
+        localState: undefined,
+        rootState: contentState(),
+        rootSetState: contentSetState,
       })
     );
   }
@@ -191,7 +195,7 @@ function RenderContent(props) {
           ...contentState(),
           [key]: json,
         };
-        setContextState(newState);
+        contentSetState(newState);
       })
       .catch((err) => {
         console.error("error fetching dynamic data", url, err);
@@ -349,12 +353,14 @@ function RenderContent(props) {
     <builderContext.Provider
       value={{
         content: useContent,
-        state: contentState(),
-        setState: setContextState,
+        localState: undefined,
+        rootState: contentState(),
+        rootSetState: TARGET === "qwik" ? undefined : contentSetState,
         context: props.context || {},
         apiKey: props.apiKey,
         apiVersion: props.apiVersion,
         registeredComponents: allRegisteredComponents(),
+        inheritedStyles: {},
       }}
     >
       <Show when={useContent}>

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

@@ -5,7 +5,7 @@ import { TARGET } from "../constants/target.js";
 
 function RenderInlinedStyles(props) {
   function tag() {
-    // NOTE: we have to obfusctate the name of the tag due to a limitation in the svelte-preprocessor plugin.
+    // NOTE: we have to obfuscate 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";
   }

package/src/constants/sdk-version.js

@@ -0,0 +1 @@
+export const SDK_VERSION = "0.3.1"

package/src/context/builder.context.js

@@ -2,9 +2,10 @@ import { createContext } from "solid-js";
 var stdin_default = createContext({
   content: null,
   context: {},
-  state: {},
-  setState() {
+  localState: void 0,
+  rootSetState() {
   },
+  rootState: {},
   apiKey: null,
   apiVersion: void 0,
   registeredComponents: {},

package/src/functions/evaluate.js

@@ -3,7 +3,9 @@ import { isEditing } from "./is-editing.js";
 function evaluate({
   code,
   context,
-  state,
+  localState,
+  rootState,
+  rootSetState,
   event,
   isExpression = true
 }) {
@@ -19,11 +21,33 @@ function evaluate({
   const useReturn = isExpression && !(code.includes(";") || code.includes(" return ") || code.trim().startsWith("return "));
   const useCode = useReturn ? `return (${code});` : code;
   try {
-    return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, state, context, event);
+    return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, flattenState(rootState, localState, rootSetState), context, event);
   } catch (e) {
     console.warn("Builder custom code error: \n While Evaluating: \n ", useCode, "\n", e);
   }
 }
+function flattenState(rootState, localState, rootSetState) {
+  if (rootState === localState) {
+    throw new Error("rootState === localState");
+  }
+  return new Proxy(rootState, {
+    get: (_, prop) => {
+      if (localState && prop in localState) {
+        return localState[prop];
+      }
+      return rootState[prop];
+    },
+    set: (_, prop, value) => {
+      if (localState && prop in localState) {
+        throw new Error("Writing to local state is not allowed as it is read-only.");
+      }
+      rootState[prop] = value;
+      rootSetState == null ? void 0 : rootSetState(rootState);
+      return true;
+    }
+  });
+}
 export {
-  evaluate
+  evaluate,
+  flattenState
 };

package/src/functions/evaluate.test.js

@@ -0,0 +1,17 @@
+import { flattenState } from "./evaluate";
+describe("flatten state", () => {
+  it("should behave normally when no PROTO_STATE", () => {
+    const localState = {};
+    const rootState = { foo: "bar" };
+    const flattened = flattenState(rootState, localState, void 0);
+    expect(flattened.foo).toEqual("bar");
+    flattened.foo = "baz";
+    expect(rootState.foo).toEqual("baz");
+  });
+  it("should shadow write ", () => {
+    const rootState = { foo: "foo" };
+    const localState = { foo: "baz" };
+    const flattened = flattenState(rootState, localState, void 0);
+    expect(() => flattened.foo = "bar").toThrow("Writing to local state is not allowed as it is read-only.");
+  });
+});

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

@@ -2,7 +2,9 @@ import { evaluate } from "./evaluate.js";
 const createEventHandler = (value, options) => (event) => evaluate({
   code: value,
   context: options.context,
-  state: options.state,
+  localState: options.localState,
+  rootState: options.rootState,
+  rootSetState: options.rootSetState,
   event,
   isExpression: false
 });

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

@@ -57,7 +57,7 @@ function getAllContent(options) {
       const res = yield fetch(url.href);
       const content = yield res.json();
       if ("status" in content && !("results" in content)) {
-        logger.error("Error fetching data. ", content, options);
+        logger.error("Error fetching data. ", { url, content, options });
         return content;
       }
       const canTrack = options.canTrack !== false;

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

@@ -24,7 +24,9 @@ import { transformBlock } from "./transform-block.js";
 const evaluateBindings = ({
   block,
   context,
-  state
+  localState,
+  rootState,
+  rootSetState
 }) => {
   if (!block.bindings) {
     return block;
@@ -36,7 +38,13 @@ const evaluateBindings = ({
   });
   for (const binding in block.bindings) {
     const expression = block.bindings[binding];
-    const value = evaluate({ code: expression, state, context });
+    const value = evaluate({
+      code: expression,
+      localState,
+      rootState,
+      rootSetState,
+      context
+    });
     set(copied, binding, value);
   }
   return copied;
@@ -45,11 +53,19 @@ function getProcessedBlock({
   block,
   context,
   shouldEvaluateBindings,
-  state
+  localState,
+  rootState,
+  rootSetState
 }) {
   const transformedBlock = transformBlock(block);
   if (shouldEvaluateBindings) {
-    return evaluateBindings({ block: transformedBlock, state, context });
+    return evaluateBindings({
+      block: transformedBlock,
+      localState,
+      rootState,
+      rootSetState,
+      context
+    });
   } else {
     return transformedBlock;
   }

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

@@ -20,7 +20,9 @@ test("Can process bindings", () => {
   const processed = getProcessedBlock({
     block,
     context: {},
-    state: { test: "hello" },
+    rootState: { test: "hello" },
+    rootSetState: void 0,
+    localState: void 0,
     shouldEvaluateBindings: true
   });
   expect(processed).not.toEqual(block);

package/src/scripts/init-editing.js

@@ -1,3 +1,4 @@
+import { SDK_VERSION } from "../constants/sdk-version.js";
 import { TARGET } from "../constants/target.js";
 import { isBrowser } from "../functions/is-browser.js";
 import { register } from "../functions/register.js";
@@ -31,6 +32,7 @@ const setupBrowserForEditing = (options = {}) => {
       type: "builder.sdkInfo",
       data: {
         target: TARGET,
+        version: SDK_VERSION,
         supportsPatchUpdates: false,
         supportsAddBlockScoping: true,
         supportsCustomBreakpoints: true