@builder.io/sdk-qwik 0.1.10 → 0.1.12

package/lib/index.qwik.cjs

@@ -586,7 +586,7 @@ const RenderBlock = (props) => {
   }, "9d_3");
 };
 const RenderBlock$1 = RenderBlock;
-const className$1 = function className2(props, state, builderContext2) {
+const className = function className2(props, state, builderContext2) {
   return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
 };
 const onClick$1 = function onClick2(props, state, builderContext2) {
@@ -614,7 +614,7 @@ const RenderBlocks = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) =
   const builderContext$1 = qwik.useContext(builderContext);
   const state = {};
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    class: className$1(props) + " div-RenderBlocks",
+    class: className(props) + " div-RenderBlocks",
     get "builder-path"() {
       return props.path;
     },
@@ -1738,10 +1738,15 @@ const getBuilderSearchParamsFromWindow = () => {
 };
 const normalizeSearchParams = (searchParams) => searchParams instanceof URLSearchParams ? convertSearchParamsToQueryObject(searchParams) : searchParams;
 const generateContentUrl = (options) => {
-  const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale } = options;
+  const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale, apiVersion = "v2" } = options;
   if (!apiKey)
     throw new Error("Missing API key");
-  const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ""}`);
+  if (![
+    "v2",
+    "v3"
+  ].includes(apiVersion))
+    throw new Error(`Invalid apiVersion: expected 'v2' or 'v3', received '${apiVersion}'`);
+  const url = new URL(`https://cdn.builder.io/api/${apiVersion}/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ""}`);
   const queryOptions = {
     ...getBuilderSearchParamsFromWindow(),
     ...normalizeSearchParams(options.options || {})
@@ -1779,39 +1784,47 @@ async function getAllContent(options) {
       });
   return content;
 }
