@builder.io/sdk-qwik 0.0.10 → 0.0.13

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@builder.io/sdk-qwik",
-  "version": "0.0.10",
+  "version": "0.0.13",
   "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",
@@ -14,15 +15,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.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

@@ -76,7 +76,11 @@ export const Columns = component$((props) => {
             }}
             key={index}
           >
-            <RenderBlocks blocks={column.blocks}></RenderBlocks>
+            <RenderBlocks
+              blocks={column.blocks}
+              path={`component.options.columns.${index}.blocks`}
+              parent={props.builderBlock.id}
+            ></RenderBlocks>
           </div>
         );
       })}
@@ -87,10 +91,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/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/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/symbol/symbol.jsx

@@ -19,9 +19,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;
     /**

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) {
@@ -97,6 +97,7 @@ export const renderComponentProps = function renderComponentProps(
     blockChildren: children(props, state),
     componentRef: componentRef(props, state),
     componentOptions: componentOptions(props, state),
+    context: props.context,
   };
 };
 export const children = function children(props, state) {

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-content/render-content.jsx

@@ -44,6 +44,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 +134,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,
     });
   }
 };
@@ -244,7 +250,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 +271,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
 

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/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/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"
     },

package/src/helpers/cookie.js

@@ -0,0 +1,59 @@
+import { isBrowser } from "../functions/is-browser";
+import { getTopLevelDomain } from "./url";
+const getCookie = ({
+  name,
+  canTrack
+}) => {
+  var _a;
+  try {
+    if (!canTrack) {
+      return void 0;
+    }
+    return (_a = document.cookie.split("; ").find((row) => row.startsWith(`${name}=`))) == null ? void 0 : _a.split("=")[1];
+  } catch (err) {
+    console.debug("[COOKIE] GET error: ", err);
+  }
+};
+const stringifyCookie = (cookie) => cookie.map(([key, value]) => value ? `${key}=${value}` : key).join("; ");
+const SECURE_CONFIG = [
+  ["secure", ""],
+  ["SameSite", "None"]
+];
+const createCookieString = ({
+  name,
+  value,
+  expires
+}) => {
+  const secure = isBrowser() ? location.protocol === "https:" : true;
+  const secureObj = secure ? SECURE_CONFIG : [[]];
+  const expiresObj = expires ? [["expires", expires.toUTCString()]] : [[]];
+  const cookieValue = [
+    [name, value],
+    ...expiresObj,
+    ["path", "/"],
+    ["domain", getTopLevelDomain(window.location.hostname)],
+    ...secureObj
+  ];
+  const cookie = stringifyCookie(cookieValue);
+  return cookie;
+};
+const setCookie = ({
+  name,
+  value,
+  expires,
+  canTrack
+}) => {
+  try {
+    if (!canTrack) {
+      return void 0;
+    }
+    const cookie = createCookieString({ name, value, expires });
+    document.cookie = cookie;
+  } catch (err) {
+    console.warn("[COOKIE] SET error: ", err);
+  }
+};
+export {
+  getCookie,
+  setCookie
+};

package/src/helpers/localStorage.js

@@ -0,0 +1,34 @@
+import { isBrowser } from "../functions/is-browser";
+const getLocalStorage = () => isBrowser() && typeof localStorage !== "undefined" ? localStorage : void 0;
+const getLocalStorageItem = ({
+  key,
+  canTrack
+}) => {
+  var _a;
+  try {
+    if (canTrack) {
+      return (_a = getLocalStorage()) == null ? void 0 : _a.getItem(key);
+    }
+    return void 0;
+  } catch (err) {
+    console.debug("[LocalStorage] GET error: ", err);
+  }
+};
+const setLocalStorageItem = ({
+  key,
+  canTrack,
+  value
+}) => {
+  var _a;
+  try {
+    if (canTrack) {
+      (_a = getLocalStorage()) == null ? void 0 : _a.setItem(key, value);
+    }
+  } catch (err) {
+    console.debug("[LocalStorage] SET error: ", err);
+  }
+};
+export {
+  getLocalStorageItem,
+  setLocalStorageItem
+};

package/src/helpers/nullable.js

@@ -0,0 +1,4 @@
+const checkIsDefined = (maybeT) => maybeT !== null && maybeT !== void 0;
+export {
+  checkIsDefined
+};

package/src/helpers/sessionId.js

@@ -0,0 +1,26 @@
+import { getCookie, setCookie } from "./cookie";
+import { checkIsDefined } from "./nullable";
+import { uuid } from "./uuid";
+const SESSION_LOCAL_STORAGE_KEY = "builderSessionId";
+const getSessionId = ({ canTrack }) => {
+  if (!canTrack) {
+    return void 0;
+  }
+  const sessionId = getCookie({ name: SESSION_LOCAL_STORAGE_KEY, canTrack });
+  if (checkIsDefined(sessionId)) {
+    return sessionId;
+  } else {
+    const newSessionId = createSessionId();
+    setSessionId({ id: newSessionId, canTrack });
+  }
+};
+const createSessionId = () => uuid();
+const setSessionId = ({
+  id,
+  canTrack
+}) => setCookie({ name: SESSION_LOCAL_STORAGE_KEY, value: id, canTrack });
+export {
+  createSessionId,
+  getSessionId,
+  setSessionId
+};

package/src/helpers/time.js

@@ -0,0 +1,5 @@
+const MINUTE_TO_MILLESECONDS_MULTIPLIER = 6e4;
+const getCurrentDatePlusMinutes = (minutes = 30) => new Date(Date.now() + minutes * MINUTE_TO_MILLESECONDS_MULTIPLIER);
+export {
+  getCurrentDatePlusMinutes
+};

package/src/helpers/url.js

@@ -0,0 +1,10 @@
+const getTopLevelDomain = (host) => {
+  const parts = host.split(".");
+  if (parts.length > 2) {
+    return parts.slice(1).join(".");
+  }
+  return host;
+};
+export {
+  getTopLevelDomain
+};

package/src/helpers/url.test.js

@@ -0,0 +1,15 @@
+import { getTopLevelDomain } from "./url.js";
+describe("getTopLevelDomain", () => {
+  test("handles root domain", () => {
+    const output = getTopLevelDomain("example.com");
+    expect(output).toBe("example.com");
+  });
+  test("handles subdomain", () => {
+    const output = getTopLevelDomain("wwww.example.com");
+    expect(output).toBe("example.com");
+  });
+  test("handles subdomain with long suffix", () => {
+    const output = getTopLevelDomain("www.example.co.uk");
+    expect(output).toBe("example.co.uk");
+  });
+});

package/src/helpers/uuid.js

@@ -0,0 +1,13 @@
+function uuidv4() {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
+    const r = Math.random() * 16 | 0, v = c == "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+}
+function uuid() {
+  return uuidv4().replace(/-/g, "");
+}
+export {
+  uuid,
+  uuidv4
+};

package/src/helpers/visitorId.js

@@ -0,0 +1,33 @@
+import { getLocalStorageItem, setLocalStorageItem } from "./localStorage";
+import { checkIsDefined } from "./nullable";
+import { uuid } from "./uuid";
+const VISITOR_LOCAL_STORAGE_KEY = "builderVisitorId";
+const getVisitorId = ({ canTrack }) => {
+  if (!canTrack) {
+    return void 0;
+  }
+  const visitorId = getLocalStorageItem({
+    key: VISITOR_LOCAL_STORAGE_KEY,
+    canTrack
+  });
+  if (checkIsDefined(visitorId)) {
+    return visitorId;
+  } else {
+    const newVisitorId = createVisitorId();
+    setVisitorId({ id: newVisitorId, canTrack });
+  }
+};
+const createVisitorId = () => uuid();
+const setVisitorId = ({
+  id,
+  canTrack
+}) => setLocalStorageItem({
+  key: VISITOR_LOCAL_STORAGE_KEY,
+  value: id,
+  canTrack
+});
+export {
+  createVisitorId,
+  getVisitorId,
+  setVisitorId
+};