@builder.io/sdk-solid 0.2.0 → 0.2.1

package/CHANGELOG.md

@@ -1,4 +1,9 @@
+### 0.2.1
+
+- No Changes.
+
 ### 0.2.0
+
 - Sets the default `apiVersion` to `v3`.
 
 In case you feel the need to use our older API Version `v2`, reach out to us at support@builder.io first. But you can override the default by setting `apiVersion` explicitly to `v2` as follows:
@@ -8,6 +13,7 @@ In case you feel the need to use our older API Version `v2`, reach out to us at
 ```
 
 ```js
-getContent({ apiVersion: "v2" })
+getContent({ apiVersion: 'v2' });
 ```
+
 More details on the Builder API Versions visit [this link](https://www.builder.io/c/docs/content-api-versions).

package/package.json

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

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

@@ -41,6 +41,9 @@ function BlockStyles(props) {
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
     const className = useBlock().id;
+    if (!className) {
+      return "";
+    }
     const largeStylesClass = largeStyles
       ? createCssClass({
           className,

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

@@ -106,8 +106,24 @@ 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

@@ -4,11 +4,11 @@ import { Dynamic } from "solid-js/web";
 import { getBlockActions } from "../../functions/get-block-actions.js";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
 import { getBlockProperties } from "../../functions/get-block-properties.js";
-import { getBlockTag } from "../../functions/get-block-tag.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import BlockStyles from "./block-styles.jsx";
 import {
   getComponent,
+  getProxyState,
   getRepeatItemData,
   isEmptyHtmlElement,
 } from "./render-block.helpers.js";
@@ -34,9 +34,11 @@ function RenderBlock(props) {
     })
   );
 
-  function tag() {
-    return getBlockTag(useBlock());
-  }
+  const [tag, setTag] = createSignal(props.block.tagName || "div");
+
+  const [proxyState, setProxyState] = createSignal(
+    getProxyState(props.context)
+  );
 
   function useBlock() {
     return repeatItemData()
@@ -59,30 +61,10 @@ function RenderBlock(props) {
     return true;
   }
 
-  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: proxyState(),
+      state: TARGET === "qwik" ? props.context.state : proxyState(),
       context: props.context.context,
     });
   }
@@ -103,29 +85,6 @@ function RenderBlock(props) {
     };
   }
 
-  function renderComponentProps() {
-    return {
-      blockChildren: useBlock().children ?? [],
-      componentRef: component()?.component,
-      componentOptions: {
-        ...getBlockComponentOptions(useBlock()),
-        /**
-         * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
-         * they are provided to the component itself directly.
-         */
-        ...(!component()?.noWrap
-          ? {}
-          : {
-              attributes: {
-                ...attributes(),
-                ...actions(),
-              },
-            }),
-      },
-      context: childrenContext(),
-    };
-  }
-
   function childrenWithoutParentComponent() {
     /**
      * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
@@ -163,6 +122,29 @@ function RenderBlock(props) {
     };
   }
 
+  function renderComponentProps() {
+    return {
+      blockChildren: useBlock().children ?? [],
+      componentRef: component()?.component,
+      componentOptions: {
+        ...getBlockComponentOptions(useBlock()),
+        /**
+         * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
+         * they are provided to the component itself directly.
+         */
+        ...(!component()?.noWrap
+          ? {}
+          : {
+              attributes: {
+                ...attributes(),
+                ...actions(),
+              },
+            }),
+      },
+      context: childrenContext(),
+    };
+  }
+
   return (
     <Show when={canShowBlock()}>
       <Show

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

@@ -4,16 +4,16 @@ import { Dynamic } from "solid-js/web";
 import { TARGET } from "../constants/target.js";
 
 function RenderInlinedStyles(props) {
-  function injectedStyleScript() {
-    return `<${tag()}>${props.styles}</${tag()}>`;
-  }
-
   function tag() {
     // 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";
   }
 
+  function injectedStyleScript() {
+    return `<${tag()}>${props.styles}</${tag()}>`;
+  }
+
   return (
     <Show
       fallback={<Dynamic component={tag()}>{props.styles}</Dynamic>}

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

@@ -1,6 +0,0 @@
-function getBlockTag(block) {
-  return block.tagName || "div";
-}
-export {
-  getBlockTag
-};