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

package/README.md

@@ -17,3 +17,7 @@ npm install @builder.io/sdk-svelte@dev
 ```
 
 Take a look at [our example repo](/examples/svelte/sveltekit) for how to use this SDK.
+
+## Fetch
+
+This Package uses fetch. See [these docs](https://github.com/BuilderIO/this-package-uses-fetch/blob/main/README.md) for more information.

package/package/--package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "type": "module",
   "files": [
     "package",
@@ -95,7 +95,8 @@
     "./functions/get-builder-search-params/fn.test": "./functions/get-builder-search-params/fn.test.js",
     "./functions/get-builder-search-params": "./functions/get-builder-search-params/index.js",
     "./functions/get-content/ab-testing": "./functions/get-content/ab-testing.js",
-    "./functions/get-content/fn.test": "./functions/get-content/fn.test.js",
+    "./functions/get-content/generate-content-url.test": "./functions/get-content/generate-content-url.test.js",
+    "./functions/get-content/generate-content-url": "./functions/get-content/generate-content-url.js",
     "./functions/get-content": "./functions/get-content/index.js",
     "./functions/get-content/types": "./functions/get-content/types.js",
     "./functions/get-fetch": "./functions/get-fetch.js",
@@ -154,8 +155,5 @@
     "tslib": "^2.3.1",
     "typescript": "^4",
     "vite": "^3.0.4"
-  },
-  "dependencies": {
-    "node-fetch": "^2.6.1"
   }
 }

package/package/README.md

@@ -17,3 +17,7 @@ npm install @builder.io/sdk-svelte@dev
 ```
 
 Take a look at [our example repo](/examples/svelte/sveltekit) for how to use this SDK.
+
+## Fetch
+
+This Package uses fetch. See [these docs](https://github.com/BuilderIO/this-package-uses-fetch/blob/main/README.md) for more information.

package/package/blocks/symbol/symbol.svelte

@@ -4,6 +4,7 @@
 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 { TARGET } from "../../constants/target";
 const isEvent = (attr) => attr.startsWith("on:");
 const isNonEvent = (attr) => !attr.startsWith("on:");
 const filterAttrs = (attrs, filter) => {
@@ -31,13 +32,25 @@ const setAttrs = (node, attrs) => {
         },
     };
 };
-export let symbol;
 export let attributes;
+export let symbol;
+export let dynamic;
 let builderContext = getContext(BuilderContext.key);
+$: className = () => {
+    return [
+        ...(TARGET === "vue2" || TARGET === "vue3"
+            ? Object.keys(attributes.class)
+            : [attributes.class]),
+        "builder-symbol",
+        symbol?.inline ? "builder-inline-symbol" : undefined,
+        symbol?.dynamic || dynamic ? "builder-dynamic-symbol" : undefined,
+    ]
+        .filter(Boolean)
+        .join(" ");
+};
 $: contentToUse = () => {
     return symbol?.content || fetchedContent;
 };
