@builder.io/sdk-qwik 0.0.11 → 0.0.12

package/README.md

@@ -32,7 +32,7 @@ Add Qwik SDK code to a particular route (such as `src/routes/index.tsx`)
 ```typscript
 import { component$, Host, Resource, useResource$ } from "@builder.io/qwik";
 import { DocumentHead, useLocation } from "@builder.io/qwik-city";
-import { getContent, RenderContent } 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$(() => {
@@ -41,6 +41,7 @@ export default component$(() => {
     return getContent({
       model: "page",
       apiKey: BUILDER_PUBLIC_API_KEY,
+      options: getBuilderSearchParams(location.query),
       userAttributes: {
         urlPath: location.pathname || "/",
       },
@@ -48,19 +49,17 @@ export default component$(() => {
   });
 
   return (
-    <Host>
-      <Resource
-        resource={builderContentRsrc}
-        onPending={() => <div>Loading...</div>}
-        onResolved={(content) => (
-          <RenderContent
-            model="page"
-            content={content}
-            apiKey={BUILDER_PUBLIC_API_KEY}
-          />
-        )}
-      />
-    </Host>
+    <Resource
+      resource={builderContentRsrc}
+      onPending={() => <div>Loading...</div>}
+      onResolved={(content) => (
+        <RenderContent
+          model="page"
+          content={content}
+          apiKey={BUILDER_PUBLIC_API_KEY}
+        />
+      )}
+    />
   );
 });
 ```

package/lib/index.qwik.cjs

@@ -487,7 +487,7 @@ const component = function component2(props, state) {
   } else
     return ref;
 };
-const componentInfo$9 = function componentInfo(props, state) {
+const componentInfo$a = function componentInfo(props, state) {
   if (component(props)) {
     const { component: _, ...info } = component(props);
     return info;
@@ -520,7 +520,7 @@ const attributes = function attributes2(props, state) {
   };
 };
 const shouldWrap = function shouldWrap2(props, state) {
-  return !componentInfo$9(props)?.noWrap;
+  return !componentInfo$a(props)?.noWrap;
 };
 const componentOptions = function componentOptions2(props, state) {
   return {
@@ -948,7 +948,7 @@ const Button = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
   });
 }, "Button_component_FtjCELjtKF4"));
 const Button$1 = Button;
-const componentInfo$8 = {
+const componentInfo$9 = {
   name: "Core:Button",
   builtIn: true,
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
@@ -990,7 +990,7 @@ function markSerializable(fn) {
   fn.__qwik_serializable__ = true;
   return fn;
 }
-const componentInfo$7 = {
+const componentInfo$8 = {
   name: "Columns",
   builtIn: true,
   inputs: [
@@ -1231,7 +1231,7 @@ const componentInfo$7 = {
     }
   ]
 };
-const componentInfo$6 = {
+const componentInfo$7 = {
   name: "Fragment",
   static: true,
   hidden: true,
@@ -1245,7 +1245,7 @@ const FragmentComponent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((pro
   });
 }, "FragmentComponent_component_FJmqlA66Rjg"));
 const Fragment = FragmentComponent;
-const componentInfo$5 = {
+const componentInfo$6 = {
   name: "Image",
   static: true,
   builtIn: true,
@@ -1394,7 +1394,7 @@ const componentInfo$5 = {
     }
   ]
 };
-const componentInfo$4 = {
+const componentInfo$5 = {
   name: "Core:Section",
   static: true,
   builtIn: true,
@@ -1450,7 +1450,7 @@ const SectionComponent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((prop
   });
 }, "SectionComponent_component_m1CcjCwgHug"));
 const Section = SectionComponent;
-const componentInfo$3 = {
+const componentInfo$4 = {
   name: "Symbol",
   noWrap: true,
   static: true,
@@ -1490,7 +1490,7 @@ const componentInfo$3 = {
     }
   ]
 };
-const componentInfo$2 = {
+const componentInfo$3 = {
   name: "Text",
   static: true,
   builtIn: true,
@@ -1511,7 +1511,7 @@ const componentInfo$2 = {
     textAlign: "center"
   }
 };
-const componentInfo$1 = {
+const componentInfo$2 = {
   name: "Video",
   canHaveChildren: true,
   builtIn: true,
@@ -1624,7 +1624,7 @@ const componentInfo$1 = {
     }
   ]
 };
-const componentInfo2 = {
+const componentInfo$1 = {
   name: "Embed",
   static: true,
   builtIn: true,
@@ -1713,6 +1713,40 @@ const Embed = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
   });
 }, "Embed_component_CP6B8Y76ylw"));
 const embed = Embed;
