@builder.io/sdk-svelte 0.4.4 → 0.5.0

package/package/components/{render-content/render-content.svelte → content/components/enable-editor.svelte}

@@ -1,69 +1,33 @@
+<script context="module"></script>
+
 <script>import { onDestroy, onMount, setContext } from "svelte";
-import { writable } from "svelte/store";
-import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
-import { evaluate } from "../../functions/evaluate.js";
-import { getContent } from "../../functions/get-content/index.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";
-import { components, createRegisterComponentMessage, } from "../../functions/register-component.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 { registerInsertMenu, setupBrowserForEditing, } from "../../scripts/init-editing.js";
-import { checkIsDefined } from "../../helpers/nullable.js";
-import { getInteractionPropertiesForEvent } from "../../functions/track/interaction.js";
-import { getContentInitialValue, getContextStateInitialValue, } from "./render-content.helpers.js";
-import { TARGET } from "../../constants/target.js";
-import { logger } from "../../helpers/logger.js";
-import { getRenderContentScriptString } from "../render-content-variants/helpers.js";
-import { wrapComponentRef } from "./wrap-component-ref.js";
-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);
-        },
-    };
-};
+import { evaluate } from "../../../functions/evaluate";
+import { fetch } from "../../../functions/get-fetch.js";
+import { isBrowser } from "../../../functions/is-browser.js";
+import { isEditing } from "../../../functions/is-editing.js";
+import { createRegisterComponentMessage } from "../../../functions/register-component.js";
+import { _track } from "../../../functions/track/index.js";
+import builderContext from "../../../context/builder.context";
+import { registerInsertMenu, setupBrowserForEditing, } from "../../../scripts/init-editing.js";
+import { checkIsDefined } from "../../../helpers/nullable.js";
+import { getInteractionPropertiesForEvent } from "../../../functions/track/interaction.js";
+import { logger } from "../../../helpers/logger.js";
+import { getContent } from "../../../functions/get-content/index.js";
+import { isPreviewing } from "../../../functions/is-previewing.js";
+import "../../../helpers/preview-lru-cache/set.js";
 export let canTrack;
+export let builderContextSignal;
 export let model;
 export let context;
 export let apiKey;
+export let showContent;
+export let classNameProp;
 export let content;
-export let parentContentId;
-export let data;
 export let locale;
-export let apiVersion;
-export let customComponents;
-export let hideContent;
-export let classNameProp;
-export let isSsrAbTest;
 export let includeRefs;
 export let enrich;
 function mergeNewContent(newContent) {
-    $builderContextSignal.content = {
+    const newContentValue = {
         ...$builderContextSignal.content,
         ...newContent,
         data: {
@@ -77,18 +41,7 @@ function mergeNewContent(newContent) {
                 $builderContextSignal.content?.meta?.breakpoints,
         },
     };
-}
-function setBreakpoints(breakpoints) {
-    $builderContextSignal.content = {
-        ...$builderContextSignal.content,
-        meta: {
-            ...$builderContextSignal.content?.meta,
-            breakpoints,
-        },
-    };
-}
-function contentSetState(newRootState) {
-    $builderContextSignal.rootState = newRootState;
+    $builderContextSignal.content = newContentValue;
 }
 function processMessage(event) {
     const { data } = event;
@@ -101,7 +54,11 @@ function processMessage(event) {
                     return;
                 }
                 if (breakpoints) {
-                    setBreakpoints(breakpoints);
+                    mergeNewContent({
+                        meta: {
+                            breakpoints,
+                        },
+                    });
                 }
                 forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
                 break;
@@ -119,10 +76,6 @@ function processMessage(event) {
                 }
                 break;
             }
-            case "builder.patchUpdates": {
-                // TODO
-                break;
-            }
         }
     }
 }
@@ -135,7 +88,7 @@ function evaluateJsCode() {
             context: context || {},
             localState: undefined,
             rootState: $builderContextSignal.rootState,
-            rootSetState: contentSetState,
+            rootSetState: $builderContextSignal.rootSetState,
         });
     }
 }
