@builder.io/sdk-svelte 0.2.1 → 0.2.3

package/package/--package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "files": [
     "package",
@@ -128,6 +128,7 @@
     "./helpers/css": "./helpers/css.js",
     "./helpers/flatten": "./helpers/flatten.js",
     "./helpers/localStorage": "./helpers/localStorage.js",
+    "./helpers/logger": "./helpers/logger.js",
     "./helpers/nullable": "./helpers/nullable.js",
     "./helpers/sessionId": "./helpers/sessionId.js",
     "./helpers/time": "./helpers/time.js",
@@ -152,7 +153,7 @@
   "types": "./package/index.d.ts",
   "devDependencies": {
     "@sveltejs/adapter-auto": "1.0.0-next.71",
-    "@sveltejs/kit": "1.0.0-next.474",
+    "@sveltejs/kit": "^1.15.2",
     "@sveltejs/package": "1.0.0-next.1",
     "svelte": "^3.44.0",
     "svelte-check": "^2.7.1",

package/package/CHANGELOG.md

@@ -1,3 +1,9 @@
+### 0.2.2
+
+- Fix: dynamic bindings for Link URLs.
+- Fix: previewing content that includes a symbol whose `model` property is a `page`.
+- Fix: "Show If"/"Hide If" bindings when the initial value is `undefined`.
+
 ### 0.2.1
 
 - No Changes.

package/package/blocks/columns/columns.svelte

@@ -2,13 +2,10 @@
 
 <script>import { getContext } from "svelte";
 import RenderBlocks from "../../components/render-blocks.svelte";
-import "../../types/builder-block";
 import { getSizesForBreakpoints } from "../../constants/device-sizes";
-import "../../constants/device-sizes";
 import RenderInlinedStyles from "../../components/render-inlined-styles.svelte";
 import { TARGET } from "../../constants/target.js";
 import BuilderContext from "../../context/builder.context.js";
-import "../../types/typescript";
 export let space;
 export let columns;
 export let stackColumnsAt;
@@ -90,30 +87,30 @@ $: columnsCssVars = () => {
 };
 $: columnsStyles = () => {
     return `
-      @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
-        .${builderBlock.id}-breakpoints {
-          flex-direction: var(--flex-dir-tablet);
-          align-items: stretch;
-        }
+        @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
+          .${builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir-tablet);
+            align-items: stretch;
+          }
 
-        .${builderBlock.id}-breakpoints > .builder-column {
-          width: var(--column-width-tablet) !important;
-          margin-left: var(--column-margin-left-tablet) !important;
+          .${builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-tablet) !important;
+            margin-left: var(--column-margin-left-tablet) !important;
+          }
         }
-      }
 
-      @media (max-width: ${getWidthForBreakpointSize("small")}px) {
-        .${builderBlock.id}-breakpoints {
-          flex-direction: var(--flex-dir);
-          align-items: stretch;
-        }
+        @media (max-width: ${getWidthForBreakpointSize("small")}px) {
+          .${builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir);
+            align-items: stretch;
+          }
 
-        .${builderBlock.id}-breakpoints > .builder-column {
-          width: var(--column-width-mobile) !important;
-          margin-left: var(--column-margin-left-mobile) !important;
-        }
-      },
-    `;
+          .${builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-mobile) !important;
+            margin-left: var(--column-margin-left-mobile) !important;
+          }
+        },
+      `;
 };
 let gutterSize = typeof space === "number" ? space || 0 : 20;
 let cols = columns || [];

package/package/blocks/columns/columns.svelte.d.ts

@@ -11,7 +11,7 @@ export interface ColumnProps {
     stackColumnsAt?: StackColumnsAt;
     reverseColumnsWhenStacked?: boolean;
 }
-import { BuilderBlock } from "../../types/builder-block";
+import type { BuilderBlock } from "../../types/builder-block";
 declare const __propDef: {
     props: {
         space: ColumnProps["space"];

package/package/blocks/image/image.svelte

@@ -1,7 +1,6 @@
 <script context="module"></script>
 
-<script>import "../../types/builder-block.js";
-import { getSrcSet } from "./image.helpers.js";
+<script>import { getSrcSet } from "./image.helpers.js";
 export let image;
 export let src;
 export let srcset;

package/package/blocks/image/image.svelte.d.ts

@@ -8,7 +8,7 @@ export interface ImageProps {
     height?: number;
     width?: number;
     altText?: string;
-    backgroundSize?: string;
+    backgroundSize?: "cover" | "contain";
     backgroundPosition?: string;
     srcset?: string;
     aspectRatio?: number;
@@ -18,7 +18,7 @@ export interface ImageProps {
     noWebp?: boolean;
     src?: string;
 }
-import { BuilderBlock } from "../../types/builder-block.js";
+import type { BuilderBlock } from "../../types/builder-block.js";
 declare const __propDef: {
     props: {
         image: ImageProps["image"];

package/package/blocks/symbol/symbol.svelte

@@ -4,9 +4,8 @@
 import RenderContent from "../../components/render-content/render-content.svelte";
 import BuilderContext from "../../context/builder.context.js";
 import { getContent } from "../../functions/get-content/index.js";
-import "../../types/builder-content.js";
-import "../../types/builder-block.js";
 import { TARGET } from "../../constants/target";
+import { logger } from "../../helpers/logger";
 const isEvent = (attr) => attr.startsWith("on:");
 const isNonEvent = (attr) => !attr.startsWith("on:");
 const filterAttrs = (attrs = {}, filter) => {
@@ -66,7 +65,7 @@ function fetchContent() {
             }
         })
             .catch((err) => {
-            console.error("[Builder.io]: Could not fetch symbol content: ", err);
+            logger.error("Could not fetch symbol content: ", err);
         });
     }
 }

package/package/blocks/symbol/symbol.svelte.d.ts

@@ -15,8 +15,8 @@ export interface SymbolProps {
     attributes?: any;
     inheritState?: boolean;
 }
-import { BuilderContent } from "../../types/builder-content.js";
-import { BuilderBlock } from "../../types/builder-block.js";
+import type { BuilderContent } from "../../types/builder-content.js";
+import type { BuilderBlock } from "../../types/builder-block.js";
 declare const __propDef: {
     props: {
         attributes: SymbolProps["attributes"];

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

@@ -2,11 +2,9 @@
 
 <script>import { getMaxWidthQueryForSize, getSizesForBreakpoints, } from "../../constants/device-sizes.js";
 import { TARGET } from "../../constants/target.js";
-import "../../context/types.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import { createCssClass } from "../../helpers/css.js";
 import { checkIsDefined } from "../../helpers/nullable.js";
-import "../../types/builder-block.js";
 import RenderInlinedStyles from "../render-inlined-styles.svelte";
 export let block;
 export let context;

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

@@ -3,8 +3,8 @@ export type BlockStylesProps = {
     block: BuilderBlock;
     context: BuilderContextInterface;
 };
-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";
 declare const __propDef: {
     props: {
         block: BlockStylesProps["block"];

package/package/components/render-block/render-block.svelte

@@ -1,20 +1,16 @@
 <script context="module"></script>
 
-<script>import "../../context/types.js";
-import { getBlockActions } from "../../functions/get-block-actions.js";
+<script>import { getBlockActions } from "../../functions/get-block-actions.js";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
 import { getBlockProperties } from "../../functions/get-block-properties.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import "../../types/builder-block.js";
 import BlockStyles from "./block-styles.svelte";
 import { getComponent, getProxyState, getRepeatItemData, isEmptyHtmlElement, } from "./render-block.helpers.js";
-import "./render-component.svelte";
 import RenderRepeatedBlock from "./render-repeated-block.svelte";
 import { TARGET } from "../../constants/target.js";
 import { extractTextStyles } from "../../functions/extract-text-styles.js";
 import RenderComponent from "./render-component.svelte";
 import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
-import { checkIsDefined } from "../../helpers/nullable.js";
 const setAttrs = (node, attrs = {}) => {
     const attrKeys = Object.keys(attrs);
     const setup = (attr) => node.addEventListener(attr.substr(3), attrs[attr]);
@@ -44,10 +40,10 @@ $: useBlock = () => {
         });
 };
 $: canShowBlock = () => {
-    if (checkIsDefined(useBlock().hide)) {
+    if ("hide" in useBlock()) {
         return !useBlock().hide;
     }
-    if (checkIsDefined(useBlock().show)) {
+    if ("show" in useBlock()) {
         return useBlock().show;
     }
     return true;

package/package/components/render-block/render-block.svelte.d.ts

@@ -3,8 +3,8 @@ export type RenderBlockProps = {
     block: BuilderBlock;
     context: BuilderContextInterface;
 };
-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";
 declare const __propDef: {
     props: {
         block: RenderBlockProps["block"];

package/package/components/render-block/render-component.svelte

@@ -1,9 +1,7 @@
 <script context="module"></script>
 
-<script>import "../../types/builder-block.js";
-import BlockStyles from "./block-styles.svelte";
+<script>import BlockStyles from "./block-styles.svelte";
 import RenderBlock from "./render-block.svelte";
-import "../../context/types.js";
 export let componentRef;
 export let componentOptions;
 export let blockChildren;

package/package/components/render-block/render-component.svelte.d.ts

@@ -11,8 +11,8 @@ export interface RenderComponentProps {
     blockChildren: BuilderBlock[];
     context: BuilderContextInterface;
 }
-import { BuilderBlock } from "../../types/builder-block.js";
-import { BuilderContextInterface } from "../../context/types.js";
+import type { BuilderBlock } from "../../types/builder-block.js";
+import type { BuilderContextInterface } from "../../context/types.js";
 declare const __propDef: {
     props: {
         componentRef: RenderComponentProps["componentRef"];

package/package/components/render-block/render-repeated-block.svelte

@@ -11,8 +11,6 @@
 
 <script>import { setContext } from "svelte";
 import BuilderContext from "../../context/builder.context.js";
-import "../../context/types.js";
-import "../../types/builder-block";
 import RenderBlock from "./render-block.svelte";
 export let block;
 export let repeatContext;
@@ -24,6 +22,7 @@ setContext(BuilderContext.key, {
     apiKey: repeatContext.apiKey,
     registeredComponents: repeatContext.registeredComponents,
     inheritedStyles: repeatContext.inheritedStyles,
+    apiVersion: repeatContext.apiVersion,
 });
 </script>
 

package/package/components/render-block/render-repeated-block.svelte.d.ts

@@ -3,8 +3,8 @@ type Props = {
     block: BuilderBlock;
     repeatContext: BuilderContextInterface;
 };
-import { BuilderContextInterface } from "../../context/types.js";
-import { BuilderBlock } from "../../types/builder-block";
+import type { BuilderContextInterface } from "../../context/types.js";
+import type { BuilderBlock } from "../../types/builder-block";
 declare const __propDef: {
     props: {
         block: Props["block"];

package/package/components/render-blocks.svelte

@@ -3,7 +3,6 @@
 <script>import { getContext } from "svelte";
 import BuilderContext from "../context/builder.context.js";
 import { isEditing } from "../functions/is-editing.js";
-import "../types/builder-block.js";
 import BlockStyles from "./render-block/block-styles.svelte";
 import RenderBlock from "./render-block/render-block.svelte";
 export let blocks;

package/package/components/render-blocks.svelte.d.ts

@@ -5,7 +5,7 @@ export type RenderBlockProps = {
     path?: string;
     styleProp?: Record<string, any>;
 };
-import { BuilderBlock } from "../types/builder-block.js";
+import type { BuilderBlock } from "../types/builder-block.js";
 declare const __propDef: {
     props: {
         blocks: RenderBlockProps["blocks"];

package/package/components/render-content/components/render-styles.svelte

@@ -1,7 +1,6 @@
 <script context="module"></script>
 
 <script>import RenderInlinedStyles from "../../render-inlined-styles.svelte";
-import "./render-styles.helpers";
 import { getCss } from "./render-styles.helpers";
 import { getFontCss } from "./render-styles.helpers";
 export let cssCode;
@@ -17,16 +16,16 @@ ${getFontCss({
 })}
 
 .builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
-margin: 0;
+  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;
+  color: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  text-align: inherit;
+  font-family: inherit;
 }
 `;
 </script>

package/package/components/render-content/components/render-styles.svelte.d.ts

@@ -4,7 +4,7 @@ interface Props {
     customFonts?: CustomFont[];
     contentId?: string;
 }
-import { CustomFont } from "./render-styles.helpers";
+import type { CustomFont } from "./render-styles.helpers";
 declare const __propDef: {
     props: {
         cssCode: Props["cssCode"];

package/package/components/render-content/render-content.svelte

@@ -1,6 +1,5 @@
 <script>import { onDestroy, onMount, setContext } from "svelte";
 import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
-import "../../context/types.js";
 import { evaluate } from "../../functions/evaluate.js";
 import { getContent } from "../../functions/get-content/index.js";
 import { fetch } from "../../functions/get-fetch.js";
@@ -9,17 +8,15 @@ import { isEditing } from "../../functions/is-editing.js";
 import { isPreviewing } from "../../functions/is-previewing.js";
 import { components, createRegisterComponentMessage, } from "../../functions/register-component.js";
 import { _track } from "../../functions/track/index.js";
-import "../../types/builder-content.js";
-import "../../types/typescript.js";
 import RenderBlocks from "../render-blocks.svelte";
 import RenderContentStyles from "./components/render-styles.svelte";
 import builderContext from "../../context/builder.context.js";
 import { registerInsertMenu, setupBrowserForEditing, } from "../../scripts/init-editing.js";
 import { checkIsDefined } from "../../helpers/nullable.js";
 import { getInteractionPropertiesForEvent } from "../../functions/track/interaction.js";
-import "./render-content.types.js";
 import { getContentInitialValue, getContextStateInitialValue, } from "./render-content.helpers.js";
 import { TARGET } from "../../constants/target.js";
+import { logger } from "../../helpers/logger.js";
 export let content;
 export let data;
 export let canTrack;
@@ -198,7 +195,7 @@ let httpReqsData = {};
 let clicked = false;
 onMount(() => {
     if (!apiKey) {
-        console.error("[Builder.io]: No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
+        logger.error("No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
     }
     if (isBrowser()) {
         if (isEditing()) {
@@ -237,20 +234,21 @@ onMount(() => {
         // override normal content in preview mode
         if (isPreviewing()) {
             const searchParams = new URL(location.href).searchParams;
-            const searchParamPreview = searchParams.get("builder.preview");
+            const searchParamPreviewModel = searchParams.get("builder.preview");
+            const searchParamPreviewId = searchParams.get(`builder.preview.${searchParamPreviewModel}`);
             const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
             /**
              * Make sure that:
              * - the preview model name is the same as the one we're rendering, since there can be multiple models rendered
              *  at the same time, e.g. header/page/footer.
              * - the API key is the same, since we don't want to preview content from other organizations.
-             *
-             * TO-DO: should we check that the preview item ID is the same as the initial one being rendered? Or would
-             * this break scenarios where the item is not published yet?
+             * - if there is content, that the preview ID is the same as that of the one we receive.
              *
              * TO-DO: should we only update the state when there is a change?
              **/
-            if (searchParamPreview === model && previewApiKey === apiKey) {
+            if (searchParamPreviewModel === model &&
+                previewApiKey === apiKey &&
+                (!content || searchParamPreviewId === content.id)) {
                 getContent({
                     model: model,
                     apiKey: apiKey,
@@ -307,6 +305,9 @@ setContext(builderContext.key, {
     get registeredComponents() {
         return allRegisteredComponents;
     },
+    get inheritedStyles() {
+        return {};
+    },
 });
 onDestroy(() => {
     if (isBrowser()) {

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import { RenderContentProps } from "./render-content.types.js";
+import type { RenderContentProps } from "./render-content.types.js";
 declare const __propDef: {
     props: {
         content: RenderContentProps["content"];

package/package/functions/get-block-properties.d.ts

@@ -3,4 +3,5 @@ export declare function getBlockProperties(block: BuilderBlock): {
     'builder-id': string | undefined;
     style: string | Partial<CSSStyleDeclaration> | undefined;
     class: string;
+    href: any;
 };

package/package/functions/get-block-properties.js

@@ -1,8 +1,39 @@
 import { TARGET } from '../constants/target.js';
 import { convertStyleMapToCSSArray } from '../helpers/css.js';
 import { transformBlockProperties } from './transform-block-properties.js';
+const extractRelevantRootBlockProperties = (block) => {
+    // currently we are only spreading the `href` property
+    // TO-DO: potentially spread all properties from block, but only if they are not already defined by BuilderBlock
+    // const {
+    //   '@type': _type,
+    //   '@version': _version,
+    //   id: _id,
+    //   tagName: _tagName,
+    //   layerName: _layerName,
+    //   groupLocked: _groupLocked,
+    //   layerLocked: _layerLocked,
+    //   class: _class,
+    //   children: _children,
+    //   responsiveStyles: _responsiveStyles,
+    //   component: _component,
+    //   bindings: _bindings,
+    //   meta: _meta,
+    //   actions: _actions,
+    //   properties: _properties,
+    //   code: _code,
+    //   repeat: _repeat,
+    //   animations: _animations,
+    //   style: _style,
+    //   hide: _hide,
+    //   show: _show,
+    //   // anything set by dynamic bindings outside of predefined `BuilderBlock` properties
+    //   ...remainingBlockProperties
+    // } = block;
+    return { href: block.href };
+};
 export function getBlockProperties(block) {
     const properties = {
+        ...extractRelevantRootBlockProperties(block),
         ...block.properties,
         'builder-id': block.id,
         style: getStyleAttribute(block.style),

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

@@ -7,5 +7,5 @@ type ContentResponse = {
     status: number;
     message: string;
 };
-export declare function getAllContent(options: GetContentOptions): Promise<ContentResponse>;
+export declare function getAllContent(options: GetContentOptions): Promise<ContentResponse | null>;
 export {};

package/package/functions/get-content/index.js

@@ -1,33 +1,40 @@
+import { logger } from '../../helpers/logger.js';
 import { fetch } from '../get-fetch.js';
 import { handleABTesting } from './ab-testing.js';
 import { generateContentUrl } from './generate-content-url.js';
 export async function getContent(options) {
     const allContent = await getAllContent({ ...options, limit: 1 });
-    if ('results' in allContent) {
+    if (allContent && 'results' in allContent) {
         return allContent?.results[0] || null;
     }
     return null;
 }
 export async function getAllContent(options) {
-    const url = generateContentUrl(options);
-    const res = await fetch(url.href);
-    const content = await res.json();
-    if ('status' in content && !('results' in content)) {
-        console.error('[Builder.io]: Error fetching data. ', content, options);
-        return content;
-    }
-    const canTrack = options.canTrack !== false;
     try {
-        if (canTrack &&
-            // This makes sure we have a non-error response with the results array.
-            Array.isArray(content.results)) {
-            for (const item of content.results) {
-                await handleABTesting({ item, canTrack });
+        const url = generateContentUrl(options);
+        const res = await fetch(url.href);
+        const content = await res.json();
+        if ('status' in content && !('results' in content)) {
+            logger.error('Error fetching data. ', { url, content, options });
+            return content;
+        }
+        const canTrack = options.canTrack !== false;
+        try {
+            if (canTrack &&
+                // This makes sure we have a non-error response with the results array.
+                Array.isArray(content.results)) {
+                for (const item of content.results) {
+                    await handleABTesting({ item, canTrack });
+                }
             }
         }
+        catch (e) {
+            logger.error('Could not setup A/B testing. ', e);
+        }
+        return content;
     }
-    catch (e) {
-        console.error('[Builder.io]: Could not setup A/B testing. ', e);
+    catch (error) {
+        logger.error('Error fetching data. ', error);
+        return null;
     }
-    return content;
 }

package/package/functions/track/index.js

@@ -1,4 +1,5 @@
 import { TARGET } from '../../constants/target.js';
+import { logger } from '../../helpers/logger.js';
 import { getSessionId } from '../../helpers/sessionId.js';
 import { getVisitorId } from '../../helpers/visitorId.js';
 import { isBrowser } from '../is-browser.js';
@@ -30,7 +31,7 @@ const createEvent = async ({ type: eventType, canTrack, apiKey, metadata, ...pro
 });
 export async function _track(eventProps) {
     if (!eventProps.apiKey) {
-        console.error('[Builder.io]: Missing API key for track call. Please provide your API key.');
+        logger.error('Missing API key for track call. Please provide your API key.');
         return;
     }
     if (!eventProps.canTrack) {

package/package/helpers/logger.d.ts

@@ -0,0 +1,5 @@
+export declare const logger: {
+    log: (...message: any[]) => void;
+    error: (...message: any[]) => void;
+    warn: (...message: any[]) => void;
+};

package/package/helpers/logger.js

@@ -0,0 +1,6 @@
+const MSG_PREFIX = '[Builder.io]: ';
+export const logger = {
+    log: (...message) => console.log(MSG_PREFIX, ...message),
+    error: (...message) => console.error(MSG_PREFIX, ...message),
+    warn: (...message) => console.warn(MSG_PREFIX, ...message),
+};

package/package/index.d.ts

@@ -10,3 +10,4 @@ export * from './functions/get-builder-search-params/index.js';
 export { track } from './functions/track/index.js';
 export type { RegisteredComponent } from './context/types';
 export type { ComponentInfo } from './types/components';
+export type { RenderContentProps } from './components/render-content/render-content.types.js';

package/package/types/builder-content.d.ts

@@ -1,5 +1,5 @@
 import type { BuilderBlock } from './builder-block.js';
-import type { Input } from './components.js';
+import type { Input } from './input.js';
 import type { Nullable } from './typescript.js';
 export interface Breakpoints {
     small: number;