@builder.io/sdk-qwik 0.0.11 → 0.0.14

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@builder.io/sdk-qwik",
-  "version": "0.0.11",
+  "version": "0.0.14",
   "description": "Builder.io Qwik SDK",
   "type": "module",
   "main": "./lib/index.qwik.cjs",
   "module": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",
+  "types": "./types.d.ts",
   "exports": {
     ".": {
       "import": "./lib/index.qwik.mjs",
@@ -17,12 +18,12 @@
     "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag latest --access public"
   },
   "devDependencies": {
-    "@builder.io/qwik": "0.0.100",
+    "@builder.io/qwik": "0.0.103",
     "@types/node": "latest",
     "typescript": "4.7.4",
     "vite": "3.0.2"
   },
   "peerDependencies": {
-    "@builder.io/qwik": "^0.0.100"
+    "@builder.io/qwik": "0.0.103"
   }
 }

package/src/blocks/button/button.jsx

@@ -1,7 +1,8 @@
 // GENERATED BY MITOSIS
 
-import { Fragment, component$, h } from "@builder.io/qwik";
+import { Fragment, component$, h, useStylesScoped$ } from "@builder.io/qwik";
 export const Button = component$((props) => {
+  useStylesScoped$(STYLES);
   return (
     <Fragment>
       {props.link ? (
@@ -14,9 +15,13 @@ export const Button = component$((props) => {
           {props.text}
         </a>
       ) : (
-        <span {...props.attributes}>{props.text}</span>
+        <button class="button-Button" {...props.attributes}>
+          {props.text}
+        </button>
       )}
     </Fragment>
   );
 });
 export default Button;
+export const STYLES = `.button-Button { 
+all: unset; }`;

package/src/blocks/columns/columns.jsx

@@ -1,6 +1,7 @@
 // GENERATED BY MITOSIS
 
 import RenderBlocks from "../../components/render-blocks";
+import { markMutable } from "../../functions/mark-mutable";
 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;
@@ -65,7 +66,7 @@ export const Columns = component$((props) => {
       class="builder-columns div-Columns"
       style={columnsCssVars(props, state)}
     >
-      {(props.columns || []).map((column, index) => {
+      {(props.columns || []).map(function (column, index) {
         return (
           <div
             class="builder-column div-Columns-2"
@@ -76,7 +77,11 @@ export const Columns = component$((props) => {
             }}
             key={index}
           >
-            <RenderBlocks blocks={column.blocks}></RenderBlocks>
+            <RenderBlocks
+              blocks={markMutable(column.blocks)}
+              path={`component.options.columns.${index}.blocks`}
+              parent={props.builderBlock.id}
+            ></RenderBlocks>
           </div>
         );
       })}
@@ -87,10 +92,10 @@ export default Columns;
 export const STYLES = `.div-Columns { 
 display: flex;
 align-items: stretch;
-line-height: normal; }@media (max-width: 999px) { .div-Columns { 
+line-height: normal; }@media (max-width: 991px) { .div-Columns { 
 flex-direction: var(--flex-dir-tablet); } }@media (max-width: 639px) { .div-Columns { 
 flex-direction: var(--flex-dir); } }.div-Columns-2 { 
-flex-grow: 1; }@media (max-width: 999px) { .div-Columns-2 { 
+flex-grow: 1; }@media (max-width: 991px) { .div-Columns-2 { 
 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;

package/src/blocks/embed/embed.jsx

@@ -41,9 +41,9 @@ export const findAndRunScripts = function findAndRunScripts(
 export const Embed = component$((props) => {
   const elem = useRef();
   const state = useStore({
+    ranInitFn: false,
     scriptsInserted: [],
     scriptsRun: [],
-    ranInitFn: false,
   });
   useWatch$(({ track }) => {
     state && track(state, "ranInitFn");

package/src/blocks/form/builder-blocks.jsx

@@ -4,7 +4,7 @@ import { Fragment, component$, h } from "@builder.io/qwik";
 export const BuilderBlocks = component$((props) => {
   return (
     <Fragment>
-      NOT YET IMPLEMENTED: <code>BuilderBlocks</code>
+      NOT YET IMPLEMENTED: <code>BuilderBlocks {JSON.stringify(props)}</code>
     </Fragment>
   );
 });

package/src/blocks/form/form.jsx

@@ -244,9 +244,9 @@ export const FormComponent = component$((props) => {
   const builderContext = useContext(BuilderContext);
   const formRef = useRef();
   const state = useStore({
+    formErrorMessage: "",
     formState: "unsubmitted",
     responseData: null,
-    formErrorMessage: "",
   });
   return (
     <form
@@ -263,7 +263,7 @@ export const FormComponent = component$((props) => {
       {...props.attributes}
     >
       {props.builderBlock && props.builderBlock.children
-        ? (props.builderBlock?.children || []).map((block) => {
+        ? (props.builderBlock?.children || []).map(function (block) {
             return (
               <RenderBlock block={block} context={builderContext}></RenderBlock>
             );

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/blocks/select/select.jsx

@@ -13,7 +13,7 @@ export const SelectComponent = component$((props) => {
       defaultValue={props.defaultValue}
       name={props.name}
     >
-      {(props.options || []).map((option) => {
+      {(props.options || []).map(function (option) {
         return (
           <option value={option.value}>{option.name || option.value}</option>
         );

package/src/blocks/symbol/symbol.jsx

@@ -3,6 +3,7 @@
 import RenderContent from "../../components/render-content/render-content";
 import BuilderContext from "../../context/builder.context";
 import { getContent } from "../../functions/get-content/index.js";
+import { markMutable } from "../../functions/mark-mutable";
 import {
   Fragment,
   component$,
@@ -19,9 +20,7 @@ export const Symbol = component$((props) => {
     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");
+    props && track(props, "symbol");
     state && track(state, "content");
     const symbolToUse = props.symbol;
     /**
@@ -62,14 +61,16 @@ export const Symbol = component$((props) => {
       <RenderContent
         apiKey={builderContext.apiKey}
         context={builderContext.context}
-        customComponents={Object.values(builderContext.registeredComponents)}
-        data={{
+        customComponents={markMutable(
+          Object.values(builderContext.registeredComponents)
+        )}
+        data={markMutable({
           ...props.symbol?.data,
           ...builderContext.state,
           ...props.symbol?.content?.data?.state,
-        }}
+        })}
         model={props.symbol?.model}
-        content={state.content}
+        content={markMutable(state.content)}
       ></RenderContent>
     </div>
   );

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

@@ -11,7 +11,7 @@ export const useBlock = function useBlock(props, state) {
     block: props.block,
     state: props.context.state,
     context: props.context.context,
-    evaluateBindings: true,
+    shouldEvaluateBindings: true,
   });
 };
 export const css = function css(props, state) {

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

@@ -17,7 +17,7 @@ export const component = function component(props, state) {
     block: props.block,
     state: props.context.state,
     context: props.context.context,
-    evaluateBindings: false,
+    shouldEvaluateBindings: false,
   }).component?.name;
 
   if (!componentName) {
@@ -57,7 +57,7 @@ export const useBlock = function useBlock(props, state) {
         block: props.block,
         state: props.context.state,
         context: props.context.context,
-        evaluateBindings: true,
+        shouldEvaluateBindings: true,
       });
 };
 export const attributes = function attributes(props, state) {
@@ -167,13 +167,15 @@ export const RenderBlock = (props) => {
         !isEmptyHtmlElement(tagName(props, state)) ? (
           <state.tagName {...attributes(props, state)}>
             {repeatItemData(props, state)
-              ? (repeatItemData(props, state) || []).map((data, index) => {
+              ? (repeatItemData(props, state) || []).map(function (
+                  data,
+                  index
+                ) {
                   return (
                     <RenderRepeatedBlock
                       key={index}
                       repeatContext={data.context}
                       block={data.block}
-                      context={props.context}
                     ></RenderRepeatedBlock>
                   );
                 })
@@ -183,28 +185,28 @@ export const RenderBlock = (props) => {
                 {...renderComponentProps(props, state)}
               ></RenderComponent>
             ) : null}
-            {(childrenWithoutParentComponent(props, state) || []).map(
-              (child) => {
-                return (
-                  <RenderBlock
-                    key={"render-block-" + child.id}
-                    block={child}
-                    context={props.context}
-                  ></RenderBlock>
-                );
-              }
-            )}
-            {(childrenWithoutParentComponent(props, state) || []).map(
-              (child) => {
-                return (
-                  <BlockStyles
-                    key={"block-style-" + child.id}
-                    block={child}
-                    context={props.context}
-                  ></BlockStyles>
-                );
-              }
-            )}
+            {(childrenWithoutParentComponent(props, state) || []).map(function (
+              child
+            ) {
+              return (
+                <RenderBlock
+                  key={"render-block-" + child.id}
+                  block={child}
+                  context={props.context}
+                ></RenderBlock>
+              );
+            })}
+            {(childrenWithoutParentComponent(props, state) || []).map(function (
+              child
+            ) {
+              return (
+                <BlockStyles
+                  key={"block-style-" + child.id}
+                  block={child}
+                  context={props.context}
+                ></BlockStyles>
+              );
+            })}
           </state.tagName>
         ) : (
           <state.tagName {...attributes(props, state)}></state.tagName>

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

@@ -1,5 +1,6 @@
 // GENERATED BY MITOSIS
 
+import { markPropsMutable } from "../../functions/mark-mutable.js";
 import BlockStyles from "./block-styles";
 import RenderBlock from "./render-block";
 import { Fragment, h } from "@builder.io/qwik";
@@ -7,8 +8,8 @@ export const RenderComponent = (props) => {
   return (
     <>
       {props.componentRef ? (
-        <props.componentRef {...props.componentOptions}>
-          {(props.blockChildren || []).map((child) => {
+        <props.componentRef {...markPropsMutable(props.componentOptions)}>
+          {(props.blockChildren || []).map(function (child) {
             return (
               <RenderBlock
                 key={"render-block-" + child.id}
@@ -17,7 +18,7 @@ export const RenderComponent = (props) => {
               ></RenderBlock>
             );
           })}
-          {(props.blockChildren || []).map((child) => {
+          {(props.blockChildren || []).map(function (child) {
             return (
               <BlockStyles
                 key={"block-style-" + child.id}

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

@@ -31,7 +31,10 @@ export const RenderRepeatedBlock = component$((props) => {
     })
   );
   return (
-    <RenderBlock block={props.block} context={props.context}></RenderBlock>
+    <RenderBlock
+      block={props.block}
+      context={props.repeatContext}
+    ></RenderBlock>
   );
 });
 export default RenderRepeatedBlock;

package/src/components/render-blocks.jsx

@@ -62,7 +62,7 @@ export const RenderBlocks = component$((props) => {
       onMouseEnter$={(event) => onMouseEnter(props, state, builderContext)}
     >
       {props.blocks
-        ? (props.blocks || []).map((block) => {
+        ? (props.blocks || []).map(function (block) {
             return (
               <RenderBlock
                 key={"render-block-" + block.id}
@@ -73,7 +73,7 @@ export const RenderBlocks = component$((props) => {
           })
         : null}
       {props.blocks
-        ? (props.blocks || []).map((block) => {
+        ? (props.blocks || []).map(function (block) {
             return (
               <BlockStyles
                 key={"block-style-" + block.id}

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

@@ -9,6 +9,7 @@ import { getFetch } from "../../functions/get-fetch.js";
 import { isBrowser } from "../../functions/is-browser.js";
 import { isEditing } from "../../functions/is-editing.js";
 import { isPreviewing } from "../../functions/is-previewing.js";
+import { markMutable } from "../../functions/mark-mutable.js";
 import {
   components,
   createRegisterComponentMessage,
@@ -44,6 +45,9 @@ export const useContent = function useContent(props, state, elementRef) {
   };
   return mergedContent;
 };
+export const canTrackToUse = function canTrackToUse(props, state, elementRef) {
+  return props.canTrack || true;
+};
 export const contentState = function contentState(props, state, elementRef) {
   return {
     ...props.content?.data?.state,
@@ -131,9 +135,12 @@ export const httpReqsData = function httpReqsData(props, state, elementRef) {
   return {};
 };
 export const onClick = function onClick(props, state, elementRef, _event) {
-  if (useContent(props, state, elementRef) && props.canTrack !== false) {
-    track("click", {
+  if (useContent(props, state, elementRef)) {
+    track({
+      type: "click",
+      canTrack: canTrackToUse(props, state, elementRef),
       contentId: useContent(props, state, elementRef).id,
+      orgId: props.apiKey,
     });
   }
 };
@@ -218,8 +225,8 @@ export const RenderContent = component$((props) => {
   const state = useStore({
     forceReRenderCount: 0,
     overrideContent: null,
-    update: 0,
     overrideState: {},
+    update: 0,
   });
   useContextProvider(
     BuilderContext,
@@ -244,7 +251,7 @@ export const RenderContent = component$((props) => {
   useClientEffect$(() => {
     if (isBrowser()) {
       if (isEditing()) {
-        state.forceReRenderCount++;
+        state.forceReRenderCount = state.forceReRenderCount + 1;
         _useMutableProps(elementRef.current, true);
 
         registerInsertMenu();
@@ -265,9 +272,12 @@ export const RenderContent = component$((props) => {
         );
       }
 
-      if (useContent(props, state, elementRef) && props.canTrack !== false) {
-        track("impression", {
+      if (useContent(props, state, elementRef)) {
+        track({
+          type: "impression",
+          canTrack: canTrackToUse(props, state, elementRef),
           contentId: useContent(props, state, elementRef).id,
+          orgId: props.apiKey,
         });
       } // override normal content in preview mode
 
@@ -340,7 +350,9 @@ export const RenderContent = component$((props) => {
             ></RenderContentStyles>
           ) : null}
           <RenderBlocks
-            blocks={useContent(props, state, elementRef)?.data?.blocks}
+            blocks={markMutable(
+              useContent(props, state, elementRef)?.data?.blocks
+            )}
             key={state.forceReRenderCount}
           ></RenderBlocks>
         </div>

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

@@ -1,7 +1,7 @@
 // GENERATED BY MITOSIS
 
 import { TARGET } from "../constants/target.js";
-import { Fragment, component$, h } from "@builder.io/qwik";
+import { Fragment, h } from "@builder.io/qwik";
 export const injectedStyleScript = function injectedStyleScript(props, state) {
   return `<${tagName(props, state)}>${props.styles}</${tagName(props, state)}>`;
 };
@@ -10,8 +10,9 @@ export const tagName = function tagName(props, state) {
   // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
   return "sty" + "le";
 };
-export const RenderInlinedStyles = component$((props) => {
+export const RenderInlinedStyles = (props) => {
   const state = {};
+  state.tagName = tagName(props, state);
   return (
     <>
       {TARGET === "svelte" ? (
@@ -21,5 +22,5 @@ export const RenderInlinedStyles = component$((props) => {
       )}
     </>
   );
-});
+};
 export default RenderInlinedStyles;

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),

package/src/functions/evaluate.js

@@ -20,7 +20,7 @@ function evaluate({
   try {
     return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, state, context, event);
   } catch (e) {
-    console.warn("Builder custom code error: ", e);
+    console.warn("Builder custom code error: \n While Evaluating: \n ", useCode, "\n", e.message || e);
   }
 }
 export {

package/src/functions/get-processed-block.js

@@ -39,13 +39,17 @@ const evaluateBindings = ({
   }
   return copied;
 };
-function getProcessedBlock(options) {
-  const { state, context } = options;
-  const block = transformBlock(options.block);
-  if (evaluateBindings) {
-    return evaluateBindings({ block, state, context });
+function getProcessedBlock({
+  block,
+  context,
+  shouldEvaluateBindings,
+  state
+}) {
+  const transformedBlock = transformBlock(block);
+  if (shouldEvaluateBindings) {
+    return evaluateBindings({ block: transformedBlock, state, context });
   } else {
-    return block;
+    return transformedBlock;
   }
 }
 export {

package/src/functions/get-processed-block.test.js

@@ -21,7 +21,7 @@ test("Can process bindings", () => {
     block,
     context: {},
     state: { test: "hello" },
-    evaluateBindings: true
+    shouldEvaluateBindings: true
   });
   expect(processed).not.toEqual(block);
   expect((_a = processed.properties) == null ? void 0 : _a.foo).toEqual("baz");

package/src/functions/mark-mutable.js

@@ -0,0 +1,14 @@
+import { mutable } from "@builder.io/qwik";
+function markMutable(value) {
+  return mutable(value);
+}
+function markPropsMutable(props) {
+  Object.keys(props).forEach((key) => {
+    props[key] = mutable(props[key]);
+  });
+  return props;
+}
+export {
+  markMutable,
+  markPropsMutable
+};

package/src/functions/track.js

@@ -1,7 +1,74 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 import { TARGET } from "../constants/target.js";
+import { getSessionId } from "../helpers/sessionId.js";
+import { getVisitorId } from "../helpers/visitorId.js";
 import { isBrowser } from "./is-browser.js";
 import { isEditing } from "./is-editing.js";
-function track(event, properties) {
+const getTrackingEventData = ({ canTrack }) => {
+  if (!canTrack) {
+    return { visitorId: void 0, sessionId: void 0 };
+  }
+  const sessionId = getSessionId({ canTrack });
+  const visitorId = getVisitorId({ canTrack });
+  return {
+    sessionId,
+    visitorId
+  };
+};
+const createEvent = (_a) => {
+  var _b = _a, {
+    type: eventType,
+    canTrack,
+    orgId,
+    contentId
+  } = _b, properties = __objRest(_b, [
+    "type",
+    "canTrack",
+    "orgId",
+    "contentId"
+  ]);
+  return {
+    type: eventType,
+    data: __spreadProps(__spreadValues(__spreadValues({}, properties), getTrackingEventData({ canTrack })), {
+      ownerId: orgId,
+      contentId
+    })
+  };
+};
+function track(eventProps) {
+  if (!eventProps.canTrack) {
+    return;
+  }
   if (isEditing()) {
     return;
   }
@@ -10,7 +77,9 @@ function track(event, properties) {
   }
   return fetch(`https://builder.io/api/v1/track`, {
     method: "POST",
-    body: JSON.stringify({ events: [{ type: event, data: properties }] }),
+    body: JSON.stringify({
+      events: [createEvent(eventProps)]
+    }),
     headers: {
       "content-type": "application/json"
     },