@builder.io/sdk-svelte 0.0.7 → 0.0.9-0

package/src/blocks/video/video.svelte

@@ -27,6 +27,40 @@
 </script>
 
 <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) => {
+      if (filter(attr)) {
+        validAttr[attr] = attrs[attr];
+      }
+    });
+    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);
+        attrKeys.map(teardown);
+        attrKeys.map(setup);
+      },
+      destroy() {
+        attrKeys.map(teardown);
+      },
+    };
+  };
+
   export let autoPlay: VideoProps["autoPlay"];
   export let muted: VideoProps["muted"];
   export let controls: VideoProps["controls"];
@@ -96,7 +130,8 @@
     // not have the video overflow
     borderRadius: 1,
   }}
-  {...spreadProps()}
+  {...filterAttrs(spreadProps(), isNonEvent)}
   src={video || "no-src"}
   poster={posterImage}
+  use:setAttrs={filterAttrs(spreadProps(), isEvent)}
 />

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

@@ -34,6 +34,27 @@
   import RenderComponent from "./render-component.svelte";
   import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
 
+  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);
+        attrKeys.map(teardown);
+        attrKeys.map(setup);
+      },
+      destroy() {
+        attrKeys.map(teardown);
+      },
+    };
+  };
+
   export let block: RenderBlockProps["block"];
   export let context: RenderBlockProps["context"];
 
@@ -71,14 +92,16 @@
           shouldEvaluateBindings: true,
         });
   };
