@builder.io/sdk-qwik 0.0.19 → 0.0.20

package/lib/index.qwik.cjs

@@ -272,7 +272,7 @@ const css = function css2(props, state) {
 };
 const BlockStyles = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: TARGET === "vue2" || TARGET === "vue3" || TARGET === "svelte" ? /* @__PURE__ */ jsxRuntime.jsx(RenderInlinedStyles$1, {
+    children: TARGET === "vue2" || TARGET === "vue3" || TARGET === "svelte" || TARGET === "qwik" ? /* @__PURE__ */ jsxRuntime.jsx(RenderInlinedStyles$1, {
       styles: css(props)
     }) : null
   });
@@ -317,22 +317,8 @@ function getBlockProperties(block) {
     ].filter(Boolean).join(" ")
   };
 }
-const convertStyleObject = (obj) => {
-  return obj;
-};
-const sanitizeBlockStyles = (_styles) => {
-};
 function getBlockStyles(block) {
-  const styles = {
-    ...convertStyleObject(block.responsiveStyles?.large),
-    ...block.styles
-  };
-  if (block.responsiveStyles?.medium)
-    styles[getMaxWidthQueryForSize("medium")] = convertStyleObject(block.responsiveStyles?.medium);
-  if (block.responsiveStyles?.small)
-    styles[getMaxWidthQueryForSize("small")] = convertStyleObject(block.responsiveStyles?.small);
-  sanitizeBlockStyles();
-  return styles;
+  return null;
 }
 function getBlockTag(block) {
   return block.tagName || "div";
@@ -430,7 +416,7 @@ const component = function component2(props, state) {
   } else
     return ref;
 };
