@builder.io/sdk-qwik 0.0.23 → 0.0.25

package/lib/index.qwik.mjs

@@ -1,4 +1,4 @@
-import { createContext, inlinedQrl, useLexicalScope, mutable, componentQrl, useContextProvider, useStore, useStylesScopedQrl, useContext, Slot, useRef, useWatchQrl, useClientEffectQrl, _useMutableProps, useCleanupQrl } from "@builder.io/qwik";
+import { createContext, inlinedQrl, useLexicalScope, mutable, componentQrl, useContextProvider, useStore, useStylesScopedQrl, useContext, Slot, useRef, useWatchQrl, useClientEffectQrl, useCleanupQrl } from "@builder.io/qwik";
 import { jsx, Fragment as Fragment$1, jsxs } from "@builder.io/qwik/jsx-runtime";
 const TARGET = "qwik";
 function isBrowser() {
@@ -309,8 +309,7 @@ function getBlockProperties(block) {
 const convertStyleObject = (obj) => {
   return obj;
 };
-const sanitizeBlockStyles = (_styles) => {
-};
+const sanitizeBlockStyles = (styles) => styles;
 const getStyleForTarget = (styles) => {
   switch (TARGET) {
     case "reactNative":
@@ -335,8 +334,8 @@ function getBlockStyles(block) {
   if (!block.responsiveStyles)
     return {};
   const styles = getStyleForTarget(block.responsiveStyles);
-  sanitizeBlockStyles();
-  return styles;
+  const newStyles = sanitizeBlockStyles(styles);
+  return newStyles;
 }
 function getBlockTag(block) {
   return block.tagName || "div";
@@ -526,15 +525,27 @@ const RenderBlock = (props) => {
   };
   state.tagName = tagName2(props);
   return /* @__PURE__ */ jsx(Fragment$1, {
-    children: shouldWrap(props) ? !isEmptyHtmlElement(tagName2(props)) ? /* @__PURE__ */ jsxs(Fragment$1, {
+    children: shouldWrap(props) ? /* @__PURE__ */ jsxs(Fragment$1, {
       children: [
-        repeatItemData(props) ? (repeatItemData(props) || []).map(function(data, index) {
+        isEmptyHtmlElement(tagName2(props)) ? /* @__PURE__ */ jsx(state.tagName, {
+          ...attributes(props)
+        }) : null,
+        !isEmptyHtmlElement(tagName2(props)) && TARGET === "vue2" && repeatItemData(props) ? /* @__PURE__ */ jsx("div", {
+          class: "vue2-root-element-workaround",
+          children: (repeatItemData(props) || []).map(function(data, index) {
+            return /* @__PURE__ */ jsx(RenderRepeatedBlock$1, {
+              repeatContext: data.context,
+              block: data.block
+            }, index);
+          })
+        }) : null,
+        !isEmptyHtmlElement(tagName2(props)) && TARGET !== "vue2" && repeatItemData(props) ? (repeatItemData(props) || []).map(function(data, index) {
           return /* @__PURE__ */ jsx(RenderRepeatedBlock$1, {
             repeatContext: data.context,
             block: data.block
           }, index);
         }) : null,
-        !repeatItemData(props) ? /* @__PURE__ */ jsxs(state.tagName, {
+        !isEmptyHtmlElement(tagName2(props)) && !repeatItemData(props) ? /* @__PURE__ */ jsxs(state.tagName, {
           ...attributes(props),
           children: [
             /* @__PURE__ */ jsx(RenderComponent$1, {
@@ -555,8 +566,6 @@ const RenderBlock = (props) => {
           ]
         }) : null
       ]
-    }) : /* @__PURE__ */ jsx(state.tagName, {
-      ...attributes(props)
     }) : /* @__PURE__ */ jsx(RenderComponent$1, {
       ...renderComponentProps(props),
       context: props.context
@@ -597,9 +606,10 @@ const RenderBlocks = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     class: className(props) + " div-RenderBlocks",
     "builder-path": props.path,
     "builder-parent-id": props.parent,
+    style: props.style,
     onClick$: inlinedQrl((event) => {
       const [builderContext2, props2, state2] = useLexicalScope();
-      return (event2) => onClick$1(props2);
+      return onClick$1(props2);
     }, "RenderBlocks_component_div_onClick_RzhhZa265Yg", [
       builderContext,
       props,
@@ -607,7 +617,7 @@ const RenderBlocks = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     ]),
     onMouseEnter$: inlinedQrl((event) => {
       const [builderContext2, props2, state2] = useLexicalScope();
-      return (event2) => onMouseEnter(props2);
+      return onMouseEnter(props2);
     }, "RenderBlocks_component_div_onMouseEnter_nG7I7RYG3JQ", [
       builderContext,
       props,
@@ -690,7 +700,10 @@ const Columns = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
         children: /* @__PURE__ */ jsx(RenderBlocks$1, {
           blocks: markMutable(column.blocks),
           path: `component.options.columns.${index}.blocks`,
-          parent: props.builderBlock.id
+          parent: props.builderBlock.id,
+          style: {
+            flexGrow: "1"
+          }
         })
       }, index);
     })
@@ -703,7 +716,9 @@ align-items: stretch;
 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: 991px) { .div-Columns-2 { 
+display: flex;
+flex-direction: column;
+align-items: stretch; }@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;
@@ -1901,117 +1916,13 @@ async function getFetch() {
     throw new Error("`fetch()` not found, ensure you have it as part of your polyfills.");
   return globalFetch.default || globalFetch;
 }
-const handleABTesting = (item, testGroups) => {
-  if (item.variations && Object.keys(item.variations).length) {
-    const testGroup = item.id ? testGroups[item.id] : void 0;
-    const variationValue = testGroup ? item.variations[testGroup] : void 0;
-    if (testGroup && variationValue) {
-      item.data = variationValue.data;
-      item.testVariationId = variationValue.id;
-      item.testVariationName = variationValue.name;
-    } else {
-      let n = 0;
-      const random = Math.random();
-      let set2 = false;
-      for (const id in item.variations) {
-        const variation = item.variations[id];
-        const testRatio = variation.testRatio;
-        n += testRatio;
-        if (random < n) {
-          const variationName = variation.name || (variation.id === item.id ? "Default variation" : "");
-          set2 = true;
-          Object.assign(item, {
-            data: variation.data,
-            testVariationId: variation.id,
-            testVariationName: variationName
-          });
-        }
-      }
-      if (!set2)
-        Object.assign(item, {
-          testVariationId: item.id,
-          testVariationName: "Default"
-        });
-    }
-  }
-};
-async function getContent(options) {
-  return (await getAllContent({
-    ...options,
-    limit: 1
-  })).results[0] || null;
-}
-const generateContentUrl = (options) => {
-  const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey } = options;
-  const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}`);
-  const queryOptions = {
-    ...getBuilderSearchParamsFromWindow(),
-    ...normalizeSearchParams(options.options || {})
-  };
-  const flattened = flatten(queryOptions);
-  for (const key in flattened)
-    url.searchParams.set(key, String(flattened[key]));
-  if (userAttributes)
-    url.searchParams.set("userAttributes", JSON.stringify(userAttributes));
-  if (query) {
-    const flattened1 = flatten({
-      query
-    });
-    for (const key1 in flattened1)
-      url.searchParams.set(key1, JSON.stringify(flattened1[key1]));
-  }
-  return url;
-};
-async function getAllContent(options) {
-  const url = generateContentUrl(options);
-  const fetch2 = await getFetch();
-  const content = await fetch2(url.href).then((res) => res.json());
-  if (options.testGroups)
-    for (const item of content.results)
-      handleABTesting(item, options.testGroups);
-  return content;
-}
-function isPreviewing() {
-  if (!isBrowser())
-    return false;
-  if (isEditing())
-    return false;
-  return Boolean(location.search.indexOf("builder.preview=") !== -1);
-}
-const components = [];
-function registerComponent(component3, info) {
-  components.push({
-    component: component3,
-    ...info
-  });
-  console.warn("registerComponent is deprecated. Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.");
-  return component3;
-}
-const createRegisterComponentMessage = ({ component: _, ...info }) => ({
-  type: "builder.registerComponent",
-  data: prepareComponentInfoToSend(info)
-});
-const fastClone = (obj) => JSON.parse(JSON.stringify(obj));
-const serializeValue = (value) => typeof value === "function" ? serializeFn(value) : fastClone(value);
-const serializeFn = (fnValue) => {
-  const fnStr = fnValue.toString().trim();
-  const appendFunction = !fnStr.startsWith("function") && !fnStr.startsWith("(");
-  return `return (${appendFunction ? "function " : ""}${fnStr}).apply(this, arguments)`;
-};
-const prepareComponentInfoToSend = ({ inputs, ...info }) => ({
-  ...fastClone(info),
-  inputs: inputs?.map((input) => Object.entries(input).reduce((acc, [key, value]) => ({
-    ...acc,
-    [key]: serializeValue(value)
-  }), {}))
-});
 const getTopLevelDomain = (host) => {
   const parts = host.split(".");
   if (parts.length > 2)
     return parts.slice(1).join(".");
   return host;
 };
-const getCookie = ({ name, canTrack }) => {
+const getCookie = async ({ name, canTrack }) => {
   try {
     if (!canTrack)
       return void 0;
@@ -2063,7 +1974,7 @@ const createCookieString = ({ name, value, expires }) => {
   const cookie = stringifyCookie(cookieValue);
   return cookie;
 };
-const setCookie = ({ name, value, expires, canTrack }) => {
+const setCookie = async ({ name, value, expires, canTrack }) => {
   try {
     if (!canTrack)
       return void 0;
@@ -2077,7 +1988,156 @@ const setCookie = ({ name, value, expires, canTrack }) => {
     console.warn("[COOKIE] SET error: ", err);
   }
 };
+const BUILDER_STORE_PREFIX = "builderio.variations";
+const getContentTestKey = (id) => `${BUILDER_STORE_PREFIX}.${id}`;
+const getContentVariationCookie = ({ contentId, canTrack }) => getCookie({
+  name: getContentTestKey(contentId),
+  canTrack
+});
+const setContentVariationCookie = ({ contentId, canTrack, value }) => setCookie({
+  name: getContentTestKey(contentId),
+  value,
+  canTrack
+});
 const checkIsDefined = (maybeT) => maybeT !== null && maybeT !== void 0;
+const checkIsBuilderContentWithVariations = (item) => checkIsDefined(item.id) && checkIsDefined(item.variations) && Object.keys(item.variations).length > 0;
+const getRandomVariationId = ({ id, variations }) => {
+  let n = 0;
+  const random = Math.random();
+  for (const id1 in variations) {
+    const testRatio = variations[id1]?.testRatio;
+    n += testRatio;
+    if (random < n)
+      return id1;
+  }
+  return id;
+};
+const getTestFields = ({ item, testGroupId }) => {
+  const variationValue = item.variations[testGroupId];
+  if (testGroupId === item.id || !variationValue)
+    return {
+      testVariationId: item.id,
+      testVariationName: "Default"
+    };
+  else
+    return {
+      data: variationValue.data,
+      testVariationId: variationValue.id,
+      testVariationName: variationValue.name || (variationValue.id === item.id ? "Default" : "")
+    };
+};
+const getContentVariation = async ({ item, canTrack }) => {
+  const testGroupId = await getContentVariationCookie({
+    canTrack,
+    contentId: item.id
+  });
+  const testFields = testGroupId ? getTestFields({
+    item,
+    testGroupId
+  }) : void 0;
+  if (testFields)
+    return testFields;
+  else {
+    const randomVariationId = getRandomVariationId({
+      variations: item.variations,
+      id: item.id
+    });
+    setContentVariationCookie({
+      contentId: item.id,
+      value: randomVariationId,
+      canTrack
+    }).catch((err) => {
+      console.error("could not store A/B test variation: ", err);
+    });
+    return getTestFields({
+      item,
+      testGroupId: randomVariationId
+    });
+  }
+};
+const handleABTesting = async ({ item, canTrack }) => {
+  if (!checkIsBuilderContentWithVariations(item))
+    return;
+  const variationValue = await getContentVariation({
+    item,
+    canTrack
+  });
+  Object.assign(item, variationValue);
+};
+async function getContent(options) {
+  return (await getAllContent({
+    ...options,
+    limit: 1
+  })).results[0] || null;
+}
+const generateContentUrl = (options) => {
+  const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey } = options;
+  const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}`);
+  const queryOptions = {
+    ...getBuilderSearchParamsFromWindow(),
+    ...normalizeSearchParams(options.options || {})
+  };
+  const flattened = flatten(queryOptions);
+  for (const key in flattened)
+    url.searchParams.set(key, String(flattened[key]));
+  if (userAttributes)
+    url.searchParams.set("userAttributes", JSON.stringify(userAttributes));
+  if (query) {
+    const flattened1 = flatten({
+      query
+    });
+    for (const key1 in flattened1)
+      url.searchParams.set(key1, JSON.stringify(flattened1[key1]));
+  }
+  return url;
+};
+async function getAllContent(options) {
+  const url = generateContentUrl(options);
+  const fetch2 = await getFetch();
+  const content = await fetch2(url.href).then((res) => res.json());
+  const canTrack = options.canTrack !== false;
+  if (canTrack)
+    for (const item of content.results)
+      await handleABTesting({
+        item,
+        canTrack
+      });
+  return content;
+}
+function isPreviewing() {
+  if (!isBrowser())
+    return false;
+  if (isEditing())
+    return false;
+  return Boolean(location.search.indexOf("builder.preview=") !== -1);
+}
+const components = [];
+function registerComponent(component3, info) {
+  components.push({
+    component: component3,
+    ...info
+  });
+  console.warn("registerComponent is deprecated. Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.");
+  return component3;
+}
+const createRegisterComponentMessage = ({ component: _, ...info }) => ({
+  type: "builder.registerComponent",
+  data: prepareComponentInfoToSend(info)
+});
+const fastClone = (obj) => JSON.parse(JSON.stringify(obj));
+const serializeValue = (value) => typeof value === "function" ? serializeFn(value) : fastClone(value);
+const serializeFn = (fnValue) => {
+  const fnStr = fnValue.toString().trim();
+  const appendFunction = !fnStr.startsWith("function") && !fnStr.startsWith("(");
+  return `return (${appendFunction ? "function " : ""}${fnStr}).apply(this, arguments)`;
+};
+const prepareComponentInfoToSend = ({ inputs, ...info }) => ({
+  ...fastClone(info),
+  inputs: inputs?.map((input) => Object.entries(input).reduce((acc, [key, value]) => ({
+    ...acc,
+    [key]: serializeValue(value)
+  }), {}))
+});
 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;
@@ -2088,10 +2148,10 @@ function uuid() {
   return uuidv4().replace(/-/g, "");
 }
 const SESSION_LOCAL_STORAGE_KEY = "builderSessionId";
-const getSessionId = ({ canTrack }) => {
+const getSessionId = async ({ canTrack }) => {
   if (!canTrack)
     return void 0;
-  const sessionId = getCookie({
+  const sessionId = await getCookie({
     name: SESSION_LOCAL_STORAGE_KEY,
     canTrack
   });
@@ -2153,13 +2213,13 @@ const setVisitorId = ({ id, canTrack }) => setLocalStorageItem({
   value: id,
   canTrack
 });
-const getTrackingEventData = ({ canTrack }) => {
+const getTrackingEventData = async ({ canTrack }) => {
   if (!canTrack)
     return {
       visitorId: void 0,
       sessionId: void 0
     };
-  const sessionId = getSessionId({
+  const sessionId = await getSessionId({
     canTrack
   });
   const visitorId = getVisitorId({
@@ -2170,11 +2230,11 @@ const getTrackingEventData = ({ canTrack }) => {
     visitorId
   };
 };
-const createEvent = ({ type: eventType, canTrack, orgId, contentId, ...properties }) => ({
+const createEvent = async ({ type: eventType, canTrack, orgId, contentId, ...properties }) => ({
   type: eventType,
   data: {
     ...properties,
-    ...getTrackingEventData({
+    ...await getTrackingEventData({
       canTrack
     }),
     ownerId: orgId,
@@ -2192,7 +2252,7 @@ async function track(eventProps) {
     method: "POST",
     body: JSON.stringify({
       events: [
-        createEvent(eventProps)
+        await createEvent(eventProps)
       ]
     }),
     headers: {
@@ -2404,7 +2464,6 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     if (isBrowser()) {
       if (isEditing()) {
         state2.forceReRenderCount = state2.forceReRenderCount + 1;
-        elementRef2.current && _useMutableProps(elementRef2.current, true);
         registerInsertMenu();
         setupBrowserForEditing();
         Object.values(allRegisteredComponents(props2)).forEach((registeredComponent) => {
@@ -2487,7 +2546,7 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
       ref: elementRef,
       onClick$: inlinedQrl((event) => {
         const [elementRef2, props2, state2] = useLexicalScope();
-        return (event2) => onClick2(props2, state2);
+        return onClick2(props2, state2);
       }, "RenderContent_component__Fragment_div_onClick_wLg5o3ZkpC0", [
         elementRef,
         props,

package/package.json

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

package/types/blocks/columns/columns.d.ts

@@ -1,5 +1,4 @@
-import { BuilderBlock } from "../../types/builder-block";
-import { JSX } from "@builder.io/mitosis/jsx-runtime";
+import type { BuilderBlock } from "../../types/builder-block";
 declare type Column = {
     blocks: any;
     width?: number;
@@ -16,7 +15,7 @@ export declare const getGutterSize: (props: any, state: any) => any;
 export declare const getColumns: (props: any, state: any) => any;
 export declare const getWidth: (props: any, state: any, index: number) => any;
 export declare const getColumnCssWidth: (props: any, state: any, index: number) => string;
-export declare const maybeApplyForTablet: (props: any, state: any, prop: JSX.CSS["flexDirection"]) => string | undefined;
+export declare const maybeApplyForTablet: (props: any, state: any, prop: string | undefined) => string | undefined;
 export declare const columnsCssVars: (props: any, state: any) => {
     "--flex-dir": string;
     "--flex-dir-tablet": string | undefined;
@@ -29,4 +28,4 @@ export declare const columnCssVars: (props: any, state: any) => {
 };
 export declare const Columns: import("@builder.io/qwik").Component<ColumnProps>;
 export default Columns;
-export declare const STYLES = ".div-Columns { \ndisplay: flex;\nalign-items: stretch;\nline-height: normal; }@media (max-width: 991px) { .div-Columns { \nflex-direction: var(--flex-dir-tablet); } }@media (max-width: 639px) { .div-Columns { \nflex-direction: var(--flex-dir); } }.div-Columns-2 { \nflex-grow: 1; }@media (max-width: 991px) { .div-Columns-2 { \nwidth: var(--column-width-tablet) !important;\nmargin-left: var(--column-margin-left-tablet) !important; } }@media (max-width: 639px) { .div-Columns-2 { \nwidth: var(--column-width) !important;\nmargin-left: var(--column-margin-left) !important; } }";
+export declare const STYLES = ".div-Columns { \ndisplay: flex;\nalign-items: stretch;\nline-height: normal; }@media (max-width: 991px) { .div-Columns { \nflex-direction: var(--flex-dir-tablet); } }@media (max-width: 639px) { .div-Columns { \nflex-direction: var(--flex-dir); } }.div-Columns-2 { \ndisplay: flex;\nflex-direction: column;\nalign-items: stretch; }@media (max-width: 991px) { .div-Columns-2 { \nwidth: var(--column-width-tablet) !important;\nmargin-left: var(--column-margin-left-tablet) !important; } }@media (max-width: 639px) { .div-Columns-2 { \nwidth: var(--column-width) !important;\nmargin-left: var(--column-margin-left) !important; } }";

package/types/blocks/image/image.d.ts

@@ -1,4 +1,4 @@
-import { JSX } from "@builder.io/mitosis/jsx-runtime";
+/// <reference types="react" />
 import type { BuilderBlock } from "../../types/builder-block.js";
 export interface ImageProps {
     className?: string;

package/types/blocks/symbol/symbol.d.ts

@@ -1,5 +1,5 @@
-import { BuilderBlock } from "../../types/builder-block.js";
-import { BuilderContent } from "../../types/builder-content.js";
+import type { BuilderContent } from "../../types/builder-content.js";
+import type { BuilderBlock } from "../../types/builder-block.js";
 export interface SymbolInfo {
     model?: string;
     entry?: string;

package/types/components/render-block/block-styles.d.ts

@@ -1,5 +1,5 @@
-import { BuilderContextInterface } from "../../context/types.js";
-import { BuilderBlock } from "../../types/builder-block.js";
+import type { BuilderContextInterface } from "../../context/types.js";
+import type { BuilderBlock } from "../../types/builder-block.js";
 export declare type BlockStylesProps = {
     block: BuilderBlock;
     context: BuilderContextInterface;