+  $: actions = () => {
+    return getBlockActions({
+      block: useBlock(),
+      state: context.state,
+      context: context.context,
+    });
+  };
   $: attributes = () => {
     return {
       ...getBlockProperties(useBlock()),
-      ...getBlockActions({
-        block: useBlock(),
-        state: context.state,
-        context: context.context,
-      }),
       ...(TARGET === "reactNative"
         ? {
             style: getReactNativeBlockStyles({
@@ -105,7 +128,10 @@
         ...(shouldWrap()
           ? {}
           : {
-              attributes: attributes(),
+              attributes: {
+                ...attributes(),
+                ...actions(),
+              },
             }),
       },
       context: childrenContext(),
@@ -198,7 +224,7 @@
 
 {#if shouldWrap()}
   {#if isEmptyHtmlElement(tag())}
-    <svelte:element this={tag()} {...attributes()} />
+    <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()} />
   {/if}
 
   {#if !isEmptyHtmlElement(tag()) && repeatItemData()}
@@ -208,7 +234,7 @@
   {/if}
 
   {#if !isEmptyHtmlElement(tag()) && !repeatItemData()}
-    <svelte:element this={tag()} {...attributes()}>
+    <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()}>
       <svelte:component
         this={renderComponentTag()}
         {...renderComponentProps()}

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

@@ -20,6 +20,8 @@
     apiKey: string;
     customComponents?: RegisteredComponent[];
     canTrack?: boolean;
+    locale?: string;
+    includeRefs?: boolean;
   };
 
   interface BuilderComponentStateChange {
@@ -46,7 +48,6 @@
 
   import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
   import { TARGET } from "../../constants/target.js";
-  import BuilderContext from "../../context/builder.context.js";
   import { evaluate } from "../../functions/evaluate.js";
   import { getContent } from "../../functions/get-content/index.js";
   import { getFetch } from "../../functions/get-fetch.js";
@@ -60,6 +61,7 @@
   import { _track } from "../../functions/track.js";
   import RenderBlocks from "../render-blocks.svelte";
   import RenderContentStyles from "./components/render-styles.svelte";
+  import BuilderContext from "../../context/builder.context.js";
   import {
     registerInsertMenu,
     setupBrowserForEditing,
@@ -68,10 +70,12 @@
   export let content: RenderContentProps["content"];
   export let data: RenderContentProps["data"];
   export let canTrack: RenderContentProps["canTrack"];
+  export let locale: RenderContentProps["locale"];
   export let context: RenderContentProps["context"];
   export let customComponents: RenderContentProps["customComponents"];
   export let model: RenderContentProps["model"];
   export let apiKey: RenderContentProps["apiKey"];
+  export let includeRefs: RenderContentProps["includeRefs"];
 
   setContext(BuilderContext.key, {
     get content() {
@@ -213,6 +217,11 @@
     return {
       ...content?.data?.state,
       ...data,
+      ...(locale
+        ? {
+            locale: locale,
+          }
+        : {}),
       ...overrideState,
     };
   };
@@ -258,11 +267,27 @@
   let overrideState = {};
 
   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."
+      );
+    }
     if (isBrowser()) {
       if (isEditing()) {
         forceReRenderCount = forceReRenderCount + 1;
         registerInsertMenu();
-        setupBrowserForEditing();
+        setupBrowserForEditing({
+          ...(locale
+            ? {
+                locale: locale,
+              }
+            : {}),
+          ...(includeRefs
+            ? {
+                includeRefs: includeRefs,
+              }
+            : {}),
+        });
         Object.values(allRegisteredComponents()).forEach(
           (registeredComponent) => {
             const message = createRegisterComponentMessage(registeredComponent);
@@ -314,7 +339,7 @@
   function onUpdateFn_0() {
     evaluateJsCode();
   }
-  $: onUpdateFn_0(...[useContent?.()?.data?.jsCode]);
+  $: onUpdateFn_0(...[useContent?.()?.data?.jsCode, contentState()]);
   function onUpdateFn_1() {
     runHttpRequests();
   }

package/src/functions/evaluate.ts

@@ -7,9 +7,11 @@ export function evaluate({
   context,
   state,
   event,
+  isExpression = true,
 }: {
   code: string;
   event?: Event;
+  isExpression?: boolean;
 } & Pick<BuilderContextInterface, 'state' | 'context'>): any {
   if (code === '') {
     console.warn('Skipping evaluation of empty code block.');
@@ -24,11 +26,14 @@ export function evaluate({
 
   // Be able to handle simple expressions like "state.foo" or "1 + 1"
   // as well as full blocks like "var foo = "bar"; return foo"
-  const useReturn = !(
-    code.includes(';') ||
-    code.includes(' return ') ||
-    code.trim().startsWith('return ')
-  );
+  const useReturn =
+    // we disable this for cases where we definitely don't want a return
+    isExpression &&
+    !(
+      code.includes(';') ||
+      code.includes(' return ') ||
+      code.trim().startsWith('return ')
+    );
 
   const useCode = useReturn ? `return (${code});` : code;
 
@@ -46,7 +51,7 @@ export function evaluate({
       'Builder custom code error: \n While Evaluating: \n ',
       useCode,
       '\n',
-      (e as any).message || e
+      e
     );
   }
 }

package/src/functions/event-handler-name.ts

@@ -1,6 +1 @@
-function capitalizeFirstLetter(string: string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
-
-export const getEventHandlerName = (key: string) =>
-  `on${capitalizeFirstLetter(key)}`;
+export const getEventHandlerName = (key: string) => `on:${key.toLowerCase()}`;

package/src/functions/get-block-actions-handler.ts

@@ -2,18 +2,19 @@ import type { BuilderContextInterface } from '../context/types.js';
 import type { BuilderBlock } from '../types/builder-block.js';
 import { evaluate } from './evaluate.js';
 
-export function crateEventHandler(
-  value: string,
-  options: { block: BuilderBlock } & Pick<
-    BuilderContextInterface,
-    'state' | 'context'
-  >
-): (event: Event) => any {
-  return (event: Event) =>
+type Options = {
+  block: BuilderBlock;
+} & Pick<BuilderContextInterface, 'state' | 'context'>;
+
+type EventHandler = (event: Event) => any;
+
+export const createEventHandler =
+  (value: string, options: Options): EventHandler =>
+  (event) =>
     evaluate({
       code: value,
       context: options.context,
       state: options.state,
       event,
+      isExpression: false,
     });
-}

package/src/functions/get-block-actions.ts

@@ -1,7 +1,7 @@
 import type { BuilderContextInterface } from '../context/types.js';
 import type { BuilderBlock } from '../types/builder-block.js';
 import { getEventHandlerName } from './event-handler-name.js';
-import { crateEventHandler } from './get-block-actions-handler.js';
+import { createEventHandler } from './get-block-actions-handler.js';
 
 type Actions = { [index: string]: (event: Event) => any };
 
@@ -19,7 +19,7 @@ export function getBlockActions(
       continue;
     }
     const value = optionActions[key];
-    obj[getEventHandlerName(key)] = crateEventHandler(value, options);
+    obj[getEventHandlerName(key)] = createEventHandler(value, options);
   }
   return obj;
 }

package/src/functions/get-builder-search-params/index.ts

@@ -2,7 +2,7 @@ import { isBrowser } from '../is-browser.js';
 
 const BUILDER_SEARCHPARAMS_PREFIX = 'builder.';
 
-type QueryObject = Record<string, string>;
+type QueryObject = Record<string, string | string[]>;
 
 export const convertSearchParamsToQueryObject = (
   searchParams: URLSearchParams

package/src/functions/track.ts

@@ -6,7 +6,12 @@ import { isBrowser } from './is-browser.js';
 import { isEditing } from './is-editing.js';
 
 interface Event {
-  type: 'click' | 'impression';
+  /**
+   * The type of your event.
+   *
+   * Examples: `click`, `conversion`, `pageview`, `impression`
+   */
+  type: string;
   data: {
     /**
      * (Optional) The content's ID. Useful if this event pertains to a specific piece of content.
@@ -95,6 +100,13 @@ const createEvent = async ({
 });
 
 export async function _track(eventProps: EventProps) {
+  if (!eventProps.apiKey) {
+    console.error(
+      '[Builder.io]: Missing API key for track call. Please provide your API key.'
+    );
+    return;
+  }
+
   if (!eventProps.canTrack) {
     return;
   }

package/src/scripts/init-editing.ts

@@ -24,7 +24,12 @@ export const registerInsertMenu = () => {
 };
 
 let isSetupForEditing = false;
-export const setupBrowserForEditing = () => {
+export const setupBrowserForEditing = (
+  options: {
+    includeRefs?: boolean;
+    locale?: string;
+  } = {}
+) => {
   if (isSetupForEditing) {
     return;
   }
@@ -48,6 +53,16 @@ export const setupBrowserForEditing = () => {
       '*'
     );
 
+    window.parent?.postMessage(
+      {
+        type: 'builder.updateContent',
+        data: {
+          options,
+        },
+      },
+      '*'
+    );
+
     window.addEventListener('message', ({ data }) => {
       if (!data?.type) {
         return;

package/package/functions/mark-mutable.d.ts

@@ -1,2 +0,0 @@
-export declare function markMutable<T = any>(value: T): T;
-export declare function markPropsMutable<T = any>(props: T): T;

package/package/functions/mark-mutable.js

@@ -1,6 +0,0 @@
-export function markMutable(value) {
-    return value;
-}
-export function markPropsMutable(props) {
-    return props;
-}

package/src/functions/mark-mutable.ts

@@ -1,7 +0,0 @@
-export function markMutable<T = any>(value: T): T {
-  return value;
-}
-
-export function markPropsMutable<T = any>(props: T): T {
-  return props;
-}