@builder.io/sdk-qwik 0.0.13 → 0.0.14

package/README.md

@@ -32,11 +32,7 @@ Add Qwik SDK code to a particular route (such as `src/routes/index.tsx`)
 ```typscript
 import { component$, Resource, useResource$ } from "@builder.io/qwik";
 import { useLocation } from "@builder.io/qwik-city";
-import {
-  getContent,
-  RenderContent,
-  getBuilderSearchParams,
-} from "@builder.io/sdk-qwik";
+import { getContent, RenderContent, getBuilderSearchParams } from "@builder.io/sdk-qwik";
 
 export const BUILDER_PUBLIC_API_KEY = "YOUR_API_KEY_GOES_HERE"; // ggignore
 export default component$(() => {

package/lib/index.qwik.cjs

@@ -162,7 +162,7 @@ function evaluate({ code, context, state, event }) {
   try {
     return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, state, context, event);
   } catch (e) {
-    console.warn("Builder custom code error: ", e);
+    console.warn("Builder custom code error: \n While Evaluating: \n ", useCode, "\n", e.message || e);
   }
 }
 const set = (obj, _path, value) => {
@@ -426,18 +426,27 @@ const EMPTY_HTML_ELEMENTS = [
 const isEmptyHtmlElement = (tagName4) => {
   return typeof tagName4 === "string" && EMPTY_HTML_ELEMENTS.includes(tagName4.toLowerCase());
 };
+function markMutable(value) {
+  return qwik.mutable(value);
+}
+function markPropsMutable(props) {
+  Object.keys(props).forEach((key) => {
+    props[key] = qwik.mutable(props[key]);
+  });
+  return props;
+}
 const RenderComponent = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: props.componentRef ? /* @__PURE__ */ jsxRuntime.jsxs(props.componentRef, {
-      ...props.componentOptions,
+      ...markPropsMutable(props.componentOptions),
       children: [
-        (props.blockChildren || []).map((child) => {
+        (props.blockChildren || []).map(function(child) {
           return /* @__PURE__ */ jsxRuntime.jsx(RenderBlock$1, {
             block: child,
             context: props.context
           }, "render-block-" + child.id);
         }),
-        (props.blockChildren || []).map((child) => {
+        (props.blockChildren || []).map(function(child) {
           return /* @__PURE__ */ jsxRuntime.jsx(BlockStyles$1, {
             block: child,
             context: props.context
@@ -583,7 +592,7 @@ const RenderBlock = (props) => {
     children: shouldWrap(props) ? !isEmptyHtmlElement(tagName2(props)) ? /* @__PURE__ */ jsxRuntime.jsxs(state.tagName, {
       ...attributes(props),
       children: [
-        repeatItemData(props) ? (repeatItemData(props) || []).map((data, index) => {
+        repeatItemData(props) ? (repeatItemData(props) || []).map(function(data, index) {
           return /* @__PURE__ */ jsxRuntime.jsx(RenderRepeatedBlock$1, {
             repeatContext: data.context,
             block: data.block
@@ -592,13 +601,13 @@ const RenderBlock = (props) => {
         !repeatItemData(props) ? /* @__PURE__ */ jsxRuntime.jsx(RenderComponent$1, {
           ...renderComponentProps(props)
         }) : null,
-        (childrenWithoutParentComponent(props) || []).map((child) => {
+        (childrenWithoutParentComponent(props) || []).map(function(child) {
           return /* @__PURE__ */ jsxRuntime.jsx(RenderBlock, {
             block: child,
             context: props.context
           }, "render-block-" + child.id);
         }),
-        (childrenWithoutParentComponent(props) || []).map((child) => {
+        (childrenWithoutParentComponent(props) || []).map(function(child) {
           return /* @__PURE__ */ jsxRuntime.jsx(BlockStyles$1, {
             block: child,
             context: props.context
@@ -665,13 +674,13 @@ const RenderBlocks = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) =
       state
     ]),
     children: [
-      props.blocks ? (props.blocks || []).map((block) => {
+      props.blocks ? (props.blocks || []).map(function(block) {
         return /* @__PURE__ */ jsxRuntime.jsx(RenderBlock$1, {
           block,
           context: builderContext
         }, "render-block-" + block.id);
       }) : null,
-      props.blocks ? (props.blocks || []).map((block) => {
+      props.blocks ? (props.blocks || []).map(function(block) {
         return /* @__PURE__ */ jsxRuntime.jsx(BlockStyles$1, {
           block,
           context: builderContext
@@ -728,7 +737,7 @@ const Columns = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
     class: "builder-columns div-Columns",
     style: columnsCssVars(props, state),
-    children: (props.columns || []).map((column, index) => {
+    children: (props.columns || []).map(function(column, index) {
       return /* @__PURE__ */ jsxRuntime.jsx("div", {
         class: "builder-column div-Columns-2",
         style: {
@@ -737,7 +746,7 @@ const Columns = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
           ...columnCssVars(props, state)
         },
         children: /* @__PURE__ */ jsxRuntime.jsx(RenderBlocks$1, {
-          blocks: column.blocks,
+          blocks: markMutable(column.blocks),
           path: `component.options.columns.${index}.blocks`,
           parent: props.builderBlock.id
         })
@@ -1698,9 +1707,9 @@ const findAndRunScripts = function findAndRunScripts2(props, state, elem) {
 const Embed = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
   const elem = qwik.useRef();
   const state = qwik.useStore({
+    ranInitFn: false,
     scriptsInserted: [],
-    scriptsRun: [],
-    ranInitFn: false
+    scriptsRun: []
   });
   qwik.useWatchQrl(qwik.inlinedQrl(({ track: track2 }) => {
     const [elem2, props2, state2] = qwik.useLexicalScope();
@@ -2520,8 +2529,8 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
   const state = qwik.useStore({
     forceReRenderCount: 0,
     overrideContent: null,
-    update: 0,
-    overrideState: {}
+    overrideState: {},
+    update: 0
   });
   qwik.useContextProvider(stdin_default, qwik.useStore({
     content: (() => {
@@ -2641,7 +2650,7 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
           customFonts: useContent(props, state)?.data?.customFonts
         }) : null,
         /* @__PURE__ */ jsxRuntime.jsx(RenderBlocks$1, {
-          blocks: useContent(props, state)?.data?.blocks
+          blocks: markMutable(useContent(props, state)?.data?.blocks)
         }, state.forceReRenderCount)
       ]
     }) : null
@@ -2690,14 +2699,14 @@ const Symbol$1 = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
     children: /* @__PURE__ */ jsxRuntime.jsx(RenderContent$1, {
       apiKey: builderContext.apiKey,
       context: builderContext.context,
-      customComponents: Object.values(builderContext.registeredComponents),
-      data: {
+      customComponents: markMutable(Object.values(builderContext.registeredComponents)),
+      data: markMutable({
         ...props.symbol?.data,
         ...builderContext.state,
         ...props.symbol?.content?.data?.state
-      },
+      }),
       model: props.symbol?.model,
-      content: state.content
+      content: markMutable(state.content)
     })
   });
 }, "Symbol_component_Dn8mGpai87I"));

package/lib/index.qwik.mjs

@@ -1,4 +1,4 @@
-import { createContext, componentQrl, inlinedQrl, useContextProvider, useStore, useStylesScopedQrl, useContext, useLexicalScope, Slot, Fragment as Fragment$2, useRef, useWatchQrl, useClientEffectQrl, _useMutableProps, useCleanupQrl } from "@builder.io/qwik";
+import { createContext, mutable, componentQrl, inlinedQrl, useContextProvider, useStore, useStylesScopedQrl, useContext, useLexicalScope, Slot, Fragment as Fragment$2, useRef, useWatchQrl, useClientEffectQrl, _useMutableProps, useCleanupQrl } from "@builder.io/qwik";
 import { jsx, Fragment as Fragment$1, jsxs } from "@builder.io/qwik/jsx-runtime";
 const TARGET = "qwik";
 function isBrowser() {
@@ -160,7 +160,7 @@ function evaluate({ code, context, state, event }) {
   try {
     return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, state, context, event);
   } catch (e) {
-    console.warn("Builder custom code error: ", e);
+    console.warn("Builder custom code error: \n While Evaluating: \n ", useCode, "\n", e.message || e);
   }
 }
 const set = (obj, _path, value) => {
@@ -424,18 +424,27 @@ const EMPTY_HTML_ELEMENTS = [
 const isEmptyHtmlElement = (tagName4) => {
   return typeof tagName4 === "string" && EMPTY_HTML_ELEMENTS.includes(tagName4.toLowerCase());
 };
+function markMutable(value) {
+  return mutable(value);
+}
+function markPropsMutable(props) {
+  Object.keys(props).forEach((key) => {
+    props[key] = mutable(props[key]);
+  });
+  return props;
+}
 const RenderComponent = (props) => {
   return /* @__PURE__ */ jsx(Fragment$1, {
     children: props.componentRef ? /* @__PURE__ */ jsxs(props.componentRef, {
-      ...props.componentOptions,
+      ...markPropsMutable(props.componentOptions),
       children: [
-        (props.blockChildren || []).map((child) => {
+        (props.blockChildren || []).map(function(child) {
           return /* @__PURE__ */ jsx(RenderBlock$1, {
             block: child,
             context: props.context
           }, "render-block-" + child.id);
         }),
-        (props.blockChildren || []).map((child) => {
+        (props.blockChildren || []).map(function(child) {
           return /* @__PURE__ */ jsx(BlockStyles$1, {
             block: child,
             context: props.context
@@ -581,7 +590,7 @@ const RenderBlock = (props) => {
     children: shouldWrap(props) ? !isEmptyHtmlElement(tagName2(props)) ? /* @__PURE__ */ jsxs(state.tagName, {
       ...attributes(props),
       children: [
-        repeatItemData(props) ? (repeatItemData(props) || []).map((data, index) => {
+        repeatItemData(props) ? (repeatItemData(props) || []).map(function(data, index) {
           return /* @__PURE__ */ jsx(RenderRepeatedBlock$1, {
             repeatContext: data.context,
             block: data.block
@@ -590,13 +599,13 @@ const RenderBlock = (props) => {
         !repeatItemData(props) ? /* @__PURE__ */ jsx(RenderComponent$1, {
           ...renderComponentProps(props)
         }) : null,
-        (childrenWithoutParentComponent(props) || []).map((child) => {
+        (childrenWithoutParentComponent(props) || []).map(function(child) {
           return /* @__PURE__ */ jsx(RenderBlock, {
             block: child,
             context: props.context
           }, "render-block-" + child.id);
         }),
-        (childrenWithoutParentComponent(props) || []).map((child) => {
+        (childrenWithoutParentComponent(props) || []).map(function(child) {
           return /* @__PURE__ */ jsx(BlockStyles$1, {
             block: child,
             context: props.context
@@ -663,13 +672,13 @@ const RenderBlocks = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
       state
     ]),
     children: [
-      props.blocks ? (props.blocks || []).map((block) => {
+      props.blocks ? (props.blocks || []).map(function(block) {
         return /* @__PURE__ */ jsx(RenderBlock$1, {
           block,
           context: builderContext
         }, "render-block-" + block.id);
       }) : null,
-      props.blocks ? (props.blocks || []).map((block) => {
+      props.blocks ? (props.blocks || []).map(function(block) {
         return /* @__PURE__ */ jsx(BlockStyles$1, {
           block,
           context: builderContext
@@ -726,7 +735,7 @@ const Columns = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   return /* @__PURE__ */ jsx("div", {
     class: "builder-columns div-Columns",
     style: columnsCssVars(props, state),
-    children: (props.columns || []).map((column, index) => {
+    children: (props.columns || []).map(function(column, index) {
       return /* @__PURE__ */ jsx("div", {
         class: "builder-column div-Columns-2",
         style: {
@@ -735,7 +744,7 @@ const Columns = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
           ...columnCssVars(props, state)
         },
         children: /* @__PURE__ */ jsx(RenderBlocks$1, {
-          blocks: column.blocks,
+          blocks: markMutable(column.blocks),
           path: `component.options.columns.${index}.blocks`,
           parent: props.builderBlock.id
         })
@@ -1696,9 +1705,9 @@ const findAndRunScripts = function findAndRunScripts2(props, state, elem) {
 const Embed = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   const elem = useRef();
   const state = useStore({
+    ranInitFn: false,
     scriptsInserted: [],
-    scriptsRun: [],
-    ranInitFn: false
+    scriptsRun: []
   });
   useWatchQrl(inlinedQrl(({ track: track2 }) => {
     const [elem2, props2, state2] = useLexicalScope();
@@ -2518,8 +2527,8 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   const state = useStore({
     forceReRenderCount: 0,
     overrideContent: null,
-    update: 0,
-    overrideState: {}
+    overrideState: {},
+    update: 0
   });
   useContextProvider(stdin_default, useStore({
     content: (() => {
@@ -2639,7 +2648,7 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
           customFonts: useContent(props, state)?.data?.customFonts
         }) : null,
         /* @__PURE__ */ jsx(RenderBlocks$1, {
-          blocks: useContent(props, state)?.data?.blocks
+          blocks: markMutable(useContent(props, state)?.data?.blocks)
         }, state.forceReRenderCount)
       ]
     }) : null
@@ -2688,14 +2697,14 @@ const Symbol$1 = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     children: /* @__PURE__ */ jsx(RenderContent$1, {
       apiKey: builderContext.apiKey,
       context: builderContext.context,
-      customComponents: Object.values(builderContext.registeredComponents),
-      data: {
+      customComponents: markMutable(Object.values(builderContext.registeredComponents)),
+      data: markMutable({
         ...props.symbol?.data,
         ...builderContext.state,
         ...props.symbol?.content?.data?.state
-      },
+      }),
       model: props.symbol?.model,
-      content: state.content
+      content: markMutable(state.content)
     })
   });
 }, "Symbol_component_Dn8mGpai87I"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-qwik",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "Builder.io Qwik SDK",
   "type": "module",
   "main": "./lib/index.qwik.cjs",

package/src/blocks/columns/columns.jsx

@@ -1,6 +1,7 @@
 // GENERATED BY MITOSIS
 
 import RenderBlocks from "../../components/render-blocks";
+import { markMutable } from "../../functions/mark-mutable";
 import { Fragment, component$, h, useStylesScoped$ } from "@builder.io/qwik";
 export const getGutterSize = function getGutterSize(props, state) {
   return typeof props.space === "number" ? props.space || 0 : 20;
@@ -65,7 +66,7 @@ export const Columns = component$((props) => {
       class="builder-columns div-Columns"
       style={columnsCssVars(props, state)}
     >
-      {(props.columns || []).map((column, index) => {
+      {(props.columns || []).map(function (column, index) {
         return (
           <div
             class="builder-column div-Columns-2"
@@ -77,7 +78,7 @@ export const Columns = component$((props) => {
             key={index}
           >
             <RenderBlocks
-              blocks={column.blocks}
+              blocks={markMutable(column.blocks)}
               path={`component.options.columns.${index}.blocks`}
               parent={props.builderBlock.id}
             ></RenderBlocks>

package/src/blocks/embed/embed.jsx

@@ -41,9 +41,9 @@ export const findAndRunScripts = function findAndRunScripts(
 export const Embed = component$((props) => {
   const elem = useRef();
   const state = useStore({
+    ranInitFn: false,
     scriptsInserted: [],
     scriptsRun: [],
-    ranInitFn: false,
   });
   useWatch$(({ track }) => {
     state && track(state, "ranInitFn");

package/src/blocks/form/form.jsx

@@ -244,9 +244,9 @@ export const FormComponent = component$((props) => {
   const builderContext = useContext(BuilderContext);
   const formRef = useRef();
   const state = useStore({
+    formErrorMessage: "",
     formState: "unsubmitted",
     responseData: null,
-    formErrorMessage: "",
   });
   return (
     <form
@@ -263,7 +263,7 @@ export const FormComponent = component$((props) => {
       {...props.attributes}
     >
       {props.builderBlock && props.builderBlock.children
-        ? (props.builderBlock?.children || []).map((block) => {
+        ? (props.builderBlock?.children || []).map(function (block) {
             return (
               <RenderBlock block={block} context={builderContext}></RenderBlock>
             );

package/src/blocks/select/select.jsx

@@ -13,7 +13,7 @@ export const SelectComponent = component$((props) => {
       defaultValue={props.defaultValue}
       name={props.name}
     >
-      {(props.options || []).map((option) => {
+      {(props.options || []).map(function (option) {
         return (
           <option value={option.value}>{option.name || option.value}</option>
         );

package/src/blocks/symbol/symbol.jsx

@@ -3,6 +3,7 @@
 import RenderContent from "../../components/render-content/render-content";
 import BuilderContext from "../../context/builder.context";
 import { getContent } from "../../functions/get-content/index.js";
+import { markMutable } from "../../functions/mark-mutable";
 import {
   Fragment,
   component$,
@@ -60,14 +61,16 @@ export const Symbol = component$((props) => {
       <RenderContent
         apiKey={builderContext.apiKey}
         context={builderContext.context}
-        customComponents={Object.values(builderContext.registeredComponents)}
-        data={{
+        customComponents={markMutable(
+          Object.values(builderContext.registeredComponents)
+        )}
+        data={markMutable({
           ...props.symbol?.data,
           ...builderContext.state,
           ...props.symbol?.content?.data?.state,
-        }}
+        })}
         model={props.symbol?.model}
-        content={state.content}
+        content={markMutable(state.content)}
       ></RenderContent>
     </div>
   );

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

@@ -167,7 +167,10 @@ export const RenderBlock = (props) => {
         !isEmptyHtmlElement(tagName(props, state)) ? (
           <state.tagName {...attributes(props, state)}>
             {repeatItemData(props, state)
-              ? (repeatItemData(props, state) || []).map((data, index) => {
+              ? (repeatItemData(props, state) || []).map(function (
+                  data,
+                  index
+                ) {
                   return (
                     <RenderRepeatedBlock
                       key={index}
@@ -182,28 +185,28 @@ export const RenderBlock = (props) => {
                 {...renderComponentProps(props, state)}
               ></RenderComponent>
             ) : null}
-            {(childrenWithoutParentComponent(props, state) || []).map(
-              (child) => {
-                return (
-                  <RenderBlock
-                    key={"render-block-" + child.id}
-                    block={child}
-                    context={props.context}
-                  ></RenderBlock>
-                );
-              }
-            )}
-            {(childrenWithoutParentComponent(props, state) || []).map(
-              (child) => {
-                return (
-                  <BlockStyles
-                    key={"block-style-" + child.id}
-                    block={child}
-                    context={props.context}
-                  ></BlockStyles>
-                );
-              }
-            )}
+            {(childrenWithoutParentComponent(props, state) || []).map(function (
+              child
+            ) {
+              return (
+                <RenderBlock
+                  key={"render-block-" + child.id}
+                  block={child}
+                  context={props.context}
+                ></RenderBlock>
+              );
+            })}
+            {(childrenWithoutParentComponent(props, state) || []).map(function (
+              child
+            ) {
+              return (
+                <BlockStyles
+                  key={"block-style-" + child.id}
+                  block={child}
+                  context={props.context}
+                ></BlockStyles>
+              );
+            })}
           </state.tagName>
         ) : (
           <state.tagName {...attributes(props, state)}></state.tagName>

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

@@ -1,5 +1,6 @@
 // GENERATED BY MITOSIS
 
+import { markPropsMutable } from "../../functions/mark-mutable.js";
 import BlockStyles from "./block-styles";
 import RenderBlock from "./render-block";
 import { Fragment, h } from "@builder.io/qwik";
@@ -7,8 +8,8 @@ export const RenderComponent = (props) => {
   return (
     <>
       {props.componentRef ? (
-        <props.componentRef {...props.componentOptions}>
-          {(props.blockChildren || []).map((child) => {
+        <props.componentRef {...markPropsMutable(props.componentOptions)}>
+          {(props.blockChildren || []).map(function (child) {
             return (
               <RenderBlock
                 key={"render-block-" + child.id}
@@ -17,7 +18,7 @@ export const RenderComponent = (props) => {
               ></RenderBlock>
             );
           })}
-          {(props.blockChildren || []).map((child) => {
+          {(props.blockChildren || []).map(function (child) {
             return (
               <BlockStyles
                 key={"block-style-" + child.id}

package/src/components/render-blocks.jsx

@@ -62,7 +62,7 @@ export const RenderBlocks = component$((props) => {
       onMouseEnter$={(event) => onMouseEnter(props, state, builderContext)}
     >
       {props.blocks
-        ? (props.blocks || []).map((block) => {
+        ? (props.blocks || []).map(function (block) {
             return (
               <RenderBlock
                 key={"render-block-" + block.id}
@@ -73,7 +73,7 @@ export const RenderBlocks = component$((props) => {
           })
         : null}
       {props.blocks
-        ? (props.blocks || []).map((block) => {
+        ? (props.blocks || []).map(function (block) {
             return (
               <BlockStyles
                 key={"block-style-" + block.id}

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

@@ -9,6 +9,7 @@ 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 { markMutable } from "../../functions/mark-mutable.js";
 import {
   components,
   createRegisterComponentMessage,
@@ -224,8 +225,8 @@ export const RenderContent = component$((props) => {
   const state = useStore({
     forceReRenderCount: 0,
     overrideContent: null,
-    update: 0,
     overrideState: {},
+    update: 0,
   });
   useContextProvider(
     BuilderContext,
@@ -349,7 +350,9 @@ export const RenderContent = component$((props) => {
             ></RenderContentStyles>
           ) : null}
           <RenderBlocks
-            blocks={useContent(props, state, elementRef)?.data?.blocks}
+            blocks={markMutable(
+              useContent(props, state, elementRef)?.data?.blocks
+            )}
             key={state.forceReRenderCount}
           ></RenderBlocks>
         </div>

package/src/functions/evaluate.js

@@ -20,7 +20,7 @@ function evaluate({
   try {
     return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, state, context, event);
   } catch (e) {
-    console.warn("Builder custom code error: ", e);
+    console.warn("Builder custom code error: \n While Evaluating: \n ", useCode, "\n", e.message || e);
   }
 }
 export {

package/src/functions/mark-mutable.js

@@ -0,0 +1,14 @@
+import { mutable } from "@builder.io/qwik";
+function markMutable(value) {
+  return mutable(value);
+}
+function markPropsMutable(props) {
+  Object.keys(props).forEach((key) => {
+    props[key] = mutable(props[key]);
+  });
+  return props;
+}
+export {
+  markMutable,
+  markPropsMutable
+};