@builder.io/sdk-react 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/dist/react/components/render-block/block-styles.js

@@ -32,6 +32,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/dist/react/components/render-block/render-block.helpers.js

@@ -101,4 +101,19 @@ const getRepeatItemData = ({ block, context }) => {
     }));
     return repeatArray;
 };
-export { getComponent, getRepeatItemData, isEmptyHtmlElement };
+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/dist/react/components/render-block/render-block.js

@@ -3,10 +3,9 @@ import { useState } from "react";
 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";
-import { getComponent, getRepeatItemData, isEmptyHtmlElement, } from "./render-block.helpers.js";
+import { getComponent, getProxyState, getRepeatItemData, isEmptyHtmlElement, } from "./render-block.helpers.js";
 import RenderRepeatedBlock from "./render-repeated-block";
 import { TARGET } from "../../constants/target.js";
 import { extractTextStyles } from "../../functions/extract-text-styles.js";
@@ -18,9 +17,10 @@ function RenderBlock(props) {
         block: props.block,
         context: props.context,
     }));
-    function tag() {
-        return getBlockTag(useBlock());
-    }
+    const [repeatItemData, setRepeatItemData] = useState(() => getRepeatItemData({
+        block: props.block,
+        context: props.context,
+    }));
     function useBlock() {
         return repeatItemData
             ? props.block
@@ -31,6 +31,7 @@ function RenderBlock(props) {
                 shouldEvaluateBindings: true,
             });
     }
