@builder.io/sdk-qwik 0.0.9 → 0.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-qwik",
-  "version": "0.0.9",
+  "version": "0.0.12",
   "description": "Builder.io Qwik SDK",
   "type": "module",
   "main": "./lib/index.qwik.cjs",
@@ -14,15 +14,15 @@
   },
   "scripts": {
     "build.lib": "vite build --mode lib",
-    "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag dev --access public"
+    "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag latest --access public"
   },
   "devDependencies": {
-    "@builder.io/qwik": "0.0.40-0-dev20220808233008",
+    "@builder.io/qwik": "0.0.100",
     "@types/node": "latest",
     "typescript": "4.7.4",
     "vite": "3.0.2"
   },
   "peerDependencies": {
-    "@builder.io/qwik": "^0.0.25"
+    "@builder.io/qwik": "^0.0.100"
   }
 }

package/src/blocks/button/button.jsx

@@ -20,178 +20,3 @@ export const Button = component$((props) => {
   );
 });
 export default Button;
-export const COMPONENT = {
-  "@type": "@builder.io/mitosis/component",
-  imports: [],
-  exports: {},
-  inputs: [],
-  meta: {},
-  refs: {},
-  state: {},
-  children: [
-    {
-      "@type": "@builder.io/mitosis/node",
-      name: "Fragment",
-      meta: {},
-      scope: {},
-      properties: {},
-      bindings: {},
-      children: [
-        {
-          "@type": "@builder.io/mitosis/node",
-          name: "div",
-          meta: {},
-          scope: {},
-          properties: {
-            _text: "\n      ",
-          },
-          bindings: {},
-          children: [],
-        },
-        {
-          "@type": "@builder.io/mitosis/node",
-          name: "Show",
-          meta: {
-            else: {
-              "@type": "@builder.io/mitosis/node",
-              name: "span",
-              meta: {},
-              scope: {},
-              properties: {},
-              bindings: {
-                _spread: {
-                  code: "props.attributes",
-                },
-              },
-              children: [
-                {
-                  "@type": "@builder.io/mitosis/node",
-                  name: "div",
-                  meta: {},
-                  scope: {},
-                  properties: {},
-                  bindings: {
-                    _text: {
-                      code: "props.text",
-                    },
-                  },
-                  children: [],
-                },
-              ],
-            },
-          },
-          scope: {},
-          properties: {},
-          bindings: {
-            when: {
-              code: "props.link",
-            },
-          },
-          children: [
-            {
-              "@type": "@builder.io/mitosis/node",
-              name: "div",
-              meta: {},
-              scope: {},
-              properties: {
-                _text: "\n        ",
-              },
-              bindings: {},
-              children: [],
-            },
-            {
-              "@type": "@builder.io/mitosis/node",
-              name: "a",
-              meta: {},
-              scope: {},
-              properties: {
-                role: "button",
-              },
-              bindings: {
-                _spread: {
-                  code: "props.attributes",
-                },
-                href: {
-                  code: "props.link",
-                },
-                target: {
-                  code: "props.openLinkInNewTab ? '_blank' : undefined",
-                },
-              },
-              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: {
-                    _text: {
-                      code: "props.text",
-                    },
-                  },
-                  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: {
-            _text: "\n    ",
-          },
-          bindings: {},
-          children: [],
-        },
-      ],
-    },
-  ],
-  hooks: {},
-  context: {
-    get: {},
-    set: {},
-  },
-  name: "Button",
-  subComponents: [],
-  interfaces: [
-    "export interface ButtonProps {\n  attributes?: any;\n  text?: string;\n  link?: string;\n  openLinkInNewTab?: boolean;\n}",
-  ],
-  propsTypeRef: "ButtonProps",
-};

package/src/blocks/columns/columns.jsx

@@ -1,13 +1,7 @@
 // GENERATED BY MITOSIS
 
 import RenderBlocks from "../../components/render-blocks";
-import {
-  Fragment,
-  Host,
-  component$,
-  h,
-  useStylesScoped$,
-} from "@builder.io/qwik";
+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;
 };
@@ -63,37 +57,32 @@ export const columnCssVars = function columnCssVars(props, state) {
     ),
   };
 };
