@builder.io/sdk-svelte 0.0.5 → 0.0.7

package/package/--package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "type": "module",
   "files": [
     "package",
@@ -72,6 +72,7 @@
     "./components/render-block/render-repeated-block.svelte": "./components/render-block/render-repeated-block.svelte",
     "./components/render-block/types": "./components/render-block/types.js",
     "./components/render-blocks.svelte": "./components/render-blocks.svelte",
+    "./components/render-content/builder-editing.svelte": "./components/render-content/builder-editing.svelte",
     "./components/render-content/components/render-styles.svelte": "./components/render-content/components/render-styles.svelte",
     "./components/render-content": "./components/render-content/index.js",
     "./components/render-content/render-content.svelte": "./components/render-content/render-content.svelte",

package/package/blocks/button/button.svelte

@@ -8,15 +8,15 @@ export let openLinkInNewTab;
 
 {#if link}
   <a
-    {...attributes}
     role="button"
+    {...attributes}
     href={link}
     target={openLinkInNewTab ? "_blank" : undefined}
   >
     {text}
   </a>
 {:else}
-  <button {...attributes} class="button">
+  <button class="button" {...attributes}>
     {text}
   </button>
 {/if}

package/package/blocks/columns/columns.svelte

@@ -1,7 +1,6 @@
 <script context="module"></script>
 
 <script>import RenderBlocks from "../../components/render-blocks.svelte";
-import { markMutable } from "../../functions/mark-mutable";
 export let space;
 export let columns;
 export let stackColumnsAt;
@@ -71,7 +70,7 @@ $: columnCssVars = () => {
       class="builder-column div-2"
     >
       <RenderBlocks
-        blocks={markMutable(column.blocks)}
+        blocks={column.blocks}
         path={`component.options.columns.${index}.blocks`}
         parent={builderBlock.id}
         styleProp={{

package/package/blocks/columns/component-info.js

@@ -1,4 +1,4 @@
-import { markSerializable } from '../util.js';
+import { serializeFn } from '../util.js';
 export const componentInfo = {
     // TODO: ways to statically preprocess JSON for references, functions, etc
     name: 'Columns',
@@ -188,7 +188,7 @@ export const componentInfo = {
                     ],
                 },
             ],
-            onChange: markSerializable((options) => {
+            onChange: serializeFn((options) => {
                 function clearWidths() {
                     columns.forEach((col) => {
                         col.delete('width');

package/package/blocks/embed/component-info.js

@@ -1,4 +1,4 @@
-import { markSerializable } from '../util.js';
+import { serializeFn } from '../util.js';
 export const componentInfo = {
     name: 'Embed',
     static: true,
@@ -10,7 +10,7 @@ export const componentInfo = {
             required: true,
             defaultValue: '',
             helperText: 'e.g. enter a youtube url, google map, etc',
-            onChange: markSerializable((options) => {
+            onChange: serializeFn((options) => {
                 const url = options.get('url');
                 if (url) {
                     options.set('content', 'Loading...');

package/package/blocks/form/form.svelte

@@ -217,7 +217,6 @@ let formErrorMessage = "";
 </script>
 
 <form
-  {...attributes}
   {validate}
   bind:this={formRef}
   action={!sendWithJs && action}
@@ -226,6 +225,7 @@ let formErrorMessage = "";
   on:submit={(event) => {
     onSubmit(event);
   }}
+  {...attributes}
 >
   {#if builderBlock && builderBlock.children}
     {#each builderBlock?.children as block}

package/package/blocks/image/component-info.js

@@ -1,4 +1,4 @@
-import { markSerializable } from '../util.js';
+import { serializeFn } from '../util.js';
 export const componentInfo = {
     name: 'Image',
     static: true,
@@ -19,7 +19,7 @@ export const componentInfo = {
             allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg'],
             required: true,
             defaultValue: 'https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
-            onChange: markSerializable((options) => {
+            onChange: serializeFn((options) => {
                 const DEFAULT_ASPECT_RATIO = 0.7041;
                 options.delete('srcset');
                 options.delete('noWebp');

package/package/blocks/img/img.svelte

@@ -20,7 +20,6 @@ function mitosis_styling(node, vars) {
 </script>
 
 <img
-  {...attributes}
   use:mitosis_styling={{
     objectFit: backgroundSize || "cover",
     objectPosition: backgroundPosition || "center",
@@ -28,4 +27,5 @@ function mitosis_styling(node, vars) {
   key={(isEditing() && imgSrc) || "default-key"}
   alt={altText}
   src={imgSrc || image}
+  {...attributes}
 />

package/package/blocks/section/section.svelte

@@ -15,12 +15,12 @@ function mitosis_styling(node, vars) {
 </script>
 
 <section
-  {...attributes}
   use:mitosis_styling={maxWidth && typeof maxWidth === "number"
     ? {
         maxWidth: maxWidth,
       }
     : undefined}
+  {...attributes}
 >
   <slot />
 </section>

package/package/blocks/submit-button/submit-button.svelte

@@ -4,6 +4,6 @@
 export let text;
 </script>
 
-<button {...attributes} type="submit">
+<button type="submit" {...attributes}>
   {text}
 </button>

package/package/blocks/symbol/symbol.svelte

@@ -4,7 +4,6 @@
 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 { markMutable } from "../../functions/mark-mutable";
 export let symbol;
 export let attributes;
 let builderContext = getContext(BuilderContext.key);
@@ -52,15 +51,13 @@ $: onUpdateFn_0(...[symbol, fetchedContent]);
   <RenderContent
     apiKey={builderContext.apiKey}
     context={builderContext.context}
-    customComponents={markMutable(
-      Object.values(builderContext.registeredComponents)
-    )}
-    data={markMutable({
+    customComponents={Object.values(builderContext.registeredComponents)}
+    data={{
       ...symbol?.data,
       ...builderContext.state,
       ...symbol?.content?.data?.state,
-    })}
+    }}
     model={symbol?.model}
-    content={markMutable(contentToUse())}
+    content={contentToUse()}
   />
 </div>

package/package/blocks/util.d.ts

@@ -1 +1,4 @@
-export declare function markSerializable<FN extends (...args: any[]) => any>(fn: FN): FN;
+/**
+ * Input attributes that are functions must be converted to strings before being serialized to JSON.
+ */
+export declare const serializeFn: (fnValue: Function) => string;

package/package/blocks/util.js

@@ -1,4 +1,13 @@
-export function markSerializable(fn) {
-    fn.__qwik_serializable__ = true;
-    return fn;
-}
+/**
+ * Input attributes that are functions must be converted to strings before being serialized to JSON.
+ */
+// eslint-disable-next-line @typescript-eslint/ban-types
+export const serializeFn = (fnValue) => {
+    const fnStr = fnValue.toString().trim();
+    // we need to account for a few different fn syntaxes:
+    // 1. `function name(args) => {code}`
+    // 2. `name(args) => {code}`
+    // 3. `(args) => {}`
+    const appendFunction = !fnStr.startsWith('function') && !fnStr.startsWith('(');
+    return `return (${appendFunction ? 'function ' : ''}${fnStr}).apply(this, arguments)`;
+};

package/package/blocks/video/video.svelte

@@ -58,7 +58,6 @@ $: spreadProps = () => {
 </script>
 
 <video
-  {...spreadProps()}
   use:mitosis_styling={{
     width: "100%",
     height: "100%",
@@ -69,6 +68,7 @@ $: spreadProps = () => {
     // not have the video overflow
     borderRadius: 1,
   }}
+  {...spreadProps()}
   src={video || "no-src"}
   poster={posterImage}
 />

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

@@ -1,6 +1,6 @@
 <script context="module"></script>
 
-<script>import { getMaxWidthQueryForSize } from "../../constants/device-sizes.js";
+<script>import { getMaxWidthQueryForSize, getSizesForBreakpoints, } from "../../constants/device-sizes.js";
 import { TARGET } from "../../constants/target.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import { createCssClass } from "../../helpers/css.js";
@@ -17,6 +17,8 @@ $: useBlock = () => {
 };
 $: css = () => {
     const styles = useBlock().responsiveStyles;
+    const content = context.content;
+    const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
     const largeStyles = styles?.large;
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
@@ -31,14 +33,14 @@ $: css = () => {
         ? createCssClass({
             className,
             styles: mediumStyles,
-            mediaQuery: getMaxWidthQueryForSize("medium"),
+            mediaQuery: getMaxWidthQueryForSize("medium", sizesWithUpdatedBreakpoints),
         })
         : "";
     const smallStylesClass = smallStyles
         ? createCssClass({
             className,
             styles: smallStyles,
-            mediaQuery: getMaxWidthQueryForSize("small"),
+            mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints),
         })
         : "";
     return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");

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

@@ -38,7 +38,7 @@ $: component = () => {
         return ref;
     }
 };
-$: tagName = () => {
+$: tag = () => {
     return getBlockTag(useBlock());
 };
 $: useBlock = () => {
@@ -74,7 +74,7 @@ $: shouldWrap = () => {
 };
 $: renderComponentProps = () => {
     return {
-        blockChildren: children(),
+        blockChildren: useChildren(),
         componentRef: component?.()?.component,
         componentOptions: {
             ...getBlockComponentOptions(useBlock()),
@@ -91,7 +91,7 @@ $: renderComponentProps = () => {
         context: childrenContext(),
     };
 };
-$: children = () => {
+$: useChildren = () => {
     // TO-DO: When should `canHaveChildren` dictate rendering?
     // This is currently commented out because some Builder components (e.g. Box) do not have `canHaveChildren: true`,
     // but still receive and need to render children.
@@ -106,7 +106,7 @@ $: childrenWithoutParentComponent = () => {
      * blocks, and the children will be repeated within those blocks.
      */
     const shouldRenderChildrenOutsideRef = !component?.()?.component && !repeatItemData();
-    return shouldRenderChildrenOutsideRef ? children() : [];
+    return shouldRenderChildrenOutsideRef ? useChildren() : [];
 };
 $: repeatItemData = () => {
     /**
@@ -177,18 +177,18 @@ $: renderComponentTag = () => {
 </script>
 
 {#if shouldWrap()}
-  {#if isEmptyHtmlElement(tagName())}
-    <svelte:element this={tagName()} {...attributes()} />
+  {#if isEmptyHtmlElement(tag())}
+    <svelte:element this={tag()} {...attributes()} />
   {/if}
 
-  {#if !isEmptyHtmlElement(tagName()) && repeatItemData()}
+  {#if !isEmptyHtmlElement(tag()) && repeatItemData()}
     {#each repeatItemData() as data, index (index)}
       <RenderRepeatedBlock repeatContext={data.context} block={data.block} />
     {/each}
   {/if}
 
-  {#if !isEmptyHtmlElement(tagName()) && !repeatItemData()}
-    <svelte:element this={tagName()} {...attributes()}>
+  {#if !isEmptyHtmlElement(tag()) && !repeatItemData()}
+    <svelte:element this={tag()} {...attributes()}>
       <svelte:component
         this={renderComponentTag()}
         {...renderComponentProps()}

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

@@ -2,7 +2,6 @@
 
 <script>import BlockStyles from "./block-styles.svelte";
 import RenderBlock from "./render-block.svelte";
-import { markPropsMutable } from "../../functions/mark-mutable.js";
 export let componentRef;
 export let componentOptions;
 export let blockChildren;
@@ -10,7 +9,7 @@ export let context;
 </script>
 
 {#if componentRef}
-  <svelte:component this={componentRef} {...markPropsMutable(componentOptions)}>
+  <svelte:component this={componentRef} {...componentOptions}>
     {#each blockChildren as child ("render-block-" + child.id)}
       <RenderBlock block={child} {context} />
     {/each}

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

@@ -0,0 +1,4 @@
+<script>"use strict";
+</script>
+
+<div />

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

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type BuilderEditingProps = typeof __propDef.props;
+export declare type BuilderEditingEvents = typeof __propDef.events;
+export declare type BuilderEditingSlots = typeof __propDef.slots;
+export default class BuilderEditing extends SvelteComponentTyped<BuilderEditingProps, BuilderEditingEvents, BuilderEditingSlots> {
+}
+export {};

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

@@ -11,11 +11,10 @@ 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.js";
 import RenderBlocks from "../render-blocks.svelte";
 import RenderContentStyles from "./components/render-styles.svelte";
 import { registerInsertMenu, setupBrowserForEditing, } from "../../scripts/init-editing.js";
-import { markMutable } from "../../functions/mark-mutable.js";
 export let content;
 export let data;
 export let canTrack;
@@ -77,11 +76,14 @@ function evaluateJsCode() {
 }
 function onClick(_event) {
     if (useContent()) {
-        track({
+        const variationId = useContent?.()?.testVariationId;
+        const contentId = useContent?.()?.id;
+        _track({
             type: "click",
             canTrack: canTrackToUse(),
-            contentId: useContent?.()?.id,
-            orgId: apiKey,
+            contentId,
+            apiKey: apiKey,
+            variationId: variationId !== contentId ? variationId : undefined,
         });
     }
 }
@@ -193,7 +195,6 @@ onMount(() => {
     if (isBrowser()) {
         if (isEditing()) {
             forceReRenderCount = forceReRenderCount + 1;
-            // QWIK-REPLACE: _useMutableProps
             registerInsertMenu();
             setupBrowserForEditing();
             Object.values(allRegisteredComponents()).forEach((registeredComponent) => {
@@ -204,11 +205,14 @@ onMount(() => {
             window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
         }
         if (useContent()) {
-            track({
+            const variationId = useContent?.()?.testVariationId;
+            const contentId = useContent?.()?.id;
+            _track({
                 type: "impression",
                 canTrack: canTrackToUse(),
-                contentId: useContent?.()?.id,
-                orgId: apiKey,
+                contentId,
+                apiKey: apiKey,
+                variationId: variationId !== contentId ? variationId : undefined,
             });
         }
         // override normal content in preview mode
@@ -269,7 +273,7 @@ onDestroy(() => {
       />
     {/if}
     <RenderBlocks
-      blocks={markMutable(useContent?.()?.data?.blocks)}
+      blocks={useContent?.()?.data?.blocks}
       key={forceReRenderCount}
     />
   </div>

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

@@ -3,9 +3,9 @@
 <script>import { TARGET } from "../constants/target.js";
 export let styles;
 $: injectedStyleScript = () => {
-    return `<${tagName()}>${styles}</${tagName()}>`;
+    return `<${tag()}>${styles}</${tag()}>`;
 };
-$: tagName = () => {
+$: tag = () => {
     // NOTE: we have to obfusctate the name of the tag due to a limitation in the svelte-preprocessor plugin.
     // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
     return "sty" + "le";
@@ -15,5 +15,5 @@ $: tagName = () => {
 {#if TARGET === "svelte"}
   {@html injectedStyleScript()}
 {:else}
-  <svelte:element this={tagName()}>{styles}</svelte:element>
+  <svelte:element this={tag()}>{styles}</svelte:element>
 {/if}

package/package/constants/device-sizes.d.ts

@@ -1,2 +1,13 @@
 export declare type SizeName = 'large' | 'medium' | 'small';
-export declare const getMaxWidthQueryForSize: (size: SizeName) => string;
+interface Size {
+    min: number;
+    default: number;
+    max: number;
+}
+export declare const getMaxWidthQueryForSize: (size: SizeName, sizeValues?: Record<SizeName, Size>) => string;
+interface Breakpoints {
+    small?: number;
+    medium?: number;
+}
+export declare const getSizesForBreakpoints: ({ small, medium }: Breakpoints) => Record<SizeName, Size>;
+export {};

package/package/constants/device-sizes.js

@@ -1,3 +1,4 @@
+import { fastClone } from '../functions/fast-clone';
 const SIZES = {
     small: {
         min: 320,
@@ -15,4 +16,29 @@ const SIZES = {
         max: 1200,
     },
 };
-export const getMaxWidthQueryForSize = (size) => `@media (max-width: ${SIZES[size].max}px)`;
+export const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
+export const getSizesForBreakpoints = ({ small, medium }) => {
+    const newSizes = fastClone(SIZES); // Note: this helps to get a deep clone of fields like small, medium etc
+    if (!small || !medium) {
+        return newSizes;
+    }
+    const smallMin = Math.floor(small / 2);
+    newSizes.small = {
+        max: small,
+        min: smallMin,
+        default: smallMin + 1,
+    };
+    const mediumMin = newSizes.small.max + 1;
+    newSizes.medium = {
+        max: medium,
+        min: mediumMin,
+        default: mediumMin + 1,
+    };
+    const largeMin = newSizes.medium.max + 1;
+    newSizes.large = {
+        max: 2000,
+        min: largeMin,
+        default: largeMin + 1,
+    };
+    return newSizes;
+};

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

@@ -6,8 +6,11 @@ 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, } = options;
-    const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}`);
+    const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, } = 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}`);
     const queryOptions = {
         ...getBuilderSearchParamsFromWindow(),
         ...normalizeSearchParams(options.options || {}),

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

@@ -28,4 +28,8 @@ export interface GetContentOptions {
      * Defaults to `true`.
      */
     canTrack?: boolean;
+    /**
+     * Include references in the response. Defaults to `true`.
+     */
+    includeRefs?: boolean;
 }

package/package/functions/register-component.js

@@ -1,3 +1,4 @@
+import { serializeFn } from '../blocks/util.js';
 import { fastClone } from './fast-clone.js';
 /**
  * @deprecated.  Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.
@@ -16,19 +17,6 @@ export const createRegisterComponentMessage = ({ component: _, ...info }) => ({
     data: prepareComponentInfoToSend(info),
 });
 const serializeValue = (value) => typeof value === 'function' ? serializeFn(value) : fastClone(value);
-/**
- * Input attributes that are functions must be converted to strings before being serialized to JSON.
- */
-// eslint-disable-next-line @typescript-eslint/ban-types
-const serializeFn = (fnValue) => {
-    const fnStr = fnValue.toString().trim();
-    // we need to account for a few different fn syntaxes:
-    // 1. `function name(args) => {code}`
-    // 2. `name(args) => {code}`
-    // 3. `(args) => {}`
-    const appendFunction = !fnStr.startsWith('function') && !fnStr.startsWith('(');
-    return `return (${appendFunction ? 'function ' : ''}${fnStr}).apply(this, arguments)`;
-};
 const prepareComponentInfoToSend = ({ inputs, ...info }) => ({
     ...fastClone(info),
     inputs: inputs?.map((input) => Object.entries(input).reduce((acc, [key, value]) => ({

package/package/functions/track.d.ts

@@ -2,20 +2,50 @@ import type { CanTrack } from '../types/can-track.js';
 interface Event {
     type: 'click' | 'impression';
     data: {
+        /**
+         * (Optional) The content's ID. Useful if this event pertains to a specific piece of content.
+         */
         contentId?: string;
+        /**
+         * This is the ID of the space that the content belongs to.
+         */
         ownerId: string;
+        /**
+         * Stringified JSON object containing any additional metadata you want to track.
+         */
         metadata?: string;
+        /**
+         * Session ID of the user. This is provided by the SDK by checking session storage.
+         */
         sessionId: string | undefined;
+        /**
+         * Visitor ID of the user. This is provided by the SDK by checking cookies.
+         */
         visitorId: string | undefined;
+        /**
+         * (Optional) If running an A/B test, the ID of the variation that the user is in.
+         */
+        variationId?: string;
         [index: string]: any;
     };
 }
-declare type EventProperties = {
-    type: Event['type'];
-    orgId: Event['data']['ownerId'];
-    contentId: Event['data']['contentId'];
+declare type EventProperties = Pick<Event, 'type'> & Pick<Event['data'], 'contentId' | 'variationId'> & {
+    /**
+     * 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.
+     */
     [index: string]: any;
 };
 export declare type EventProps = EventProperties & CanTrack;
-export declare function track(eventProps: EventProps): Promise<void | Response>;
+export declare function _track(eventProps: EventProps): Promise<void | Response>;
+export declare const track: (args: EventProperties) => Promise<void | Response>;
 export {};

package/package/functions/track.js

@@ -14,16 +14,16 @@ const getTrackingEventData = async ({ canTrack, }) => {
         visitorId,
     };
 };
-const createEvent = async ({ type: eventType, canTrack, orgId, contentId, ...properties }) => ({
+const createEvent = async ({ type: eventType, canTrack, apiKey, metadata, ...properties }) => ({
     type: eventType,
     data: {
         ...properties,
+        metadata: JSON.stringify(metadata),
         ...(await getTrackingEventData({ canTrack })),
-        ownerId: orgId,
-        contentId,
+        ownerId: apiKey,
     },
 });
-export async function track(eventProps) {
+export async function _track(eventProps) {
     if (!eventProps.canTrack) {
         return;
     }
@@ -46,3 +46,4 @@ export async function track(eventProps) {
         console.error('Failed to track: ', err);
     });
 }
+export const track = (args) => _track({ ...args, canTrack: true });

package/package/index.d.ts

@@ -1,4 +1,4 @@
-import './index-helpers/top-of-file.js';
+export * from './index-helpers/top-of-file.js';
 import './scripts/init-editing.js';
 export * from './index-helpers/blocks-exports.js';
 export * from './functions/is-editing.js';
@@ -8,3 +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 type { RegisteredComponent } from './context/types';
+export type { ComponentInfo } from './types/components';

package/package/index.js

@@ -1,4 +1,4 @@
-import './index-helpers/top-of-file.js';
+export * from './index-helpers/top-of-file.js';
 import './scripts/init-editing.js';
 export * from './index-helpers/blocks-exports.js';
 export * from './functions/is-editing.js';
@@ -8,3 +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';