@builder.io/sdk-svelte 1.0.12 → 1.0.14

package/lib/browser/blocks/symbol/symbol.svelte

@@ -50,7 +50,7 @@ $: onUpdateFn_0(...[symbol]);
   use:setAttrs={filterAttrs(attributes, "on:", true)}
 >
   <ContentVariants
-    __isNestedRender={true}
+    isNestedRender={true}
     apiVersion={$builderContext.apiVersion}
     apiKey={$builderContext.apiKey}
     context={{

package/lib/browser/components/content/components/enable-editor.svelte

@@ -76,7 +76,6 @@ function processMessage(event) {
                             breakpoints,
                         },
                     });
-                    forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
                 }
             },
             animation: (animation) => {
@@ -84,7 +83,6 @@ function processMessage(event) {
             },
             contentUpdate: (newContent) => {
                 mergeNewContent(newContent);
-                forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
             },
         },
     })(event);
@@ -174,7 +172,6 @@ function emitStateUpdate() {
     }
 }
 function elementRef_onIniteditingbldr(event) {
-    forceReRenderCount = forceReRenderCount + 1;
     window.addEventListener("message", processMessage);
     registerInsertMenu();
     setupBrowserForEditing({
@@ -229,10 +226,6 @@ function elementRef_onInitpreviewingbldr(event) {
     }
 }
 let elementRef;
-let forceReRenderCount = 0;
-let firstRender = true;
-let lastUpdated = 0;
-let shouldSendResetCookie = false;
 let ContentWrapper = contentWrapper || "div";
 let httpReqsData = {};
 let clicked = false;
@@ -278,40 +271,38 @@ function onUpdateFn_0(..._args) {
     }
 }
 $: onUpdateFn_0(...[content]);
-function onUpdateFn_1(..._args) { }
-$: onUpdateFn_1(...[shouldSendResetCookie]);
-function onUpdateFn_2(..._args) {
+function onUpdateFn_1(..._args) {
     evaluateJsCode();
 }
-$: onUpdateFn_2_builderContextSignal_content__data__jsCode =
+$: onUpdateFn_1_builderContextSignal_content__data__jsCode =
     $builderContextSignal.content?.data?.jsCode;
-$: onUpdateFn_2(...[onUpdateFn_2_builderContextSignal_content__data__jsCode]);
-function onUpdateFn_3(..._args) {
+$: onUpdateFn_1(...[onUpdateFn_1_builderContextSignal_content__data__jsCode]);
+function onUpdateFn_2(..._args) {
     runHttpRequests();
 }
-$: onUpdateFn_3_builderContextSignal_content__data__httpRequests =
+$: onUpdateFn_2_builderContextSignal_content__data__httpRequests =
     $builderContextSignal.content?.data?.httpRequests;
-$: onUpdateFn_3(...[onUpdateFn_3_builderContextSignal_content__data__httpRequests]);
-function onUpdateFn_4(..._args) {
+$: onUpdateFn_2(...[onUpdateFn_2_builderContextSignal_content__data__httpRequests]);
+function onUpdateFn_3(..._args) {
     emitStateUpdate();
 }
-$: onUpdateFn_4_builderContextSignal_rootState =
+$: onUpdateFn_3_builderContextSignal_rootState =
     $builderContextSignal.rootState;
-$: onUpdateFn_4(...[onUpdateFn_4_builderContextSignal_rootState]);
-function onUpdateFn_5(..._args) {
+$: onUpdateFn_3(...[onUpdateFn_3_builderContextSignal_rootState]);
+function onUpdateFn_4(..._args) {
     if (data) {
         mergeNewRootState(data);
     }
 }
-$: onUpdateFn_5(...[data]);
-function onUpdateFn_6(..._args) {
+$: onUpdateFn_4(...[data]);
+function onUpdateFn_5(..._args) {
     if (locale) {
         mergeNewRootState({
             locale: locale,
         });
     }
 }
-$: onUpdateFn_6(...[locale]);
+$: onUpdateFn_5(...[locale]);
 setContext(builderContext.key, builderContextSignal);
 onDestroy(() => {
     if (isBrowser()) {
@@ -325,7 +316,6 @@ onDestroy(() => {
   <svelte:element
     this={ContentWrapper}
     {...{}}
-    key={forceReRenderCount}
     bind:this={elementRef}
     on:click={(event) => {
       onClick(event);

package/lib/browser/components/content/components/enable-editor.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-type BuilderEditorProps = Omit<ContentProps, "customComponents" | "apiVersion" | "isSsrAbTest" | "blocksWrapper" | "blocksWrapperProps"> & {
+type BuilderEditorProps = Omit<ContentProps, "customComponents" | "apiVersion" | "isSsrAbTest" | "blocksWrapper" | "blocksWrapperProps" | "isNestedRender"> & {
     builderContextSignal: Writable<BuilderContextInterface>;
     setBuilderContextSignal?: (signal: any) => any;
     children?: any;

package/lib/browser/components/content/components/styles.helpers.d.ts

@@ -13,3 +13,4 @@ export declare const getCss: ({ cssCode, contentId }: {
     cssCode?: string | undefined;
     contentId?: string | undefined;
 }) => string;
+export declare const getDefaultStyles: (isNested: boolean | undefined) => "" | "\n.builder-button {\n  all: unset;\n}\n\n.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {\n  margin: 0;\n}\n.builder-text > p, .builder-text > .builder-paragraph {\n  color: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  font-weight: inherit;\n  font-size: inherit;\n  text-align: inherit;\n  font-family: inherit;\n}\n";

package/lib/browser/components/content/components/styles.helpers.js

@@ -56,3 +56,24 @@ export const getCss = ({ cssCode, contentId }) => {
     // TODO: handle if '&' is within a string like `content: "&"`
     return cssCode?.replace(/&/g, `div[builder-content-id="${contentId}"]`) || '';
 };
+const DEFAULT_STYLES = `
+.builder-button {
+  all: unset;
+}
+
+.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
+  margin: 0;
+}
+.builder-text > p, .builder-text > .builder-paragraph {
+  color: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  text-align: inherit;
+  font-family: inherit;
+}
+`;
+export const getDefaultStyles = (isNested) => {
+    return !isNested ? DEFAULT_STYLES : '';
+};

package/lib/browser/components/content/components/styles.svelte

@@ -1,10 +1,11 @@
 <script context="module"></script>
 
 <script>import InlinedStyles from "../../inlined-styles.svelte";
-import { getCss, getFontCss } from "./styles.helpers.js";
+import { getCss, getDefaultStyles, getFontCss } from "./styles.helpers.js";
 export let cssCode = undefined;
 export let contentId = undefined;
 export let customFonts = undefined;
+export let isNestedRender = undefined;
 let injectedStyles = `
 ${getCss({
     cssCode: cssCode,
@@ -13,23 +14,7 @@ ${getCss({
 ${getFontCss({
     customFonts: customFonts,
 })}
-
-.builder-button {
-  all: unset;
-}
-
-.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
-  margin: 0;
-}
-.builder-text > p, .builder-text > .builder-paragraph {
-  color: inherit;
-  line-height: inherit;
-  letter-spacing: inherit;
-  font-weight: inherit;
-  font-size: inherit;
-  text-align: inherit;
-  font-family: inherit;
-}
+${getDefaultStyles(isNestedRender)}
 `.trim();
 </script>
 

package/lib/browser/components/content/components/styles.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     cssCode?: string;
     customFonts?: CustomFont[];
     contentId?: string;
+    isNestedRender?: boolean;
 }
 import type { CustomFont } from "./styles.helpers.js";
 declare const __propDef: {
@@ -10,6 +11,7 @@ declare const __propDef: {
         cssCode?: Props["cssCode"];
         contentId?: Props["contentId"];
         customFonts?: Props["customFonts"];
+        isNestedRender?: Props["isNestedRender"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/lib/browser/components/content/content.svelte

@@ -29,6 +29,7 @@ export let contentWrapperProps = undefined;
 export let linkComponent = undefined;
 export let trustedHosts = undefined;
 export let isSsrAbTest;
+export let isNestedRender = undefined;
 function contentSetState(newRootState) {
     $builderContextSignal.rootState = newRootState;
 }
@@ -101,6 +102,7 @@ setContext(ComponentsContext.key, {
   {/if}
   {#if TARGET !== "reactNative"}
     <ContentStyles
+      {isNestedRender}
       contentId={$builderContextSignal.content?.id}
       cssCode={$builderContextSignal.content?.data?.cssCode}
       customFonts={$builderContextSignal.content?.data?.customFonts}

package/lib/browser/components/content/content.svelte.d.ts

@@ -20,6 +20,7 @@ declare const __propDef: {
         linkComponent?: ContentProps["linkComponent"];
         trustedHosts?: ContentProps["trustedHosts"];
         isSsrAbTest: ContentProps["isSsrAbTest"];
+        isNestedRender?: ContentProps["isNestedRender"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/lib/browser/components/content/contentProps.types.d.ts

@@ -8,5 +8,10 @@ interface InternalRenderProps {
  * This is in a separate file so that we can override it (most notably in Vue,
  * where prop types cannot be wrapped by generics like `EnforcePartials`).
  */
-export type ContentProps = InternalRenderProps & EnforcePartials<ContentVariantsPrps>;
+export type ContentProps = InternalRenderProps & EnforcePartials<ContentVariantsPrps> & {
+    /**
+     * For internal use only. Do not provide this prop.
+     */
+    isNestedRender?: boolean;
+};
 export {};

package/lib/browser/components/content-variants/content-variants.svelte

@@ -10,7 +10,7 @@ import InlinedStyles from "../inlined-styles.svelte";
 import { checkShouldRenderVariants, getScriptString, getUpdateCookieAndStylesScript, getVariants, } from "./helpers.js";
 export let canTrack = undefined;
 export let content = undefined;
-export let __isNestedRender = undefined;
+export let isNestedRender = undefined;
 export let model = undefined;
 export let data = undefined;
 export let context = undefined;
@@ -59,7 +59,7 @@ onMount(() => {
 });
 </script>
 
-{#if !__isNestedRender && TARGET !== "reactNative"}
+{#if !isNestedRender && TARGET !== "reactNative"}
   <InlinedScript scriptStr={getScriptString()} />
 {/if}
 
@@ -72,6 +72,7 @@ onMount(() => {
 
   {#each getVariants(content) as variant (variant.testVariationId)}
     <ContentComponent
+      {isNestedRender}
       content={variant}
       showContent={false}
       {model}
@@ -94,6 +95,7 @@ onMount(() => {
   {/each}
 {/if}
 <ContentComponent
+  {isNestedRender}
   {...{}}
   content={defaultContent()}
   showContent={true}

package/lib/browser/components/content-variants/content-variants.svelte.d.ts

@@ -3,14 +3,14 @@ type VariantsProviderProps = ContentVariantsPrps & {
     /**
      * For internal use only. Do not provide this prop.
      */
-    __isNestedRender?: boolean;
+    isNestedRender?: boolean;
 };
 import type { ContentVariantsPrps } from "./content-variants.types.js";
 declare const __propDef: {
     props: {
         canTrack?: VariantsProviderProps["canTrack"];
         content?: VariantsProviderProps["content"];
-        __isNestedRender?: VariantsProviderProps["__isNestedRender"];
+        isNestedRender?: VariantsProviderProps["isNestedRender"];
         model?: VariantsProviderProps["model"];
         data?: VariantsProviderProps["data"];
         context?: VariantsProviderProps["context"];

package/lib/browser/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "1.0.12";
+export declare const SDK_VERSION = "1.0.14";

package/lib/browser/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "1.0.12";
+export const SDK_VERSION = "1.0.14";

package/lib/edge/blocks/symbol/symbol.svelte

@@ -50,7 +50,7 @@ $: onUpdateFn_0(...[symbol]);
   use:setAttrs={filterAttrs(attributes, "on:", true)}
 >
   <ContentVariants
-    __isNestedRender={true}
+    isNestedRender={true}
     apiVersion={$builderContext.apiVersion}
     apiKey={$builderContext.apiKey}
     context={{

package/lib/edge/components/content/components/enable-editor.svelte

@@ -76,7 +76,6 @@ function processMessage(event) {
                             breakpoints,
                         },
                     });
-                    forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
                 }
             },
             animation: (animation) => {
@@ -84,7 +83,6 @@ function processMessage(event) {
             },
             contentUpdate: (newContent) => {
                 mergeNewContent(newContent);
-                forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
             },
         },
     })(event);
@@ -174,7 +172,6 @@ function emitStateUpdate() {
     }
 }
 function elementRef_onIniteditingbldr(event) {
-    forceReRenderCount = forceReRenderCount + 1;
     window.addEventListener("message", processMessage);
     registerInsertMenu();
     setupBrowserForEditing({
@@ -229,10 +226,6 @@ function elementRef_onInitpreviewingbldr(event) {
     }
 }
 let elementRef;
-let forceReRenderCount = 0;
-let firstRender = true;
-let lastUpdated = 0;
-let shouldSendResetCookie = false;
 let ContentWrapper = contentWrapper || "div";
 let httpReqsData = {};
 let clicked = false;
@@ -278,40 +271,38 @@ function onUpdateFn_0(..._args) {
     }
 }
 $: onUpdateFn_0(...[content]);
-function onUpdateFn_1(..._args) { }
-$: onUpdateFn_1(...[shouldSendResetCookie]);
-function onUpdateFn_2(..._args) {
+function onUpdateFn_1(..._args) {
     evaluateJsCode();
 }
-$: onUpdateFn_2_builderContextSignal_content__data__jsCode =
+$: onUpdateFn_1_builderContextSignal_content__data__jsCode =
     $builderContextSignal.content?.data?.jsCode;
-$: onUpdateFn_2(...[onUpdateFn_2_builderContextSignal_content__data__jsCode]);
-function onUpdateFn_3(..._args) {
+$: onUpdateFn_1(...[onUpdateFn_1_builderContextSignal_content__data__jsCode]);
+function onUpdateFn_2(..._args) {
     runHttpRequests();
 }
-$: onUpdateFn_3_builderContextSignal_content__data__httpRequests =
+$: onUpdateFn_2_builderContextSignal_content__data__httpRequests =
     $builderContextSignal.content?.data?.httpRequests;
-$: onUpdateFn_3(...[onUpdateFn_3_builderContextSignal_content__data__httpRequests]);
-function onUpdateFn_4(..._args) {
+$: onUpdateFn_2(...[onUpdateFn_2_builderContextSignal_content__data__httpRequests]);
+function onUpdateFn_3(..._args) {
     emitStateUpdate();
 }
-$: onUpdateFn_4_builderContextSignal_rootState =
+$: onUpdateFn_3_builderContextSignal_rootState =
     $builderContextSignal.rootState;
-$: onUpdateFn_4(...[onUpdateFn_4_builderContextSignal_rootState]);
-function onUpdateFn_5(..._args) {
+$: onUpdateFn_3(...[onUpdateFn_3_builderContextSignal_rootState]);
+function onUpdateFn_4(..._args) {
     if (data) {
         mergeNewRootState(data);
     }
 }
-$: onUpdateFn_5(...[data]);
-function onUpdateFn_6(..._args) {
+$: onUpdateFn_4(...[data]);
+function onUpdateFn_5(..._args) {
     if (locale) {
         mergeNewRootState({
             locale: locale,
         });
     }
 }
-$: onUpdateFn_6(...[locale]);
+$: onUpdateFn_5(...[locale]);
 setContext(builderContext.key, builderContextSignal);
 onDestroy(() => {
     if (isBrowser()) {
@@ -325,7 +316,6 @@ onDestroy(() => {
   <svelte:element
     this={ContentWrapper}
     {...{}}
-    key={forceReRenderCount}
     bind:this={elementRef}
     on:click={(event) => {
       onClick(event);

package/lib/edge/components/content/components/enable-editor.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-type BuilderEditorProps = Omit<ContentProps, "customComponents" | "apiVersion" | "isSsrAbTest" | "blocksWrapper" | "blocksWrapperProps"> & {
+type BuilderEditorProps = Omit<ContentProps, "customComponents" | "apiVersion" | "isSsrAbTest" | "blocksWrapper" | "blocksWrapperProps" | "isNestedRender"> & {
     builderContextSignal: Writable<BuilderContextInterface>;
     setBuilderContextSignal?: (signal: any) => any;
     children?: any;

package/lib/edge/components/content/components/styles.helpers.d.ts

@@ -13,3 +13,4 @@ export declare const getCss: ({ cssCode, contentId }: {
     cssCode?: string | undefined;
     contentId?: string | undefined;
 }) => string;
+export declare const getDefaultStyles: (isNested: boolean | undefined) => "" | "\n.builder-button {\n  all: unset;\n}\n\n.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {\n  margin: 0;\n}\n.builder-text > p, .builder-text > .builder-paragraph {\n  color: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  font-weight: inherit;\n  font-size: inherit;\n  text-align: inherit;\n  font-family: inherit;\n}\n";

package/lib/edge/components/content/components/styles.helpers.js

@@ -56,3 +56,24 @@ export const getCss = ({ cssCode, contentId }) => {
     // TODO: handle if '&' is within a string like `content: "&"`
     return cssCode?.replace(/&/g, `div[builder-content-id="${contentId}"]`) || '';
 };
+const DEFAULT_STYLES = `
+.builder-button {
+  all: unset;
+}
+
+.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
+  margin: 0;
+}
+.builder-text > p, .builder-text > .builder-paragraph {
+  color: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  text-align: inherit;
+  font-family: inherit;
+}
+`;
+export const getDefaultStyles = (isNested) => {
+    return !isNested ? DEFAULT_STYLES : '';
+};

package/lib/edge/components/content/components/styles.svelte

@@ -1,10 +1,11 @@
 <script context="module"></script>
 
 <script>import InlinedStyles from "../../inlined-styles.svelte";
-import { getCss, getFontCss } from "./styles.helpers.js";
+import { getCss, getDefaultStyles, getFontCss } from "./styles.helpers.js";
 export let cssCode = undefined;
 export let contentId = undefined;
 export let customFonts = undefined;
+export let isNestedRender = undefined;
 let injectedStyles = `
 ${getCss({
     cssCode: cssCode,
@@ -13,23 +14,7 @@ ${getCss({
 ${getFontCss({
     customFonts: customFonts,
 })}
-
-.builder-button {
-  all: unset;
-}
-
-.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
-  margin: 0;
-}
-.builder-text > p, .builder-text > .builder-paragraph {
-  color: inherit;
-  line-height: inherit;
-  letter-spacing: inherit;
-  font-weight: inherit;
-  font-size: inherit;
-  text-align: inherit;
-  font-family: inherit;
-}
+${getDefaultStyles(isNestedRender)}
 `.trim();
 </script>
 

package/lib/edge/components/content/components/styles.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     cssCode?: string;
     customFonts?: CustomFont[];
     contentId?: string;
+    isNestedRender?: boolean;
 }
 import type { CustomFont } from "./styles.helpers.js";
 declare const __propDef: {
@@ -10,6 +11,7 @@ declare const __propDef: {
         cssCode?: Props["cssCode"];
         contentId?: Props["contentId"];
         customFonts?: Props["customFonts"];
+        isNestedRender?: Props["isNestedRender"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/lib/edge/components/content/content.svelte

@@ -29,6 +29,7 @@ export let contentWrapperProps = undefined;
 export let linkComponent = undefined;
 export let trustedHosts = undefined;
 export let isSsrAbTest;
+export let isNestedRender = undefined;
 function contentSetState(newRootState) {
     $builderContextSignal.rootState = newRootState;
 }
@@ -101,6 +102,7 @@ setContext(ComponentsContext.key, {
   {/if}
   {#if TARGET !== "reactNative"}
     <ContentStyles
+      {isNestedRender}
       contentId={$builderContextSignal.content?.id}
       cssCode={$builderContextSignal.content?.data?.cssCode}
       customFonts={$builderContextSignal.content?.data?.customFonts}

package/lib/edge/components/content/content.svelte.d.ts

@@ -20,6 +20,7 @@ declare const __propDef: {
         linkComponent?: ContentProps["linkComponent"];
         trustedHosts?: ContentProps["trustedHosts"];
         isSsrAbTest: ContentProps["isSsrAbTest"];
+        isNestedRender?: ContentProps["isNestedRender"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/lib/edge/components/content/contentProps.types.d.ts

@@ -8,5 +8,10 @@ interface InternalRenderProps {
  * This is in a separate file so that we can override it (most notably in Vue,
  * where prop types cannot be wrapped by generics like `EnforcePartials`).
  */
-export type ContentProps = InternalRenderProps & EnforcePartials<ContentVariantsPrps>;
+export type ContentProps = InternalRenderProps & EnforcePartials<ContentVariantsPrps> & {
+    /**
+     * For internal use only. Do not provide this prop.
+     */
+    isNestedRender?: boolean;
+};
 export {};

package/lib/edge/components/content-variants/content-variants.svelte

@@ -10,7 +10,7 @@ import InlinedStyles from "../inlined-styles.svelte";
 import { checkShouldRenderVariants, getScriptString, getUpdateCookieAndStylesScript, getVariants, } from "./helpers.js";
 export let canTrack = undefined;
 export let content = undefined;
-export let __isNestedRender = undefined;
+export let isNestedRender = undefined;
 export let model = undefined;
 export let data = undefined;
 export let context = undefined;
@@ -59,7 +59,7 @@ onMount(() => {
 });
 </script>
 
-{#if !__isNestedRender && TARGET !== "reactNative"}
+{#if !isNestedRender && TARGET !== "reactNative"}
   <InlinedScript scriptStr={getScriptString()} />
 {/if}
 
@@ -72,6 +72,7 @@ onMount(() => {
 
   {#each getVariants(content) as variant (variant.testVariationId)}
     <ContentComponent
+      {isNestedRender}
       content={variant}
       showContent={false}
       {model}
@@ -94,6 +95,7 @@ onMount(() => {
   {/each}
 {/if}
 <ContentComponent
+  {isNestedRender}
   {...{}}
   content={defaultContent()}
   showContent={true}

package/lib/edge/components/content-variants/content-variants.svelte.d.ts

@@ -3,14 +3,14 @@ type VariantsProviderProps = ContentVariantsPrps & {
     /**
      * For internal use only. Do not provide this prop.
      */
-    __isNestedRender?: boolean;
+    isNestedRender?: boolean;
 };
 import type { ContentVariantsPrps } from "./content-variants.types.js";
 declare const __propDef: {
     props: {
         canTrack?: VariantsProviderProps["canTrack"];
         content?: VariantsProviderProps["content"];
-        __isNestedRender?: VariantsProviderProps["__isNestedRender"];
+        isNestedRender?: VariantsProviderProps["isNestedRender"];
         model?: VariantsProviderProps["model"];
         data?: VariantsProviderProps["data"];
         context?: VariantsProviderProps["context"];

package/lib/edge/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "1.0.12";
+export declare const SDK_VERSION = "1.0.14";

package/lib/edge/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "1.0.12";
+export const SDK_VERSION = "1.0.14";

package/lib/node/blocks/symbol/symbol.svelte

@@ -50,7 +50,7 @@ $: onUpdateFn_0(...[symbol]);
   use:setAttrs={filterAttrs(attributes, "on:", true)}
 >
   <ContentVariants
-    __isNestedRender={true}
+    isNestedRender={true}
     apiVersion={$builderContext.apiVersion}
     apiKey={$builderContext.apiKey}
     context={{

package/lib/node/components/content/components/enable-editor.svelte

@@ -76,7 +76,6 @@ function processMessage(event) {
                             breakpoints,
                         },
                     });
-                    forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
                 }
             },
             animation: (animation) => {
@@ -84,7 +83,6 @@ function processMessage(event) {
             },
             contentUpdate: (newContent) => {
                 mergeNewContent(newContent);
-                forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
             },
         },
     })(event);
@@ -174,7 +172,6 @@ function emitStateUpdate() {
     }
 }
 function elementRef_onIniteditingbldr(event) {
-    forceReRenderCount = forceReRenderCount + 1;
     window.addEventListener("message", processMessage);
     registerInsertMenu();
     setupBrowserForEditing({
@@ -229,10 +226,6 @@ function elementRef_onInitpreviewingbldr(event) {
     }
 }
 let elementRef;
-let forceReRenderCount = 0;
-let firstRender = true;
-let lastUpdated = 0;
-let shouldSendResetCookie = false;
 let ContentWrapper = contentWrapper || "div";
 let httpReqsData = {};
 let clicked = false;
@@ -278,40 +271,38 @@ function onUpdateFn_0(..._args) {
     }
 }
 $: onUpdateFn_0(...[content]);
-function onUpdateFn_1(..._args) { }
-$: onUpdateFn_1(...[shouldSendResetCookie]);
-function onUpdateFn_2(..._args) {
+function onUpdateFn_1(..._args) {
     evaluateJsCode();
 }
-$: onUpdateFn_2_builderContextSignal_content__data__jsCode =
+$: onUpdateFn_1_builderContextSignal_content__data__jsCode =
     $builderContextSignal.content?.data?.jsCode;
-$: onUpdateFn_2(...[onUpdateFn_2_builderContextSignal_content__data__jsCode]);
-function onUpdateFn_3(..._args) {
+$: onUpdateFn_1(...[onUpdateFn_1_builderContextSignal_content__data__jsCode]);
+function onUpdateFn_2(..._args) {
     runHttpRequests();
 }
-$: onUpdateFn_3_builderContextSignal_content__data__httpRequests =
+$: onUpdateFn_2_builderContextSignal_content__data__httpRequests =
     $builderContextSignal.content?.data?.httpRequests;
-$: onUpdateFn_3(...[onUpdateFn_3_builderContextSignal_content__data__httpRequests]);
-function onUpdateFn_4(..._args) {
+$: onUpdateFn_2(...[onUpdateFn_2_builderContextSignal_content__data__httpRequests]);
+function onUpdateFn_3(..._args) {
     emitStateUpdate();
 }
-$: onUpdateFn_4_builderContextSignal_rootState =
+$: onUpdateFn_3_builderContextSignal_rootState =
     $builderContextSignal.rootState;
-$: onUpdateFn_4(...[onUpdateFn_4_builderContextSignal_rootState]);
-function onUpdateFn_5(..._args) {
+$: onUpdateFn_3(...[onUpdateFn_3_builderContextSignal_rootState]);
+function onUpdateFn_4(..._args) {
     if (data) {
         mergeNewRootState(data);
     }
 }
-$: onUpdateFn_5(...[data]);
-function onUpdateFn_6(..._args) {
+$: onUpdateFn_4(...[data]);
+function onUpdateFn_5(..._args) {
     if (locale) {
         mergeNewRootState({
             locale: locale,
         });
     }
 }
-$: onUpdateFn_6(...[locale]);
+$: onUpdateFn_5(...[locale]);
 setContext(builderContext.key, builderContextSignal);
 onDestroy(() => {
     if (isBrowser()) {
@@ -325,7 +316,6 @@ onDestroy(() => {
   <svelte:element
     this={ContentWrapper}
     {...{}}
-    key={forceReRenderCount}
     bind:this={elementRef}
     on:click={(event) => {
       onClick(event);

package/lib/node/components/content/components/enable-editor.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-type BuilderEditorProps = Omit<ContentProps, "customComponents" | "apiVersion" | "isSsrAbTest" | "blocksWrapper" | "blocksWrapperProps"> & {
+type BuilderEditorProps = Omit<ContentProps, "customComponents" | "apiVersion" | "isSsrAbTest" | "blocksWrapper" | "blocksWrapperProps" | "isNestedRender"> & {
     builderContextSignal: Writable<BuilderContextInterface>;
     setBuilderContextSignal?: (signal: any) => any;
     children?: any;

package/lib/node/components/content/components/styles.helpers.d.ts

@@ -13,3 +13,4 @@ export declare const getCss: ({ cssCode, contentId }: {
     cssCode?: string | undefined;
     contentId?: string | undefined;
 }) => string;
+export declare const getDefaultStyles: (isNested: boolean | undefined) => "" | "\n.builder-button {\n  all: unset;\n}\n\n.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {\n  margin: 0;\n}\n.builder-text > p, .builder-text > .builder-paragraph {\n  color: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  font-weight: inherit;\n  font-size: inherit;\n  text-align: inherit;\n  font-family: inherit;\n}\n";

package/lib/node/components/content/components/styles.helpers.js

@@ -56,3 +56,24 @@ export const getCss = ({ cssCode, contentId }) => {
     // TODO: handle if '&' is within a string like `content: "&"`
     return cssCode?.replace(/&/g, `div[builder-content-id="${contentId}"]`) || '';
 };
+const DEFAULT_STYLES = `
+.builder-button {
+  all: unset;
+}
+
+.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
+  margin: 0;
+}
+.builder-text > p, .builder-text > .builder-paragraph {
+  color: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  text-align: inherit;
+  font-family: inherit;
+}
+`;
+export const getDefaultStyles = (isNested) => {
+    return !isNested ? DEFAULT_STYLES : '';
+};

package/lib/node/components/content/components/styles.svelte

@@ -1,10 +1,11 @@
 <script context="module"></script>
 
 <script>import InlinedStyles from "../../inlined-styles.svelte";
-import { getCss, getFontCss } from "./styles.helpers.js";
+import { getCss, getDefaultStyles, getFontCss } from "./styles.helpers.js";
 export let cssCode = undefined;
 export let contentId = undefined;
 export let customFonts = undefined;
+export let isNestedRender = undefined;
 let injectedStyles = `
 ${getCss({
     cssCode: cssCode,
@@ -13,23 +14,7 @@ ${getCss({
 ${getFontCss({
     customFonts: customFonts,
 })}
-
-.builder-button {
-  all: unset;
-}
-
-.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
-  margin: 0;
-}
-.builder-text > p, .builder-text > .builder-paragraph {
-  color: inherit;
-  line-height: inherit;
-  letter-spacing: inherit;
-  font-weight: inherit;
-  font-size: inherit;
-  text-align: inherit;
-  font-family: inherit;
-}
+${getDefaultStyles(isNestedRender)}
 `.trim();
 </script>
 

package/lib/node/components/content/components/styles.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     cssCode?: string;
     customFonts?: CustomFont[];
     contentId?: string;
+    isNestedRender?: boolean;
 }
 import type { CustomFont } from "./styles.helpers.js";
 declare const __propDef: {
@@ -10,6 +11,7 @@ declare const __propDef: {
         cssCode?: Props["cssCode"];
         contentId?: Props["contentId"];
         customFonts?: Props["customFonts"];
+        isNestedRender?: Props["isNestedRender"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/lib/node/components/content/content.svelte

@@ -29,6 +29,7 @@ export let contentWrapperProps = undefined;
 export let linkComponent = undefined;
 export let trustedHosts = undefined;
 export let isSsrAbTest;
+export let isNestedRender = undefined;
 function contentSetState(newRootState) {
     $builderContextSignal.rootState = newRootState;
 }
@@ -101,6 +102,7 @@ setContext(ComponentsContext.key, {
   {/if}
   {#if TARGET !== "reactNative"}
     <ContentStyles
+      {isNestedRender}
       contentId={$builderContextSignal.content?.id}
       cssCode={$builderContextSignal.content?.data?.cssCode}
       customFonts={$builderContextSignal.content?.data?.customFonts}

package/lib/node/components/content/content.svelte.d.ts

@@ -20,6 +20,7 @@ declare const __propDef: {
         linkComponent?: ContentProps["linkComponent"];
         trustedHosts?: ContentProps["trustedHosts"];
         isSsrAbTest: ContentProps["isSsrAbTest"];
+        isNestedRender?: ContentProps["isNestedRender"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/lib/node/components/content/contentProps.types.d.ts

@@ -8,5 +8,10 @@ interface InternalRenderProps {
  * This is in a separate file so that we can override it (most notably in Vue,
  * where prop types cannot be wrapped by generics like `EnforcePartials`).
  */
-export type ContentProps = InternalRenderProps & EnforcePartials<ContentVariantsPrps>;
+export type ContentProps = InternalRenderProps & EnforcePartials<ContentVariantsPrps> & {
+    /**
+     * For internal use only. Do not provide this prop.
+     */
+    isNestedRender?: boolean;
+};
 export {};

package/lib/node/components/content-variants/content-variants.svelte

@@ -10,7 +10,7 @@ import InlinedStyles from "../inlined-styles.svelte";
 import { checkShouldRenderVariants, getScriptString, getUpdateCookieAndStylesScript, getVariants, } from "./helpers.js";
 export let canTrack = undefined;
 export let content = undefined;
-export let __isNestedRender = undefined;
+export let isNestedRender = undefined;
 export let model = undefined;
 export let data = undefined;
 export let context = undefined;
@@ -59,7 +59,7 @@ onMount(() => {
 });
 </script>
 
-{#if !__isNestedRender && TARGET !== "reactNative"}
+{#if !isNestedRender && TARGET !== "reactNative"}
   <InlinedScript scriptStr={getScriptString()} />
 {/if}
 
@@ -72,6 +72,7 @@ onMount(() => {
 
   {#each getVariants(content) as variant (variant.testVariationId)}
     <ContentComponent
+      {isNestedRender}
       content={variant}
       showContent={false}
       {model}
@@ -94,6 +95,7 @@ onMount(() => {
   {/each}
 {/if}
 <ContentComponent
+  {isNestedRender}
   {...{}}
   content={defaultContent()}
   showContent={true}

package/lib/node/components/content-variants/content-variants.svelte.d.ts

@@ -3,14 +3,14 @@ type VariantsProviderProps = ContentVariantsPrps & {
     /**
      * For internal use only. Do not provide this prop.
      */
-    __isNestedRender?: boolean;
+    isNestedRender?: boolean;
 };
 import type { ContentVariantsPrps } from "./content-variants.types.js";
 declare const __propDef: {
     props: {
         canTrack?: VariantsProviderProps["canTrack"];
         content?: VariantsProviderProps["content"];
-        __isNestedRender?: VariantsProviderProps["__isNestedRender"];
+        isNestedRender?: VariantsProviderProps["isNestedRender"];
         model?: VariantsProviderProps["model"];
         data?: VariantsProviderProps["data"];
         context?: VariantsProviderProps["context"];

package/lib/node/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "1.0.12";
+export declare const SDK_VERSION = "1.0.14";

package/lib/node/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "1.0.12";
+export const SDK_VERSION = "1.0.14";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "type": "module",
   "files": [
     "lib",

package/src/blocks/symbol/symbol.svelte

@@ -61,7 +61,7 @@
   use:setAttrs={filterAttrs(attributes, "on:", true)}
 >
   <ContentVariants
-    __isNestedRender={true}
+    isNestedRender={true}
     apiVersion={$builderContext.apiVersion}
     apiKey={$builderContext.apiKey}
     context={{

package/src/components/content/components/enable-editor.svelte

@@ -6,6 +6,7 @@
     | "isSsrAbTest"
     | "blocksWrapper"
     | "blocksWrapperProps"
+    | "isNestedRender"
   > & {
     builderContextSignal: Writable<BuilderContextInterface>;
     setBuilderContextSignal?: (signal: any) => any;
@@ -107,7 +108,6 @@
                 breakpoints,
               },
             });
-            forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
           }
         },
         animation: (animation) => {
@@ -115,7 +115,6 @@
         },
         contentUpdate: (newContent) => {
           mergeNewContent(newContent);
-          forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
         },
       },
     })(event);
@@ -216,7 +215,6 @@
     }
   }
   function elementRef_onIniteditingbldr(event) {
-    forceReRenderCount = forceReRenderCount + 1;
     window.addEventListener("message", processMessage);
     registerInsertMenu();
     setupBrowserForEditing({
@@ -284,10 +282,6 @@
 
   let elementRef;
 
-  let forceReRenderCount = 0;
-  let firstRender = true;
-  let lastUpdated = 0;
-  let shouldSendResetCookie = false;
   let ContentWrapper = contentWrapper || "div";
   let httpReqsData = {};
   let clicked = false;
@@ -341,42 +335,38 @@
 
   $: onUpdateFn_0(...[content]);
 
-  function onUpdateFn_1(..._args: any[]) {}
-
-  $: onUpdateFn_1(...[shouldSendResetCookie]);
-
-  function onUpdateFn_2(..._args: any[]) {
+  function onUpdateFn_1(..._args: any[]) {
     evaluateJsCode();
   }
-  $: onUpdateFn_2_builderContextSignal_content__data__jsCode =
+  $: onUpdateFn_1_builderContextSignal_content__data__jsCode =
     $builderContextSignal.content?.data?.jsCode;
-  $: onUpdateFn_2(...[onUpdateFn_2_builderContextSignal_content__data__jsCode]);
+  $: onUpdateFn_1(...[onUpdateFn_1_builderContextSignal_content__data__jsCode]);
 
-  function onUpdateFn_3(..._args: any[]) {
+  function onUpdateFn_2(..._args: any[]) {
     runHttpRequests();
   }
-  $: onUpdateFn_3_builderContextSignal_content__data__httpRequests =
+  $: onUpdateFn_2_builderContextSignal_content__data__httpRequests =
     $builderContextSignal.content?.data?.httpRequests;
-  $: onUpdateFn_3(
-    ...[onUpdateFn_3_builderContextSignal_content__data__httpRequests]
+  $: onUpdateFn_2(
+    ...[onUpdateFn_2_builderContextSignal_content__data__httpRequests]
   );
 
-  function onUpdateFn_4(..._args: any[]) {
+  function onUpdateFn_3(..._args: any[]) {
     emitStateUpdate();
   }
-  $: onUpdateFn_4_builderContextSignal_rootState =
+  $: onUpdateFn_3_builderContextSignal_rootState =
     $builderContextSignal.rootState;
-  $: onUpdateFn_4(...[onUpdateFn_4_builderContextSignal_rootState]);
+  $: onUpdateFn_3(...[onUpdateFn_3_builderContextSignal_rootState]);
 
-  function onUpdateFn_5(..._args: any[]) {
+  function onUpdateFn_4(..._args: any[]) {
     if (data) {
       mergeNewRootState(data);
     }
   }
 
-  $: onUpdateFn_5(...[data]);
+  $: onUpdateFn_4(...[data]);
 
-  function onUpdateFn_6(..._args: any[]) {
+  function onUpdateFn_5(..._args: any[]) {
     if (locale) {
       mergeNewRootState({
         locale: locale,
@@ -384,7 +374,7 @@
     }
   }
 
-  $: onUpdateFn_6(...[locale]);
+  $: onUpdateFn_5(...[locale]);
 
   setContext(builderContext.key, builderContextSignal);
 
@@ -403,7 +393,6 @@
   <svelte:element
     this={ContentWrapper}
     {...{}}
-    key={forceReRenderCount}
     bind:this={elementRef}
     on:click={(event) => {
       onClick(event);

package/src/components/content/components/styles.helpers.ts

@@ -74,4 +74,25 @@ export const getCss = ({
   // E.g. `& .foobar { ... }` to scope CSS
   // TODO: handle if '&' is within a string like `content: "&"`
   return cssCode?.replace(/&/g, `div[builder-content-id="${contentId}"]`) || '';
+};
+const DEFAULT_STYLES = `
+.builder-button {
+  all: unset;
+}
+
+.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
+  margin: 0;
+}
+.builder-text > p, .builder-text > .builder-paragraph {
+  color: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  text-align: inherit;
+  font-family: inherit;
+}
+`;
+export const getDefaultStyles = (isNested: boolean | undefined) => {
+  return !isNested ? DEFAULT_STYLES : '';
 }

package/src/components/content/components/styles.svelte

@@ -3,17 +3,19 @@
     cssCode?: string;
     customFonts?: CustomFont[];
     contentId?: string;
+    isNestedRender?: boolean;
   }
 </script>
 
 <script lang="ts">
   import InlinedStyles from "../../inlined-styles.svelte";
   import type { CustomFont } from "./styles.helpers.js";
-  import { getCss, getFontCss } from "./styles.helpers.js";
+  import { getCss, getDefaultStyles, getFontCss } from "./styles.helpers.js";
 
   export let cssCode: Props["cssCode"] = undefined;
   export let contentId: Props["contentId"] = undefined;
   export let customFonts: Props["customFonts"] = undefined;
+  export let isNestedRender: Props["isNestedRender"] = undefined;
 
   let injectedStyles = `
 ${getCss({
@@ -23,23 +25,7 @@ ${getCss({
 ${getFontCss({
   customFonts: customFonts,
 })}
-
-.builder-button {
-  all: unset;
-}
-
-.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
-  margin: 0;
-}
-.builder-text > p, .builder-text > .builder-paragraph {
-  color: inherit;
-  line-height: inherit;
-  letter-spacing: inherit;
-  font-weight: inherit;
-  font-size: inherit;
-  text-align: inherit;
-  font-family: inherit;
-}
+${getDefaultStyles(isNestedRender)}
 `.trim();
 </script>
 

package/src/components/content/content.svelte

@@ -44,6 +44,7 @@
   export let linkComponent: ContentProps["linkComponent"] = undefined;
   export let trustedHosts: ContentProps["trustedHosts"] = undefined;
   export let isSsrAbTest: ContentProps["isSsrAbTest"];
+  export let isNestedRender: ContentProps["isNestedRender"] = undefined;
 
   function contentSetState(newRootState: BuilderRenderState) {
     $builderContextSignal.rootState = newRootState;
@@ -125,6 +126,7 @@
   {/if}
   {#if TARGET !== "reactNative"}
     <ContentStyles
+      {isNestedRender}
       contentId={$builderContextSignal.content?.id}
       cssCode={$builderContextSignal.content?.data?.cssCode}
       customFonts={$builderContextSignal.content?.data?.customFonts}

package/src/components/content/contentProps.types.ts

@@ -9,4 +9,9 @@ interface InternalRenderProps {
  * This is in a separate file so that we can override it (most notably in Vue,
  * where prop types cannot be wrapped by generics like `EnforcePartials`).
  */
-export type ContentProps = InternalRenderProps & EnforcePartials<ContentVariantsPrps>
+export type ContentProps = InternalRenderProps & EnforcePartials<ContentVariantsPrps> & {
+  /**
+   * For internal use only. Do not provide this prop.
+   */
+  isNestedRender?: boolean;
+}

package/src/components/content-variants/content-variants.svelte

@@ -3,7 +3,7 @@
     /**
      * For internal use only. Do not provide this prop.
      */
-    __isNestedRender?: boolean;
+    isNestedRender?: boolean;
   };
 </script>
 
@@ -26,7 +26,7 @@
 
   export let canTrack: VariantsProviderProps["canTrack"] = undefined;
   export let content: VariantsProviderProps["content"] = undefined;
-  export let __isNestedRender: VariantsProviderProps["__isNestedRender"] =
+  export let isNestedRender: VariantsProviderProps["isNestedRender"] =
     undefined;
   export let model: VariantsProviderProps["model"] = undefined;
   export let data: VariantsProviderProps["data"] = undefined;
@@ -86,7 +86,7 @@
   });
 </script>
 
-{#if !__isNestedRender && TARGET !== "reactNative"}
+{#if !isNestedRender && TARGET !== "reactNative"}
   <InlinedScript scriptStr={getScriptString()} />
 {/if}
 
@@ -99,6 +99,7 @@
 
   {#each getVariants(content) as variant (variant.testVariationId)}
     <ContentComponent
+      {isNestedRender}
       content={variant}
       showContent={false}
       {model}
@@ -121,6 +122,7 @@
   {/each}
 {/if}
 <ContentComponent
+  {isNestedRender}
   {...{}}
   content={defaultContent()}
   showContent={true}

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "1.0.12"
+export const SDK_VERSION = "1.0.14"