@builder.io/sdk-qwik 0.0.9 → 0.0.10

package/src/blocks/symbol/symbol.jsx

@@ -5,7 +5,6 @@ import BuilderContext from "../../context/builder.context";
 import { getContent } from "../../functions/get-content/index.js";
 import {
   Fragment,
-  Host,
   component$,
   h,
   useClientEffect$,
@@ -13,199 +12,66 @@ import {
   useStore,
   useWatch$,
 } from "@builder.io/qwik";
-export const Symbol = component$(
-  (props) => {
-    const builderContext = useContext(BuilderContext);
-    const state = useStore({ className: "builder-symbol", content: null });
-    useClientEffect$(() => {
-      state.content = props.symbol?.content;
-    });
-    useWatch$(({ track }) => {
-      props.symbol && track(props.symbol, "content");
-      props.symbol && track(props.symbol, "model");
-      props.symbol && track(props.symbol, "entry");
-      state && track(state, "content");
-      const symbolToUse = props.symbol;
-      /**
-       * If:
-       * - we have a symbol prop
-       * - yet it does not have any content
-       * - and we have not already stored content from before
-       * - and it has a model name
-       *
-       * then we want to re-fetch the symbol content.
-       */
+export const Symbol = component$((props) => {
+  const builderContext = useContext(BuilderContext);
+  const state = useStore({ className: "builder-symbol", content: null });
+  useClientEffect$(() => {
+    state.content = props.symbol?.content;
+  });
+  useWatch$(({ track }) => {
+    props.symbol && track(props.symbol, "content");
+    props.symbol && track(props.symbol, "model");
+    props.symbol && track(props.symbol, "entry");
+    state && track(state, "content");
+    const symbolToUse = props.symbol;
+    /**
+     * If:
+     * - we have a symbol prop
+     * - yet it does not have any content
+     * - and we have not already stored content from before
+     * - and it has a model name
+     *
+     * then we want to re-fetch the symbol content.
+     */
 
-      if (
-        symbolToUse &&
-        !symbolToUse.content &&
-        !state.content &&
-        symbolToUse.model
-      ) {
-        getContent({
-          model: symbolToUse.model,
-          apiKey: builderContext.apiKey,
-          query: {
-            id: symbolToUse.entry,
-          },
-        }).then((response) => {
-          state.content = response;
-        });
-      }
-    });
-    return (
-      <Host
-        {...props.attributes}
-        dataSet={{
-          class: state.className,
+    if (
+      symbolToUse &&
+      !symbolToUse.content &&
+      !state.content &&
+      symbolToUse.model
+    ) {
+      getContent({
+        model: symbolToUse.model,
+        apiKey: builderContext.apiKey,
+        query: {
+          id: symbolToUse.entry,
+        },
+      }).then((response) => {
+        state.content = response;
+      });
+    }
+  });
+  return (
+    <div
+      {...props.attributes}
+      dataSet={{
+        class: state.className,
+      }}
+      class={state.className}
+    >
+      <RenderContent
+        apiKey={builderContext.apiKey}
+        context={builderContext.context}
+        customComponents={Object.values(builderContext.registeredComponents)}
+        data={{
+          ...props.symbol?.data,
+          ...builderContext.state,
+          ...props.symbol?.content?.data?.state,
         }}
-        class={state.className}
-      >
-        <RenderContent
-          apiKey={builderContext.apiKey}
-          context={builderContext.context}
-          customComponents={Object.values(builderContext.registeredComponents)}
-          data={{
-            ...props.symbol?.data,
-            ...builderContext.state,
-            ...props.symbol?.content?.data?.state,
-          }}
-          model={props.symbol?.model}
-          content={state.content}
-        ></RenderContent>
-      </Host>
-    );
-  },
-  { tagName: "div" }
-);
+        model={props.symbol?.model}
+        content={state.content}
+      ></RenderContent>
+    </div>
+  );
+});
 export default Symbol;
-export const COMPONENT = {
-  "@type": "@builder.io/mitosis/component",
-  imports: [
-    {
-      imports: {
-        RenderContent: "default",
-      },
-      path: "../../components/render-content/render-content.lite",
-    },
-    {
-      imports: {
-        BuilderContext: "default",
-      },
-      path: "../../context/builder.context.lite",
-    },
-    {
-      imports: {
-        getContent: "getContent",
-      },
-      path: "../../functions/get-content/index.js",
-    },
-  ],
-  exports: {},
-  inputs: [],
-  meta: {},
-  refs: {},
-  state: {
-    className: "builder-symbol",
-    content: null,
-  },
-  children: [
-    {
-      "@type": "@builder.io/mitosis/node",
-      name: "Host",
-      meta: {},
-      scope: {},
-      properties: {},
-      bindings: {
-        _spread: {
-          code: "props.attributes",
-        },
-        dataSet: {
-          code: "{\n  class: state.className\n}",
-        },
-        class: {
-          code: "state.className",
-        },
-      },
-      children: [
-        {
-          "@type": "@builder.io/mitosis/node",
-          name: "div",
-          meta: {},
-          scope: {},
-          properties: {
-            _text: "\n      ",
-          },
-          bindings: {},
-          children: [],
-        },
-        {
-          "@type": "@builder.io/mitosis/node",
-          name: "RenderContent",
-          meta: {},
-          scope: {},
-          properties: {},
-          bindings: {
-            apiKey: {
-              code: "builderContext.apiKey",
-            },
-            context: {
-              code: "builderContext.context",
-            },
-            customComponents: {
-              code: "Object.values(builderContext.registeredComponents)",
-            },
-            data: {
-              code: "{ ...props.symbol?.data,\n  ...builderContext.state,\n  ...props.symbol?.content?.data?.state\n}",
-            },
-            model: {
-              code: "props.symbol?.model",
-            },
-            content: {
-              code: "state.content",
-            },
-          },
-          children: [],
-        },
-        {
-          "@type": "@builder.io/mitosis/node",
-          name: "div",
-          meta: {},
-          scope: {},
-          properties: {
-            _text: "\n    ",
-          },
-          bindings: {},
-          children: [],
-        },
-      ],
-    },
-  ],
-  hooks: {
-    onMount: {
-      code: "\n  state.content = props.symbol?.content;\n",
-    },
-    onUpdate: [
-      {
-        code: "\n  const symbolToUse = props.symbol;\n  /**\n   * If:\n   * - we have a symbol prop\n   * - yet it does not have any content\n   * - and we have not already stored content from before\n   * - and it has a model name\n   *\n   * then we want to re-fetch the symbol content.\n   */\n\n  if (symbolToUse && !symbolToUse.content && !state.content && symbolToUse.model) {\n    getContent({\n      model: symbolToUse.model,\n      apiKey: builderContext.apiKey!,\n      query: {\n        id: symbolToUse.entry\n      }\n    }).then(response => {\n      state.content = response;\n    });\n  }\n",
-        deps: "[props.symbol?.content, props.symbol?.model, props.symbol?.entry, state.content]",
-      },
-    ],
-  },
-  context: {
-    get: {
-      builderContext: {
-        name: "BuilderContext",
-        path: "../../context/builder.context.lite:default",
-      },
-    },
-    set: {},
-  },
-  name: "Symbol",
-  subComponents: [],
-  interfaces: [
-    "export interface SymbolInfo {\n  model?: string;\n  entry?: string;\n  data?: any;\n  content?: BuilderContent;\n  inline?: boolean;\n  dynamic?: boolean;\n}",
-    "export interface SymbolProps {\n  symbol?: SymbolInfo;\n  dataOnly?: boolean;\n  dynamic?: boolean;\n  builderBlock?: BuilderBlock;\n  attributes?: any;\n  inheritState?: boolean;\n}",
-  ],
-  propsTypeRef: "SymbolProps",
-};

package/src/blocks/text/text.jsx

@@ -1,46 +1,7 @@
 // GENERATED BY MITOSIS
 
-import { Fragment, Host, component$, h } from "@builder.io/qwik";
-export const Text = component$(
-  (props) => {
-    return (
-      <Host class="builder-text" dangerouslySetInnerHTML={props.text}></Host>
-    );
-  },
-  { tagName: "div" }
-);
+import { Fragment, component$, h } from "@builder.io/qwik";
+export const Text = component$((props) => {
+  return <div class="builder-text" dangerouslySetInnerHTML={props.text}></div>;
+});
 export default Text;
-export const COMPONENT = {
-  "@type": "@builder.io/mitosis/component",
-  imports: [],
-  exports: {},
-  inputs: [],
-  meta: {},
-  refs: {},
-  state: {},
-  children: [
-    {
-      "@type": "@builder.io/mitosis/node",
-      name: "Host",
-      meta: {},
-      scope: {},
-      properties: {
-        class: "builder-text",
-      },
-      bindings: {
-        innerHTML: {
-          code: "props.text",
-        },
-      },
-      children: [],
-    },
-  ],
-  hooks: {},
-  context: {
-    get: {},
-    set: {},
-  },
-  name: "Text",
-  subComponents: [],
-  propsTypeRef: "{\n  text: string\n}",
-};

package/src/blocks/textarea/textarea.jsx

@@ -1,65 +1,15 @@
 // GENERATED BY MITOSIS
 
-import { Fragment, Host, component$, h } from "@builder.io/qwik";
-export const Textarea = component$(
-  (props) => {
-    return (
-      <Host
-        {...props.attributes}
-        placeholder={props.placeholder}
-        name={props.name}
-        value={props.value}
-        defaultValue={props.defaultValue}
-      ></Host>
-    );
-  },
-  { tagName: "textarea" }
-);
+import { Fragment, component$, h } from "@builder.io/qwik";
+export const Textarea = component$((props) => {
+  return (
+    <textarea
+      {...props.attributes}
+      placeholder={props.placeholder}
+      name={props.name}
+      value={props.value}
+      defaultValue={props.defaultValue}
+    ></textarea>
+  );
+});
 export default Textarea;
-export const COMPONENT = {
-  "@type": "@builder.io/mitosis/component",
-  imports: [],
-  exports: {},
-  inputs: [],
-  meta: {},
-  refs: {},
-  state: {},
-  children: [
-    {
-      "@type": "@builder.io/mitosis/node",
-      name: "Host",
-      meta: {},
-      scope: {},
-      properties: {},
-      bindings: {
-        _spread: {
-          code: "props.attributes",
-        },
-        placeholder: {
-          code: "props.placeholder",
-        },
-        name: {
-          code: "props.name",
-        },
-        value: {
-          code: "props.value",
-        },
-        defaultValue: {
-          code: "props.defaultValue",
-        },
-      },
-      children: [],
-    },
-  ],
-  hooks: {},
-  context: {
-    get: {},
-    set: {},
-  },
-  name: "Textarea",
-  subComponents: [],
-  interfaces: [
-    "export interface TextareaProps {\n  attributes?: any;\n  name?: string;\n  value?: string;\n  defaultValue?: string;\n  placeholder?: string;\n}",
-  ],
-  propsTypeRef: "TextareaProps",
-};

package/src/blocks/video/video.jsx

@@ -1,6 +1,6 @@
 // GENERATED BY MITOSIS
 
-import { Fragment, Host, component$, h } from "@builder.io/qwik";
+import { Fragment, component$, h } from "@builder.io/qwik";
 export const videoProps = function videoProps(props, state) {
   return {
     ...(props.autoPlay === true
@@ -30,74 +30,24 @@ export const videoProps = function videoProps(props, state) {
       : {}),
   };
 };
-export const Video = component$(
-  (props) => {
-    const state = {};
-    return (
-      <Host
-        {...videoProps(props, state)}
-        style={{
-          width: "100%",
-          height: "100%",
-          ...props.attributes?.style,
-          objectFit: props.fit,
-          objectPosition: props.position,
-          // Hack to get object fit to work as expected and
-          // not have the video overflow
-          borderRadius: 1,
-        }}
-        src={props.video || "no-src"}
-        poster={props.posterImage}
-      ></Host>
-    );
-  },
-  { tagName: "video" }
-);
+export const Video = component$((props) => {
+  const state = {};
+  return (
+    <video
+      {...videoProps(props, state)}
+      style={{
+        width: "100%",
+        height: "100%",
+        ...props.attributes?.style,
+        objectFit: props.fit,
+        objectPosition: props.position,
+        // Hack to get object fit to work as expected and
+        // not have the video overflow
+        borderRadius: 1,
+      }}
+      src={props.video || "no-src"}
+      poster={props.posterImage}
+    ></video>
+  );
+});
 export default Video;
-export const COMPONENT = {
-  "@type": "@builder.io/mitosis/component",
-  imports: [],
-  exports: {},
-  inputs: [],
-  meta: {},
-  refs: {},
-  state: {
-    videoProps:
-      "@builder.io/mitosis/method:get videoProps() {\n  return { ...(props.autoPlay === true ? {\n      autoPlay: true\n    } : {}),\n    ...(props.muted === true ? {\n      muted: true\n    } : {}),\n    ...(props.controls === true ? {\n      controls: true\n    } : {}),\n    ...(props.loop === true ? {\n      loop: true\n    } : {}),\n    ...(props.playsInline === true ? {\n      playsInline: true\n    } : {})\n  };\n}",
-  },
-  children: [
-    {
-      "@type": "@builder.io/mitosis/node",
-      name: "Host",
-      meta: {},
-      scope: {},
-      properties: {},
-      bindings: {
-        _spread: {
-          code: "videoProps(props,state)",
-        },
-        style: {
-          code: "{\n  width: '100%',\n  height: '100%',\n  ...props.attributes?.style,\n  objectFit: props.fit,\n  objectPosition: props.position,\n  // Hack to get object fit to work as expected and\n  // not have the video overflow\n  borderRadius: 1\n}",
-        },
-        src: {
-          code: "props.video || 'no-src'",
-        },
-        poster: {
-          code: "props.posterImage",
-        },
-      },
-      children: [],
-    },
-  ],
-  hooks: {},
-  context: {
-    get: {},
-    set: {},
-  },
-  name: "Video",
-  subComponents: [],
-  interfaces: [
-    "export interface VideoProps {\n  attributes?: any;\n  video?: string;\n  autoPlay?: boolean;\n  controls?: boolean;\n  muted?: boolean;\n  loop?: boolean;\n  playsInline?: boolean;\n  aspectRatio?: number;\n  width?: number;\n  height?: number;\n  fit?: 'contain' | 'cover' | 'fill';\n  position?: 'center' | 'top' | 'left' | 'right' | 'bottom' | 'top left' | 'top right' | 'bottom left' | 'bottom right';\n  posterImage?: string;\n  lazyLoad?: boolean;\n}",
-  ],
-  propsTypeRef: "VideoProps",
-};

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

@@ -58,117 +58,3 @@ export const BlockStyles = (props) => {
   );
 };
 export default BlockStyles;
-export const COMPONENT = {
-  "@type": "@builder.io/mitosis/component",
-  imports: [
-    {
-      imports: {
-        getMaxWidthQueryForSize: "getMaxWidthQueryForSize",
-      },
-      path: "../../constants/device-sizes.js",
-    },
-    {
-      imports: {
-        TARGET: "TARGET",
-      },
-      path: "../../constants/target.js",
-    },
-    {
-      imports: {
-        getProcessedBlock: "getProcessedBlock",
-      },
-      path: "../../functions/get-processed-block.js",
-    },
-    {
-      imports: {
-        convertStyleMaptoCSS: "convertStyleMaptoCSS",
-      },
-      path: "../../helpers/css.js",
-    },
-    {
-      imports: {
-        RenderInlinedStyles: "default",
-      },
-      path: "../render-inlined-styles.lite",
-    },
-  ],
-  exports: {},
-  inputs: [],
-  meta: {
-    useMetadata: {
-      qwik: {
-        component: {
-          isLight: true,
-        },
-      },
-    },
-  },
-  refs: {},
-  state: {
-    useBlock:
-      "@builder.io/mitosis/method:get useBlock() {\n  return getProcessedBlock({\n    block: props.block,\n    state: props.context.state,\n    context: props.context.context,\n    evaluateBindings: true\n  });\n}",
-    css: "@builder.io/mitosis/method:get css() {\n  const styles = useBlock(props,state).responsiveStyles;\n  const largeStyles = styles?.large;\n  const mediumStyles = styles?.medium;\n  const smallStyles = styles?.small;\n  return `\n        ${largeStyles ? `.${useBlock(props,state).id} {${convertStyleMaptoCSS(largeStyles)}}` : ''}\n        ${mediumStyles ? `${getMaxWidthQueryForSize('medium')} {\n              .${useBlock(props,state).id} {${convertStyleMaptoCSS(mediumStyles)}}\n            }` : ''}\n        ${smallStyles ? `${getMaxWidthQueryForSize('small')} {\n              .${useBlock(props,state).id} {${convertStyleMaptoCSS(smallStyles)}}\n            }` : ''}\n      }`;\n}",
-  },
-  children: [
-    {
-      "@type": "@builder.io/mitosis/node",
-      name: "Show",
-      meta: {},
-      scope: {},
-      properties: {},
-      bindings: {
-        when: {
-          code: "TARGET === 'vue2' || TARGET === 'vue3' || TARGET === 'svelte'",
-        },
-      },
-      children: [
-        {
-          "@type": "@builder.io/mitosis/node",
-          name: "div",
-          meta: {},
-          scope: {},
-          properties: {
-            _text: "\n      ",
-          },
-          bindings: {},
-          children: [],
-        },
-        {
-          "@type": "@builder.io/mitosis/node",
-          name: "RenderInlinedStyles",
-          meta: {},
-          scope: {},
-          properties: {},
-          bindings: {
-            styles: {
-              code: "css(props,state)",
-            },
-          },
-          children: [],
-        },
-        {
-          "@type": "@builder.io/mitosis/node",
-          name: "div",
-          meta: {},
-          scope: {},
-          properties: {
-            _text: "\n    ",
-          },
-          bindings: {},
-          children: [],
-        },
-      ],
-    },
-  ],
-  hooks: {},
-  context: {
-    get: {},
-    set: {},
-  },
-  name: "BlockStyles",
-  subComponents: [],
-  types: [
-    "export type BlockStylesProps = {\n  block: BuilderBlock;\n  context: BuilderContextInterface;\n};",
-  ],
-  propsTypeRef: "BlockStylesProps",
-};