-let className = "builder-symbol";
 let fetchedContent = null;
 function onUpdateFn_0() {
     const symbolToUse = symbol;
@@ -71,9 +84,9 @@ $: onUpdateFn_0(...[symbol, fetchedContent]);
 <div
   {...filterAttrs(attributes, isNonEvent)}
   dataSet={{
-    class: className,
+    class: className(),
   }}
-  class={className}
+  class={className()}
   use:setAttrs={filterAttrs(attributes, isEvent)}
 >
   <RenderContent

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

@@ -19,8 +19,9 @@ export interface SymbolProps {
 }
 declare const __propDef: {
     props: {
-        symbol: SymbolProps["symbol"];
         attributes: SymbolProps["attributes"];
+        symbol: SymbolProps["symbol"];
+        dynamic: SymbolProps["dynamic"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -75,13 +75,15 @@ $: actions = () => {
     });
 };
 $: attributes = () => {
+    const blockProperties = getBlockProperties(useBlock());
     return {
-        ...getBlockProperties(useBlock()),
+        ...blockProperties,
         ...(TARGET === "reactNative"
             ? {
                 style: getReactNativeBlockStyles({
                     block: useBlock(),
                     context: context,
+                    blockStyles: blockProperties.style,
                 }),
             }
             : {}),
@@ -171,6 +173,7 @@ $: inheritedTextStyles = () => {
     const styles = getReactNativeBlockStyles({
         block: useBlock(),
         context: context,
+        blockStyles: attributes().style,
     });
     return extractTextStyles(styles);
 };

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

@@ -5,7 +5,7 @@ import { getDefaultRegisteredComponents } from "../../constants/builder-register
 import { TARGET } from "../../constants/target.js";
 import { evaluate } from "../../functions/evaluate.js";
 import { getContent } from "../../functions/get-content/index.js";
-import { getFetch } from "../../functions/get-fetch.js";
+import { fetch } from "../../functions/get-fetch.js";
 import { isBrowser } from "../../functions/is-browser.js";
 import { isEditing } from "../../functions/is-editing.js";
 import { isPreviewing } from "../../functions/is-previewing.js";
@@ -107,8 +107,7 @@ function evalExpression(expression) {
     }));
 }
 function handleRequest({ url, key }) {
-    getFetch()
-        .then((fetch) => fetch(url))
+    fetch(url)
         .then((response) => response.json())
         .then((json) => {
         const newOverrideState = {

package/package/functions/get-content/generate-content-url.d.ts

@@ -0,0 +1,2 @@
+import type { GetContentOptions } from './types.js';
+export declare const generateContentUrl: (options: GetContentOptions) => URL;

package/package/functions/get-content/generate-content-url.js

@@ -0,0 +1,27 @@
+import { flatten } from '../../helpers/flatten.js';
+import { getBuilderSearchParamsFromWindow, normalizeSearchParams, } from '../get-builder-search-params/index.js';
+export const generateContentUrl = (options) => {
+    const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale, } = options;
+    if (!apiKey) {
+        throw new Error('Missing API key');
+    }
+    const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ''}`);
+    const queryOptions = {
+        ...getBuilderSearchParamsFromWindow(),
+        ...normalizeSearchParams(options.options || {}),
+    };
+    const flattened = flatten(queryOptions);
+    for (const key in flattened) {
+        url.searchParams.set(key, String(flattened[key]));
+    }
+    if (userAttributes) {
+        url.searchParams.set('userAttributes', JSON.stringify(userAttributes));
+    }
+    if (query) {
+        const flattened = flatten({ query });
+        for (const key in flattened) {
+            url.searchParams.set(key, JSON.stringify(flattened[key]));
+        }
+    }
+    return url;
+};

package/package/functions/get-content/{fn.test.js → generate-content-url.test.js}

@@ -1,4 +1,4 @@
-import { generateContentUrl } from '.';
+import { generateContentUrl } from './generate-content-url';
 const testKey = 'YJIGb4i01jvw0SRdL5Bt';
 const testModel = 'page';
 const testId = 'c1b81bab59704599b997574eb0736def';

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

@@ -1,7 +1,6 @@
 import type { BuilderContent } from '../../types/builder-content.js';
-export declare type GetContentOptions = import('./types.js').GetContentOptions;
+import type { GetContentOptions } from './types.js';
 export declare function getContent(options: GetContentOptions): Promise<BuilderContent | null>;
-export declare const generateContentUrl: (options: GetContentOptions) => URL;
 /**
  * TO-DO: Handle error responses.
  */

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

@@ -1,39 +1,13 @@
-import { flatten } from '../../helpers/flatten.js';
-import { getBuilderSearchParamsFromWindow, normalizeSearchParams, } from '../get-builder-search-params/index.js';
-import { getFetch } from '../get-fetch.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) {
     return (await getAllContent({ ...options, limit: 1 })).results[0] || null;
 }
-export const generateContentUrl = (options) => {
-    const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale, } = options;
-    if (!apiKey) {
-        throw new Error('Missing API key');
-    }
-    const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ''}`);
-    const queryOptions = {
-        ...getBuilderSearchParamsFromWindow(),
-        ...normalizeSearchParams(options.options || {}),
-    };
-    const flattened = flatten(queryOptions);
-    for (const key in flattened) {
-        url.searchParams.set(key, String(flattened[key]));
-    }
-    if (userAttributes) {
-        url.searchParams.set('userAttributes', JSON.stringify(userAttributes));
-    }
-    if (query) {
-        const flattened = flatten({ query });
-        for (const key in flattened) {
-            url.searchParams.set(key, JSON.stringify(flattened[key]));
-        }
-    }
-    return url;
-};
 export async function getAllContent(options) {
     const url = generateContentUrl(options);
-    const fetch = await getFetch();
-    const content = await fetch(url.href).then((res) => res.json());
+    const res = await fetch(url.href);
+    const content = await res.json();
     const canTrack = options.canTrack !== false;
     if (canTrack &&
         // This makes sure we have a non-error response with the results array.

package/package/functions/get-fetch.d.ts

@@ -1 +1 @@
-export declare function getFetch(): Promise<typeof global.fetch>;
+export declare const fetch: typeof globalThis.fetch;

package/package/functions/get-fetch.js

@@ -1,9 +1,11 @@
 import { getGlobalThis } from './get-global-this.js';
-export async function getFetch() {
+function getFetch() {
     const globalFetch = getGlobalThis().fetch;
-    if (typeof globalFetch === 'undefined' && typeof global !== 'undefined') {
-        const nodeFetch = import('node-fetch').then((d) => d.default);
-        return nodeFetch.default || nodeFetch;
+    if (typeof globalFetch === 'undefined') {
+        console.warn(`Builder SDK could not find a global fetch function. Make sure you have a polyfill for fetch in your project. 
+      For more information, read https://github.com/BuilderIO/this-package-uses-fetch`);
+        throw new Error('Builder SDK could not find a global `fetch` function');
     }
-    return globalFetch.default || globalFetch;
+    return globalFetch;
 }
+export const fetch = getFetch();

package/package/functions/get-global-this.d.ts

@@ -1 +1,2 @@
-export declare function getGlobalThis(): any;
+/// <reference types="@types/node" />
+export declare function getGlobalThis(): typeof global;

package/package/functions/get-global-this.js

@@ -11,5 +11,5 @@ export function getGlobalThis() {
     if (typeof self !== 'undefined') {
         return self;
     }
-    return null;
+    return globalThis;
 }

package/package/functions/get-react-native-block-styles.d.ts

@@ -1,6 +1,7 @@
 import type { BuilderContextInterface } from '../context/types.js';
 import type { BuilderBlock } from '../types/builder-block.js';
-export declare function getReactNativeBlockStyles({ block, context, }: {
+export declare function getReactNativeBlockStyles({ block, context, blockStyles, }: {
     block: BuilderBlock;
     context: BuilderContextInterface;
+    blockStyles: any;
 }): CSSStyleDeclaration | Record<string, string | undefined>;

package/package/functions/get-react-native-block-styles.js

@@ -1,5 +1,5 @@
 import { sanitizeReactNativeBlockStyles } from './sanitize-react-native-block-styles.js';
-export function getReactNativeBlockStyles({ block, context, }) {
+export function getReactNativeBlockStyles({ block, context, blockStyles, }) {
     const responsiveStyles = block.responsiveStyles;
     if (!responsiveStyles) {
         return {};
@@ -10,6 +10,7 @@ export function getReactNativeBlockStyles({ block, context, }) {
         ...(responsiveStyles.large || {}),
         ...(responsiveStyles.medium || {}),
         ...(responsiveStyles.small || {}),
+        ...blockStyles,
     };
     const newStyles = sanitizeReactNativeBlockStyles(styles);
     return newStyles;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.0.10-0",
+  "version": "0.0.11-0",
   "type": "module",
   "files": [
     "package",
@@ -46,8 +46,5 @@
     "tslib": "^2.3.1",
     "typescript": "^4",
     "vite": "^3.0.4"
-  },
-  "dependencies": {
-    "node-fetch": "^2.6.1"
   }
 }

package/src/blocks/symbol/symbol.svelte

@@ -30,6 +30,7 @@
   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 { TARGET } from "../../constants/target";
 
   const isEvent = (attr) => attr.startsWith("on:");
   const isNonEvent = (attr) => !attr.startsWith("on:");
@@ -65,16 +66,28 @@
     };
   };
 
-  export let symbol: SymbolProps["symbol"];
   export let attributes: SymbolProps["attributes"];
+  export let symbol: SymbolProps["symbol"];
+  export let dynamic: SymbolProps["dynamic"];
 
   let builderContext = getContext(BuilderContext.key);
 
+  $: className = () => {
+    return [
+      ...(TARGET === "vue2" || TARGET === "vue3"
+        ? Object.keys(attributes.class)
+        : [attributes.class]),
+      "builder-symbol",
+      symbol?.inline ? "builder-inline-symbol" : undefined,
+      symbol?.dynamic || dynamic ? "builder-dynamic-symbol" : undefined,
+    ]
+      .filter(Boolean)
+      .join(" ");
+  };
   $: contentToUse = () => {
     return symbol?.content || fetchedContent;
   };
 
-  let className = "builder-symbol";
   let fetchedContent = null;
 
   function onUpdateFn_0() {
@@ -112,9 +125,9 @@
 <div
   {...filterAttrs(attributes, isNonEvent)}
   dataSet={{
-    class: className,
+    class: className(),
   }}
-  class={className}
+  class={className()}
   use:setAttrs={filterAttrs(attributes, isEvent)}
 >
   <RenderContent

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

@@ -100,13 +100,15 @@
     });
   };
   $: attributes = () => {
+    const blockProperties = getBlockProperties(useBlock());
     return {
-      ...getBlockProperties(useBlock()),
+      ...blockProperties,
       ...(TARGET === "reactNative"
         ? {
             style: getReactNativeBlockStyles({
               block: useBlock(),
               context: context,
+              blockStyles: blockProperties.style,
             }),
           }
         : {}),
@@ -198,6 +200,7 @@
     const styles = getReactNativeBlockStyles({
       block: useBlock(),
       context: context,
+      blockStyles: attributes().style,
     });
     return extractTextStyles(styles);
   };

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

@@ -53,7 +53,7 @@
   import { TARGET } from "../../constants/target.js";
   import { evaluate } from "../../functions/evaluate.js";
   import { getContent } from "../../functions/get-content/index.js";
-  import { getFetch } from "../../functions/get-fetch.js";
+  import { fetch } from "../../functions/get-fetch.js";
   import { isBrowser } from "../../functions/is-browser.js";
   import { isEditing } from "../../functions/is-editing.js";
   import { isPreviewing } from "../../functions/is-previewing.js";
@@ -168,8 +168,7 @@
     );
   }
   function handleRequest({ url, key }) {
-    getFetch()
-      .then((fetch) => fetch(url))
+    fetch(url)
       .then((response) => response.json())
       .then((json) => {
         const newOverrideState = {

package/src/functions/get-content/{fn.test.ts → generate-content-url.test.ts}

@@ -1,4 +1,4 @@
-import { generateContentUrl } from '.';
+import { generateContentUrl } from './generate-content-url';
 
 const testKey = 'YJIGb4i01jvw0SRdL5Bt';
 const testModel = 'page';

package/src/functions/get-content/generate-content-url.ts

@@ -0,0 +1,51 @@
+import { flatten } from '../../helpers/flatten.js';
+import {
+  getBuilderSearchParamsFromWindow,
+  normalizeSearchParams,
+} from '../get-builder-search-params/index.js';
+import type { GetContentOptions } from './types.js';
+
+export const generateContentUrl = (options: GetContentOptions): URL => {
+  const {
+    limit = 30,
+    userAttributes,
+    query,
+    noTraverse = false,
+    model,
+    apiKey,
+    includeRefs = true,
+    locale,
+  } = options;
+
+  if (!apiKey) {
+    throw new Error('Missing API key');
+  }
+
+  const url = new URL(
+    `https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${
+      locale ? `&locale=${locale}` : ''
+    }`
+  );
+
+  const queryOptions = {
+    ...getBuilderSearchParamsFromWindow(),
+    ...normalizeSearchParams(options.options || {}),
+  };
+
+  const flattened = flatten(queryOptions);
+  for (const key in flattened) {
+    url.searchParams.set(key, String(flattened[key]));
+  }
+
+  if (userAttributes) {
+    url.searchParams.set('userAttributes', JSON.stringify(userAttributes));
+  }
+  if (query) {
+    const flattened = flatten({ query });
+    for (const key in flattened) {
+      url.searchParams.set(key, JSON.stringify((flattened as any)[key]));
+    }
+  }
+
+  return url;
+};

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

@@ -1,13 +1,8 @@
-import { flatten } from '../../helpers/flatten.js';
 import type { BuilderContent } from '../../types/builder-content.js';
-import {
-  getBuilderSearchParamsFromWindow,
-  normalizeSearchParams,
-} from '../get-builder-search-params/index.js';
-import { getFetch } from '../get-fetch.js';
+import { fetch } from '../get-fetch.js';
 import { handleABTesting } from './ab-testing.js';
-
-export type GetContentOptions = import('./types.js').GetContentOptions;
+import { generateContentUrl } from './generate-content-url.js';
+import type { GetContentOptions } from './types.js';
 
 export async function getContent(
   options: GetContentOptions
@@ -15,51 +10,6 @@ export async function getContent(
   return (await getAllContent({ ...options, limit: 1 })).results[0] || null;
 }
 
-export const generateContentUrl = (options: GetContentOptions): URL => {
-  const {
-    limit = 30,
-    userAttributes,
-    query,
-    noTraverse = false,
-    model,
-    apiKey,
-    includeRefs = true,
-    locale,
-  } = options;
-
-  if (!apiKey) {
-    throw new Error('Missing API key');
-  }
-
-  const url = new URL(
-    `https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${
-      locale ? `&locale=${locale}` : ''
-    }`
-  );
-
-  const queryOptions = {
-    ...getBuilderSearchParamsFromWindow(),
-    ...normalizeSearchParams(options.options || {}),
-  };
-
-  const flattened = flatten(queryOptions);
-  for (const key in flattened) {
-    url.searchParams.set(key, String(flattened[key]));
-  }
-
-  if (userAttributes) {
-    url.searchParams.set('userAttributes', JSON.stringify(userAttributes));
-  }
-  if (query) {
-    const flattened = flatten({ query });
-    for (const key in flattened) {
-      url.searchParams.set(key, JSON.stringify((flattened as any)[key]));
-    }
-  }
-
-  return url;
-};
-
 /**
  * TO-DO: Handle error responses.
  */
@@ -72,10 +22,8 @@ export async function getAllContent(
 ): Promise<ContentResponse> {
   const url = generateContentUrl(options);
 
-  const fetch = await getFetch();
-  const content: ContentResponse = await fetch(url.href).then((res) =>
-    res.json()
-  );
+  const res = await fetch(url.href);
+  const content = await (res.json() as Promise<ContentResponse>);
 
   const canTrack = options.canTrack !== false;
   if (

package/src/functions/get-fetch.ts

@@ -1,14 +1,18 @@
 import { getGlobalThis } from './get-global-this.js';
 
-export async function getFetch(): Promise<typeof global.fetch> {
+function getFetch(): typeof global.fetch {
   const globalFetch: typeof global.fetch = getGlobalThis().fetch;
 
-  if (typeof globalFetch === 'undefined' && typeof global !== 'undefined') {
-    const nodeFetch = import('node-fetch').then((d) => d.default) as Promise<
-      typeof global.fetch
-    >;
-    return (nodeFetch as any).default || nodeFetch;
+  if (typeof globalFetch === 'undefined') {
+    console.warn(
+      `Builder SDK could not find a global fetch function. Make sure you have a polyfill for fetch in your project. 
+      For more information, read https://github.com/BuilderIO/this-package-uses-fetch`
+    );
+
+    throw new Error('Builder SDK could not find a global `fetch` function');
   }
 
-  return (globalFetch as any).default || globalFetch;
+  return globalFetch;
 }
+
+export const fetch = getFetch();

package/src/functions/get-global-this.ts

@@ -1,4 +1,4 @@
-export function getGlobalThis(): any {
+export function getGlobalThis(): typeof global {
   if (typeof globalThis !== 'undefined') {
     return globalThis;
   }
@@ -11,5 +11,5 @@ export function getGlobalThis(): any {
   if (typeof self !== 'undefined') {
     return self;
   }
-  return null;
+  return globalThis;
 }

package/src/functions/get-react-native-block-styles.ts

@@ -5,9 +5,11 @@ import { sanitizeReactNativeBlockStyles } from './sanitize-react-native-block-st
 export function getReactNativeBlockStyles({
   block,
   context,
+  blockStyles,
 }: {
   block: BuilderBlock;
   context: BuilderContextInterface;
+  blockStyles: any;
 }): CSSStyleDeclaration | Record<string, string | undefined> {
   const responsiveStyles = block.responsiveStyles;
   if (!responsiveStyles) {
@@ -20,6 +22,7 @@ export function getReactNativeBlockStyles({
     ...(responsiveStyles.large || {}),
     ...(responsiveStyles.medium || {}),
     ...(responsiveStyles.small || {}),
+    ...blockStyles,
   } as Record<string, string | number>;
 
   const newStyles = sanitizeReactNativeBlockStyles(