@builder.io/sdk-svelte 0.6.2 → 0.6.3

package/lib/browser/blocks/raw-text/raw-text.svelte

@@ -4,4 +4,4 @@
 export let attributes = undefined;
 </script>
 
-<span class={attributes.class}>{@html text?.toString() || ""}</span>
+<div class={attributes.class}>{@html text?.toString() || ""}</div>

package/lib/browser/blocks/text/text.svelte

@@ -13,9 +13,11 @@ function mitosis_styling(node, vars) {
 }
 </script>
 
-<span
+<div
   use:mitosis_styling={{
     outline: "none",
   }}
-  class="builder-text">{@html text?.toString() || ""}</span
->
+  class="builder-text"
+>
+  {@html text?.toString() || ""}
+</div>

package/lib/browser/components/block/components/block-styles.svelte

@@ -9,6 +9,14 @@ import InlinedStyles from "../../inlined-styles.svelte";
 export let block;
 export let context;
 $: canShowBlock = () => {
+    const processedBlock = getProcessedBlock({
+        block: block,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
+        context: context.context,
+        shouldEvaluateBindings: true,
+    });
     // only render styles for blocks that are visible
     if (checkIsDefined(processedBlock.hide)) {
         return !processedBlock.hide;
@@ -19,6 +27,14 @@ $: canShowBlock = () => {
     return true;
 };
 $: css = () => {
+    const processedBlock = getProcessedBlock({
+        block: block,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
+        context: context.context,
+        shouldEvaluateBindings: true,
+    });
     const styles = processedBlock.responsiveStyles;
     const content = context.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
@@ -51,14 +67,6 @@ $: css = () => {
         : "";
     return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
 };
-let processedBlock = getProcessedBlock({
-    block: block,
-    localState: context.localState,
-    rootState: context.rootState,
-    rootSetState: context.rootSetState,
-    context: context.context,
-    shouldEvaluateBindings: true,
-});
 </script>
 
 {#if TARGET !== "reactNative" && css() && canShowBlock()}

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.6.2";
+export declare const SDK_VERSION = "0.6.3";

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

@@ -1 +1 @@
-export const SDK_VERSION = "0.6.2";
+export const SDK_VERSION = "0.6.3";

package/lib/browser/functions/fetch-builder-props.d.ts

@@ -35,6 +35,19 @@ type GetBuilderPropsOptions = (Omit<GetContentOptions, 'model'> & {
 /**
  * Given an `apiKey` and `url` (or `path` + `searchParams`), provides all props that `Content` needs to render Builder Content.
  *
+ * @example
+ * ```jsx
+ * const builderProps = await fetchBuilderProps({
+ *    apiKey: 'API_KEY',
+ *    // provide `url`
+ *    url: yourPageUrl,
+ *    // OR provide `path` + `searchParams`
+ *    path: yourPath,
+ *    searchParams: yourSearchParams,
+ * });
+ *
+ * return <Content {...builderProps} />;
+ * ```
  */
 export declare const fetchBuilderProps: (_args: GetBuilderPropsOptions) => Promise<ContentVariantsPrps>;
 export {};

package/lib/browser/functions/fetch-builder-props.js

@@ -3,6 +3,19 @@ import { fetchOneEntry } from './get-content/index.js';
 /**
  * Given an `apiKey` and `url` (or `path` + `searchParams`), provides all props that `Content` needs to render Builder Content.
  *
+ * @example
+ * ```jsx
+ * const builderProps = await fetchBuilderProps({
+ *    apiKey: 'API_KEY',
+ *    // provide `url`
+ *    url: yourPageUrl,
+ *    // OR provide `path` + `searchParams`
+ *    path: yourPath,
+ *    searchParams: yourSearchParams,
+ * });
+ *
+ * return <Content {...builderProps} />;
+ * ```
  */
 export const fetchBuilderProps = async (_args) => {
     const urlPath = _args.path || _args.url?.pathname || _args.userAttributes?.urlPath;

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

@@ -97,7 +97,6 @@ export interface ComponentInfo {
          */
         query?: any;
     };
-    /** not yet implemented */
     friendlyName?: string;
     /**
      * Use to restrict access to your component based on a the current user permissions

package/lib/edge/blocks/raw-text/raw-text.svelte

@@ -4,4 +4,4 @@
 export let attributes = undefined;
 </script>
 
-<span class={attributes.class}>{@html text?.toString() || ""}</span>
+<div class={attributes.class}>{@html text?.toString() || ""}</div>

package/lib/edge/blocks/text/text.svelte

@@ -13,9 +13,11 @@ function mitosis_styling(node, vars) {
 }
 </script>
 
-<span
+<div
   use:mitosis_styling={{
     outline: "none",
   }}
-  class="builder-text">{@html text?.toString() || ""}</span
->
+  class="builder-text"
+>
+  {@html text?.toString() || ""}
+</div>

package/lib/edge/components/block/components/block-styles.svelte

@@ -9,6 +9,14 @@ import InlinedStyles from "../../inlined-styles.svelte";
 export let block;
 export let context;
 $: canShowBlock = () => {
+    const processedBlock = getProcessedBlock({
+        block: block,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
+        context: context.context,
+        shouldEvaluateBindings: true,
+    });
     // only render styles for blocks that are visible
     if (checkIsDefined(processedBlock.hide)) {
         return !processedBlock.hide;
@@ -19,6 +27,14 @@ $: canShowBlock = () => {
     return true;
 };
 $: css = () => {
+    const processedBlock = getProcessedBlock({
+        block: block,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
+        context: context.context,
+        shouldEvaluateBindings: true,
+    });
     const styles = processedBlock.responsiveStyles;
     const content = context.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
@@ -51,14 +67,6 @@ $: css = () => {
         : "";
     return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
 };
-let processedBlock = getProcessedBlock({
-    block: block,
-    localState: context.localState,
-    rootState: context.rootState,
-    rootSetState: context.rootSetState,
-    context: context.context,
-    shouldEvaluateBindings: true,
-});
 </script>
 
 {#if TARGET !== "reactNative" && css() && canShowBlock()}

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.6.2";
+export declare const SDK_VERSION = "0.6.3";

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

@@ -1 +1 @@
-export const SDK_VERSION = "0.6.2";
+export const SDK_VERSION = "0.6.3";

package/lib/edge/functions/fetch-builder-props.d.ts

@@ -35,6 +35,19 @@ type GetBuilderPropsOptions = (Omit<GetContentOptions, 'model'> & {
 /**
  * Given an `apiKey` and `url` (or `path` + `searchParams`), provides all props that `Content` needs to render Builder Content.
  *
+ * @example
+ * ```jsx
+ * const builderProps = await fetchBuilderProps({
+ *    apiKey: 'API_KEY',
+ *    // provide `url`
+ *    url: yourPageUrl,
+ *    // OR provide `path` + `searchParams`
+ *    path: yourPath,
+ *    searchParams: yourSearchParams,
+ * });
+ *
+ * return <Content {...builderProps} />;
+ * ```
  */
 export declare const fetchBuilderProps: (_args: GetBuilderPropsOptions) => Promise<ContentVariantsPrps>;
 export {};

package/lib/edge/functions/fetch-builder-props.js

@@ -3,6 +3,19 @@ import { fetchOneEntry } from './get-content/index.js';
 /**
  * Given an `apiKey` and `url` (or `path` + `searchParams`), provides all props that `Content` needs to render Builder Content.
  *
+ * @example
+ * ```jsx
+ * const builderProps = await fetchBuilderProps({
+ *    apiKey: 'API_KEY',
+ *    // provide `url`
+ *    url: yourPageUrl,
+ *    // OR provide `path` + `searchParams`
+ *    path: yourPath,
+ *    searchParams: yourSearchParams,
+ * });
+ *
+ * return <Content {...builderProps} />;
+ * ```
  */
 export const fetchBuilderProps = async (_args) => {
     const urlPath = _args.path || _args.url?.pathname || _args.userAttributes?.urlPath;

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

@@ -97,7 +97,6 @@ export interface ComponentInfo {
          */
         query?: any;
     };
-    /** not yet implemented */
     friendlyName?: string;
     /**
      * Use to restrict access to your component based on a the current user permissions

package/lib/node/blocks/raw-text/raw-text.svelte

@@ -4,4 +4,4 @@
 export let attributes = undefined;
 </script>
 
-<span class={attributes.class}>{@html text?.toString() || ""}</span>
+<div class={attributes.class}>{@html text?.toString() || ""}</div>

package/lib/node/blocks/text/text.svelte

@@ -13,9 +13,11 @@ function mitosis_styling(node, vars) {
 }
 </script>
 
-<span
+<div
   use:mitosis_styling={{
     outline: "none",
   }}
-  class="builder-text">{@html text?.toString() || ""}</span
->
+  class="builder-text"
+>
+  {@html text?.toString() || ""}
+</div>

package/lib/node/components/block/components/block-styles.svelte

@@ -9,6 +9,14 @@ import InlinedStyles from "../../inlined-styles.svelte";
 export let block;
 export let context;
 $: canShowBlock = () => {
+    const processedBlock = getProcessedBlock({
+        block: block,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
+        context: context.context,
+        shouldEvaluateBindings: true,
+    });
     // only render styles for blocks that are visible
     if (checkIsDefined(processedBlock.hide)) {
         return !processedBlock.hide;
@@ -19,6 +27,14 @@ $: canShowBlock = () => {
     return true;
 };
 $: css = () => {
+    const processedBlock = getProcessedBlock({
+        block: block,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
+        context: context.context,
+        shouldEvaluateBindings: true,
+    });
     const styles = processedBlock.responsiveStyles;
     const content = context.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
@@ -51,14 +67,6 @@ $: css = () => {
         : "";
     return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
 };
-let processedBlock = getProcessedBlock({
-    block: block,
-    localState: context.localState,
-    rootState: context.rootState,
-    rootSetState: context.rootSetState,
-    context: context.context,
-    shouldEvaluateBindings: true,
-});
 </script>
 
 {#if TARGET !== "reactNative" && css() && canShowBlock()}

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.6.2";
+export declare const SDK_VERSION = "0.6.3";

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

@@ -1 +1 @@
-export const SDK_VERSION = "0.6.2";
+export const SDK_VERSION = "0.6.3";

package/lib/node/functions/fetch-builder-props.d.ts

@@ -35,6 +35,19 @@ type GetBuilderPropsOptions = (Omit<GetContentOptions, 'model'> & {
 /**
  * Given an `apiKey` and `url` (or `path` + `searchParams`), provides all props that `Content` needs to render Builder Content.
  *
+ * @example
+ * ```jsx
+ * const builderProps = await fetchBuilderProps({
+ *    apiKey: 'API_KEY',
+ *    // provide `url`
+ *    url: yourPageUrl,
+ *    // OR provide `path` + `searchParams`
+ *    path: yourPath,
+ *    searchParams: yourSearchParams,
+ * });
+ *
+ * return <Content {...builderProps} />;
+ * ```
  */
 export declare const fetchBuilderProps: (_args: GetBuilderPropsOptions) => Promise<ContentVariantsPrps>;
 export {};

package/lib/node/functions/fetch-builder-props.js

@@ -3,6 +3,19 @@ import { fetchOneEntry } from './get-content/index.js';
 /**
  * Given an `apiKey` and `url` (or `path` + `searchParams`), provides all props that `Content` needs to render Builder Content.
  *
+ * @example
+ * ```jsx
+ * const builderProps = await fetchBuilderProps({
+ *    apiKey: 'API_KEY',
+ *    // provide `url`
+ *    url: yourPageUrl,
+ *    // OR provide `path` + `searchParams`
+ *    path: yourPath,
+ *    searchParams: yourSearchParams,
+ * });
+ *
+ * return <Content {...builderProps} />;
+ * ```
  */
 export const fetchBuilderProps = async (_args) => {
     const urlPath = _args.path || _args.url?.pathname || _args.userAttributes?.urlPath;

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

@@ -97,7 +97,6 @@ export interface ComponentInfo {
          */
         query?: any;
     };
-    /** not yet implemented */
     friendlyName?: string;
     /**
      * Use to restrict access to your component based on a the current user permissions

package/package.json

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

package/src/blocks/raw-text/raw-text.svelte

@@ -10,4 +10,4 @@
   export let attributes: RawTextProps["attributes"] = undefined;
 </script>
 
-<span class={attributes.class}>{@html text?.toString() || ""}</span>
+<div class={attributes.class}>{@html text?.toString() || ""}</div>

package/src/blocks/text/text.svelte

@@ -18,9 +18,11 @@
   }
 </script>
 
-<span
+<div
   use:mitosis_styling={{
     outline: "none",
   }}
-  class="builder-text">{@html text?.toString() || ""}</span
->
+  class="builder-text"
+>
+  {@html text?.toString() || ""}
+</div>

package/src/components/block/components/block-styles.svelte

@@ -22,6 +22,14 @@
   export let context: BlockStylesProps["context"];
 
   $: canShowBlock = () => {
+    const processedBlock = getProcessedBlock({
+      block: block,
+      localState: context.localState,
+      rootState: context.rootState,
+      rootSetState: context.rootSetState,
+      context: context.context,
+      shouldEvaluateBindings: true,
+    });
     // only render styles for blocks that are visible
     if (checkIsDefined(processedBlock.hide)) {
       return !processedBlock.hide;
@@ -32,6 +40,14 @@
     return true;
   };
   $: css = () => {
+    const processedBlock = getProcessedBlock({
+      block: block,
+      localState: context.localState,
+      rootState: context.rootState,
+      rootSetState: context.rootSetState,
+      context: context.context,
+      shouldEvaluateBindings: true,
+    });
     const styles = processedBlock.responsiveStyles;
     const content = context.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(
@@ -72,15 +88,6 @@
       : "";
     return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
   };
-
-  let processedBlock = getProcessedBlock({
-    block: block,
-    localState: context.localState,
-    rootState: context.rootState,
-    rootSetState: context.rootSetState,
-    context: context.context,
-    shouldEvaluateBindings: true,
-  });
 </script>
 
 {#if TARGET !== "reactNative" && css() && canShowBlock()}

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "0.6.2"
+export const SDK_VERSION = "0.6.3"

package/src/functions/fetch-builder-props.ts

@@ -39,6 +39,19 @@ type GetBuilderPropsOptions = (Omit<GetContentOptions, 'model'> & {
 /**
  * Given an `apiKey` and `url` (or `path` + `searchParams`), provides all props that `Content` needs to render Builder Content.
  *
+ * @example
+ * ```jsx
+ * const builderProps = await fetchBuilderProps({
+ *    apiKey: 'API_KEY',
+ *    // provide `url`
+ *    url: yourPageUrl,
+ *    // OR provide `path` + `searchParams`
+ *    path: yourPath,
+ *    searchParams: yourSearchParams,
+ * });
+ *
+ * return <Content {...builderProps} />;
+ * ```
  */
 export const fetchBuilderProps = async (_args: GetBuilderPropsOptions): Promise<ContentVariantsPrps> => {
   const urlPath = _args.path || _args.url?.pathname || _args.userAttributes?.urlPath;

package/src/types/components.ts

@@ -104,8 +104,6 @@ export interface ComponentInfo {
      */
     query?: any;
   };
-
-  /** not yet implemented */
   friendlyName?: string;
 
   /**