@@ -163,7 +116,7 @@ function evalExpression(expression) {
         context: context || {},
         localState: undefined,
         rootState: $builderContextSignal.rootState,
-        rootSetState: contentSetState,
+        rootSetState: $builderContextSignal.rootSetState,
     }));
 }
 function handleRequest({ url, key }) {
@@ -174,7 +127,8 @@ function handleRequest({ url, key }) {
             ...$builderContextSignal.rootState,
             [key]: json,
         };
-        contentSetState(newState);
+        $builderContextSignal.rootSetState?.(newState);
+        httpReqsData[key] = true;
     })
         .catch((err) => {
         console.error("error fetching dynamic data", url, err);
@@ -205,50 +159,12 @@ function emitStateUpdate() {
     }
 }
 let elementRef;
-let forceReRenderCount = 0;
-let overrideContent = null;
-let update = 0;
 let canTrackToUse = checkIsDefined(canTrack) ? canTrack : true;
+let forceReRenderCount = 0;
+let lastUpdated = 0;
+let shouldSendResetCookie = false;
 let httpReqsData = {};
 let clicked = false;
-let scriptStr = getRenderContentScriptString({
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
-    contentId: content?.id,
-    parentContentId: parentContentId,
-});
-let builderContextSignal = writable({
-    content: getContentInitialValue({
-        content: content,
-        data: data,
-    }),
-    localState: undefined,
-    rootState: getContextStateInitialValue({
-        content: content,
-        data: data,
-        locale: locale,
-    }),
-    rootSetState: contentSetState,
-    context: context || {},
-    apiKey: apiKey,
-    apiVersion: apiVersion,
-    registeredComponents: [
-        ...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, { component, ...curr }) => ({
-        ...acc,
-        [curr.name]: {
-            component: TARGET === "vue3" ? wrapComponentRef(component) : component,
-            ...curr,
-        },
-    }), {}),
-    inheritedStyles: {},
-});
 onMount(() => {
     if (!apiKey) {
         logger.error("No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
@@ -256,6 +172,7 @@ onMount(() => {
     if (isBrowser()) {
         if (isEditing()) {
             forceReRenderCount = forceReRenderCount + 1;
+            window.addEventListener("message", processMessage);
             registerInsertMenu();
             setupBrowserForEditing({
                 ...(locale
@@ -274,11 +191,10 @@ onMount(() => {
                     }
                     : {}),
             });
-            Object.values($builderContextSignal.registeredComponents).forEach((registeredComponent) => {
+            Object.values($builderContextSignal.componentInfos).forEach((registeredComponent) => {
                 const message = createRegisterComponentMessage(registeredComponent);
                 window.parent?.postMessage(message, "*");
             });
-            window.addEventListener("message", processMessage);
             window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
         }
         if ($builderContextSignal.content) {
@@ -313,7 +229,7 @@ onMount(() => {
                 getContent({
                     model: model,
                     apiKey: apiKey,
-                    apiVersion: apiVersion,
+                    apiVersion: $builderContextSignal.apiVersion,
                 }).then((content) => {
                     if (content) {
                         mergeNewContent(content);
@@ -332,21 +248,23 @@ function onUpdateFn_0(..._args) {
     }
 }
 $: onUpdateFn_0(...[content]);
-function onUpdateFn_1(..._args) {
+function onUpdateFn_1(..._args) { }
+$: onUpdateFn_1(...[shouldSendResetCookie]);
+function onUpdateFn_2(..._args) {
     evaluateJsCode();
 }
-$: onUpdateFn_1(...[
+$: onUpdateFn_2(...[
     $builderContextSignal.content?.data?.jsCode,
     $builderContextSignal.rootState,
 ]);
-function onUpdateFn_2(..._args) {
+function onUpdateFn_3(..._args) {
     runHttpRequests();
 }
-$: onUpdateFn_2(...[$builderContextSignal.content?.data?.httpRequests]);
-function onUpdateFn_3(..._args) {
+$: onUpdateFn_3(...[$builderContextSignal.content?.data?.httpRequests]);
+function onUpdateFn_4(..._args) {
     emitStateUpdate();
 }
-$: onUpdateFn_3(...[$builderContextSignal.rootState]);
+$: onUpdateFn_4(...[$builderContextSignal.rootState]);
 setContext(builderContext.key, builderContextSignal);
 onDestroy(() => {
     if (isBrowser()) {
@@ -358,58 +276,22 @@ onDestroy(() => {
 
 {#if $builderContextSignal.content}
   <div
+    key={forceReRenderCount}
     bind:this={elementRef}
     on:click={(event) => {
       onClick(event);
     }}
     builder-content-id={$builderContextSignal.content?.id}
     builder-model={model}
-    {...filterAttrs(
-      TARGET === "reactNative"
-        ? {
-            dataSet: {
-              // currently, we can't set the actual ID here.
-              // we don't need it right now, we just need to identify content divs for testing.
-              "builder-content-id": "",
-            },
-          }
-        : {},
-      isNonEvent
-    )}
-    {...hideContent
-      ? {
+    {...{}}
+    {...showContent
+      ? {}
+      : {
           hidden: true,
           "aria-hidden": true,
-        }
-      : {}}
+        }}
     class={classNameProp}
-    use:setAttrs={filterAttrs(
-      TARGET === "reactNative"
-        ? {
-            dataSet: {
-              // currently, we can't set the actual ID here.
-              // we don't need it right now, we just need to identify content divs for testing.
-              "builder-content-id": "",
-            },
-          }
-        : {},
-      isEvent
-    )}
   >
-    {#if isSsrAbTest}
-      <svelte:element this={"script"}>{@html scriptStr}</svelte:element>
-    {/if}
-
-    {#if TARGET !== "reactNative"}
-      <RenderContentStyles
-        contentId={$builderContextSignal.content?.id}
-        cssCode={$builderContextSignal.content?.data?.cssCode}
-        customFonts={$builderContextSignal.content?.data?.customFonts}
-      />
-    {/if}
-    <RenderBlocks
-      blocks={$builderContextSignal.content?.data?.blocks}
-      key={forceReRenderCount}
-    />
+    <slot />
   </div>
 {/if}

package/package/components/content/components/enable-editor.svelte.d.ts

@@ -0,0 +1,36 @@
+import { SvelteComponentTyped } from "svelte";
+type BuilderEditorProps = Omit<ContentProps, "customComponents" | "data" | "apiVersion" | "isSsrAbTest"> & {
+    builderContextSignal: Writable<BuilderContextInterface>;
+    setBuilderContextSignal?: (signal: any) => any;
+    children?: any;
+};
+import type { BuilderContextInterface } from "../../../context/types.js";
+import type { ContentProps } from "../content.types.js";
+import type { Writable } from "svelte/store";
+declare const __propDef: {
+    props: {
+        canTrack: BuilderEditorProps["canTrack"];
+        builderContextSignal: BuilderEditorProps["builderContextSignal"];
+        model: BuilderEditorProps["model"];
+        context: BuilderEditorProps["context"];
+        apiKey: BuilderEditorProps["apiKey"];
+        showContent: BuilderEditorProps["showContent"];
+        classNameProp: BuilderEditorProps["classNameProp"];
+        content: BuilderEditorProps["content"];
+        locale: BuilderEditorProps["locale"];
+        includeRefs: BuilderEditorProps["includeRefs"];
+        enrich: BuilderEditorProps["enrich"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type EnableEditorProps = typeof __propDef.props;
+export type EnableEditorEvents = typeof __propDef.events;
+export type EnableEditorSlots = typeof __propDef.slots;
+export default class EnableEditor extends SvelteComponentTyped<EnableEditorProps, EnableEditorEvents, EnableEditorSlots> {
+}
+export {};

package/package/components/{render-content/components/render-styles.helpers.d.ts → content/components/styles.helpers.d.ts}

@@ -9,7 +9,7 @@ export interface CustomFont {
 export declare const getFontCss: ({ customFonts }: {
     customFonts?: CustomFont[] | undefined;
 }) => string;
-export declare const getCss: ({ cssCode, contentId, }: {
+export declare const getCss: ({ cssCode, contentId }: {
     cssCode?: string | undefined;
     contentId?: string | undefined;
 }) => string;

package/package/components/{render-content/components/render-styles.helpers.js → content/components/styles.helpers.js}

@@ -1,7 +1,6 @@
 const getCssFromFont = (font) => {
     // TODO: compute what font sizes are used and only load those.......
-    const family = font.family +
-        (font.kind && !font.kind.includes('#') ? ', ' + font.kind : '');
+    const family = font.family + (font.kind && !font.kind.includes('#') ? ', ' + font.kind : '');
     const name = family.split(',')[0];
     const url = font.fileUrl ?? font?.files?.regular;
     let str = '';
@@ -43,9 +42,9 @@ export const getFontCss = ({ customFonts }) => {
     //   return '';
     // }
     // TODO: separate internal data from external
-    return customFonts?.map((font) => getCssFromFont(font))?.join(' ') || '';
+    return customFonts?.map(font => getCssFromFont(font))?.join(' ') || '';
 };
-export const getCss = ({ cssCode, contentId, }) => {
+export const getCss = ({ cssCode, contentId }) => {
     if (!cssCode) {
         return '';
     }

package/package/components/{render-content/components/render-styles.svelte → content/components/styles.svelte}

@@ -1,8 +1,8 @@
 <script context="module"></script>
 
-<script>import RenderInlinedStyles from "../../render-inlined-styles.svelte";
-import { getCss } from "./render-styles.helpers";
-import { getFontCss } from "./render-styles.helpers";
+<script>import InlinedStyles from "../../inlined-styles.svelte";
+import { getCss } from "./styles.helpers.js";
+import { getFontCss } from "./styles.helpers.js";
 export let cssCode;
 export let contentId;
 export let customFonts;
@@ -30,4 +30,4 @@ ${getFontCss({
 `.trim();
 </script>
 
-<RenderInlinedStyles styles={injectedStyles} />
+<InlinedStyles styles={injectedStyles} />

package/package/components/{render-content/components/render-styles.svelte.d.ts → content/components/styles.svelte.d.ts}

@@ -4,7 +4,7 @@ interface Props {
     customFonts?: CustomFont[];
     contentId?: string;
 }
-import type { CustomFont } from "./render-styles.helpers";
+import type { CustomFont } from "./styles.helpers.js";
 declare const __propDef: {
     props: {
         cssCode: Props["cssCode"];
@@ -16,9 +16,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export type RenderStylesProps = typeof __propDef.props;
-export type RenderStylesEvents = typeof __propDef.events;
-export type RenderStylesSlots = typeof __propDef.slots;
-export default class RenderStyles extends SvelteComponentTyped<RenderStylesProps, RenderStylesEvents, RenderStylesSlots> {
+export type StylesProps = typeof __propDef.props;
+export type StylesEvents = typeof __propDef.events;
+export type StylesSlots = typeof __propDef.slots;
+export default class Styles extends SvelteComponentTyped<StylesProps, StylesEvents, StylesSlots> {
 }
 export {};

package/package/components/content/content.helpers.d.ts

@@ -0,0 +1,7 @@
+import type { BuilderContent } from '../../types/builder-content.js';
+import type { Nullable } from '../../types/typescript.js';
+import type { ContentProps } from './content.types.js';
+export declare const getContextStateInitialValue: ({ content, data, locale }: Pick<ContentProps, 'content' | 'data' | 'locale'>) => {
+    [x: string]: unknown;
+};
+export declare const getContentInitialValue: ({ content, data }: Pick<ContentProps, 'content' | 'data'>) => Nullable<BuilderContent>;

package/package/components/content/content.helpers.js

@@ -0,0 +1,30 @@
+export const getContextStateInitialValue = ({ content, data, locale }) => {
+    const defaultValues = {};
+    // set default values for content state inputs
+    content?.data?.inputs?.forEach(input => {
+        if (input.name && input.defaultValue !== undefined && content?.data?.state && content.data.state[input.name] === undefined) {
+            defaultValues[input.name] = input.defaultValue;
+        }
+    });
+    const stateToUse = {
+        ...content?.data?.state,
+        ...data,
+        ...(locale ? {
+            locale
+        } : {})
+    };
+    return {
+        ...defaultValues,
+        ...stateToUse
+    };
+};
+export const getContentInitialValue = ({ content, data }) => {
+    return !content ? undefined : {
+        ...content,
+        data: {
+            ...content?.data,
+            ...data
+        },
+        meta: content?.meta
+    };
+};

package/package/components/content/content.svelte

@@ -0,0 +1,113 @@
+<script>import { writable } from "svelte/store";
+import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
+import { components, serializeComponentInfo, } from "../../functions/register-component.js";
+import Blocks from "../blocks/blocks.svelte";
+import ContentStyles from "./components/styles.svelte";
+import { getContentInitialValue, getContextStateInitialValue, } from "./content.helpers.js";
+import { TARGET } from "../../constants/target.js";
+import { getRenderContentScriptString } from "../content-variants/helpers.js";
+import EnableEditor from "./components/enable-editor.svelte";
+import InlinedScript from "../inlined-script.svelte";
+import "./wrap-component-ref.js";
+export let content;
+export let customComponents;
+export let data;
+export let locale;
+export let context;
+export let apiKey;
+export let apiVersion;
+export let model;
+export let canTrack;
+export let includeRefs;
+export let enrich;
+export let classNameProp;
+export let showContent;
+export let isSsrAbTest;
+function contentSetState(newRootState) {
+    $builderContextSignal.rootState = newRootState;
+}
+let scriptStr = getRenderContentScriptString({
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+    variationId: content?.testVariationId,
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+    contentId: content?.id,
+});
+let registeredComponents = [
+    ...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, { component, ...info }) => ({
+    ...acc,
+    [info.name]: {
+        component: component,
+        ...serializeComponentInfo(info),
+    },
+}), {});
+let builderContextSignal = writable({
+    content: getContentInitialValue({
+        content: content,
+        data: data,
+    }),
+    localState: undefined,
+    rootState: getContextStateInitialValue({
+        content: content,
+        data: data,
+        locale: locale,
+    }),
+    rootSetState: contentSetState,
+    context: context || {},
+    apiKey: apiKey,
+    apiVersion: apiVersion,
+    componentInfos: [
+        ...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, { component: _, ...info }) => ({
+        ...acc,
+        [info.name]: serializeComponentInfo(info),
+    }), {}),
+    inheritedStyles: {},
+});
+</script>
+
+<EnableEditor
+  {content}
+  {model}
+  {context}
+  {apiKey}
+  {canTrack}
+  {locale}
+  {includeRefs}
+  {enrich}
+  {classNameProp}
+  {showContent}
+  {builderContextSignal}
+  {...{}}
+>
+  {#if isSsrAbTest}
+    <InlinedScript {scriptStr} />
+  {/if}
+
+  {#if TARGET !== "reactNative"}
+    <ContentStyles
+      contentId={$builderContextSignal.content?.id}
+      cssCode={$builderContextSignal.content?.data?.cssCode}
+      customFonts={$builderContextSignal.content?.data?.customFonts}
+    />
+  {/if}
+  <Blocks
+    blocks={$builderContextSignal.content?.data?.blocks}
+    context={builderContextSignal}
+    {registeredComponents}
+  />
+</EnableEditor>

package/package/components/content/content.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ContentProps } from "./content.types.js";
+declare const __propDef: {
+    props: {
+        content: ContentProps["content"];
+        customComponents: ContentProps["customComponents"];
+        data: ContentProps["data"];
+        locale: ContentProps["locale"];
+        context: ContentProps["context"];
+        apiKey: ContentProps["apiKey"];
+        apiVersion: ContentProps["apiVersion"];
+        model: ContentProps["model"];
+        canTrack: ContentProps["canTrack"];
+        includeRefs: ContentProps["includeRefs"];
+        enrich: ContentProps["enrich"];
+        classNameProp: ContentProps["classNameProp"];
+        showContent: ContentProps["showContent"];
+        isSsrAbTest: ContentProps["isSsrAbTest"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ContentProps = typeof __propDef.props;
+export type ContentEvents = typeof __propDef.events;
+export type ContentSlots = typeof __propDef.slots;
+export default class Content extends SvelteComponentTyped<ContentProps, ContentEvents, ContentSlots> {
+}
+export {};

package/package/components/content/content.types.d.ts

@@ -0,0 +1,24 @@
+import type { BuilderRenderState } from '../../context/types.js';
+import type { EnforcePartials } from '../../types/enforced-partials.js';
+import type { ContentVariantsProps } from '../content-variants/content-variants.types.js';
+interface InternalRenderProps {
+    /**
+     * TO-DO: improve qwik generator to not remap this name for non-HTML tags, then name it `className`
+     */
+    classNameProp: string | undefined;
+    showContent: boolean;
+    isSsrAbTest: boolean;
+}
+export type ContentProps = InternalRenderProps & EnforcePartials<ContentVariantsProps>;
+export interface BuilderComponentStateChange {
+    state: BuilderRenderState;
+    ref: {
+        name?: string;
+        props?: {
+            builderBlock?: {
+                id?: string;
+            };
+        };
+    };
+}
+export {};

package/package/components/content/index.d.ts

@@ -0,0 +1 @@
+export { default } from './content.svelte';

package/package/components/content/index.js

@@ -0,0 +1 @@
+export { default } from './content.svelte';