-export const Columns = component$(
-  (props) => {
-    useStylesScoped$(STYLES);
-    const state = {};
-    return (
-      <Host
-        class="builder-columns div-Columns"
-        style={columnsCssVars(props, state)}
-      >
-        {(props.columns || []).map((column, index) => {
-          return (
-            <div
-              class="builder-column div-Columns-2"
-              style={{
-                width: getColumnCssWidth(props, state, index),
-                marginLeft: `${
-                  index === 0 ? 0 : getGutterSize(props, state)
-                }px`,
-                ...columnCssVars(props, state),
-              }}
-              key={index}
-            >
-              <RenderBlocks blocks={column.blocks}></RenderBlocks>
-            </div>
-          );
-        })}
-      </Host>
-    );
-  },
-  { tagName: "div" }
-);
+export const Columns = component$((props) => {
+  useStylesScoped$(STYLES);
+  const state = {};
+  return (
+    <div
+      class="builder-columns div-Columns"
+      style={columnsCssVars(props, state)}
+    >
+      {(props.columns || []).map((column, index) => {
+        return (
+          <div
+            class="builder-column div-Columns-2"
+            style={{
+              width: getColumnCssWidth(props, state, index),
+              marginLeft: `${index === 0 ? 0 : getGutterSize(props, state)}px`,
+              ...columnCssVars(props, state),
+            }}
+            key={index}
+          >
+            <RenderBlocks blocks={column.blocks}></RenderBlocks>
+          </div>
+        );
+      })}
+    </div>
+  );
+});
 export default Columns;
 export const STYLES = `.div-Columns { 
 display: flex;
@@ -106,162 +95,3 @@ width: var(--column-width-tablet) !important;
 margin-left: var(--column-margin-left-tablet) !important; } }@media (max-width: 639px) { .div-Columns-2 { 
 width: var(--column-width) !important;
 margin-left: var(--column-margin-left) !important; } }`;
