@nordcraft/runtime 1.0.0

package/dist/components/renderComponent.js

@@ -0,0 +1,66 @@
+import deepEqual from 'fast-deep-equal';
+import { handleAction } from '../events/handleAction';
+import { BatchQueue } from '../utils/BatchQueue';
+import { createNode } from './createNode';
+const BATCH_QUEUE = new BatchQueue();
+export function renderComponent({ component, dataSignal, onEvent, isRootComponent, path, children, formulaCache, components, apis, abortSignal, root, providers, package: packageName, parentElement, instance, toddle, namespace, env, }) {
+    const ctx = {
+        triggerEvent: onEvent,
+        component,
+        components,
+        dataSignal,
+        isRootComponent,
+        apis,
+        formulaCache,
+        children,
+        abortSignal,
+        root,
+        providers,
+        package: packageName,
+        toddle,
+        env,
+    };
+    const rootElem = createNode({
+        id: 'root',
+        path,
+        dataSignal,
+        ctx,
+        parentElement,
+        namespace,
+        instance,
+    });
+    BATCH_QUEUE.add(() => {
+        let prev;
+        if (component.onAttributeChange?.actions &&
+            component.onAttributeChange.actions.length > 0) {
+            dataSignal
+                .map((data) => data.Attributes)
+                .subscribe((props) => {
+                if (prev) {
+                    component.onAttributeChange?.actions.forEach((action) => {
+                        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                        handleAction(action, dataSignal.get(), ctx, new CustomEvent('attribute-change', {
+                            detail: Object.entries(props).reduce((changes, [key, value]) => {
+                                if (deepEqual(value, prev[key]) === false &&
+                                    component.attributes[key]?.name) {
+                                    changes[component.attributes[key]?.name] = {
+                                        current: prev[key],
+                                        new: value,
+                                    };
+                                }
+                                return changes;
+                            }, {}),
+                        }));
+                    });
+                }
+                prev = props;
+            });
+        }
+        component.onLoad?.actions.forEach((action) => {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            handleAction(action, dataSignal.get(), ctx);
+        });
+    });
+    return rootElem;
+}
+//# sourceMappingURL=renderComponent.js.map

package/dist/components/renderComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderComponent.js","sourceRoot":"","sources":["../../src/components/renderComponent.ts"],"names":[],"mappings":"AAOA,OAAO,SAAS,MAAM,iBAAiB,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AASrD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AA8BzC,MAAM,WAAW,GAAG,IAAI,UAAU,EAAE,CAAA;AAEpC,MAAM,UAAU,eAAe,CAAC,EAC9B,SAAS,EACT,UAAU,EACV,OAAO,EACP,eAAe,EACf,IAAI,EACJ,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,SAAS,EACT,OAAO,EAAE,WAAW,EACpB,aAAa,EACb,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,GACkB;IACrB,MAAM,GAAG,GAAqB;QAC5B,YAAY,EAAE,OAAO;QACrB,SAAS;QACT,UAAU;QACV,UAAU;QACV,eAAe;QACf,IAAI;QACJ,YAAY;QACZ,QAAQ;QACR,WAAW;QACX,IAAI;QACJ,SAAS;QACT,OAAO,EAAE,WAAW;QACpB,MAAM;QACN,GAAG;KACJ,CAAA;IAED,MAAM,QAAQ,GAAG,UAAU,CAAC;QAC1B,EAAE,EAAE,MAAM;QACV,IAAI;QACJ,UAAU;QACV,GAAG;QACH,aAAa;QACb,SAAS;QACT,QAAQ;KACT,CAAC,CAAA;IACF,WAAW,CAAC,GAAG,CAAC,GAAG,EAAE;QACnB,IAAI,IAAqC,CAAA;QACzC,IACE,SAAS,CAAC,iBAAiB,EAAE,OAAO;YACpC,SAAS,CAAC,iBAAiB,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAC9C,CAAC;YACD,UAAU;iBACP,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC;iBAC9B,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;gBACnB,IAAI,IAAI,EAAE,CAAC;oBACT,SAAS,CAAC,iBAAiB,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;wBACtD,mEAAmE;wBACnE,YAAY,CACV,MAAM,EACN,UAAU,CAAC,GAAG,EAAE,EAChB,GAAG,EACH,IAAI,WAAW,CAAC,kBAAkB,EAAE;4BAClC,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAClC,CACE,OAAmD,EACnD,CAAC,GAAG,EAAE,KAAK,CAAC,EACZ,EAAE;gCACF,IACE,SAAS,CAAC,KAAK,EAAE,IAAK,CAAC,GAAG,CAAC,CAAC,KAAK,KAAK;oCACtC,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,IAAI,EAC/B,CAAC;oCACD,OAAO,CAAC,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG;wCACzC,OAAO,EAAE,IAAK,CAAC,GAAG,CAAC;wCACnB,GAAG,EAAE,KAAK;qCACX,CAAA;gCACH,CAAC;gCACD,OAAO,OAAO,CAAA;4BAChB,CAAC,EACD,EAAE,CACH;yBACF,CAAC,CACH,CAAA;oBACH,CAAC,CAAC,CAAA;gBACJ,CAAC;gBACD,IAAI,GAAG,KAAK,CAAA;YACd,CAAC,CAAC,CAAA;QACN,CAAC;QACD,SAAS,CAAC,MAAM,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;YAC3C,mEAAmE;YACnE,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,GAAG,EAAE,EAAE,GAAG,CAAC,CAAA;QAC7C,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IACF,OAAO,QAAQ,CAAA;AACjB,CAAC"}