-const componentInfo$a = function componentInfo(props, state) {
+const componentInfo$b = function componentInfo(props, state) {
   if (component(props)) {
     const { component: _, ...info } = component(props);
     return info;
@@ -463,7 +449,7 @@ const attributes = function attributes2(props, state) {
   };
 };
 const shouldWrap = function shouldWrap2(props, state) {
-  return !componentInfo$a(props)?.noWrap;
+  return !componentInfo$b(props)?.noWrap;
 };
 const componentOptions = function componentOptions2(props, state) {
   return {
@@ -522,8 +508,7 @@ const RenderBlock = (props) => {
   };
   state.tagName = tagName2(props);
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: shouldWrap(props) ? !isEmptyHtmlElement(tagName2(props)) ? /* @__PURE__ */ jsxRuntime.jsxs(state.tagName, {
-      ...attributes(props),
+    children: shouldWrap(props) ? !isEmptyHtmlElement(tagName2(props)) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [
         repeatItemData(props) ? (repeatItemData(props) || []).map(function(data, index) {
           return /* @__PURE__ */ jsxRuntime.jsx(RenderRepeatedBlock$1, {
@@ -531,21 +516,26 @@ const RenderBlock = (props) => {
             block: data.block
           }, index);
         }) : null,
-        !repeatItemData(props) ? /* @__PURE__ */ jsxRuntime.jsx(RenderComponent$1, {
-          ...renderComponentProps(props)
-        }) : null,
-        (childrenWithoutParentComponent(props) || []).map(function(child) {
-          return /* @__PURE__ */ jsxRuntime.jsx(RenderBlock, {
-            block: child,
-            context: props.context
-          }, "render-block-" + child.id);
-        }),
-        (childrenWithoutParentComponent(props) || []).map(function(child) {
-          return /* @__PURE__ */ jsxRuntime.jsx(BlockStyles$1, {
-            block: child,
-            context: props.context
-          }, "block-style-" + child.id);
-        })
+        !repeatItemData(props) ? /* @__PURE__ */ jsxRuntime.jsxs(state.tagName, {
+          ...attributes(props),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(RenderComponent$1, {
+              ...renderComponentProps(props)
+            }),
+            (childrenWithoutParentComponent(props) || []).map(function(child) {
+              return /* @__PURE__ */ jsxRuntime.jsx(RenderBlock, {
+                block: child,
+                context: props.context
+              }, "render-block-" + child.id);
+            }),
+            (childrenWithoutParentComponent(props) || []).map(function(child) {
+              return /* @__PURE__ */ jsxRuntime.jsx(BlockStyles$1, {
+                block: child,
+                context: props.context
+              }, "block-style-" + child.id);
+            })
+          ]
+        }) : null
       ]
     }) : /* @__PURE__ */ jsxRuntime.jsx(state.tagName, {
       ...attributes(props)
@@ -882,7 +872,7 @@ const Video = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
 const Video$1 = Video;
 const Button = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
   qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES, "Button_component_useStylesScoped_a1JZ0Q0Q2Oc"));
-  return /* @__PURE__ */ jsxRuntime.jsx(qwik.Fragment, {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: props.link ? /* @__PURE__ */ jsxRuntime.jsx("a", {
       role: "button",
       ...props.attributes,
@@ -899,7 +889,7 @@ const Button = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
 const Button$1 = Button;
 const STYLES = `.button-Button { 
 all: unset; }`;
-const componentInfo$9 = {
+const componentInfo$a = {
   name: "Core:Button",
   builtIn: true,
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
@@ -941,7 +931,7 @@ function markSerializable(fn) {
   fn.__qwik_serializable__ = true;
   return fn;
 }
-const componentInfo$8 = {
+const componentInfo$9 = {
   name: "Columns",
   builtIn: true,
   inputs: [
@@ -1182,7 +1172,7 @@ const componentInfo$8 = {
     }
   ]
 };
-const componentInfo$7 = {
+const componentInfo$8 = {
   name: "Fragment",
   static: true,
   hidden: true,
@@ -1196,7 +1186,7 @@ const FragmentComponent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((pro
   });
 }, "FragmentComponent_component_T0AypnadAK0"));
 const Fragment = FragmentComponent;
-const componentInfo$6 = {
+const componentInfo$7 = {
   name: "Image",
   static: true,
   builtIn: true,
@@ -1345,7 +1335,7 @@ const componentInfo$6 = {
     }
   ]
 };
-const componentInfo$5 = {
+const componentInfo$6 = {
   name: "Core:Section",
   static: true,
   builtIn: true,
@@ -1401,7 +1391,7 @@ const SectionComponent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((prop
   });
 }, "SectionComponent_component_ZWF9iD5WeLg"));
 const Section = SectionComponent;
-const componentInfo$4 = {
+const componentInfo$5 = {
   name: "Symbol",
   noWrap: true,
   static: true,
@@ -1441,7 +1431,7 @@ const componentInfo$4 = {
     }
   ]
 };
-const componentInfo$3 = {
+const componentInfo$4 = {
   name: "Text",
   static: true,
   builtIn: true,
@@ -1462,7 +1452,7 @@ const componentInfo$3 = {
     textAlign: "center"
   }
 };
-const componentInfo$2 = {
+const componentInfo$3 = {
   name: "Video",
   canHaveChildren: true,
   builtIn: true,
@@ -1575,7 +1565,7 @@ const componentInfo$2 = {
     }
   ]
 };
-const componentInfo$1 = {
+const componentInfo$2 = {
   name: "Embed",
   static: true,
   builtIn: true,
@@ -1619,7 +1609,9 @@ const SCRIPT_MIME_TYPES = [
   "application/ecmascript"
 ];
 const isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
-const findAndRunScripts = function findAndRunScripts2(props, state, elem) {
+const findAndRunScripts$1 = function findAndRunScripts(props, state, elem) {
+  if (!elem)
+    return;
   const scripts = elem.getElementsByTagName("script");
   for (let i = 0; i < scripts.length; i++) {
     const script = scripts[i];
@@ -1650,7 +1642,7 @@ const Embed = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
     state2 && track2(state2, "ranInitFn");
     if (elem2 && !state2.ranInitFn) {
       state2.ranInitFn = true;
-      findAndRunScripts(props2, state2, elem2);
+      findAndRunScripts$1(props2, state2, elem2);
     }
   }, "Embed_component_useWatch_AxgWjrHdlAI", [
     elem,
@@ -1676,7 +1668,7 @@ const ImgComponent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) =
   }, isEditing() && props.imgSrc || "default-key");
 }, "ImgComponent_component_FXvIDBSffO8"));
 const Img = ImgComponent;
-const componentInfo2 = {
+const componentInfo$1 = {
   name: "Raw:Img",
   hideFromInsertMenu: true,
   builtIn: true,
@@ -1698,46 +1690,131 @@ const componentInfo2 = {
   noWrap: true,
   static: true
 };
+const findAndRunScripts2 = function findAndRunScripts3(props, state, elem) {
+  if (elem && typeof window !== "undefined") {
+    const scripts = elem.getElementsByTagName("script");
+    for (let i = 0; i < scripts.length; i++) {
+      const script = scripts[i];
+      if (script.src) {
+        if (state.scriptsInserted.includes(script.src))
+          continue;
+        state.scriptsInserted.push(script.src);
+        const newScript = document.createElement("script");
+        newScript.async = true;
+        newScript.src = script.src;
+        document.head.appendChild(newScript);
+      } else if (!script.type || [
+        "text/javascript",
+        "application/javascript",
+        "application/ecmascript"
+      ].includes(script.type)) {
+        if (state.scriptsRun.includes(script.innerText))
+          continue;
+        try {
+          state.scriptsRun.push(script.innerText);
+          new Function(script.innerText)();
+        } catch (error) {
+          console.warn("`CustomCode`: Error running script:", error);
+        }
+      }
+    }
+  }
+};
+const CustomCode = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
+  const elem = qwik.useRef();
+  const state = qwik.useStore({
+    scriptsInserted: [],
+    scriptsRun: []
+  });
+  qwik.useClientEffectQrl(qwik.inlinedQrl(() => {
+    const [elem2, props2, state2] = qwik.useLexicalScope();
+    findAndRunScripts2(props2, state2, elem2);
+  }, "CustomCode_component_useClientEffect_4w4c951ufB4", [
+    elem,
+    props,
+    state
+  ]));
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    ref: elem,
+    class: "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : ""),
+    dangerouslySetInnerHTML: props.code
+  });
+}, "CustomCode_component_uYOSy7w7Zqw"));
+const customCode = CustomCode;
+const componentInfo2 = {
+  name: "Custom Code",
+  static: true,
+  builtIn: true,
+  requiredPermissions: [
+    "editCode"
+  ],
+  inputs: [
+    {
+      name: "code",
+      type: "html",
+      required: true,
+      defaultValue: "<p>Hello there, I am custom HTML code!</p>",
+      code: true
+    },
+    {
+      name: "replaceNodes",
+      type: "boolean",
+      helperText: "Preserve server rendered dom nodes",
+      advanced: true
+    },
+    {
+      name: "scriptsClientOnly",
+      type: "boolean",
+      defaultValue: false,
+      helperText: "Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads",
+      advanced: true
+    }
+  ]
+};
 const getDefaultRegisteredComponents = () => [
   {
     component: Columns$1,
-    ...componentInfo$8
+    ...componentInfo$9
   },
   {
     component: Image$1,
-    ...componentInfo$6
+    ...componentInfo$7
   },
   {
     component: Img,
-    ...componentInfo2
+    ...componentInfo$1
   },
   {
     component: Text$1,
-    ...componentInfo$3
+    ...componentInfo$4
   },
   {
     component: Video$1,
-    ...componentInfo$2
+    ...componentInfo$3
   },
   {
     component: Symbol$2,
-    ...componentInfo$4
+    ...componentInfo$5
   },
   {
     component: Button$1,
-    ...componentInfo$9
+    ...componentInfo$a
   },
   {
     component: Section,
-    ...componentInfo$5
+    ...componentInfo$6
   },
   {
     component: Fragment,
-    ...componentInfo$7
+    ...componentInfo$8
   },
   {
     component: embed,
-    ...componentInfo$1
+    ...componentInfo$2
+  },
+  {
+    component: customCode,
+    ...componentInfo2
   }
 ];
 function flatten(object, path = null, separator = ".") {
@@ -1797,17 +1874,13 @@ function getGlobalThis() {
     return self;
   return null;
 }
-const NODE_FETCH_URL = () => "node-fetch";
-let fetch$1 = void 0;
 async function getFetch() {
-  if (fetch$1)
-    return fetch$1;
   const globalFetch = getGlobalThis().fetch;
   if (typeof globalFetch === "undefined" && typeof global !== "undefined") {
-    const nodeFetch = Promise.resolve().then(() => /* @__PURE__ */ _interopNamespace(require(NODE_FETCH_URL()))).then((d) => d.default);
-    return fetch$1 = nodeFetch.default || nodeFetch;
+    const nodeFetch = Promise.resolve().then(() => /* @__PURE__ */ _interopNamespace(require("node-fetch"))).then((d) => d.default);
+    return nodeFetch.default || nodeFetch;
   }
-  return fetch$1 = globalFetch.default || globalFetch;
+  return globalFetch.default || globalFetch;
 }
 const handleABTesting = (item, testGroups) => {
   if (item.variations && Object.keys(item.variations).length) {
@@ -2393,6 +2466,7 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: useContent(props, state) ? /* @__PURE__ */ jsxRuntime.jsxs("div", {
       ref: elementRef,
+      "builder-content-id": useContent(props, state)?.id,
       onClick$: qwik.inlinedQrl((event) => {
         const [elementRef2, props2, state2] = qwik.useLexicalScope();
         return onClick2(props2, state2);
@@ -2401,7 +2475,6 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
         props,
         state
       ]),
-      "builder-content-id": useContent(props, state)?.id,
       children: [
         shouldRenderContentStyles(props, state) ? /* @__PURE__ */ jsxRuntime.jsx(RenderContentStyles$1, {
           cssCode: useContent(props, state)?.data?.cssCode,

package/lib/index.qwik.mjs

@@ -1,4 +1,4 @@
-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 { createContext, mutable, componentQrl, inlinedQrl, useContextProvider, useStore, useStylesScopedQrl, useContext, useLexicalScope, Slot, 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() {
@@ -252,7 +252,7 @@ const css = function css2(props, state) {
 };
 const BlockStyles = (props) => {
   return /* @__PURE__ */ jsx(Fragment$1, {
-    children: TARGET === "vue2" || TARGET === "vue3" || TARGET === "svelte" ? /* @__PURE__ */ jsx(RenderInlinedStyles$1, {
+    children: TARGET === "vue2" || TARGET === "vue3" || TARGET === "svelte" || TARGET === "qwik" ? /* @__PURE__ */ jsx(RenderInlinedStyles$1, {
       styles: css(props)
     }) : null
   });
@@ -297,22 +297,8 @@ function getBlockProperties(block) {
     ].filter(Boolean).join(" ")
   };
 }
-const convertStyleObject = (obj) => {
-  return obj;
-};
-const sanitizeBlockStyles = (_styles) => {
-};
 function getBlockStyles(block) {
-  const styles = {
-    ...convertStyleObject(block.responsiveStyles?.large),
-    ...block.styles
-  };
-  if (block.responsiveStyles?.medium)
-    styles[getMaxWidthQueryForSize("medium")] = convertStyleObject(block.responsiveStyles?.medium);
-  if (block.responsiveStyles?.small)
-    styles[getMaxWidthQueryForSize("small")] = convertStyleObject(block.responsiveStyles?.small);
-  sanitizeBlockStyles();
-  return styles;
+  return null;
 }
 function getBlockTag(block) {
   return block.tagName || "div";
@@ -410,7 +396,7 @@ const component = function component2(props, state) {
   } else
     return ref;
 };
-const componentInfo$a = function componentInfo(props, state) {
+const componentInfo$b = function componentInfo(props, state) {
   if (component(props)) {
     const { component: _, ...info } = component(props);
     return info;
@@ -443,7 +429,7 @@ const attributes = function attributes2(props, state) {
   };
 };
 const shouldWrap = function shouldWrap2(props, state) {
-  return !componentInfo$a(props)?.noWrap;
+  return !componentInfo$b(props)?.noWrap;
 };
 const componentOptions = function componentOptions2(props, state) {
   return {
@@ -502,8 +488,7 @@ const RenderBlock = (props) => {
   };
   state.tagName = tagName2(props);
   return /* @__PURE__ */ jsx(Fragment$1, {
-    children: shouldWrap(props) ? !isEmptyHtmlElement(tagName2(props)) ? /* @__PURE__ */ jsxs(state.tagName, {
-      ...attributes(props),
+    children: shouldWrap(props) ? !isEmptyHtmlElement(tagName2(props)) ? /* @__PURE__ */ jsxs(Fragment$1, {
       children: [
         repeatItemData(props) ? (repeatItemData(props) || []).map(function(data, index) {
           return /* @__PURE__ */ jsx(RenderRepeatedBlock$1, {
@@ -511,21 +496,26 @@ const RenderBlock = (props) => {
             block: data.block
           }, index);
         }) : null,
-        !repeatItemData(props) ? /* @__PURE__ */ jsx(RenderComponent$1, {
-          ...renderComponentProps(props)
-        }) : null,
-        (childrenWithoutParentComponent(props) || []).map(function(child) {
-          return /* @__PURE__ */ jsx(RenderBlock, {
-            block: child,
-            context: props.context
-          }, "render-block-" + child.id);
-        }),
-        (childrenWithoutParentComponent(props) || []).map(function(child) {
-          return /* @__PURE__ */ jsx(BlockStyles$1, {
-            block: child,
-            context: props.context
-          }, "block-style-" + child.id);
-        })
+        !repeatItemData(props) ? /* @__PURE__ */ jsxs(state.tagName, {
+          ...attributes(props),
+          children: [
+            /* @__PURE__ */ jsx(RenderComponent$1, {
+              ...renderComponentProps(props)
+            }),
+            (childrenWithoutParentComponent(props) || []).map(function(child) {
+              return /* @__PURE__ */ jsx(RenderBlock, {
+                block: child,
+                context: props.context
+              }, "render-block-" + child.id);
+            }),
+            (childrenWithoutParentComponent(props) || []).map(function(child) {
+              return /* @__PURE__ */ jsx(BlockStyles$1, {
+                block: child,
+                context: props.context
+              }, "block-style-" + child.id);
+            })
+          ]
+        }) : null
       ]
     }) : /* @__PURE__ */ jsx(state.tagName, {
       ...attributes(props)
@@ -862,7 +852,7 @@ const Video = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
 const Video$1 = Video;
 const Button = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   useStylesScopedQrl(inlinedQrl(STYLES, "Button_component_useStylesScoped_a1JZ0Q0Q2Oc"));
-  return /* @__PURE__ */ jsx(Fragment$2, {
+  return /* @__PURE__ */ jsx(Fragment$1, {
     children: props.link ? /* @__PURE__ */ jsx("a", {
       role: "button",
       ...props.attributes,
@@ -879,7 +869,7 @@ const Button = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
 const Button$1 = Button;
 const STYLES = `.button-Button { 
 all: unset; }`;
-const componentInfo$9 = {
+const componentInfo$a = {
   name: "Core:Button",
   builtIn: true,
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
@@ -921,7 +911,7 @@ function markSerializable(fn) {
   fn.__qwik_serializable__ = true;
   return fn;
 }
-const componentInfo$8 = {
+const componentInfo$9 = {
   name: "Columns",
   builtIn: true,
   inputs: [
@@ -1162,7 +1152,7 @@ const componentInfo$8 = {
     }
   ]
 };
-const componentInfo$7 = {
+const componentInfo$8 = {
   name: "Fragment",
   static: true,
   hidden: true,
@@ -1176,7 +1166,7 @@ const FragmentComponent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   });
 }, "FragmentComponent_component_T0AypnadAK0"));
 const Fragment = FragmentComponent;
-const componentInfo$6 = {
+const componentInfo$7 = {
   name: "Image",
   static: true,
   builtIn: true,
@@ -1325,7 +1315,7 @@ const componentInfo$6 = {
     }
   ]
 };
-const componentInfo$5 = {
+const componentInfo$6 = {
   name: "Core:Section",
   static: true,
   builtIn: true,
@@ -1381,7 +1371,7 @@ const SectionComponent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   });
 }, "SectionComponent_component_ZWF9iD5WeLg"));
 const Section = SectionComponent;
-const componentInfo$4 = {
+const componentInfo$5 = {
   name: "Symbol",
   noWrap: true,
   static: true,
@@ -1421,7 +1411,7 @@ const componentInfo$4 = {
     }
   ]
 };
-const componentInfo$3 = {
+const componentInfo$4 = {
   name: "Text",
   static: true,
   builtIn: true,
@@ -1442,7 +1432,7 @@ const componentInfo$3 = {
     textAlign: "center"
   }
 };
-const componentInfo$2 = {
+const componentInfo$3 = {
   name: "Video",
   canHaveChildren: true,
   builtIn: true,
@@ -1555,7 +1545,7 @@ const componentInfo$2 = {
     }
   ]
 };
-const componentInfo$1 = {
+const componentInfo$2 = {
   name: "Embed",
   static: true,
   builtIn: true,
@@ -1599,7 +1589,9 @@ const SCRIPT_MIME_TYPES = [
   "application/ecmascript"
 ];
 const isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
-const findAndRunScripts = function findAndRunScripts2(props, state, elem) {
+const findAndRunScripts$1 = function findAndRunScripts(props, state, elem) {
+  if (!elem)
+    return;
   const scripts = elem.getElementsByTagName("script");
   for (let i = 0; i < scripts.length; i++) {
     const script = scripts[i];
@@ -1630,7 +1622,7 @@ const Embed = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     state2 && track2(state2, "ranInitFn");
     if (elem2 && !state2.ranInitFn) {
       state2.ranInitFn = true;
-      findAndRunScripts(props2, state2, elem2);
+      findAndRunScripts$1(props2, state2, elem2);
     }
   }, "Embed_component_useWatch_AxgWjrHdlAI", [
     elem,
@@ -1656,7 +1648,7 @@ const ImgComponent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   }, isEditing() && props.imgSrc || "default-key");
 }, "ImgComponent_component_FXvIDBSffO8"));
 const Img = ImgComponent;
-const componentInfo2 = {
+const componentInfo$1 = {
   name: "Raw:Img",
   hideFromInsertMenu: true,
   builtIn: true,
@@ -1678,46 +1670,131 @@ const componentInfo2 = {
   noWrap: true,
   static: true
 };
+const findAndRunScripts2 = function findAndRunScripts3(props, state, elem) {
+  if (elem && typeof window !== "undefined") {
+    const scripts = elem.getElementsByTagName("script");
+    for (let i = 0; i < scripts.length; i++) {
+      const script = scripts[i];
+      if (script.src) {
+        if (state.scriptsInserted.includes(script.src))
+          continue;
+        state.scriptsInserted.push(script.src);
+        const newScript = document.createElement("script");
+        newScript.async = true;
+        newScript.src = script.src;
+        document.head.appendChild(newScript);
+      } else if (!script.type || [
+        "text/javascript",
+        "application/javascript",
+        "application/ecmascript"
+      ].includes(script.type)) {
+        if (state.scriptsRun.includes(script.innerText))
+          continue;
+        try {
+          state.scriptsRun.push(script.innerText);
+          new Function(script.innerText)();
+        } catch (error) {
+          console.warn("`CustomCode`: Error running script:", error);
+        }
+      }
+    }
+  }
+};
+const CustomCode = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
+  const elem = useRef();
+  const state = useStore({
+    scriptsInserted: [],
+    scriptsRun: []
+  });
+  useClientEffectQrl(inlinedQrl(() => {
+    const [elem2, props2, state2] = useLexicalScope();
+    findAndRunScripts2(props2, state2, elem2);
+  }, "CustomCode_component_useClientEffect_4w4c951ufB4", [
+    elem,
+    props,
+    state
+  ]));
+  return /* @__PURE__ */ jsx("div", {
+    ref: elem,
+    class: "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : ""),
+    dangerouslySetInnerHTML: props.code
+  });
+}, "CustomCode_component_uYOSy7w7Zqw"));
+const customCode = CustomCode;
+const componentInfo2 = {
+  name: "Custom Code",
+  static: true,
+  builtIn: true,
+  requiredPermissions: [
+    "editCode"
+  ],
+  inputs: [
+    {
+      name: "code",
+      type: "html",
+      required: true,
+      defaultValue: "<p>Hello there, I am custom HTML code!</p>",
+      code: true
+    },
+    {
+      name: "replaceNodes",
+      type: "boolean",
+      helperText: "Preserve server rendered dom nodes",
+      advanced: true
+    },
+    {
+      name: "scriptsClientOnly",
+      type: "boolean",
+      defaultValue: false,
+      helperText: "Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads",
+      advanced: true
+    }
+  ]
+};
 const getDefaultRegisteredComponents = () => [
   {
     component: Columns$1,
-    ...componentInfo$8
+    ...componentInfo$9
   },
   {
     component: Image$1,
-    ...componentInfo$6
+    ...componentInfo$7
   },
   {
     component: Img,
-    ...componentInfo2
+    ...componentInfo$1
   },
   {
     component: Text$1,
-    ...componentInfo$3
+    ...componentInfo$4
   },
   {
     component: Video$1,
-    ...componentInfo$2
+    ...componentInfo$3
   },
   {
     component: Symbol$2,
-    ...componentInfo$4
+    ...componentInfo$5
   },
   {
     component: Button$1,
-    ...componentInfo$9
+    ...componentInfo$a
   },
   {
     component: Section,
-    ...componentInfo$5
+    ...componentInfo$6
   },
   {
     component: Fragment,
-    ...componentInfo$7
+    ...componentInfo$8
   },
   {
     component: embed,
-    ...componentInfo$1
+    ...componentInfo$2
+  },
+  {
+    component: customCode,
+    ...componentInfo2
   }
 ];
 function flatten(object, path = null, separator = ".") {
@@ -1777,17 +1854,13 @@ function getGlobalThis() {
     return self;
   return null;
 }
-const NODE_FETCH_URL = () => "node-fetch";
-let fetch$1 = void 0;
 async function getFetch() {
-  if (fetch$1)
-    return fetch$1;
   const globalFetch = getGlobalThis().fetch;
   if (typeof globalFetch === "undefined" && typeof global !== "undefined") {
-    const nodeFetch = import(NODE_FETCH_URL()).then((d) => d.default);
-    return fetch$1 = nodeFetch.default || nodeFetch;
+    const nodeFetch = import("node-fetch").then((d) => d.default);
+    return nodeFetch.default || nodeFetch;
   }
-  return fetch$1 = globalFetch.default || globalFetch;
+  return globalFetch.default || globalFetch;
 }
 const handleABTesting = (item, testGroups) => {
   if (item.variations && Object.keys(item.variations).length) {
@@ -2373,6 +2446,7 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   return /* @__PURE__ */ jsx(Fragment$1, {
     children: useContent(props, state) ? /* @__PURE__ */ jsxs("div", {
       ref: elementRef,
+      "builder-content-id": useContent(props, state)?.id,
       onClick$: inlinedQrl((event) => {
         const [elementRef2, props2, state2] = useLexicalScope();
         return onClick2(props2, state2);
@@ -2381,7 +2455,6 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
         props,
         state
       ]),
-      "builder-content-id": useContent(props, state)?.id,
       children: [
         shouldRenderContentStyles(props, state) ? /* @__PURE__ */ jsx(RenderContentStyles$1, {
           cssCode: useContent(props, state)?.data?.cssCode,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-qwik",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "Builder.io Qwik SDK",
   "type": "module",
   "main": "./lib/index.qwik.cjs",
@@ -15,16 +15,17 @@
   },
   "scripts": {
     "typecheck": "tsc --noEmit",
-    "build.lib": "tsc && vite build --mode lib",
-    "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag latest --access public"
+    "build": "tsc && vite build --mode lib",
+    "release:patch": "yarn run build && npm version patch --no-git-tag-version && npm publish --access public",
+    "release:dev": "yarn run build && npm version prerelease --no-git-tag-version && npm publish --tag latest --access public"
   },
   "devDependencies": {
-    "@builder.io/qwik": "BuilderIO/qwik-build#commit=08a6883d163f8eea8dc1710357b63b7ac01b2bef",
+    "@builder.io/qwik": "0.0.108-dev20220913220811",
     "@types/node": "latest",
-    "typescript": "4.7.4",
-    "vite": "3.0.2"
+    "typescript": "^4",
+    "vite": "^3.0.4"
   },
   "peerDependencies": {
-    "@builder.io/qwik": "0.0.108"
+    "@builder.io/qwik": "0.0.108-dev20220913220811"
   }
 }

package/types/components/render-block/render-block.d.ts

@@ -8,7 +8,7 @@ export declare type RenderBlockProps = {
 export declare const component: (props: any, state: any) => any;
 export declare const componentInfo: (props: any, state: any) => any;
 export declare const componentRef: (props: any, state: any) => any;
-export declare const tagName: (props: any, state: any) => import("../../functions/get-block-tag.js").TagName;
+export declare const tagName: (props: any, state: any) => string;
 export declare const useBlock: (props: any, state: any) => any;
 export declare const attributes: (props: any, state: any) => {
     style: any;

package/types/components/render-content/render-content.d.ts

@@ -1,6 +1,6 @@
 import { BuilderRenderContext, RegisteredComponent } from "../../context/types.js";
 import { BuilderContent } from "../../types/builder-content.js";
-import { Nullable } from "../../types/typescript.js";
+import type { Nullable } from "../../types/typescript.js";
 export declare type RenderContentProps = {
     content?: Nullable<BuilderContent>;
     model?: string;

package/types/functions/get-block-tag.d.ts

@@ -1,10 +1,3 @@
-import { JSX } from '@builder.io/mitosis/jsx-runtime';
 import { BuilderBlock } from '../types/builder-block.js';
-declare type JSXElementConstructor<P> = (props: P) => JSX.Element | null;
-export declare type TagName = string | JSXElementConstructor<any>;
-/**
- * The `JSXElementConstructor` type is here to account for a react-native override, where we have a
- * `View` tag wrapping every component.
- */
+export declare type TagName = string;
 export declare function getBlockTag(block: BuilderBlock): TagName;
-export {};

package/types/functions/register-component.d.ts

@@ -8,7 +8,7 @@ export declare const components: RegisteredComponent[];
  * @deprecated.  Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.
  */
 export declare function registerComponent(component: any, info: ComponentInfo): void;
-export declare const createRegisterComponentMessage: ({ component: _, ...info }: RegisteredComponent) => {
+export declare const createRegisterComponentMessage: ({ component, ...info }: RegisteredComponent) => {
     type: string;
     data: ComponentInfo;
 };