-export const COMPONENT = {
-  "@type": "@builder.io/mitosis/component",
-  imports: [
-    {
-      imports: {
-        RenderBlocks: "default",
-      },
-      path: "../../components/render-blocks.lite",
-    },
-  ],
-  exports: {},
-  inputs: [],
-  meta: {},
-  refs: {},
-  state: {
-    getGutterSize:
-      "@builder.io/mitosis/method:getGutterSize() {\n  return typeof props.space === 'number' ? props.space || 0 : 20;\n}",
-    getColumns:
-      "@builder.io/mitosis/method:getColumns() {\n  return props.columns || [];\n}",
-    getWidth:
-      "@builder.io/mitosis/method:getWidth(index: number) {\n  const columns = getColumns(props,state,);\n  return columns[index]?.width || 100 / columns.length;\n}",
-    getColumnCssWidth:
-      "@builder.io/mitosis/method:getColumnCssWidth(index: number) {\n  const columns = getColumns(props,state,);\n  const gutterSize = getGutterSize(props,state,);\n  const subtractWidth = gutterSize * (columns.length - 1) / columns.length;\n  return `calc(${getWidth(props,state,index)}% - ${subtractWidth}px)`;\n}",
-    maybeApplyForTablet:
-      "@builder.io/mitosis/method:maybeApplyForTablet(prop: JSX.CSS['flexDirection']) {\n  const _stackColumnsAt = props.stackColumnsAt || 'tablet';\n\n  return _stackColumnsAt === 'tablet' ? prop : 'inherit';\n}",
-    columnsCssVars:
-      "@builder.io/mitosis/method:get columnsCssVars() {\n  const flexDir = props.stackColumnsAt === 'never' ? 'inherit' : props.reverseColumnsWhenStacked ? 'column-reverse' : 'column';\n  return {\n    '--flex-dir': flexDir,\n    '--flex-dir-tablet': maybeApplyForTablet(props,state,flexDir)\n  };\n}",
-    columnCssVars:
-      "@builder.io/mitosis/method:get columnCssVars() {\n  const width = '100%';\n  const marginLeft = '0';\n  return {\n    '--column-width': width,\n    '--column-margin-left': marginLeft,\n    '--column-width-tablet': maybeApplyForTablet(props,state,width),\n    '--column-margin-left-tablet': maybeApplyForTablet(props,state,marginLeft)\n  };\n}",
-  },
-  children: [
-    {
-      "@type": "@builder.io/mitosis/node",
-      name: "Host",
-      meta: {},
-      scope: {},
-      properties: {
-        class: "builder-columns div-Columns",
-      },
-      bindings: {
-        style: {
-          code: "columnsCssVars(props,state)",
-        },
-      },
-      children: [
-        {
-          "@type": "@builder.io/mitosis/node",
-          name: "div",
-          meta: {},
-          scope: {},
-          properties: {
-            _text: "\n      ",
-          },
-          bindings: {},
-          children: [],
-        },
-        {
-          "@type": "@builder.io/mitosis/node",
-          name: "For",
-          meta: {},
-          scope: {
-            For: ["column", "index"],
-          },
-          properties: {
-            _forName: "column",
-            _indexName: "index",
-          },
-          bindings: {
-            each: {
-              code: "props.columns",
-            },
-          },
-          children: [
-            {
-              "@type": "@builder.io/mitosis/node",
-              name: "div",
-              meta: {},
-              scope: {},
-              properties: {
-                class: "builder-column div-Columns-2",
-              },
-              bindings: {
-                style: {
-                  code: "{\n  width: getColumnCssWidth(props,state,index),\n  marginLeft: `${index === 0 ? 0 : getGutterSize(props,state,)}px`,\n  ...columnCssVars(props,state)\n}",
-                },
-                key: {
-                  code: "index",
-                },
-              },
-              children: [
-                {
-                  "@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: "column.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: {},
-  context: {
-    get: {},
-    set: {},
-  },
-  name: "Columns",
-  subComponents: [],
-  types: [
-    "type Column = {\n  blocks: any; // TODO: Implement this when support for dynamic CSS lands\n\n  width?: number;\n};",
-    "type StackColumnsAt = 'tablet' | 'mobile' | 'never';",
-  ],
-  interfaces: [
-    "export interface ColumnProps {\n  columns?: Column[]; // TODO: Implement this when support for dynamic CSS lands\n\n  space?: number; // TODO: Implement this when support for dynamic CSS lands\n\n  stackColumnsAt?: StackColumnsAt; // TODO: Implement this when support for dynamic CSS lands\n\n  reverseColumnsWhenStacked?: boolean;\n}",
-  ],
-  propsTypeRef: "ColumnProps",
-};

package/src/blocks/custom-code/custom-code.jsx

@@ -2,7 +2,6 @@
 
 import {
   Fragment,
-  Host,
   component$,
   h,
   useClientEffect$,
@@ -53,78 +52,20 @@ export const findAndRunScripts = function findAndRunScripts(
     }
   }
 };
-export const CustomCode = component$(
-  (props) => {
-    const elem = useRef();
-    const state = useStore({ scriptsInserted: [], scriptsRun: [] });
-    useClientEffect$(() => {
-      findAndRunScripts(props, state, elem);
-    });
-    return (
-      <Host
-        ref={elem}
-        class={
-          "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : "")
-        }
-        dangerouslySetInnerHTML={props.code}
-      ></Host>
-    );
-  },
-  { tagName: "div" }
-);
+export const CustomCode = component$((props) => {
+  const elem = useRef();
+  const state = useStore({ scriptsInserted: [], scriptsRun: [] });
+  useClientEffect$(() => {
+    findAndRunScripts(props, state, elem);
+  });
+  return (
+    <div
+      ref={elem}
+      class={
+        "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : "")
+      }
+      dangerouslySetInnerHTML={props.code}
+    ></div>
+  );
+});
 export default CustomCode;
-export const COMPONENT = {
-  "@type": "@builder.io/mitosis/component",
-  imports: [],
-  exports: {},
-  inputs: [],
-  meta: {},
-  refs: {
-    elem: {
-      argument: "",
-      typeParameter: "HTMLDivElement",
-    },
-  },
-  state: {
-    scriptsInserted: [],
-    scriptsRun: [],
-    findAndRunScripts:
-      "@builder.io/mitosis/method:findAndRunScripts() {\n  // TODO: Move this function to standalone one in '@builder.io/utils'\n  if (elem && typeof window !== 'undefined') {\n    const scripts = elem.getElementsByTagName('script');\n\n    for (let i = 0; i < scripts.length; i++) {\n      const script = scripts[i];\n\n      if (script.src) {\n        if (state.scriptsInserted.includes(script.src)) {\n          continue;\n        }\n\n        state.scriptsInserted.push(script.src);\n        const newScript = document.createElement('script');\n        newScript.async = true;\n        newScript.src = script.src;\n        document.head.appendChild(newScript);\n      } else if (!script.type || ['text/javascript', 'application/javascript', 'application/ecmascript'].includes(script.type)) {\n        if (state.scriptsRun.includes(script.innerText)) {\n          continue;\n        }\n\n        try {\n          state.scriptsRun.push(script.innerText);\n          new Function(script.innerText)();\n        } catch (error) {\n          console.warn('`CustomCode`: Error running script:', error);\n        }\n      }\n    }\n  }\n}",
-  },
-  children: [
-    {
-      "@type": "@builder.io/mitosis/node",
-      name: "Host",
-      meta: {},
-      scope: {},
-      properties: {},
-      bindings: {
-        ref: {
-          code: "elem",
-        },
-        class: {
-          code: "'builder-custom-code' + (props.replaceNodes ? ' replace-nodes' : '')",
-        },
-        innerHTML: {
-          code: "props.code",
-        },
-      },
-      children: [],
-    },
-  ],
-  hooks: {
-    onMount: {
-      code: "\n  findAndRunScripts(props,state,elem,);\n",
-    },
-  },
-  context: {
-    get: {},
-    set: {},
-  },
-  name: "CustomCode",
-  subComponents: [],
-  interfaces: [
-    "export interface CustomCodeProps {\n  code: string;\n  replaceNodes?: boolean;\n}",
-  ],
-  propsTypeRef: "CustomCodeProps",
-};

package/src/blocks/embed/embed.jsx

@@ -3,7 +3,6 @@
 import { isJsScript } from "./helpers";
 import {
   Fragment,
-  Host,
   component$,
   h,
   useRef,
@@ -39,92 +38,26 @@ export const findAndRunScripts = function findAndRunScripts(
     }
   }
 };
-export const Embed = component$(
-  (props) => {
-    const elem = useRef();
-    const state = useStore({
-      scriptsInserted: [],
-      scriptsRun: [],
-      ranInitFn: false,
-    });
-    useWatch$(({ track }) => {
-      state && track(state, "ranInitFn");
-      if (elem && !state.ranInitFn) {
-        state.ranInitFn = true;
-        findAndRunScripts(props, state, elem);
-      }
-    });
-    return (
-      <Host
-        class="builder-embed"
-        ref={elem}
-        dangerouslySetInnerHTML={props.content}
-      ></Host>
-    );
-  },
-  { tagName: "div" }
-);
-export default Embed;
-export const COMPONENT = {
-  "@type": "@builder.io/mitosis/component",
-  imports: [
-    {
-      imports: {
-        isJsScript: "isJsScript",
-      },
-      path: "./helpers",
-    },
-  ],
-  exports: {},
-  inputs: [],
-  meta: {},
-  refs: {
-    elem: {
-      argument: "",
-      typeParameter: "HTMLDivElement",
-    },
-  },
-  state: {
+export const Embed = component$((props) => {
+  const elem = useRef();
+  const state = useStore({
     scriptsInserted: [],
     scriptsRun: [],
     ranInitFn: false,
-    findAndRunScripts:
-      "@builder.io/mitosis/method:findAndRunScripts() {\n  const scripts = elem.getElementsByTagName('script');\n\n  for (let i = 0; i < scripts.length; i++) {\n    const script = scripts[i];\n\n    if (script.src && !state.scriptsInserted.includes(script.src)) {\n      state.scriptsInserted.push(script.src);\n      const newScript = document.createElement('script');\n      newScript.async = true;\n      newScript.src = script.src;\n      document.head.appendChild(newScript);\n    } else if (isJsScript(script) && !state.scriptsRun.includes(script.innerText)) {\n      try {\n        state.scriptsRun.push(script.innerText);\n        new Function(script.innerText)();\n      } catch (error) {\n        console.warn('`Embed`: Error running script:', error);\n      }\n    }\n  }\n}",
-  },
-  children: [
-    {
-      "@type": "@builder.io/mitosis/node",
-      name: "Host",
-      meta: {},
-      scope: {},
-      properties: {
-        class: "builder-embed",
-      },
-      bindings: {
-        ref: {
-          code: "elem",
-        },
-        innerHTML: {
-          code: "props.content",
-        },
-      },
-      children: [],
-    },
-  ],
-  hooks: {
-    onUpdate: [
-      {
-        code: "\n  if (elem && !state.ranInitFn) {\n    state.ranInitFn = true;\n    findAndRunScripts(props,state,elem,);\n  }\n",
-        deps: "[elem, state.ranInitFn]",
-      },
-    ],
-  },
-  context: {
-    get: {},
-    set: {},
-  },
-  name: "Embed",
-  subComponents: [],
-  interfaces: ["export interface EmbedProps {\n  content: string;\n}"],
-  propsTypeRef: "EmbedProps",
-};
+  });
+  useWatch$(({ track }) => {
+    state && track(state, "ranInitFn");
+    if (elem && !state.ranInitFn) {
+      state.ranInitFn = true;
+      findAndRunScripts(props, state, elem);
+    }
+  });
+  return (
+    <div
+      class="builder-embed"
+      ref={elem}
+      dangerouslySetInnerHTML={props.content}
+    ></div>
+  );
+});
+export default Embed;