package/dist/context/isContextProvider.d.ts

@@ -0,0 +1,2 @@
+import type { Component } from '@nordcraft/core/dist/component/component.types';
+export declare const isContextProvider: (component: Component) => boolean | undefined;

package/dist/context/isContextProvider.js

@@ -0,0 +1,5 @@
+export const isContextProvider = (component) => (component.formulas &&
+    Object.values(component.formulas).some(({ exposeInContext }) => exposeInContext)) ||
+    (component.workflows &&
+        Object.values(component.workflows).some(({ exposeInContext }) => exposeInContext));
+//# sourceMappingURL=isContextProvider.js.map

package/dist/context/isContextProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isContextProvider.js","sourceRoot":"","sources":["../../src/context/isContextProvider.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,SAAoB,EAAE,EAAE,CACxD,CAAC,SAAS,CAAC,QAAQ;IACjB,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,IAAI,CACpC,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,eAAe,CACzC,CAAC;IACJ,CAAC,SAAS,CAAC,SAAS;QAClB,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,IAAI,CACrC,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,eAAe,CACzC,CAAC,CAAA"}

package/dist/context/subscribeToContext.d.ts

@@ -0,0 +1,4 @@
+import type { Component, ComponentData } from '@nordcraft/core/dist/component/component.types';
+import type { Signal } from '../signal/signal';
+import type { ComponentContext } from '../types';
+export declare function subscribeToContext(componentDataSignal: Signal<ComponentData>, component: Component, ctx: ComponentContext): void;

package/dist/context/subscribeToContext.js

