@builder.io/sdk-qwik 0.0.5 → 0.0.6

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

@@ -14,20 +14,17 @@ import {
   createRegisterComponentMessage,
 } from "../../functions/register-component.js";
 import { track } from "../../functions/track.js";
-import {
-  registerInsertMenu,
-  setupBrowserForEditing,
-} from "../../scripts/init-editing.js";
 import RenderBlocks from "../render-blocks";
 import RenderContentStyles from "./components/render-styles";
 import {
   Fragment,
-  Host,
+  _useMutableProps,
   component$,
   h,
   useCleanup$,
   useClientEffect$,
   useContextProvider,
+  useHostElement,
   useStore,
   useWatch$,
 } from "@builder.io/qwik";
@@ -187,6 +184,7 @@ export const shouldRenderContentStyles = function shouldRenderContentStyles(
   );
 };
 export const RenderContent = component$((props) => {
+  const hostElement = useHostElement();
   const state = useStore({
     overrideContent: null,
     update: 0,
@@ -215,8 +213,7 @@ export const RenderContent = component$((props) => {
   useClientEffect$(() => {
     if (isBrowser()) {
       if (isEditing()) {
-        registerInsertMenu();
-        setupBrowserForEditing();
+        _useMutableProps(hostElement, true);
         Object.values(allRegisteredComponents(props, state)).forEach(
           (registeredComponent) => {
             const message = createRegisterComponentMessage(registeredComponent);
@@ -292,7 +289,7 @@ export const RenderContent = component$((props) => {
     }
   });
   return (
-    <Host q:host-pseudo="">
+    <>
       {useContent(props, state) ? (
         <div
           onClick$={(event) => onClick(props, state, event)}
@@ -309,7 +306,7 @@ export const RenderContent = component$((props) => {
           ></RenderBlocks>
         </div>
       ) : null}
-    </Host>
+    </>
   );
 });
 export default RenderContent;
@@ -370,13 +367,6 @@ export const COMPONENT = {
       },
       path: "../../functions/is-previewing.js",
     },
-    {
-      imports: {
-        registerInsertMenu: "registerInsertMenu",
-        setupBrowserForEditing: "setupBrowserForEditing",
-      },
-      path: "../../scripts/init-editing.js",
-    },
     {
       imports: {
         components: "components",
@@ -405,7 +395,22 @@ export const COMPONENT = {
   ],
   exports: {},
   inputs: [],
-  meta: {},
+  meta: {
+    useMetadata: {
+      qwik: {
+        component: {
+          useHostElement: true,
+        },
+        replace: {
+          "// QWIK-REPLACE: _useMutableProps":
+            "_useMutableProps(hostElement, true);",
+        },
+        imports: {
+          _useMutableProps: "@builder.io/qwik",
+        },
+      },
+    },
+  },
   refs: {},
   state: {
     useContent:
@@ -441,23 +446,40 @@ export const COMPONENT = {
   children: [
     {
       "@type": "@builder.io/mitosis/node",
-      name: "Host",
+      name: "Show",
       meta: {},
       scope: {},
-      properties: {
-        "q:host-pseudo": "",
+      properties: {},
+      bindings: {
+        when: {
+          code: "useContent(props,state)",
+        },
       },
-      bindings: {},
       children: [
         {
           "@type": "@builder.io/mitosis/node",
-          name: "Show",
+          name: "div",
+          meta: {},
+          scope: {},
+          properties: {
+            _text: "\n      ",
+          },
+          bindings: {},
+          children: [],
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          name: "div",
           meta: {},
           scope: {},
           properties: {},
           bindings: {
-            when: {
-              code: "useContent(props,state)",
+            onClick: {
+              code: "onClick(props,state,event)",
+              arguments: ["event"],
+            },
+            "builder-content-id": {
+              code: "useContent(props,state)?.id",
             },
           },
           children: [
@@ -467,101 +489,37 @@ export const COMPONENT = {
               meta: {},
               scope: {},
               properties: {
-                _text: "\n      ",
+                _text: "\n        ",
               },
               bindings: {},
               children: [],
             },
             {
               "@type": "@builder.io/mitosis/node",
-              name: "div",
+              name: "Show",
               meta: {},
               scope: {},
               properties: {},
               bindings: {
-                onClick: {
-                  code: "onClick(props,state,event)",
-                  arguments: ["event"],
-                },
-                "builder-content-id": {
-                  code: "useContent(props,state)?.id",
+                when: {
+                  code: "shouldRenderContentStyles(props,state)",
                 },
               },
               children: [
                 {
                   "@type": "@builder.io/mitosis/node",
-                  name: "div",
-                  meta: {},
-                  scope: {},
-                  properties: {
-                    _text: "\n        ",
-                  },
-                  bindings: {},
-                  children: [],
-                },
-                {
-                  "@type": "@builder.io/mitosis/node",
-                  name: "Show",
+                  name: "RenderContentStyles",
                   meta: {},
                   scope: {},
                   properties: {},
                   bindings: {
-                    when: {
-                      code: "shouldRenderContentStyles(props,state)",
+                    cssCode: {
+                      code: "useContent(props,state)?.data?.cssCode",
                     },
-                  },
-                  children: [
-                    {
-                      "@type": "@builder.io/mitosis/node",
-                      name: "RenderContentStyles",
-                      meta: {},
-                      scope: {},
-                      properties: {},
-                      bindings: {
-                        cssCode: {
-                          code: "useContent(props,state)?.data?.cssCode",
-                        },
-                        customFonts: {
-                          code: "useContent(props,state)?.data?.customFonts",
-                        },
-                      },
-                      children: [],
+                    customFonts: {
+                      code: "useContent(props,state)?.data?.customFonts",
                     },
-                  ],
-                },
-                {
-                  "@type": "@builder.io/mitosis/node",
-                  name: "div",
-                  meta: {},
-                  scope: {},
-                  properties: {
-                    _text: "\n        ",
                   },
-                  bindings: {},
-                  children: [],
-                },
-                {
-                  "@type": "@builder.io/mitosis/node",
-                  name: "RenderBlocks",
-                  meta: {},
-                  scope: {},
-                  properties: {},
-                  bindings: {
-                    blocks: {
-                      code: "useContent(props,state)?.data?.blocks",
-                    },
-                  },
-                  children: [],
-                },
-                {
-                  "@type": "@builder.io/mitosis/node",
-                  name: "div",
-                  meta: {},
-                  scope: {},
-                  properties: {
-                    _text: "\n      ",
-                  },
-                  bindings: {},
                   children: [],
                 },
               ],
@@ -572,19 +530,54 @@ export const COMPONENT = {
               meta: {},
               scope: {},
               properties: {
-                _text: "\n    ",
+                _text: "\n        ",
+              },
+              bindings: {},
+              children: [],
+            },
+            {
+              "@type": "@builder.io/mitosis/node",
+              name: "RenderBlocks",
+              meta: {},
+              scope: {},
+              properties: {},
+              bindings: {
+                blocks: {
+                  code: "useContent(props,state)?.data?.blocks",
+                },
+              },
+              children: [],
+            },
+            {
+              "@type": "@builder.io/mitosis/node",
+              name: "div",
+              meta: {},
+              scope: {},
+              properties: {
+                _text: "\n      ",
               },
               bindings: {},
               children: [],
             },
           ],
         },
+        {
+          "@type": "@builder.io/mitosis/node",
+          name: "div",
+          meta: {},
+          scope: {},
+          properties: {
+            _text: "\n    ",
+          },
+          bindings: {},
+          children: [],
+        },
       ],
     },
   ],
   hooks: {
     onMount: {
-      code: "\n  if (isBrowser()) {\n    if (isEditing()) {\n      registerInsertMenu();\n      setupBrowserForEditing();\n      Object.values(allRegisteredComponents(props,state)).forEach(registeredComponent => {\n        const message = createRegisterComponentMessage(registeredComponent);\n        window.parent?.postMessage(message, '*');\n      });\n      window.addEventListener('message', processMessage.bind(null,props,state));\n      window.addEventListener('builder:component:stateChangeListenerActivated', emitStateUpdate.bind(null,props,state));\n    }\n\n    if (useContent(props,state) && props.canTrack !== false) {\n      track('impression', {\n        contentId: useContent(props,state).id\n      });\n    } // override normal content in preview mode\n\n\n    if (isPreviewing()) {\n      const searchParams = new URL(location.href).searchParams;\n\n      if (props.model && searchParams.get('builder.preview') === props.model) {\n        const previewApiKey = searchParams.get('apiKey') || searchParams.get('builder.space');\n\n        if (previewApiKey) {\n          getContent({\n            model: props.model,\n            apiKey: previewApiKey\n          }).then(content => {\n            if (content) {\n              state.overrideContent = content;\n            }\n          });\n        }\n      }\n    }\n\n    evaluateJsCode(props,state,);\n    runHttpRequests(props,state,);\n    emitStateUpdate(props,state,);\n  }\n",
+      code: "\n  if (isBrowser()) {\n    if (isEditing()) {\n      _useMutableProps(hostElement, true);\n      Object.values(allRegisteredComponents(props,state)).forEach(registeredComponent => {\n        const message = createRegisterComponentMessage(registeredComponent);\n        window.parent?.postMessage(message, '*');\n      });\n      window.addEventListener('message', processMessage.bind(null,props,state));\n      window.addEventListener('builder:component:stateChangeListenerActivated', emitStateUpdate.bind(null,props,state));\n    }\n\n    if (useContent(props,state) && props.canTrack !== false) {\n      track('impression', {\n        contentId: useContent(props,state).id\n      });\n    } // override normal content in preview mode\n\n\n    if (isPreviewing()) {\n      const searchParams = new URL(location.href).searchParams;\n\n      if (props.model && searchParams.get('builder.preview') === props.model) {\n        const previewApiKey = searchParams.get('apiKey') || searchParams.get('builder.space');\n\n        if (previewApiKey) {\n          getContent({\n            model: props.model,\n            apiKey: previewApiKey\n          }).then(content => {\n            if (content) {\n              state.overrideContent = content;\n            }\n          });\n        }\n      }\n    }\n\n    evaluateJsCode(props,state,);\n    runHttpRequests(props,state,);\n    emitStateUpdate(props,state,);\n  }\n",
     },
     onUpdate: [
       {

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

@@ -1,7 +1,7 @@
 // GENERATED BY MITOSIS
 
 import { TARGET } from "../constants/target.js";
-import { Fragment, Host, component$, h } from "@builder.io/qwik";
+import { Fragment, component$, h } from "@builder.io/qwik";
 export const injectedStyleScript = function injectedStyleScript(props, state) {
   return `<${tagName(props, state)}>${props.styles}</${tagName(props, state)}>`;
 };
@@ -13,13 +13,13 @@ export const tagName = function tagName(props, state) {
 export const RenderInlinedStyles = component$((props) => {
   const state = {};
   return (
-    <Host q:host-pseudo="">
+    <>
       {TARGET === "svelte" ? (
         <div dangerouslySetInnerHTML={injectedStyleScript(props, state)}></div>
       ) : (
         <state.tagName>{props.styles}</state.tagName>
       )}
-    </Host>
+    </>
   );
 });
 export default RenderInlinedStyles;
@@ -46,72 +46,16 @@ export const COMPONENT = {
   children: [
     {
       "@type": "@builder.io/mitosis/node",
-      name: "Host",
-      meta: {},
-      scope: {},
-      properties: {
-        "q:host-pseudo": "",
-      },
-      bindings: {},
-      children: [
-        {
+      name: "Show",
+      meta: {
+        else: {
           "@type": "@builder.io/mitosis/node",
-          name: "Show",
-          meta: {
-            else: {
-              "@type": "@builder.io/mitosis/node",
-              name: "state.tagName",
-              meta: {},
-              scope: {},
-              properties: {},
-              bindings: {},
-              children: [
-                {
-                  "@type": "@builder.io/mitosis/node",
-                  name: "div",
-                  meta: {},
-                  scope: {},
-                  properties: {},
-                  bindings: {
-                    _text: {
-                      code: "props.styles",
-                    },
-                  },
-                  children: [],
-                },
-              ],
-            },
-          },
+          name: "state.tagName",
+          meta: {},
           scope: {},
           properties: {},
-          bindings: {
-            when: {
-              code: "TARGET === 'svelte'",
-            },
-          },
+          bindings: {},
           children: [
-            {
-              "@type": "@builder.io/mitosis/node",
-              name: "div",
-              meta: {},
-              scope: {},
-              properties: {
-                _text: "\n      ",
-              },
-              bindings: {},
-              children: [],
-            },
-            {
-              "@type": "@builder.io/mitosis/node",
-              name: "div",
-              meta: {},
-              scope: {},
-              properties: {
-                _text: "\n      ",
-              },
-              bindings: {},
-              children: [],
-            },
             {
               "@type": "@builder.io/mitosis/node",
               name: "div",
@@ -119,25 +63,69 @@ export const COMPONENT = {
               scope: {},
               properties: {},
               bindings: {
-                innerHTML: {
-                  code: "injectedStyleScript(props,state)",
+                _text: {
+                  code: "props.styles",
                 },
               },
               children: [],
             },
-            {
-              "@type": "@builder.io/mitosis/node",
-              name: "div",
-              meta: {},
-              scope: {},
-              properties: {
-                _text: "\n    ",
-              },
-              bindings: {},
-              children: [],
-            },
           ],
         },
+      },
+      scope: {},
+      properties: {},
+      bindings: {
+        when: {
+          code: "TARGET === 'svelte'",
+        },
+      },
+      children: [
+        {
+          "@type": "@builder.io/mitosis/node",
+          name: "div",
+          meta: {},
+          scope: {},
+          properties: {
+            _text: "\n      ",
+          },
+          bindings: {},
+          children: [],
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          name: "div",
+          meta: {},
+          scope: {},
+          properties: {
+            _text: "\n      ",
+          },
+          bindings: {},
+          children: [],
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          name: "div",
+          meta: {},
+          scope: {},
+          properties: {},
+          bindings: {
+            innerHTML: {
+              code: "injectedStyleScript(props,state)",
+            },
+          },
+          children: [],
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          name: "div",
+          meta: {},
+          scope: {},
+          properties: {
+            _text: "\n    ",
+          },
+          bindings: {},
+          children: [],
+        },
       ],
     },
   ],

package/src/functions/get-content/index.js

@@ -80,9 +80,6 @@ function getAllContent(options) {
   return __async(this, null, function* () {
     const url = generateContentUrl(options);
     const fetch = yield fetch$;
-    if (!fetch) {
-      throw new Error("Please install a fetch polyfill");
-    }
     const content = yield fetch(url.href).then((res) => res.json());
     if (options.testGroups) {
       for (const item of content.results) {

package/src/functions/get-fetch.js

@@ -23,7 +23,8 @@ function getFetch() {
   return __async(this, null, function* () {
     const globalFetch = getGlobalThis().fetch;
     if (typeof globalFetch === "undefined" && typeof global !== "undefined") {
-      return import("node-fetch").then((d) => d.default || d);
+      const nodeFetch = import("node-fetch").then((d) => d.default);
+      return nodeFetch.default || nodeFetch;
     }
     return globalFetch.default || globalFetch;
   });

package/src/scripts/init-editing.js

@@ -1,5 +1,6 @@
 import { TARGET } from "../constants/target.js";
 import { isBrowser } from "../functions/is-browser.js";
+import { isEditing } from "../functions/is-editing.js";
 import { register } from "../functions/register.js";
 const registerInsertMenu = () => {
   register("insertMenu", {
@@ -73,7 +74,7 @@ const setupBrowserForEditing = () => {
     });
   }
 };
-export {
-  registerInsertMenu,
-  setupBrowserForEditing
-};
+if (isEditing()) {
+  registerInsertMenu();
+  setupBrowserForEditing();
+}

package/tsconfig.json

@@ -105,6 +105,6 @@
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true /* Skip type checking all .d.ts files. */
   },
-  "include": ["types-hacks.d.ts", "src"],
+  "include": ["types.d.ts", "src"],
   "exclude": ["src/blocks/form/form.tsx"]
 }

package/types.d.ts

@@ -1,8 +1,13 @@
-declare module '@builder.io/sdk-qwik' {
-  const getContent: (options: {
-    model: string;
-    apiKey: string;
-    userAttributes: Record<string, string>;
-  }) => Promise<any>;
-  const RenderContent: any;
+type Dictionary<T> = Record<string, T>;
+type BuilderContent = any;
+type BuilderBlock = any;
+type RegisteredComponent = any;
+type RegisteredComponents = any;
+declare const builder: { env: 'dev'; apiKey: string };
+// TODO(misko): HACKS to be removed
+declare const get: (obj: any, key: string) => any;
+declare const set: (obj: any, key: string, value: any) => void;
+interface CSSProperties {
+  flexDirection: any;
 }
+declare const BuilderBlocks: (props: any) => any;