+    const [tag, setTag] = useState(() => props.block.tagName || "div");
     function canShowBlock() {
         if (checkIsDefined(useBlock().hide)) {
             return !useBlock().hide;
@@ -40,26 +41,11 @@ 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;
-    }
+    const [proxyState, setProxyState] = useState(() => getProxyState(props.context));
     function actions() {
         return getBlockActions({
             block: useBlock(),
-            state: proxyState(),
+            state: TARGET === "qwik" ? props.context.state : proxyState,
             context: props.context.context,
         });
     }
@@ -78,28 +64,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,
@@ -110,10 +74,6 @@ function RenderBlock(props) {
         const shouldRenderChildrenOutsideRef = !component?.component && !repeatItemData;
         return shouldRenderChildrenOutsideRef ? useBlock().children ?? [] : [];
     }
-    const [repeatItemData, setRepeatItemData] = useState(() => getRepeatItemData({
-        block: props.block,
-        context: props.context,
-    }));
     function childrenContext() {
         const getInheritedTextStyles = () => {
             if (TARGET !== "reactNative") {
@@ -136,12 +96,34 @@ function RenderBlock(props) {
             inheritedStyles: getInheritedTextStyles(),
         };
     }
-    const TagRef = tag();
+    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(),
+        };
+    }
+    const TagRef = tag;
     return (React.createElement(React.Fragment, null, canShowBlock() ? (React.createElement(React.Fragment, null, !component?.noWrap ? (React.createElement(React.Fragment, null,
-        isEmptyHtmlElement(tag()) ? (React.createElement(React.Fragment, null,
+        isEmptyHtmlElement(tag) ? (React.createElement(React.Fragment, null,
             React.createElement(TagRef, { ...attributes(), ...actions() }))) : null,
-        !isEmptyHtmlElement(tag()) && repeatItemData ? (React.createElement(React.Fragment, null, repeatItemData?.map((data, index) => (React.createElement(RenderRepeatedBlock, { key: index, repeatContext: data.context, block: data.block }))))) : null,
-        !isEmptyHtmlElement(tag()) && !repeatItemData ? (React.createElement(React.Fragment, null,
+        !isEmptyHtmlElement(tag) && repeatItemData ? (React.createElement(React.Fragment, null, repeatItemData?.map((data, index) => (React.createElement(RenderRepeatedBlock, { key: index, repeatContext: data.context, block: data.block }))))) : null,
+        !isEmptyHtmlElement(tag) && !repeatItemData ? (React.createElement(React.Fragment, null,
             React.createElement(TagRef, { ...attributes(), ...actions() },
                 React.createElement(RenderComponent, { ...renderComponentProps() }),
                 childrenWithoutParentComponent()?.map((child) => (React.createElement(RenderBlock, { key: "render-block-" + child.id, block: child, context: childrenContext() }))),

package/dist/react/components/render-inlined-styles.js

@@ -1,14 +1,14 @@
 import * as React from "react";
 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()}>`;
+    }
     const TagRef = tag();
     return (React.createElement(React.Fragment, null, TARGET === "svelte" || TARGET === "qwik" ? (React.createElement(React.Fragment, null,
         React.createElement(TagRef, { dangerouslySetInnerHTML: { __html: props.styles } }))) : (React.createElement(TagRef, null, props.styles))));

package/dist/rsc/components/render-block/block-styles.js

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

package/dist/rsc/components/render-block/render-block.helpers.js

@@ -101,4 +101,19 @@ const getRepeatItemData = ({ block, context }) => {
     }));
     return repeatArray;
 };
-export { getComponent, getRepeatItemData, isEmptyHtmlElement };
+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/dist/rsc/components/render-block/render-block.js

@@ -2,10 +2,9 @@ import * as React from "react";
 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";
-import { getComponent, getRepeatItemData, isEmptyHtmlElement, } from "./render-block.helpers.js";
+import { getComponent, getProxyState, getRepeatItemData, isEmptyHtmlElement, } from "./render-block.helpers.js";
 import RenderRepeatedBlock from "./render-repeated-block";
 import { TARGET } from "../../constants/target.js";
 import { extractTextStyles } from "../../functions/extract-text-styles.js";
@@ -19,9 +18,10 @@ function RenderBlock(props) {
             block: props.block,
             context: props.context,
         }),
-        get tag() {
-            return getBlockTag(state.useBlock);
-        },
+        repeatItemData: getRepeatItemData({
+            block: props.block,
+            context: props.context,
+        }),
         get useBlock() {
             return state.repeatItemData
                 ? props.block
@@ -32,6 +32,7 @@ function RenderBlock(props) {
                     shouldEvaluateBindings: true,
                 });
         },
+        tag: props.block.tagName || "div",
         get canShowBlock() {
             if (checkIsDefined(state.useBlock.hide)) {
                 return !state.useBlock.hide;
@@ -41,26 +42,11 @@ function RenderBlock(props) {
             }
             return true;
         },
-        get 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;
-        },
+        proxyState: getProxyState(props.context),
         get actions() {
             return getBlockActions({
                 block: state.useBlock,
-                state: state.proxyState,
+                state: TARGET === "qwik" ? props.context.state : state.proxyState,
                 context: props.context.context,
             });
         },
@@ -79,28 +65,6 @@ function RenderBlock(props) {
                     : {}),
             };
         },
-        get renderComponentProps() {
-            return {
-                blockChildren: state.useBlock.children ?? [],
-                componentRef: state.component?.component,
-                componentOptions: {
-                    ...getBlockComponentOptions(state.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.
-                     */
-                    ...(!state.component?.noWrap
-                        ? {}
-                        : {
-                            attributes: {
-                                ...state.attributes,
-                                ...state.actions,
-                            },
-                        }),
-                },
-                context: state.childrenContext,
-            };
-        },
         get childrenWithoutParentComponent() {
             /**
              * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
@@ -113,10 +77,6 @@ function RenderBlock(props) {
                 ? state.useBlock.children ?? []
                 : [];
         },
-        repeatItemData: getRepeatItemData({
-            block: props.block,
-            context: props.context,
-        }),
         get childrenContext() {
             const getInheritedTextStyles = () => {
                 if (TARGET !== "reactNative") {
@@ -139,6 +99,28 @@ function RenderBlock(props) {
                 inheritedStyles: getInheritedTextStyles(),
             };
         },
+        get renderComponentProps() {
+            return {
+                blockChildren: state.useBlock.children ?? [],
+                componentRef: state.component?.component,
+                componentOptions: {
+                    ...getBlockComponentOptions(state.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.
+                     */
+                    ...(!state.component?.noWrap
+                        ? {}
+                        : {
+                            attributes: {
+                                ...state.attributes,
+                                ...state.actions,
+                            },
+                        }),
+                },
+                context: state.childrenContext,
+            };
+        },
     };
     const TagRef = state.tag;
     return (React.createElement(React.Fragment, null, state.canShowBlock ? (React.createElement(React.Fragment, null, !state.component?.noWrap ? (React.createElement(React.Fragment, null,

package/dist/rsc/components/render-inlined-styles.js

@@ -3,14 +3,14 @@ import { TARGET } from "../constants/target.js";
 function RenderInlinedStyles(props) {
     const _context = { ...props["_context"] };
     const state = {
-        get injectedStyleScript() {
-            return `<${state.tag}>${props.styles}</${state.tag}>`;
-        },
         get 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";
         },
+        get injectedStyleScript() {
+            return `<${state.tag}>${props.styles}</${state.tag}>`;
+        },
     };
     const TagRef = state.tag;
     return (React.createElement(React.Fragment, null, TARGET === "svelte" || TARGET === "qwik" ? (React.createElement(React.Fragment, null,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react",
   "description": "Builder.io SDK for React",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "main": "src/index.js",
   "type": "module",
   "exports": {

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

@@ -40,6 +40,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/packages/react/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/packages/react/src/components/render-block/render-block.jsx

@@ -3,11 +3,11 @@ import { useState } from "react";
 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";
 import {
   getComponent,
+  getProxyState,
   getRepeatItemData,
   isEmptyHtmlElement,
 } from "./render-block.helpers.js";
@@ -26,9 +26,12 @@ function RenderBlock(props) {
     })
   );
 
-  function tag() {
-    return getBlockTag(useBlock());
-  }
+  const [repeatItemData, setRepeatItemData] = useState(() =>
+    getRepeatItemData({
+      block: props.block,
+      context: props.context,
+    })
+  );
 
   function useBlock() {
     return repeatItemData
@@ -41,6 +44,8 @@ function RenderBlock(props) {
         });
   }
 
+  const [tag, setTag] = useState(() => props.block.tagName || "div");
+
   function canShowBlock() {
     if (checkIsDefined(useBlock().hide)) {
       return !useBlock().hide;
@@ -51,30 +56,14 @@ 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;
-  }
+  const [proxyState, setProxyState] = useState(() =>
+    getProxyState(props.context)
+  );
 
   function actions() {
     return getBlockActions({
       block: useBlock(),
-      state: proxyState(),
+      state: TARGET === "qwik" ? props.context.state : proxyState,
       context: props.context.context,
     });
   }
@@ -95,29 +84,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,
@@ -130,13 +96,6 @@ function RenderBlock(props) {
     return shouldRenderChildrenOutsideRef ? useBlock().children ?? [] : [];
   }
 
-  const [repeatItemData, setRepeatItemData] = useState(() =>
-    getRepeatItemData({
-      block: props.block,
-      context: props.context,
-    })
-  );
-
   function childrenContext() {
     const getInheritedTextStyles = () => {
       if (TARGET !== "reactNative") {
@@ -162,7 +121,30 @@ function RenderBlock(props) {
     };
   }
 
-  const TagRef = tag();
+  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(),
+    };
+  }
+
+  const TagRef = tag;
 
   return (
     <>
@@ -170,12 +152,12 @@ function RenderBlock(props) {
         <>
           {!component?.noWrap ? (
             <>
-              {isEmptyHtmlElement(tag()) ? (
+              {isEmptyHtmlElement(tag) ? (
                 <>
                   <TagRef {...attributes()} {...actions()} />
                 </>
               ) : null}
-              {!isEmptyHtmlElement(tag()) && repeatItemData ? (
+              {!isEmptyHtmlElement(tag) && repeatItemData ? (
                 <>
                   {repeatItemData?.map((data, index) => (
                     <RenderRepeatedBlock
@@ -186,7 +168,7 @@ function RenderBlock(props) {
                   ))}
                 </>
               ) : null}
-              {!isEmptyHtmlElement(tag()) && !repeatItemData ? (
+              {!isEmptyHtmlElement(tag) && !repeatItemData ? (
                 <>
                   <TagRef {...attributes()} {...actions()}>
                     <RenderComponent {...renderComponentProps()} />

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

@@ -2,16 +2,16 @@ import * as React from "react";
 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()}>`;
+  }
+
   const TagRef = tag();
 
   return (

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

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

package/packages/rsc/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/packages/rsc/src/components/render-block/render-block.jsx

@@ -2,11 +2,11 @@ import * as React from "react";
 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";
 import {
   getComponent,
+  getProxyState,
   getRepeatItemData,
   isEmptyHtmlElement,
 } from "./render-block.helpers.js";
@@ -25,9 +25,10 @@ function RenderBlock(props) {
       block: props.block,
       context: props.context,
     }),
-    get tag() {
-      return getBlockTag(state.useBlock);
-    },
+    repeatItemData: getRepeatItemData({
+      block: props.block,
+      context: props.context,
+    }),
     get useBlock() {
       return state.repeatItemData
         ? props.block
@@ -38,6 +39,7 @@ function RenderBlock(props) {
             shouldEvaluateBindings: true,
           });
     },
+    tag: props.block.tagName || "div",
     get canShowBlock() {
       if (checkIsDefined(state.useBlock.hide)) {
         return !state.useBlock.hide;
@@ -47,29 +49,11 @@ function RenderBlock(props) {
       }
       return true;
     },
-    get 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;
-    },
+    proxyState: getProxyState(props.context),
     get actions() {
       return getBlockActions({
         block: state.useBlock,
-        state: state.proxyState,
+        state: TARGET === "qwik" ? props.context.state : state.proxyState,
         context: props.context.context,
       });
     },
@@ -88,28 +72,6 @@ function RenderBlock(props) {
           : {}),
       };
     },
-    get renderComponentProps() {
-      return {
-        blockChildren: state.useBlock.children ?? [],
-        componentRef: state.component?.component,
-        componentOptions: {
-          ...getBlockComponentOptions(state.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.
-           */
-          ...(!state.component?.noWrap
-            ? {}
-            : {
-                attributes: {
-                  ...state.attributes,
-                  ...state.actions,
-                },
-              }),
-        },
-        context: state.childrenContext,
-      };
-    },
     get childrenWithoutParentComponent() {
       /**
        * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
@@ -123,10 +85,6 @@ function RenderBlock(props) {
         ? state.useBlock.children ?? []
         : [];
     },
-    repeatItemData: getRepeatItemData({
-      block: props.block,
-      context: props.context,
-    }),
     get childrenContext() {
       const getInheritedTextStyles = () => {
         if (TARGET !== "reactNative") {
@@ -151,6 +109,28 @@ function RenderBlock(props) {
         inheritedStyles: getInheritedTextStyles(),
       };
     },
+    get renderComponentProps() {
+      return {
+        blockChildren: state.useBlock.children ?? [],
+        componentRef: state.component?.component,
+        componentOptions: {
+          ...getBlockComponentOptions(state.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.
+           */
+          ...(!state.component?.noWrap
+            ? {}
+            : {
+                attributes: {
+                  ...state.attributes,
+                  ...state.actions,
+                },
+              }),
+        },
+        context: state.childrenContext,
+      };
+    },
   };
 
   const TagRef = state.tag;

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

@@ -5,14 +5,14 @@ function RenderInlinedStyles(props) {
   const _context = { ...props["_context"] };
 
   const state = {
-    get injectedStyleScript() {
-      return `<${state.tag}>${props.styles}</${state.tag}>`;
-    },
     get 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";
     },
+    get injectedStyleScript() {
+      return `<${state.tag}>${props.styles}</${state.tag}>`;
+    },
   };
 
   const TagRef = state.tag;

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

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

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

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