@@ -0,0 +1,93 @@
+import { applyFormula } from '@nordcraft/core/dist/formula/formula';
+import { mapObject } from '@nordcraft/core/dist/utils/collections';
+import { isDefined } from '@nordcraft/core/dist/utils/util';
+export function subscribeToContext(componentDataSignal, component, ctx) {
+    Object.entries(component.contexts ?? {}).forEach(([providerName, context]) => {
+        const provider = ctx.providers[[ctx.package, providerName].filter(isDefined).join('/')];
+        if (provider) {
+            context.formulas.forEach((formulaName) => {
+                const formulaDataSignal = provider.formulaDataSignals[formulaName];
+                if (!formulaDataSignal) {
+                    // eslint-disable-next-line no-console
+                    console.warn(`Provider ${providerName} does not expose a formula named "${formulaName}". Available formulas are: ["${Object.keys(provider.formulaDataSignals).join('", "')}"]`);
+                    return;
+                }
+                formulaDataSignal.subscribe((value) => {
+                    componentDataSignal.update((data) => ({
+                        ...data,
+                        Contexts: {
+                            ...data.Contexts,
+                            [providerName]: {
+                                ...data.Contexts?.[providerName],
+                                [formulaName]: value,
+                            },
+                        },
+                    }));
+                });
+            });
+        }
+        // In preview and absence of a real provider, we fake providers with their testData values. This is useful for testing components in isolation.
+        // This is for preview mode only, and should preferably be stripped from the page and custom-elements runtime.
+        else if (!provider &&
+            ctx.env.runtime === 'preview' &&
+            ctx.toddle._preview) {
+            const testProvider = ctx.components?.find((comp) => comp.name ===
+                [ctx.package, providerName].filter(isDefined).join('/'));
+            if (!testProvider) {
+                // eslint-disable-next-line no-console
+                console.error(`Could not find provider "${providerName}". No such component exist.`);
+                return;
+            }
+            // Derive the package name from the provider name as we do not have a real component to work with
+            const [, testProviderPackage] = providerName.split('/').reverse();
+            const formulaContext = {
+                data: {
+                    Attributes: mapObject(testProvider.attributes, ([name, attr]) => [
+                        name,
+                        attr.testValue,
+                    ]),
+                },
+                component: testProvider,
+                root: ctx?.root,
+                formulaCache: {},
+                package: testProviderPackage ?? ctx?.package,
+                toddle: ctx.toddle,
+                env: ctx.env,
+            };
+            if (testProvider.route) {
+                formulaContext.data['URL parameters'] = {
+                    ...Object.fromEntries(testProvider.route.path
+                        .filter((p) => p.type === 'param')
+                        .map((p) => [p.name, p.testValue])),
+                    ...mapObject(testProvider.route.query, ([name, { testValue }]) => [
+                        name,
+                        testValue,
+                    ]),
+                };
+            }
+            formulaContext.data.Variables = mapObject(testProvider.variables, ([name, variable]) => [
+                name,
+                applyFormula(variable.initialValue, formulaContext),
+            ]);
+            componentDataSignal.update((data) => ({
+                ...data,
+                Contexts: {
+                    ...data.Contexts,
+                    [providerName]: Object.fromEntries(context.formulas.map((formulaName) => {
+                        const formula = testProvider.formulas?.[formulaName];
+                        if (!formula) {
+                            // eslint-disable-next-line no-console
+                            console.warn(`Could not find formula "${formulaName}" in component "${providerName}"`);
+                            return [formulaName, null];
+                        }
+                        return [
+                            formulaName,
+                            applyFormula(formula.formula, formulaContext),
+                        ];
+                    })),
+                },
+            }));
+        }
+    });
+}
+//# sourceMappingURL=subscribeToContext.js.map

package/dist/context/subscribeToContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"subscribeToContext.js","sourceRoot":"","sources":["../../src/context/subscribeToContext.ts"],"names":[],"mappings":"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"}

package/dist/custom-components/components.d.ts

@@ -0,0 +1 @@
+import './toddle-portal';

package/dist/custom-components/components.js

@@ -0,0 +1,2 @@
+import './toddle-portal';
+//# sourceMappingURL=components.js.map

package/dist/custom-components/components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../../src/custom-components/components.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAA"}

package/dist/custom-components/toddle-portal.d.ts

@@ -0,0 +1,6 @@
+declare class Portal extends HTMLElement {
+    root: HTMLElement;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}

package/dist/custom-components/toddle-portal.js

@@ -0,0 +1,20 @@
+"use strict";
+class Portal extends HTMLElement {
+    root;
+    constructor() {
+        // Always call super first in constructor
+        super();
+        this.root = document.createElement('div');
+    }
+    connectedCallback() {
+        for (const child of Array.from(this.children)) {
+            this.root.appendChild(child);
+        }
+        document.body.appendChild(this.root);
+    }
+    disconnectedCallback() {
+        this.root?.remove();
+    }
+}
+customElements.define('toddle-portal', Portal);
+//# sourceMappingURL=toddle-portal.js.map