-const className = function className22(props, state, builderContext2) {
-  return [
-    ...[
-      props.attributes.class
-    ],
-    "builder-symbol",
-    props.symbol?.inline ? "builder-inline-symbol" : void 0,
-    props.symbol?.dynamic || props.dynamic ? "builder-dynamic-symbol" : void 0
-  ].filter(Boolean).join(" ");
-};
-const contentToUse = function contentToUse2(props, state, builderContext2) {
-  return props.symbol?.content || state.fetchedContent;
+const fetchContent = function fetchContent2(props, state, builderContext2) {
+  if (!state.contentToUse && props.symbol?.model && builderContext2?.apiKey)
+    getContent({
+      model: props.symbol.model,
+      apiKey: builderContext2.apiKey,
+      apiVersion: builderContext2.apiVersion,
+      query: {
+        id: props.symbol.entry
+      }
+    }).then((response) => {
+      if (response)
+        state.contentToUse = response;
+    }).catch((err) => {
+      console.error("[Builder.io]: Could not fetch symbol content: ", err);
+    });
 };
 const Symbol$1 = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
   const builderContext$1 = qwik.useContext(builderContext);
   const state = qwik.useStore({
-    fetchedContent: null
+    className: [
+      ...[
+        props.attributes.class
+      ],
+      "builder-symbol",
+      props.symbol?.inline ? "builder-inline-symbol" : void 0,
+      props.symbol?.dynamic || props.dynamic ? "builder-dynamic-symbol" : void 0
+    ].filter(Boolean).join(" "),
+    contentToUse: props.symbol?.content
   });
+  qwik.useClientEffectQrl(qwik.inlinedQrl(() => {
+    const [builderContext2, props2, state2] = qwik.useLexicalScope();
+    fetchContent(props2, state2, builderContext2);
+  }, "Symbol_component_useClientEffect_Kfc9q3nzeSQ", [
+    builderContext$1,
+    props,
+    state
+  ]));
   qwik.useTaskQrl(qwik.inlinedQrl(({ track: track2 }) => {
     const [builderContext2, props2, state2] = qwik.useLexicalScope();
     track2(() => props2.symbol);
-    track2(() => state2.fetchedContent);
-    const symbolToUse = props2.symbol;
-    if (symbolToUse && !symbolToUse.content && !state2.fetchedContent && symbolToUse.model && builderContext2?.apiKey)
-      getContent({
-        model: symbolToUse.model,
-        apiKey: builderContext2.apiKey,
-        query: {
-          id: symbolToUse.entry
-        }
-      }).then((response) => {
-        state2.fetchedContent = response;
-      });
+    fetchContent(props2, state2, builderContext2);
   }, "Symbol_component_useTask_NIAWAC1bMBo", [
     builderContext$1,
     props,
@@ -1819,8 +1832,13 @@ const Symbol$1 = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
   ]));
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
     ...props.attributes,
-    class: className(props),
+    get class() {
+      return state.className;
+    },
     children: /* @__PURE__ */ jsxRuntime.jsx(RenderContent$1, {
+      get apiVersion() {
+        return builderContext$1.apiVersion;
+      },
       get apiKey() {
         return builderContext$1.apiKey;
       },
@@ -1831,15 +1849,22 @@ const Symbol$1 = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
       data: {
         ...props.symbol?.data,
         ...builderContext$1.state,
-        ...props.symbol?.content?.data?.state
+        ...state.contentToUse?.data?.state
       },
       model: props.symbol?.model,
-      content: contentToUse(props, state),
+      get content() {
+        return state.contentToUse;
+      },
       [qwik._IMMUTABLE]: {
+        apiVersion: qwik._wrapSignal(builderContext$1, "apiVersion"),
         apiKey: qwik._wrapSignal(builderContext$1, "apiKey"),
-        context: qwik._wrapSignal(builderContext$1, "context")
+        context: qwik._wrapSignal(builderContext$1, "context"),
+        content: qwik._wrapSignal(state, "contentToUse")
       }
-    }, "Wt_0")
+    }, "Wt_0"),
+    [qwik._IMMUTABLE]: {
+      class: qwik._wrapSignal(state, "className")
+    }
   });
 }, "Symbol_component_WVvggdkUPdk"));
 const componentInfo$4 = {
@@ -2937,6 +2962,7 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
     state: state.contentState,
     context: props.context || {},
     apiKey: props.apiKey,
+    apiVersion: props.apiVersion,
     registeredComponents: state.allRegisteredComponents
   }));
   qwik.useClientEffectQrl(qwik.inlinedQrl(() => {
@@ -2980,7 +3006,8 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
         if (searchParamPreview === props2.model && previewApiKey === props2.apiKey)
           getContent({
             model: props2.model,
-            apiKey: props2.apiKey
+            apiKey: props2.apiKey,
+            apiVersion: props2.apiVersion
           }).then((content) => {
             if (content)
               mergeNewContent(props2, state2, elementRef2, content);
@@ -2995,12 +3022,22 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
     props,
     state
   ]));
+  qwik.useTaskQrl(qwik.inlinedQrl(({ track: track2 }) => {
+    const [elementRef2, props2, state2] = qwik.useLexicalScope();
+    track2(() => props2.content);
+    if (props2.content)
+      mergeNewContent(props2, state2, elementRef2, props2.content);
+  }, "RenderContent_component_useTask_Kulmlf9pM08", [
+    elementRef,
+    props,
+    state
+  ]));
   qwik.useTaskQrl(qwik.inlinedQrl(({ track: track2 }) => {
     const [elementRef2, props2, state2] = qwik.useLexicalScope();
     track2(() => state2.useContent?.data?.jsCode);
     track2(() => state2.contentState);
     evaluateJsCode(props2, state2);
-  }, "RenderContent_component_useTask_Kulmlf9pM08", [
+  }, "RenderContent_component_useTask_1_X59YMGOetns", [
     elementRef,
     props,
     state
@@ -3009,7 +3046,7 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
     const [elementRef2, props2, state2] = qwik.useLexicalScope();
     track2(() => state2.useContent?.data?.httpRequests);
     runHttpRequests(props2, state2, elementRef2);
-  }, "RenderContent_component_useTask_1_X59YMGOetns", [
+  }, "RenderContent_component_useTask_2_u3gn3Pj2b2s", [
     elementRef,
     props,
     state
@@ -3018,7 +3055,7 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
     const [elementRef2, props2, state2] = qwik.useLexicalScope();
     track2(() => state2.contentState);
     emitStateUpdate(props2, state2);
-  }, "RenderContent_component_useTask_2_u3gn3Pj2b2s", [
+  }, "RenderContent_component_useTask_3_xLCHvjhJYRM", [
     elementRef,
     props,
     state

package/lib/index.qwik.mjs

@@ -1,4 +1,4 @@
-import { componentQrl, inlinedQrl, useStylesScopedQrl, _wrapSignal, _IMMUTABLE, createContext, useLexicalScope, useContextProvider, useStore, useContext, Slot, Fragment as Fragment$1, useTaskQrl, useRef, useClientEffectQrl, useCleanupQrl } from "@builder.io/qwik";
+import { componentQrl, inlinedQrl, useStylesScopedQrl, _wrapSignal, _IMMUTABLE, createContext, useLexicalScope, useContextProvider, useStore, useContext, Slot, Fragment as Fragment$1, useClientEffectQrl, useTaskQrl, useRef, useCleanupQrl } from "@builder.io/qwik";
 import { jsx, Fragment, jsxs } from "@builder.io/qwik/jsx-runtime";
 const Button = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   useStylesScopedQrl(inlinedQrl(STYLES$3, "Button_component_useStylesScoped_a1JZ0Q0Q2Oc"));
@@ -584,7 +584,7 @@ const RenderBlock = (props) => {
   }, "9d_3");
 };
 const RenderBlock$1 = RenderBlock;
-const className$1 = function className2(props, state, builderContext2) {
+const className = function className2(props, state, builderContext2) {
   return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
 };
 const onClick$1 = function onClick2(props, state, builderContext2) {
@@ -612,7 +612,7 @@ const RenderBlocks = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   const builderContext$1 = useContext(builderContext);
   const state = {};
   return /* @__PURE__ */ jsxs("div", {
-    class: className$1(props) + " div-RenderBlocks",
+    class: className(props) + " div-RenderBlocks",
     get "builder-path"() {
       return props.path;
     },
@@ -1736,10 +1736,15 @@ const getBuilderSearchParamsFromWindow = () => {
 };
 const normalizeSearchParams = (searchParams) => searchParams instanceof URLSearchParams ? convertSearchParamsToQueryObject(searchParams) : searchParams;
 const generateContentUrl = (options) => {
-  const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale } = options;
+  const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale, apiVersion = "v2" } = options;
   if (!apiKey)
     throw new Error("Missing API key");
-  const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ""}`);
+  if (![
+    "v2",
+    "v3"
+  ].includes(apiVersion))
+    throw new Error(`Invalid apiVersion: expected 'v2' or 'v3', received '${apiVersion}'`);
+  const url = new URL(`https://cdn.builder.io/api/${apiVersion}/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ""}`);
   const queryOptions = {
     ...getBuilderSearchParamsFromWindow(),
     ...normalizeSearchParams(options.options || {})
@@ -1777,39 +1782,47 @@ async function getAllContent(options) {
       });
   return content;
 }
-const className = function className22(props, state, builderContext2) {
-  return [
-    ...[
-      props.attributes.class
-    ],
-    "builder-symbol",
-    props.symbol?.inline ? "builder-inline-symbol" : void 0,
-    props.symbol?.dynamic || props.dynamic ? "builder-dynamic-symbol" : void 0
-  ].filter(Boolean).join(" ");
-};
-const contentToUse = function contentToUse2(props, state, builderContext2) {
-  return props.symbol?.content || state.fetchedContent;
+const fetchContent = function fetchContent2(props, state, builderContext2) {
+  if (!state.contentToUse && props.symbol?.model && builderContext2?.apiKey)
+    getContent({
+      model: props.symbol.model,
+      apiKey: builderContext2.apiKey,
+      apiVersion: builderContext2.apiVersion,
+      query: {
+        id: props.symbol.entry
+      }
+    }).then((response) => {
+      if (response)
+        state.contentToUse = response;
+    }).catch((err) => {
+      console.error("[Builder.io]: Could not fetch symbol content: ", err);
+    });
 };
 const Symbol$1 = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   const builderContext$1 = useContext(builderContext);
   const state = useStore({
-    fetchedContent: null
+    className: [
+      ...[
+        props.attributes.class
+      ],
+      "builder-symbol",
+      props.symbol?.inline ? "builder-inline-symbol" : void 0,
+      props.symbol?.dynamic || props.dynamic ? "builder-dynamic-symbol" : void 0
+    ].filter(Boolean).join(" "),
+    contentToUse: props.symbol?.content
   });
+  useClientEffectQrl(inlinedQrl(() => {
+    const [builderContext2, props2, state2] = useLexicalScope();
+    fetchContent(props2, state2, builderContext2);
+  }, "Symbol_component_useClientEffect_Kfc9q3nzeSQ", [
+    builderContext$1,
+    props,
+    state
+  ]));
   useTaskQrl(inlinedQrl(({ track: track2 }) => {
     const [builderContext2, props2, state2] = useLexicalScope();
     track2(() => props2.symbol);
-    track2(() => state2.fetchedContent);
-    const symbolToUse = props2.symbol;
-    if (symbolToUse && !symbolToUse.content && !state2.fetchedContent && symbolToUse.model && builderContext2?.apiKey)
-      getContent({
-        model: symbolToUse.model,
-        apiKey: builderContext2.apiKey,
-        query: {
-          id: symbolToUse.entry
-        }
-      }).then((response) => {
-        state2.fetchedContent = response;
-      });
+    fetchContent(props2, state2, builderContext2);
   }, "Symbol_component_useTask_NIAWAC1bMBo", [
     builderContext$1,
     props,
@@ -1817,8 +1830,13 @@ const Symbol$1 = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   ]));
   return /* @__PURE__ */ jsx("div", {
     ...props.attributes,
-    class: className(props),
+    get class() {
+      return state.className;
+    },
     children: /* @__PURE__ */ jsx(RenderContent$1, {
+      get apiVersion() {
+        return builderContext$1.apiVersion;
+      },
       get apiKey() {
         return builderContext$1.apiKey;
       },
@@ -1829,15 +1847,22 @@ const Symbol$1 = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
       data: {
         ...props.symbol?.data,
         ...builderContext$1.state,
-        ...props.symbol?.content?.data?.state
+        ...state.contentToUse?.data?.state
       },
       model: props.symbol?.model,
-      content: contentToUse(props, state),
+      get content() {
+        return state.contentToUse;
+      },
       [_IMMUTABLE]: {
+        apiVersion: _wrapSignal(builderContext$1, "apiVersion"),
         apiKey: _wrapSignal(builderContext$1, "apiKey"),
-        context: _wrapSignal(builderContext$1, "context")
+        context: _wrapSignal(builderContext$1, "context"),
+        content: _wrapSignal(state, "contentToUse")
       }
-    }, "Wt_0")
+    }, "Wt_0"),
+    [_IMMUTABLE]: {
+      class: _wrapSignal(state, "className")
+    }
   });
 }, "Symbol_component_WVvggdkUPdk"));
 const componentInfo$4 = {
@@ -2935,6 +2960,7 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     state: state.contentState,
     context: props.context || {},
     apiKey: props.apiKey,
+    apiVersion: props.apiVersion,
     registeredComponents: state.allRegisteredComponents
   }));
   useClientEffectQrl(inlinedQrl(() => {
@@ -2978,7 +3004,8 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
         if (searchParamPreview === props2.model && previewApiKey === props2.apiKey)
           getContent({
             model: props2.model,
-            apiKey: props2.apiKey
+            apiKey: props2.apiKey,
+            apiVersion: props2.apiVersion
           }).then((content) => {
             if (content)
               mergeNewContent(props2, state2, elementRef2, content);
@@ -2993,12 +3020,22 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     props,
     state
   ]));
+  useTaskQrl(inlinedQrl(({ track: track2 }) => {
+    const [elementRef2, props2, state2] = useLexicalScope();
+    track2(() => props2.content);
+    if (props2.content)
+      mergeNewContent(props2, state2, elementRef2, props2.content);
+  }, "RenderContent_component_useTask_Kulmlf9pM08", [
+    elementRef,
+    props,
+    state
+  ]));
   useTaskQrl(inlinedQrl(({ track: track2 }) => {
     const [elementRef2, props2, state2] = useLexicalScope();
     track2(() => state2.useContent?.data?.jsCode);
     track2(() => state2.contentState);
     evaluateJsCode(props2, state2);
-  }, "RenderContent_component_useTask_Kulmlf9pM08", [
+  }, "RenderContent_component_useTask_1_X59YMGOetns", [
     elementRef,
     props,
     state
@@ -3007,7 +3044,7 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     const [elementRef2, props2, state2] = useLexicalScope();
     track2(() => state2.useContent?.data?.httpRequests);
     runHttpRequests(props2, state2, elementRef2);
-  }, "RenderContent_component_useTask_1_X59YMGOetns", [
+  }, "RenderContent_component_useTask_2_u3gn3Pj2b2s", [
     elementRef,
     props,
     state
@@ -3016,7 +3053,7 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     const [elementRef2, props2, state2] = useLexicalScope();
     track2(() => state2.contentState);
     emitStateUpdate(props2, state2);
-  }, "RenderContent_component_useTask_2_u3gn3Pj2b2s", [
+  }, "RenderContent_component_useTask_3_xLCHvjhJYRM", [
     elementRef,
     props,
     state

package/package.json

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

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

@@ -16,7 +16,6 @@ export interface SymbolProps {
     attributes?: any;
     inheritState?: boolean;
 }
-export declare const className: (props: any, state: any, builderContext: any) => string;
-export declare const contentToUse: (props: any, state: any, builderContext: any) => any;
+export declare const fetchContent: (props: any, state: any, builderContext: any) => void;
 export declare const Symbol: import("@builder.io/qwik").Component<SymbolProps>;
 export default Symbol;

package/types/components/render-content/render-content.types.d.ts

@@ -1,6 +1,7 @@
 import type { BuilderRenderContext, RegisteredComponent, BuilderRenderState } from '../../context/types';
 import type { BuilderContent } from '../../types/builder-content';
 import type { Nullable } from '../../types/typescript';
+import type { ApiVersion } from '../../types/api-version';
 export type RenderContentProps = {
     content?: Nullable<BuilderContent>;
     model?: string;
@@ -9,6 +10,7 @@ export type RenderContentProps = {
     };
     context?: BuilderRenderContext;
     apiKey: string;
+    apiVersion?: ApiVersion;
     customComponents?: RegisteredComponent[];
     canTrack?: boolean;
     locale?: string;

package/types/context/types.d.ts

@@ -1,6 +1,7 @@
 import type { BuilderContent } from '../types/builder-content.js';
 import type { ComponentInfo } from '../types/components.js';
 import type { Dictionary, Nullable } from '../types/typescript.js';
+import type { ApiVersion } from '../types/api-version.js';
 export type RegisteredComponent = ComponentInfo & {
     component: any;
 };
@@ -13,6 +14,7 @@ export interface BuilderContextInterface {
     state: BuilderRenderState;
     setState?: (state: BuilderRenderState) => void;
     apiKey: string | null;
+    apiVersion?: ApiVersion;
     registeredComponents: RegisteredComponents;
     inheritedStyles: Record<string, unknown>;
 }

package/types/functions/get-content/types.d.ts

@@ -36,4 +36,10 @@ export interface GetContentOptions {
      * If provided, the API will auto-resolve localized objects to the value of this `locale` key.
      */
     locale?: string;
+    /**
+     * If provided, sets the Builder API version used to fetch content.
+     *
+     * Defaults to `v2`.
+     */
+    apiVersion?: 'v2' | 'v3';
 }

package/types/types/api-version.d.ts

@@ -0,0 +1 @@
+export type ApiVersion = 'v2' | 'v3';