@builder.io/sdk-svelte 0.0.11-0 → 0.1.2

package/package/--package.json

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

package/package/CHANGELOG.md

@@ -1,3 +1,7 @@
+### 0.1.0
+
+🧨 Breaking change: we no longer provide a `node-fetch` polyfill. See [the docs](./README.md#fetch) for more information.
+
 ### 0.0.1-9
 
 🐛 Fix: custom components were not rendering correctly

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

@@ -15,6 +15,7 @@ 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";
 export let content;
 export let data;
 export let canTrack;
@@ -167,7 +168,7 @@ $: useContent = () => {
     return mergedContent;
 };
 $: canTrackToUse = () => {
-    return canTrack || true;
+    return checkIsDefined(canTrack) ? canTrack : true;
 };
 $: contentState = () => {
     return {

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.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.0.11-0",
+  "version": "0.1.2",
   "type": "module",
   "files": [
     "package",
@@ -28,8 +28,9 @@
   },
   "types": "./package/index.d.ts",
   "scripts": {
-    "release:patch": "yarn run build && npm version patch --no-git-tag-version && npm publish --access public",
-    "release:dev": "yarn run build && npm version prerelease --no-git-tag-version && npm publish --tag dev --access public",
+    "release:patch": "yarn run build && npm version patch && npm publish",
+    "release:minor": "yarn run build && npm version minor && npm publish",
+    "release:dev": "yarn run build && npm version prerelease && npm publish --tag dev",
     "dev": "vite dev",
     "build": "svelte-kit sync && svelte-package",
     "build:watch": "svelte-kit sync && svelte-package --watch",

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/image/component-info.ts

@@ -23,69 +23,71 @@ export const componentInfo: ComponentInfo = {
       required: true,
       defaultValue:
         'https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
-      onChange: serializeFn((options: Map<string, any>) => {
-        const DEFAULT_ASPECT_RATIO = 0.7041;
-        options.delete('srcset');
-        options.delete('noWebp');
-        function loadImage(
-          url: string,
-          timeout = 60000
-        ): Promise<HTMLImageElement> {
-          return new Promise((resolve, reject) => {
-            const img = document.createElement('img');
-            let loaded = false;
-            img.onload = () => {
-              loaded = true;
-              resolve(img);
-            };
+      onChange: serializeFn(
+        (options: Map<string, any>): void | Promise<void> => {
+          const DEFAULT_ASPECT_RATIO = 0.7041;
+          options.delete('srcset');
+          options.delete('noWebp');
+          function loadImage(
+            url: string,
+            timeout = 60000
+          ): Promise<HTMLImageElement> {
+            return new Promise((resolve, reject) => {
+              const img = document.createElement('img');
+              let loaded = false;
+              img.onload = () => {
+                loaded = true;
+                resolve(img);
+              };
 
-            img.addEventListener('error', (event) => {
-              console.warn('Image load failed', event.error);
-              reject(event.error);
-            });
+              img.addEventListener('error', (event) => {
+                console.warn('Image load failed', event.error);
+                reject(event.error);
+              });
 
-            img.src = url;
-            setTimeout(() => {
-              if (!loaded) {
-                reject(new Error('Image load timed out'));
-              }
-            }, timeout);
-          });
-        }
+              img.src = url;
+              setTimeout(() => {
+                if (!loaded) {
+                  reject(new Error('Image load timed out'));
+                }
+              }, timeout);
+            });
+          }
 
-        function round(num: number) {
-          return Math.round(num * 1000) / 1000;
-        }
+          function round(num: number) {
+            return Math.round(num * 1000) / 1000;
+          }
 
-        const value = options.get('image');
-        const aspectRatio = options.get('aspectRatio');
+          const value = options.get('image');
+          const aspectRatio = options.get('aspectRatio');
 
-        // For SVG images - don't render as webp, keep them as SVG
-        fetch(value)
-          .then((res) => res.blob())
-          .then((blob) => {
-            if (blob.type.includes('svg')) {
-              options.set('noWebp', true);
-            }
-          });
+          // For SVG images - don't render as webp, keep them as SVG
+          fetch(value)
+            .then((res) => res.blob())
+            .then((blob) => {
+              if (blob.type.includes('svg')) {
+                options.set('noWebp', true);
+              }
+            });
 
-        if (value && (!aspectRatio || aspectRatio === DEFAULT_ASPECT_RATIO)) {
-          return loadImage(value).then((img) => {
-            const possiblyUpdatedAspectRatio = options.get('aspectRatio');
-            if (
-              options.get('image') === value &&
-              (!possiblyUpdatedAspectRatio ||
-                possiblyUpdatedAspectRatio === DEFAULT_ASPECT_RATIO)
-            ) {
-              if (img.width && img.height) {
-                options.set('aspectRatio', round(img.height / img.width));
-                options.set('height', img.height);
-                options.set('width', img.width);
+          if (value && (!aspectRatio || aspectRatio === DEFAULT_ASPECT_RATIO)) {
+            return loadImage(value).then((img) => {
+              const possiblyUpdatedAspectRatio = options.get('aspectRatio');
+              if (
+                options.get('image') === value &&
+                (!possiblyUpdatedAspectRatio ||
+                  possiblyUpdatedAspectRatio === DEFAULT_ASPECT_RATIO)
+              ) {
+                if (img.width && img.height) {
+                  options.set('aspectRatio', round(img.height / img.width));
+                  options.set('height', img.height);
+                  options.set('width', img.width);
+                }
               }
-            }
-          });
+            });
+          }
         }
-      }),
+      ),
     },
     {
       name: 'backgroundSize',

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

@@ -69,6 +69,7 @@
     registerInsertMenu,
     setupBrowserForEditing,
   } from "../../scripts/init-editing.js";
+  import { checkIsDefined } from "../../helpers/nullable.js";
 
   export let content: RenderContentProps["content"];
   export let data: RenderContentProps["data"];
@@ -231,7 +232,7 @@
     return mergedContent;
   };
   $: canTrackToUse = () => {
-    return canTrack || true;
+    return checkIsDefined(canTrack) ? canTrack : true;
   };
   $: contentState = () => {
     return {

package/src/helpers/cookie.ts

@@ -1,5 +1,6 @@
 import { isBrowser } from '../functions/is-browser.js';
 import type { CanTrack } from '../types/can-track.js';
+import { checkIsDefined } from './nullable.js';
 import { getTopLevelDomain } from './url.js';
 
 /**
@@ -10,7 +11,7 @@ export const getCookie = async ({
   canTrack,
 }: {
   name: string;
-} & CanTrack) => {
+} & CanTrack): Promise<string | undefined> => {
   try {
     if (!canTrack) {
       return undefined;
@@ -26,6 +27,7 @@ export const getCookie = async ({
       ?.split('=')[1];
   } catch (err) {
     console.debug('[COOKIE] GET error: ', err);
+    return undefined;
   }
 };
 
@@ -40,7 +42,10 @@ type CookieConfiguration = Array<
 >;
 
 const stringifyCookie = (cookie: CookieConfiguration): string =>
-  cookie.map(([key, value]) => (value ? `${key}=${value}` : key)).join('; ');
+  cookie
+    .map(([key, value]) => (value ? `${key}=${value}` : key))
+    .filter(checkIsDefined)
+    .join('; ');
 
 const SECURE_CONFIG: CookieConfiguration = [
   ['secure', ''],
@@ -89,10 +94,10 @@ export const setCookie = async ({
   name: string;
   value: string;
   expires?: Date;
-} & CanTrack) => {
+} & CanTrack): Promise<void> => {
   try {
     if (!canTrack) {
-      return undefined;
+      return;
     }
     const cookie = createCookieString({ name, value, expires });
     document.cookie = cookie;

package/src/helpers/localStorage.ts

@@ -1,5 +1,6 @@
 import { isBrowser } from '../functions/is-browser.js';
 import type { CanTrack } from '../types/can-track.js';
+import type { Nullable } from './nullable.js';
 
 const getLocalStorage = () =>
   isBrowser() && typeof localStorage !== 'undefined' ? localStorage : undefined;
@@ -9,7 +10,7 @@ export const getLocalStorageItem = ({
   canTrack,
 }: {
   key: string;
-} & CanTrack) => {
+} & CanTrack): Nullable<string> => {
   try {
     if (canTrack) {
       return getLocalStorage()?.getItem(key);
@@ -17,6 +18,7 @@ export const getLocalStorageItem = ({
     return undefined;
   } catch (err) {
     console.debug('[LocalStorage] GET error: ', err);
+    return undefined;
   }
 };
 

package/src/helpers/sessionId.ts

@@ -5,7 +5,9 @@ import { uuid } from './uuid.js';
 
 const SESSION_LOCAL_STORAGE_KEY = 'builderSessionId';
 
-export const getSessionId = async ({ canTrack }: CanTrack) => {
+export const getSessionId = async ({
+  canTrack,
+}: CanTrack): Promise<string | undefined> => {
   if (!canTrack) {
     return undefined;
   }
@@ -20,6 +22,8 @@ export const getSessionId = async ({ canTrack }: CanTrack) => {
   } else {
     const newSessionId = createSessionId();
     setSessionId({ id: newSessionId, canTrack });
+
+    return newSessionId;
   }
 };
 

package/src/helpers/url.test.ts

@@ -13,4 +13,11 @@ 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/src/helpers/url.ts

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

package/src/helpers/visitorId.ts

@@ -5,7 +5,7 @@ import { uuid } from './uuid.js';
 
 const VISITOR_LOCAL_STORAGE_KEY = 'builderVisitorId';
 
-export const getVisitorId = ({ canTrack }: CanTrack) => {
+export const getVisitorId = ({ canTrack }: CanTrack): string | undefined => {
   if (!canTrack) {
     return undefined;
   }
@@ -20,6 +20,8 @@ export const getVisitorId = ({ canTrack }: CanTrack) => {
   } else {
     const newVisitorId = createVisitorId();
     setVisitorId({ id: newVisitorId, canTrack });
+
+    return newVisitorId;
   }
 };