@builder.io/sdk-solid 0.0.17 → 0.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "description": "",
   "type": "module",
   "main": "./solid-index.jsx",
@@ -17,11 +17,11 @@
     "solid-styled-components": "^0.27.6"
   },
   "peerDependencies": {
-    "solid-js": "^1.4.3"
+    "solid-js": "^1.5.7"
   },
   "devDependencies": {
     "babel-preset-solid": "^1.3.17",
-    "solid-js": "^1.4.3",
+    "solid-js": "^1.5.7",
     "vite": "^3.0.4",
     "vite-plugin-solid": "^2.2.6"
   }

package/src/blocks/symbol/symbol.jsx

@@ -1,4 +1,4 @@
-import { useContext, onMount, on, createEffect, createSignal } from "solid-js";
+import { useContext, on, createEffect, createSignal } from "solid-js";
 import RenderContent from "../../components/render-content/render-content.jsx";
 import BuilderContext from "../../context/builder.context.js";
 import { getContent } from "../../functions/get-content/index.js";
@@ -6,11 +6,13 @@ import { markMutable } from "../../functions/mark-mutable";
 
 function Symbol(props) {
   const [className, setClassName] = createSignal("builder-symbol");
-  const [content, setContent] = createSignal(null);
+  const [fetchedContent, setFetchedContent] = createSignal(null);
+
+  function contentToUse() {
+    return props.symbol?.content || fetchedContent();
+  }
+
   const builderContext = useContext(BuilderContext);
-  onMount(() => {
-    setContent(props.symbol?.content);
-  });
 
   function onUpdateFn_0() {
     const symbolToUse = props.symbol;
@@ -24,7 +26,7 @@ function Symbol(props) {
      * then we want to re-fetch the symbol content.
      */
 
-    if (symbolToUse && !symbolToUse.content && !content() && symbolToUse.model) {
+    if (symbolToUse && !symbolToUse.content && !fetchedContent() && symbolToUse.model) {
       getContent({
         model: symbolToUse.model,
         apiKey: builderContext.apiKey,
@@ -32,19 +34,19 @@ function Symbol(props) {
           id: symbolToUse.entry
         }
       }).then(response => {
-        setContent(response);
+        setFetchedContent(response);
       });
     }
   }
 
-  createEffect(on(() => [props.symbol, content()], onUpdateFn_0));
+  createEffect(on(() => [props.symbol, fetchedContent()], onUpdateFn_0));
   return <div class={className()} {...props.attributes} dataSet={{
     class: className()
   }}>
       <RenderContent apiKey={builderContext.apiKey} context={builderContext.context} customComponents={markMutable(Object.values(builderContext.registeredComponents))} data={markMutable({ ...props.symbol?.data,
       ...builderContext.state,
       ...props.symbol?.content?.data?.state
-    })} model={props.symbol?.model} content={markMutable(content())}></RenderContent>
+    })} model={props.symbol?.model} content={markMutable(contentToUse())}></RenderContent>
     </div>;
 }
 

package/src/scripts/init-editing.js

@@ -31,43 +31,44 @@ const setupBrowserForEditing = () => {
     }, "*");
     window.addEventListener("message", ({ data }) => {
       var _a2, _b;
-      if (data) {
-        switch (data.type) {
-          case "builder.evaluate": {
-            const text = data.data.text;
-            const args = data.data.arguments || [];
-            const id = data.data.id;
-            const fn = new Function(text);
-            let result;
-            let error = null;
-            try {
-              result = fn.apply(null, args);
-            } catch (err) {
-              error = err;
-            }
-            if (error) {
-              (_a2 = window.parent) == null ? void 0 : _a2.postMessage({
-                type: "builder.evaluateError",
-                data: { id, error: error.message }
-              }, "*");
-            } else {
-              if (result && typeof result.then === "function") {
-                result.then((finalResult) => {
-                  var _a3;
-                  (_a3 = window.parent) == null ? void 0 : _a3.postMessage({
-                    type: "builder.evaluateResult",
-                    data: { id, result: finalResult }
-                  }, "*");
-                }).catch(console.error);
-              } else {
-                (_b = window.parent) == null ? void 0 : _b.postMessage({
+      if (!(data == null ? void 0 : data.type)) {
+        return;
+      }
+      switch (data.type) {
+        case "builder.evaluate": {
+          const text = data.data.text;
+          const args = data.data.arguments || [];
+          const id = data.data.id;
+          const fn = new Function(text);
+          let result;
+          let error = null;
+          try {
+            result = fn.apply(null, args);
+          } catch (err) {
+            error = err;
+          }
+          if (error) {
+            (_a2 = window.parent) == null ? void 0 : _a2.postMessage({
+              type: "builder.evaluateError",
+              data: { id, error: error.message }
+            }, "*");
+          } else {
+            if (result && typeof result.then === "function") {
+              result.then((finalResult) => {
+                var _a3;
+                (_a3 = window.parent) == null ? void 0 : _a3.postMessage({
                   type: "builder.evaluateResult",
-                  data: { result, id }
+                  data: { id, result: finalResult }
                 }, "*");
-              }
+              }).catch(console.error);
+            } else {
+              (_b = window.parent) == null ? void 0 : _b.postMessage({
+                type: "builder.evaluateResult",
+                data: { result, id }
+              }, "*");
             }
-            break;
           }
+          break;
         }
       }
     });