+const ImgComponent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("img", {
+    style: {
+      objectFit: props.backgroundSize || "cover",
+      objectPosition: props.backgroundPosition || "center"
+    },
+    alt: props.altText,
+    src: props.imgSrc || props.image,
+    ...props.attributes
+  }, isEditing() && props.imgSrc || "default-key");
+}, "ImgComponent_component_b8FkE9OcVN8"));
+const Img = ImgComponent;
+const componentInfo2 = {
+  name: "Raw:Img",
+  hideFromInsertMenu: true,
+  builtIn: true,
+  image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4",
+  inputs: [
+    {
+      name: "image",
+      bubble: true,
+      type: "file",
+      allowedFileTypes: [
+        "jpeg",
+        "jpg",
+        "png",
+        "svg"
+      ],
+      required: true
+    }
+  ],
+  noWrap: true,
+  static: true
+};
 var __defProp$3 = Object.defineProperty;
 var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
 var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
@@ -1737,31 +1771,34 @@ var __spreadValues$3 = (a, b) => {
 const getDefaultRegisteredComponents = () => [
   __spreadValues$3({
     component: Columns$1
-  }, componentInfo$7),
+  }, componentInfo$8),
   __spreadValues$3({
     component: Image$1
-  }, componentInfo$5),
+  }, componentInfo$6),
+  __spreadValues$3({
+    component: Img
+  }, componentInfo2),
   __spreadValues$3({
     component: Text$1
-  }, componentInfo$2),
+  }, componentInfo$3),
   __spreadValues$3({
     component: Video$1
-  }, componentInfo$1),
+  }, componentInfo$2),
   __spreadValues$3({
     component: Symbol$2
-  }, componentInfo$3),
+  }, componentInfo$4),
   __spreadValues$3({
     component: Button$1
-  }, componentInfo$8),
+  }, componentInfo$9),
   __spreadValues$3({
     component: Section
-  }, componentInfo$4),
+  }, componentInfo$5),
   __spreadValues$3({
     component: Fragment
-  }, componentInfo$6),
+  }, componentInfo$7),
   __spreadValues$3({
     component: embed
-  }, componentInfo2)
+  }, componentInfo$1)
 ];
 var __defProp$2 = Object.defineProperty;
 var __defProps$2 = Object.defineProperties;

package/lib/index.qwik.mjs

@@ -485,7 +485,7 @@ const component = function component2(props, state) {
   } else
     return ref;
 };
-const componentInfo$9 = function componentInfo(props, state) {
+const componentInfo$a = function componentInfo(props, state) {
   if (component(props)) {
     const { component: _, ...info } = component(props);
     return info;
@@ -518,7 +518,7 @@ const attributes = function attributes2(props, state) {
   };
 };
 const shouldWrap = function shouldWrap2(props, state) {
-  return !componentInfo$9(props)?.noWrap;
+  return !componentInfo$a(props)?.noWrap;
 };
 const componentOptions = function componentOptions2(props, state) {
   return {
@@ -946,7 +946,7 @@ const Button = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   });
 }, "Button_component_FtjCELjtKF4"));
 const Button$1 = Button;
-const componentInfo$8 = {
+const componentInfo$9 = {
   name: "Core:Button",
   builtIn: true,
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
@@ -988,7 +988,7 @@ function markSerializable(fn) {
   fn.__qwik_serializable__ = true;
   return fn;
 }
-const componentInfo$7 = {
+const componentInfo$8 = {
   name: "Columns",
   builtIn: true,
   inputs: [
@@ -1229,7 +1229,7 @@ const componentInfo$7 = {
     }
   ]
 };
-const componentInfo$6 = {
+const componentInfo$7 = {
   name: "Fragment",
   static: true,
   hidden: true,
@@ -1243,7 +1243,7 @@ const FragmentComponent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   });
 }, "FragmentComponent_component_FJmqlA66Rjg"));
 const Fragment = FragmentComponent;
-const componentInfo$5 = {
+const componentInfo$6 = {
   name: "Image",
   static: true,
   builtIn: true,
@@ -1392,7 +1392,7 @@ const componentInfo$5 = {
     }
   ]
 };
-const componentInfo$4 = {
+const componentInfo$5 = {
   name: "Core:Section",
   static: true,
   builtIn: true,
@@ -1448,7 +1448,7 @@ const SectionComponent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   });
 }, "SectionComponent_component_m1CcjCwgHug"));
 const Section = SectionComponent;
-const componentInfo$3 = {
+const componentInfo$4 = {
   name: "Symbol",
   noWrap: true,
   static: true,
@@ -1488,7 +1488,7 @@ const componentInfo$3 = {
     }
   ]
 };
