@builder.io/sdk-svelte 0.1.1 → 0.1.3-0

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

@@ -1,6 +1,6 @@
 <script context="module"></script>
 
-<script>import { onDestroy, onMount, setContext, } from "svelte";
+<script>import { onDestroy, onMount, setContext } from "svelte";
 import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
 import { TARGET } from "../../constants/target.js";
 import { evaluate } from "../../functions/evaluate.js";
@@ -10,11 +10,12 @@ import { isBrowser } from "../../functions/is-browser.js";
 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.js";
+import { _track } from "../../functions/track/index.js";
 import RenderBlocks from "../render-blocks.svelte";
 import RenderContentStyles from "./components/render-styles.svelte";
-import BuilderContext from "../../context/builder.context.js";
+import builderContext from "../../context/builder.context.js";
 import { registerInsertMenu, setupBrowserForEditing, } from "../../scripts/init-editing.js";
+import { checkIsDefined } from "../../helpers/nullable.js";
 export let content;
 export let data;
 export let canTrack;
@@ -24,7 +25,7 @@ export let customComponents;
 export let model;
 export let apiKey;
 export let includeRefs;
-setContext(BuilderContext.key, {
+setContext(builderContext.key, {
     get content() {
         return useContent();
     },
@@ -32,13 +33,13 @@ setContext(BuilderContext.key, {
         return contentState();
     },
     get context() {
-        return contextContext();
+        return contextContext;
     },
     get apiKey() {
         return apiKey;
     },
     get registeredComponents() {
-        return allRegisteredComponents();
+        return allRegisteredComponents;
     },
 });
 function processMessage(event) {
@@ -81,7 +82,7 @@ function evaluateJsCode() {
     if (jsCode) {
         evaluate({
             code: jsCode,
-            context: contextContext(),
+            context: contextContext,
             state: contentState(),
         });
     }
@@ -92,7 +93,7 @@ function onClick(_event) {
         const contentId = useContent?.()?.id;
         _track({
             type: "click",
-            canTrack: canTrackToUse(),
+            canTrack: canTrackToUse,
             contentId,
             apiKey: apiKey,
             variationId: variationId !== contentId ? variationId : undefined,
@@ -102,7 +103,7 @@ function onClick(_event) {
 function evalExpression(expression) {
     return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
         code: group,
-        context: contextContext(),
+        context: contextContext,
         state: contentState(),
     }));
 }
@@ -123,7 +124,7 @@ function handleRequest({ url, key }) {
 function runHttpRequests() {
     const requests = useContent?.()?.data?.httpRequests ?? {};
     Object.entries(requests).forEach(([key, url]) => {
-        if (url && (!httpReqsData()[key] || isEditing())) {
+        if (url && (!httpReqsData[key] || isEditing())) {
             const evaluatedUrl = evalExpression(url);
             handleRequest({
                 url: evaluatedUrl,
@@ -148,7 +149,7 @@ $: useContent = () => {
     if (!content && !overrideContent) {
         return undefined;
     }
-    const mergedContent = {
+    return {
         ...content,
         ...overrideContent,
         data: {
@@ -164,10 +165,6 @@ $: useContent = () => {
                 content?.meta?.breakpoints,
         },
     };
-    return mergedContent;
-};
-$: canTrackToUse = () => {
-    return canTrack || true;
 };
 $: contentState = () => {
     return {
@@ -181,29 +178,6 @@ $: contentState = () => {
         ...overrideState,
     };
 };
-$: contextContext = () => {
-    return context || {};
-};
-$: allRegisteredComponents = () => {
-    const allComponentsArray = [
-        ...getDefaultRegisteredComponents(),
-        // While this `components` object is deprecated, we must maintain support for it.
-        // Since users are able to override our default components, we need to make sure that we do not break such
-        // existing usage.
-        // This is why we spread `components` after the default Builder.io components, but before the `customComponents`,
-        // which is the new standard way of providing custom components, and must therefore take precedence.
-        ...components,
-        ...(customComponents || []),
-    ];
-    const allComponents = allComponentsArray.reduce((acc, curr) => ({
-        ...acc,
-        [curr.name]: curr,
-    }), {});
-    return allComponents;
-};
-$: httpReqsData = () => {
-    return {};
-};
 $: shouldRenderContentStyles = () => {
     return Boolean((useContent?.()?.data?.cssCode ||
         useContent?.()?.data?.customFonts?.length) &&
@@ -214,7 +188,23 @@ let forceReRenderCount = 0;
 let overrideContent = null;
 let update = 0;
 let useBreakpoints = null;
+let canTrackToUse = checkIsDefined(canTrack) ? canTrack : true;
 let overrideState = {};
+let contextContext = context || {};
+let allRegisteredComponents = [
+    ...getDefaultRegisteredComponents(),
+    // While this `components` object is deprecated, we must maintain support for it.
+    // Since users are able to override our default components, we need to make sure that we do not break such
+    // existing usage.
+    // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
+    // which is the new standard way of providing custom components, and must therefore take precedence.
+    ...components,
+    ...(customComponents || []),
+].reduce((acc, curr) => ({
+    ...acc,
+    [curr.name]: curr,
+}), {});
+let httpReqsData = {};
 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.");
@@ -235,7 +225,7 @@ onMount(() => {
                     }
                     : {}),
             });
-            Object.values(allRegisteredComponents()).forEach((registeredComponent) => {
+            Object.values(allRegisteredComponents).forEach((registeredComponent) => {
                 const message = createRegisterComponentMessage(registeredComponent);
                 window.parent?.postMessage(message, "*");
             });
@@ -247,7 +237,7 @@ onMount(() => {
             const contentId = useContent?.()?.id;
             _track({
                 type: "impression",
-                canTrack: canTrackToUse(),
+                canTrack: canTrackToUse,
                 contentId,
                 apiKey: apiKey,
                 variationId: variationId !== contentId ? variationId : undefined,
@@ -256,18 +246,28 @@ onMount(() => {
         // override normal content in preview mode
         if (isPreviewing()) {
             const searchParams = new URL(location.href).searchParams;
-            if (model && searchParams.get("builder.preview") === model) {
-                const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
-                if (previewApiKey) {
-                    getContent({
-                        model: model,
-                        apiKey: previewApiKey,
-                    }).then((content) => {
-                        if (content) {
-                            overrideContent = content;
-                        }
-                    });
-                }
+            const searchParamPreview = searchParams.get("builder.preview");
+            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?
+             *
+             * TO-DO: should we only update the state when there is a change?
+             **/
+            if (searchParamPreview === model && previewApiKey === apiKey) {
+                getContent({
+                    model: model,
+                    apiKey: apiKey,
+                }).then((content) => {
+                    if (content) {
+                        overrideContent = content;
+                    }
+                });
             }
         }
         evaluateJsCode();
@@ -315,4 +315,4 @@ onDestroy(() => {
       key={forceReRenderCount}
     />
   </div>
-{/if}
+{/if}

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

@@ -16,4 +16,4 @@ $: tag = () => {
   {@html injectedStyleScript()}
 {:else}
   <svelte:element this={tag()}>{styles}</svelte:element>
-{/if}
+{/if}

package/package/functions/track/helpers.d.ts

@@ -0,0 +1,5 @@
+export declare const getUserAttributes: () => {
+    urlPath: string | undefined;
+    host: string | undefined;
+    device: string;
+};

package/package/functions/track/helpers.js

@@ -0,0 +1,56 @@
+import { TARGET } from '../../constants/target';
+import { isBrowser } from '../is-browser';
+const getLocation = () => {
+    if (TARGET === 'reactNative') {
+        return null;
+    }
+    else if (isBrowser()) {
+        const parsedLocation = new URL(location.href);
+        // IE11 bug with parsed path being empty string
+        // causes issues with our user targeting
+        if (parsedLocation.pathname === '') {
+            parsedLocation.pathname = '/';
+        }
+        return parsedLocation;
+    }
+    else {
+        console.warn('Cannot get location for tracking in non-browser environment');
+        return null;
+    }
+};
+const getUserAgent = () => (typeof navigator === 'object' && navigator.userAgent) || '';
+export const getUserAttributes = () => {
+    const userAgent = getUserAgent();
+    const isMobile = {
+        Android() {
+            return userAgent.match(/Android/i);
+        },
+        BlackBerry() {
+            return userAgent.match(/BlackBerry/i);
+        },
+        iOS() {
+            return userAgent.match(/iPhone|iPod/i);
+        },
+        Opera() {
+            return userAgent.match(/Opera Mini/i);
+        },
+        Windows() {
+            return userAgent.match(/IEMobile/i) || userAgent.match(/WPDesktop/i);
+        },
+        any() {
+            return (isMobile.Android() ||
+                isMobile.BlackBerry() ||
+                isMobile.iOS() ||
+                isMobile.Opera() ||
+                isMobile.Windows() ||
+                TARGET === 'reactNative');
+        },
+    };
+    const isTablet = userAgent.match(/Tablet|iPad/i);
+    const url = getLocation();
+    return {
+        urlPath: url?.pathname,
+        host: url?.host || url?.hostname,
+        device: isTablet ? 'tablet' : isMobile.any() ? 'mobile' : 'desktop',
+    };
+};

package/package/functions/{track.d.ts → track/index.d.ts}

@@ -1,4 +1,5 @@
-import type { CanTrack } from '../types/can-track.js';
+import type { CanTrack } from '../../types/can-track.js';
+import type { Dictionary } from '../../types/typescript.js';
 interface Event {
     /**
      * The type of your event.
@@ -16,9 +17,9 @@ interface Event {
          */
         ownerId: string;
         /**
-         * Stringified JSON object containing any additional metadata you want to track.
+         * (Optional) metadata that you want to provide with your event.
          */
-        metadata?: string;
+        metadata?: Dictionary<any>;
         /**
          * Session ID of the user. This is provided by the SDK by checking session storage.
          */
@@ -34,17 +35,11 @@ interface Event {
         [index: string]: any;
     };
 }
-declare type EventProperties = Pick<Event, 'type'> & Pick<Event['data'], 'contentId' | 'variationId'> & {
+declare type EventProperties = Pick<Event, 'type'> & Pick<Event['data'], 'contentId' | 'variationId' | 'metadata'> & {
     /**
      * Your organization's API key.
      */
     apiKey: Event['data']['ownerId'];
-    /**
-     * (Optional) metadata that you want to provide with your event.
-     */
-    metadata?: {
-        [index: string]: any;
-    };
     /**
      * (Optional) Any additional (non-metadata) properties to add to the event.
      */

package/package/functions/{track.js → track/index.js}

@@ -1,8 +1,9 @@
-import { TARGET } from '../constants/target.js';
-import { getSessionId } from '../helpers/sessionId.js';
-import { getVisitorId } from '../helpers/visitorId.js';
-import { isBrowser } from './is-browser.js';
-import { isEditing } from './is-editing.js';
+import { TARGET } from '../../constants/target.js';
+import { getSessionId } from '../../helpers/sessionId.js';
+import { getVisitorId } from '../../helpers/visitorId.js';
+import { isBrowser } from '../is-browser.js';
+import { isEditing } from '../is-editing.js';
+import { getUserAttributes } from './helpers.js';
 const getTrackingEventData = async ({ canTrack, }) => {
     if (!canTrack) {
         return { visitorId: undefined, sessionId: undefined };
@@ -18,8 +19,12 @@ const createEvent = async ({ type: eventType, canTrack, apiKey, metadata, ...pro
     type: eventType,
     data: {
         ...properties,
-        metadata: JSON.stringify(metadata),
+        metadata: {
+            url: location.href,
+            ...metadata,
+        },
         ...(await getTrackingEventData({ canTrack })),
+        userAttributes: getUserAttributes(),
         ownerId: apiKey,
     },
 });

package/package/helpers/ab-tests.d.ts

@@ -5,4 +5,4 @@ export declare const getContentVariationCookie: ({ contentId, canTrack, }: {
 export declare const setContentVariationCookie: ({ contentId, canTrack, value, }: {
     contentId: string;
     value: string;
-} & CanTrack) => Promise<undefined>;
+} & CanTrack) => Promise<void>;

package/package/helpers/cookie.d.ts

@@ -12,4 +12,4 @@ export declare const setCookie: ({ name, value, expires, canTrack, }: {
     name: string;
     value: string;
     expires?: Date | undefined;
-} & CanTrack) => Promise<undefined>;
+} & CanTrack) => Promise<void>;

package/package/helpers/cookie.js

@@ -1,4 +1,5 @@
 import { isBrowser } from '../functions/is-browser.js';
+import { checkIsDefined } from './nullable.js';
 import { getTopLevelDomain } from './url.js';
 /**
  * NOTE: This function is `async` because its react-native override is async. Do not remove the `async` keyword!
@@ -19,9 +20,13 @@ export const getCookie = async ({ name, canTrack, }) => {
     }
     catch (err) {
         console.debug('[COOKIE] GET error: ', err);
+        return undefined;
     }
 };
-const stringifyCookie = (cookie) => cookie.map(([key, value]) => (value ? `${key}=${value}` : key)).join('; ');
+const stringifyCookie = (cookie) => cookie
+    .map(([key, value]) => (value ? `${key}=${value}` : key))
+    .filter(checkIsDefined)
+    .join('; ');
 const SECURE_CONFIG = [
     ['secure', ''],
     ['SameSite', 'None'],
@@ -49,7 +54,7 @@ const createCookieString = ({ name, value, expires, }) => {
 export const setCookie = async ({ name, value, expires, canTrack, }) => {
     try {
         if (!canTrack) {
-            return undefined;
+            return;
         }
         const cookie = createCookieString({ name, value, expires });
         document.cookie = cookie;

package/package/helpers/localStorage.d.ts

@@ -1,7 +1,8 @@
 import type { CanTrack } from '../types/can-track.js';
+import type { Nullable } from './nullable.js';
 export declare const getLocalStorageItem: ({ key, canTrack, }: {
     key: string;
-} & CanTrack) => string | null | undefined;
+} & CanTrack) => Nullable<string>;
 export declare const setLocalStorageItem: ({ key, canTrack, value, }: {
     key: string;
     value: string;

package/package/helpers/localStorage.js

@@ -9,6 +9,7 @@ export const getLocalStorageItem = ({ key, canTrack, }) => {
     }
     catch (err) {
         console.debug('[LocalStorage] GET error: ', err);
+        return undefined;
     }
 };
 export const setLocalStorageItem = ({ key, canTrack, value, }) => {

package/package/helpers/sessionId.d.ts

@@ -1,6 +1,6 @@
 import type { CanTrack } from '../types/can-track.js';
-export declare const getSessionId: ({ canTrack }: CanTrack) => Promise<string | undefined>;
+export declare const getSessionId: ({ canTrack, }: CanTrack) => Promise<string | undefined>;
 export declare const createSessionId: () => string;
 export declare const setSessionId: ({ id, canTrack, }: {
     id: string;
-} & CanTrack) => Promise<undefined>;
+} & CanTrack) => Promise<void>;

package/package/helpers/sessionId.js

@@ -2,7 +2,7 @@ import { getCookie, setCookie } from './cookie.js';
 import { checkIsDefined } from './nullable.js';
 import { uuid } from './uuid.js';
 const SESSION_LOCAL_STORAGE_KEY = 'builderSessionId';
-export const getSessionId = async ({ canTrack }) => {
+export const getSessionId = async ({ canTrack, }) => {
     if (!canTrack) {
         return undefined;
     }
@@ -16,6 +16,7 @@ export const getSessionId = async ({ canTrack }) => {
     else {
         const newSessionId = createSessionId();
         setSessionId({ id: newSessionId, canTrack });
+        return newSessionId;
     }
 };
 export const createSessionId = () => uuid();

package/package/helpers/url.js

@@ -4,6 +4,9 @@
  * www.example.co.uk -> example.co.uk
  */
 export const getTopLevelDomain = (host) => {
+    if (host === 'localhost' || host === '127.0.0.1') {
+        return host;
+    }
     const parts = host.split('.');
     if (parts.length > 2) {
         return parts.slice(1).join('.');

package/package/helpers/url.test.js

@@ -12,4 +12,10 @@ describe('getTopLevelDomain', () => {
         const output = getTopLevelDomain('www.example.co.uk');
         expect(output).toBe('example.co.uk');
     });
+    test('handles localhost', () => {
+        const output = getTopLevelDomain('localhost');
+        expect(output).toBe('localhost');
+        const output2 = getTopLevelDomain('127.0.0.1');
+        expect(output2).toBe('127.0.0.1');
+    });
 });

package/package/helpers/visitorId.js

@@ -16,6 +16,7 @@ export const getVisitorId = ({ canTrack }) => {
     else {
         const newVisitorId = createVisitorId();
         setVisitorId({ id: newVisitorId, canTrack });
+        return newVisitorId;
     }
 };
 export const createVisitorId = () => uuid();

package/package/index.d.ts

@@ -8,6 +8,6 @@ export * from './functions/register.js';
 export * from './functions/set-editor-settings.js';
 export * from './functions/get-content/index.js';
 export * from './functions/get-builder-search-params/index.js';
-export { track } from './functions/track';
+export { track } from './functions/track/index.js';
 export type { RegisteredComponent } from './context/types';
 export type { ComponentInfo } from './types/components';

package/package/index.js

@@ -8,4 +8,4 @@ export * from './functions/register.js';
 export * from './functions/set-editor-settings.js';
 export * from './functions/get-content/index.js';
 export * from './functions/get-builder-search-params/index.js';
-export { track } from './functions/track';
+export { track } from './functions/track/index.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.1.1",
+  "version": "0.1.3-0",
   "type": "module",
   "files": [
     "package",

package/src/blocks/BaseText.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <script lang="ts">
-  import { getContext, setContext } from "svelte";
+  import { getContext } from "svelte";
 
   import BuilderContext from "../context/builder.context.js";
 
@@ -24,4 +24,4 @@
   let builderContext = getContext(BuilderContext.key);
 </script>
 
-<span use:mitosis_styling={builderContext.inheritedStyles}>{text}</span>
+<span use:mitosis_styling={builderContext.inheritedStyles}>{text}</span>

package/src/blocks/button/button.svelte

@@ -10,7 +10,6 @@
 <script lang="ts">
   const isEvent = (attr) => attr.startsWith("on:");
   const isNonEvent = (attr) => !attr.startsWith("on:");
-
   const filterAttrs = (attrs, filter) => {
     const validAttr = {};
     Object.keys(attrs).forEach((attr) => {
@@ -20,16 +19,12 @@
     });
     return validAttr;
   };
-
   const setAttrs = (node, attrs) => {
     const attrKeys = Object.keys(attrs);
-
     const setup = (attr) => node.addEventListener(attr.substr(3), attrs[attr]);
     const teardown = (attr) =>
       node.removeEventListener(attr.substr(3), attrs[attr]);
-
     attrKeys.map(setup);
-
     return {
       update(attrs) {
         const attrKeys = Object.keys(attrs);
@@ -72,4 +67,4 @@
   .button {
     all: unset;
   }
-</style>
+</style>

package/src/blocks/columns/columns.svelte

@@ -145,10 +145,10 @@
     `;
   };
   $: reactNativeColumnsStyles = () => {
-    return columnStyleObjects.columns.small;
+    return this.columnStyleObjects.columns.small;
   };
   $: reactNativeColumnStyles = () => {
-    return columnStyleObjects.column.small;
+    return this.columnStyleObjects.column.small;
   };
 </script>
 
@@ -195,4 +195,4 @@
     flex-direction: column;
     align-items: stretch;
   }
-</style>
+</style>

package/src/blocks/custom-code/custom-code.svelte

@@ -63,4 +63,4 @@
   class={"builder-custom-code" + (replaceNodes ? " replace-nodes" : "")}
 >
   {@html code}
-</div>
+</div>

package/src/blocks/embed/component-info.ts

@@ -12,35 +12,37 @@ export const componentInfo: ComponentInfo = {
       required: true,
       defaultValue: '',
       helperText: 'e.g. enter a youtube url, google map, etc',
-      onChange: serializeFn((options: Map<string, any>) => {
-        const url = options.get('url');
-        if (url) {
-          options.set('content', 'Loading...');
-          // TODO: get this out of here!
-          const apiKey = 'ae0e60e78201a3f2b0de4b';
-          return fetch(
-            `https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`
-          )
-            .then((res) => res.json())
-            .then((data) => {
-              if (options.get('url') === url) {
-                if (data.html) {
-                  options.set('content', data.html);
-                } else {
-                  options.set('content', 'Invalid url, please try another');
+      onChange: serializeFn(
+        (options: Map<string, any>): void | Promise<void> => {
+          const url = options.get('url');
+          if (url) {
+            options.set('content', 'Loading...');
+            // TODO: get this out of here!
+            const apiKey = 'ae0e60e78201a3f2b0de4b';
+            return fetch(
+              `https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`
+            )
+              .then((res) => res.json())
+              .then((data) => {
+                if (options.get('url') === url) {
+                  if (data.html) {
+                    options.set('content', data.html);
+                  } else {
+                    options.set('content', 'Invalid url, please try another');
+                  }
                 }
-              }
-            })
-            .catch((_err) => {
-              options.set(
-                'content',
-                'There was an error embedding this URL, please try again or another URL'
-              );
-            });
-        } else {
-          options.delete('content');
+              })
+              .catch((_err) => {
+                options.set(
+                  'content',
+                  'There was an error embedding this URL, please try again or another URL'
+                );
+              });
+          } else {
+            options.delete('content');
+          }
         }
-      }),
+      ),
     },
     {
       name: 'content',

package/src/blocks/embed/embed.svelte

@@ -5,8 +5,6 @@
 </script>
 
 <script lang="ts">
-  import { afterUpdate } from "svelte";
-
   import { isJsScript } from "./helpers.js";
 
   export let content: EmbedProps["content"];
@@ -48,4 +46,4 @@
   $: onUpdateFn_0(...[elem, ranInitFn]);
 </script>
 
-<div class="builder-embed" bind:this={elem}>{@html content}</div>
+<div class="builder-embed" bind:this={elem}>{@html content}</div>