package/dist/custom-components/toddle-portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toddle-portal.js","sourceRoot":"","sources":["../../src/custom-components/toddle-portal.ts"],"names":[],"mappings":";AAAA,MAAM,MAAO,SAAQ,WAAW;IAC9B,IAAI,CAAa;IACjB;QACE,yCAAyC;QACzC,KAAK,EAAE,CAAA;QACP,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IAC3C,CAAC;IAED,iBAAiB;QACf,KAAK,MAAM,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC9C,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;QAC9B,CAAC;QACD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IACtC,CAAC;IACD,oBAAoB;QAClB,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,CAAA;IACrB,CAAC;CACF;AACD,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA"}

package/dist/custom-element/ToddleComponent.d.ts

@@ -0,0 +1,37 @@
+import type { Component, ComponentData } from '@nordcraft/core/dist/component/component.types';
+import type { ToddleEnv } from '@nordcraft/core/dist/formula/formula';
+import type { Theme } from '@nordcraft/core/dist/styling/theme';
+import type { Toddle } from '@nordcraft/core/dist/types';
+import type { Signal } from '../signal/signal';
+import type { ComponentContext, LocationSignal } from '../types';
+/**
+ * Base class for all toddle components
+ */
+export declare class ToddleComponent extends HTMLElement {
+    #private;
+    /**
+     * Public reference to the toddle instance for debugging purposes. `el.toddle.errors` can be used to check for non-verbose errors.
+     */
+    toddle: Toddle<LocationSignal, never>;
+    constructor(component: Component, options: {
+        components: Component[];
+        themes: Theme[];
+    }, toddle: Toddle<LocationSignal, never>);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    dispatch(eventName: string, data: any): void;
+    render(): void;
+    setAttribute(name: string, value: unknown): this;
+    getAttribute<T>(name: string): string | NonNullable<T> | null;
+    attributeChangedCallback(name: string, oldValue: never, newValue: string): void;
+    private getAttributeCaseInsensitive;
+    get __component(): Component;
+    get __ctx(): ComponentContext;
+    get __signal(): Signal<ComponentData>;
+}
+export declare const createSignal: ({ component, root, toddle, env, }: {
+    component: Component;
+    root: ShadowRoot;
+    toddle: Toddle<LocationSignal, never>;
+    env: ToddleEnv;
+}) => Signal<ComponentData>;

package/dist/custom-element/ToddleComponent.js