-const componentInfo$2 = {
+const componentInfo$3 = {
   name: "Text",
   static: true,
   builtIn: true,
@@ -1509,7 +1509,7 @@ const componentInfo$2 = {
     textAlign: "center"
   }
 };
-const componentInfo$1 = {
+const componentInfo$2 = {
   name: "Video",
   canHaveChildren: true,
   builtIn: true,
@@ -1622,7 +1622,7 @@ const componentInfo$1 = {
     }
   ]
 };
-const componentInfo2 = {
+const componentInfo$1 = {
   name: "Embed",
   static: true,
   builtIn: true,
@@ -1711,6 +1711,40 @@ const Embed = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   });
 }, "Embed_component_CP6B8Y76ylw"));
 const embed = Embed;
+const ImgComponent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
+  return /* @__PURE__ */ jsx("img", {
+    style: {
+      objectFit: props.backgroundSize || "cover",
+      objectPosition: props.backgroundPosition || "center"
+    },
+    alt: props.altText,
+    src: props.imgSrc || props.image,
+    ...props.attributes
+  }, isEditing() && props.imgSrc || "default-key");
+}, "ImgComponent_component_b8FkE9OcVN8"));
+const Img = ImgComponent;
+const componentInfo2 = {
+  name: "Raw:Img",
+  hideFromInsertMenu: true,
+  builtIn: true,
+  image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4",
+  inputs: [
+    {
+      name: "image",
+      bubble: true,
+      type: "file",
+      allowedFileTypes: [
+        "jpeg",
+        "jpg",
+        "png",
+        "svg"
+      ],
+      required: true
+    }
+  ],
+  noWrap: true,
+  static: true
+};
 var __defProp$3 = Object.defineProperty;
 var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
 var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
@@ -1735,31 +1769,34 @@ var __spreadValues$3 = (a, b) => {
 const getDefaultRegisteredComponents = () => [
   __spreadValues$3({
     component: Columns$1
-  }, componentInfo$7),
+  }, componentInfo$8),
   __spreadValues$3({
     component: Image$1
-  }, componentInfo$5),
+  }, componentInfo$6),
+  __spreadValues$3({
+    component: Img
+  }, componentInfo2),
   __spreadValues$3({
     component: Text$1
-  }, componentInfo$2),
+  }, componentInfo$3),
   __spreadValues$3({
     component: Video$1
-  }, componentInfo$1),
+  }, componentInfo$2),
   __spreadValues$3({
     component: Symbol$2
-  }, componentInfo$3),
+  }, componentInfo$4),
   __spreadValues$3({
     component: Button$1
-  }, componentInfo$8),
+  }, componentInfo$9),
   __spreadValues$3({
     component: Section
-  }, componentInfo$4),
+  }, componentInfo$5),
   __spreadValues$3({
     component: Fragment
-  }, componentInfo$6),
+  }, componentInfo$7),
   __spreadValues$3({
     component: embed
-  }, componentInfo2)
+  }, componentInfo$1)
 ];
 var __defProp$2 = Object.defineProperty;
 var __defProps$2 = Object.defineProperties;

package/package.json

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

package/src/blocks/img/img.jsx

@@ -9,10 +9,10 @@ export const ImgComponent = component$((props) => {
         objectFit: props.backgroundSize || "cover",
         objectPosition: props.backgroundPosition || "center",
       }}
-      {...props.attributes}
       key={(isEditing() && props.imgSrc) || "default-key"}
       alt={props.altText}
-      src={props.imgSrc}
+      src={props.imgSrc || props.image}
+      {...props.attributes}
     ></img>
   );
 });

package/src/constants/builder-registered-components.js

@@ -32,9 +32,12 @@ import { componentInfo as videoComponentInfo } from "../blocks/video/component-i
 import { default as Video } from "../blocks/video/video.jsx";
 import { componentInfo as embedComponentInfo } from "../blocks/embed/component-info";
 import { default as embed } from "../blocks/embed/embed.jsx";
+import { default as Img } from "../blocks/img/img.jsx";
+import { componentInfo as imgComponentInfo } from "../blocks/img/component-info";
 const getDefaultRegisteredComponents = () => [
   __spreadValues({ component: Columns }, columnsComponentInfo),
   __spreadValues({ component: Image }, imageComponentInfo),
+  __spreadValues({ component: Img }, imgComponentInfo),
   __spreadValues({ component: Text }, textComponentInfo),
   __spreadValues({ component: Video }, videoComponentInfo),
   __spreadValues({ component: Symbol }, symbolComponentInfo),