@@ -0,0 +1,244 @@
+import { isLegacyApi, sortApiObjects } from '@nordcraft/core/dist/api/api';
+import { applyFormula } from '@nordcraft/core/dist/formula/formula';
+import { createStylesheet } from '@nordcraft/core/dist/styling/style.css';
+import { theme as defaultTheme } from '@nordcraft/core/dist/styling/theme.const';
+import { mapObject } from '@nordcraft/core/dist/utils/collections';
+import { createLegacyAPI } from '../api/createAPI';
+import { createAPI } from '../api/createAPIv2';
+import { renderComponent } from '../components/renderComponent';
+import { isContextProvider } from '../context/isContextProvider';
+import { signal } from '../signal/signal';
+/**
+ * Base class for all toddle components
+ */
+export class ToddleComponent extends HTMLElement {
+    /**
+     * Public reference to the toddle instance for debugging purposes. `el.toddle.errors` can be used to check for non-verbose errors.
+     */
+    toddle;
+    #component;
+    #ctx;
+    #shadowRoot;
+    #signal;
+    #files;
+    constructor(component, options, toddle) {
+        super();
+        this.toddle = toddle;
+        const internals = this.attachInternals();
+        if (internals.shadowRoot) {
+            // Not used yet, but can be used to hydrate rather than render the shadow dom
+            this.#shadowRoot = internals.shadowRoot;
+        }
+        else {
+            this.#shadowRoot = this.attachShadow({ mode: 'open' });
+        }
+        const env = {
+            branchName: toddle.branch || 'main',
+            isServer: false,
+            request: undefined,
+            runtime: 'custom-element',
+            logErrors: true,
+        };
+        this.#component = component;
+        this.#signal = createSignal({
+            component,
+            root: this.#shadowRoot,
+            toddle,
+            env,
+        });
+        this.#files = {
+            themes: options.themes,
+        };
+        // Call the abort signal if the component's datasignal is destroyed (component unmounted) to cancel any pending requests
+        const abortController = new AbortController();
+        this.#signal.subscribe(() => { }, {
+            destroy: () => abortController.abort(`Component ${component.name} unmounted`),
+        });
+        this.#ctx = {
+            triggerEvent: this.dispatch.bind(this),
+            root: this.#shadowRoot,
+            isRootComponent: true,
+            components: options.components,
+            component: this.#component,
+            dataSignal: this.#signal,
+            formulaCache: {},
+            apis: {},
+            abortSignal: abortController.signal,
+            children: {},
+            providers: {},
+            package: undefined,
+            toddle,
+            env,
+        };
+    }
+    connectedCallback() {
+        sortApiObjects(Object.entries(this.#component.apis)).forEach(([name, api]) => {
+            if (isLegacyApi(api)) {
+                this.#ctx.apis[name] = createLegacyAPI(api, this.#ctx);
+            }
+            else {
+                this.#ctx.apis[name] = createAPI(api, this.#ctx);
+            }
+        });
+        Object.values(this.#ctx.apis)
+            .filter((api) => api.triggerActions !== undefined)
+            .forEach((api) => {
+            api.triggerActions();
+        });
+        let providers = this.#ctx.providers;
+        if (isContextProvider(this.#component)) {
+            // Subscribe to exposed formulas and update the component's data signal
+            const formulaDataSignals = Object.fromEntries(Object.entries(this.#component.formulas ?? {})
+                .filter(([, formula]) => formula.exposeInContext)
+                .map(([name, formula]) => [
+                name,
+                this.#signal.map((data) => applyFormula(formula.formula, {
+                    data,
+                    component: this.#component,
+                    formulaCache: this.#ctx.formulaCache,
+                    root: this.#ctx.root,
+                    package: this.#ctx.package,
+                    toddle: this.#ctx.toddle,
+                    env: this.#ctx.env,
+                })),
+            ]));
+            providers = {
+                ...providers,
+                [this.#component.name]: {
+                    component: this.#component,
+                    formulaDataSignals,
+                    ctx: this.#ctx,
+                },
+            };
+        }
+        this.#ctx.providers = providers;
+        this.render();
+    }
+    disconnectedCallback() {
+        this.#signal.destroy();
+    }
+    dispatch(eventName, data) {
+        this.dispatchEvent(new CustomEvent(eventName, {
+            detail: data,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        const elements = renderComponent({
+            ...this.#ctx,
+            path: '0',
+            onEvent: this.dispatch.bind(this),
+            parentElement: this.#shadowRoot,
+            instance: { [this.#component.name]: 'root' },
+        });
+        this.#shadowRoot.innerHTML = '';
+        const styles = createStylesheet(this.#ctx.component, this.#ctx.components, this.#files.themes ? Object.values(this.#files.themes)[0] : defaultTheme, { includeResetStyle: true, createFontFaces: false });
+        const stylesElem = document.createElement('style');
+        stylesElem.appendChild(document.createTextNode(styles));
+        this.#shadowRoot.appendChild(stylesElem);
+        const rootElement = elements[0];
+        if (rootElement) {
+            this.#shadowRoot.appendChild(rootElement);
+        }
+    }
+    // Overload the setAttribute method to allow setting complex attributes
+    setAttribute(name, value) {
+        switch (typeof value) {
+            case 'number':
+                super.setAttribute(name, String(value));
+                break;
+            case 'string':
+                super.setAttribute(name, value);
+                // Return early, as signal is updated through attributeChangedCallback on string values
+                return this;
+            default:
+                super.setAttribute(name, `[Object ${typeof value}]`);
+                break;
+        }
+        // Update the signal with complex value
+        this.#signal.set({
+            ...this.#signal.get(),
+            Attributes: {
+                ...this.#signal.get().Attributes,
+                [name]: value,
+            },
+        });
+        return this;
+    }
+    // Overload the getAttribute method to point to source of truth (the signal)
+    getAttribute(name) {
+        return (this.#signal.get().Attributes[name] || super.getAttribute(name));
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        const attributeName = this.getAttributeCaseInsensitive(name);
+        const currentRawValue = this.getAttribute(attributeName);
+        // Is this is a complex value that has already been set by `setAttribute`
+        if (newValue === '[Object object]') {
+            return;
+        }
+        //Has this just been set by `setAttribute` as a number
+        if (parseFloat(newValue) === currentRawValue) {
+            return;
+        }
+        this.#signal.set({
+            ...this.#signal.get(),
+            Attributes: {
+                ...this.#signal.get().Attributes,
+                [attributeName]: newValue,
+            },
+        });
+    }
+    getAttributeCaseInsensitive(name) {
+        const attributeName = Object.keys(this.#signal.get().Attributes).find((key) => key.toLowerCase() === name.toLowerCase());
+        // This should never happen (TM) as we only observe attributes that are defined on the component
+        if (!attributeName) {
+            throw new Error(`Unable to find attribute ${name} on component ${this.#component.name}`);
+        }
+        return attributeName;
+    }
+    // Debugging purposes
+    get __component() {
+        return this.#component;
+    }
+    get __ctx() {
+        return this.#ctx;
+    }
+    get __signal() {
+        return this.#signal;
+    }
+}
+export const createSignal = ({ component, root, toddle, env, }) => {
+    return signal({
+        // Pages are not supported as custom elements, so no need to add location signal
+        Location: undefined,
+        Variables: mapObject(component.variables, ([name, { initialValue }]) => {
+            if (!component) {
+                throw new Error(`Component not found`);
+            }
+            return [
+                name,
+                applyFormula(initialValue, {
+                    data: {
+                        Attributes: {},
+                    },
+                    component: component,
+                    root,
+                    package: undefined,
+                    toddle,
+                    env,
+                }),
+            ];
+        }),
+        Attributes: mapObject(component.attributes, ([name]) => [
+            name,
+            // TODO: Perhaps we can get it from the DOM already and set initial attributes already?
+            undefined,
+        ]),
+        Apis: mapObject(component.apis, ([name]) => [
+            name,
+            { data: null, isLoading: false, error: null },
+        ]),
+    });
+};
+//# sourceMappingURL=ToddleComponent.js.map

package/dist/custom-element/ToddleComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToddleComponent.js","sourceRoot":"","sources":["../../src/custom-element/ToddleComponent.ts"],"names":[],"mappings":"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"}

package/dist/custom-element/defineComponents.d.ts

@@ -0,0 +1,26 @@
+import type { Component } from '@nordcraft/core/dist/component/component.types';
+import type { Theme } from '@nordcraft/core/dist/styling/theme';
+import type { Toddle } from '@nordcraft/core/dist/types';
+import type { LocationSignal } from '../types';
+/**
+ * Define each component as a new web component
+ *
+ * Use them like: `<toddle-test my-attr="test" style="--my-color: rebeccapurple"></toddle-test>`
+ *
+ * You can access the component and `addEventListener` to it like:
+ *
+ * ```js
+ * const component = document.querySelector('toddle-test')
+ * component.addEventListener('my-event', (e) => {
+ *  console.log(e.detail)
+ * })
+ * ```
+ *
+ * @param componentNames - The names of the components to define. These should be the names of the components in the app context
+ * @param options - A subset of the app context. This holds a list of all the components needed to define the components in `componentNames`
+ * @param toddle - Also available at `window.toddle`. However, multiple instances of toddle can exist on the same page, so we pass a reference here. We should ultimately remove the global scope reference as polite web components should be self-contained.
+ */
+export declare const defineComponents: (componentNames: string[], options: {
+    components: Component[];
+    themes: Theme[];
+}, toddle: Toddle<LocationSignal, never>) => void;

package/dist/custom-element/defineComponents.js

@@ -0,0 +1,42 @@
+import { safeCustomElementName } from '@nordcraft/core/dist/utils/customElements';
+import { ToddleComponent } from './ToddleComponent';
+/**
+ * Define each component as a new web component
+ *
+ * Use them like: `<toddle-test my-attr="test" style="--my-color: rebeccapurple"></toddle-test>`
+ *
+ * You can access the component and `addEventListener` to it like:
+ *
+ * ```js
+ * const component = document.querySelector('toddle-test')
+ * component.addEventListener('my-event', (e) => {
+ *  console.log(e.detail)
+ * })
+ * ```
+ *
+ * @param componentNames - The names of the components to define. These should be the names of the components in the app context
+ * @param options - A subset of the app context. This holds a list of all the components needed to define the components in `componentNames`
+ * @param toddle - Also available at `window.toddle`. However, multiple instances of toddle can exist on the same page, so we pass a reference here. We should ultimately remove the global scope reference as polite web components should be self-contained.
+ */
+export const defineComponents = (componentNames, options, toddle) => {
+    componentNames
+        .map((name) => options.components.find((component) => component.name === name))
+        .forEach((component) => {
+        const tag = safeCustomElementName(component.name);
+        if (customElements.get(tag)) {
+            // eslint-disable-next-line no-console
+            console.warn(`Component ${tag} already defined`);
+            return;
+        }
+        customElements.define(tag, class extends ToddleComponent {
+            constructor() {
+                super(component, options, toddle);
+            }
+            // When read from DOM, all attributes are lower case, so we must observe them as such
+            static get observedAttributes() {
+                return Object.keys(component.attributes ?? {}).map((key) => key.toLowerCase());
+            }
+        });
+    });
+};
+//# sourceMappingURL=defineComponents.js.map

package/dist/custom-element/defineComponents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defineComponents.js","sourceRoot":"","sources":["../../src/custom-element/defineComponents.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,qBAAqB,EAAE,MAAM,2CAA2C,CAAA;AAEjF,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAEnD;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,cAAwB,EACxB,OAGC,EACD,MAAqC,EACrC,EAAE;IACF,cAAc;SACX,GAAG,CACF,CAAC,IAAI,EAAE,EAAE,CACP,OAAO,CAAC,UAAU,CAAC,IAAI,CACrB,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,KAAK,IAAI,CAC1B,CACjB;SACA,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE;QACrB,MAAM,GAAG,GAAG,qBAAqB,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;QACjD,IAAI,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;YAC5B,sCAAsC;YACtC,OAAO,CAAC,IAAI,CAAC,aAAa,GAAG,kBAAkB,CAAC,CAAA;YAChD,OAAM;QACR,CAAC;QAED,cAAc,CAAC,MAAM,CACnB,GAAG,EACH,KAAM,SAAQ,eAAe;YAC3B;gBACE,KAAK,CAAC,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC,CAAA;YACnC,CAAC;YAED,qFAAqF;YACrF,MAAM,KAAK,kBAAkB;gBAC3B,OAAO,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CACzD,GAAG,CAAC,WAAW,EAAE,CAClB,CAAA;YACH,CAAC;SACF,CACF,CAAA;IACH,CAAC,CAAC,CAAA;AACN,CAAC,CAAA"}

package/dist/custom-element.main.d.ts

@@ -0,0 +1,3 @@
+import { defineComponents } from './custom-element/defineComponents';
+declare const loadCorePlugins: (toddle?: import("@nordcraft/core/dist/types").Toddle<import("./types").LocationSignal, import("./types").PreviewShowSignal>) => void;
+export { defineComponents, loadCorePlugins };