@nordcraft/runtime 1.0.57 → 1.0.59

package/dist/editor-preview.main.js

@@ -3,15 +3,17 @@
 /* eslint-disable no-case-declarations */
 /* eslint-disable no-fallthrough */
 import { isLegacyApi } from '@nordcraft/core/dist/api/api';
+import { isLegacyPluginAction } from '@nordcraft/core/dist/component/actionUtils';
 import { HeadTagTypes, } from '@nordcraft/core/dist/component/component.types';
 import { isPageComponent } from '@nordcraft/core/dist/component/isPageComponent';
 import { applyFormula, isToddleFormula, } from '@nordcraft/core/dist/formula/formula';
 import {} from '@nordcraft/core/dist/formula/formulaTypes';
-import { valueFormula } from '@nordcraft/core/dist/formula/formulaUtils';
 import { getClassName } from '@nordcraft/core/dist/styling/className';
+import { appendUnit } from '@nordcraft/core/dist/styling/customProperty';
 import { getThemeCss, renderTheme } from '@nordcraft/core/dist/styling/theme';
 import { mapObject, omitKeys } from '@nordcraft/core/dist/utils/collections';
 import { safeFunctionName } from '@nordcraft/core/dist/utils/handlerUtils';
+import { isDefined } from '@nordcraft/core/dist/utils/util';
 import * as libActions from '@nordcraft/std-lib/dist/actions';
 import * as libFormulas from '@nordcraft/std-lib/dist/formulas';
 import fastDeepEqual from 'fast-deep-equal';
@@ -26,6 +28,10 @@ import { dragMove } from './editor/drag-drop/dragMove';
 import { dragReorder } from './editor/drag-drop/dragReorder';
 import { dragStarted } from './editor/drag-drop/dragStarted';
 import { introspectApiRequest } from './editor/graphql';
+import { isInputTarget } from './editor/input';
+import { updateComponentLinks } from './editor/links';
+import { getRectData } from './editor/overlay';
+import { TextNodeComputedStyles, } from './editor/types';
 import { handleAction } from './events/handleAction';
 import { signal } from './signal/signal';
 import { insertStyles, styleToCss } from './styles/style';
@@ -34,34 +40,6 @@ import { getNodeAndAncestors, isNodeOrAncestorConditional } from './utils/nodes'
 import { omitSubnodeStyleForComponent } from './utils/omitStyle';
 import { rectHasPoint } from './utils/rectHasPoint';
 import { getScrollStateRestorer, storeScrollState, } from './utils/storeScrollState';
-/**
- * Styles required for rendering the same exact text again somewhere else (on a overlay rect in the editor)
- */
-var TextNodeComputedStyles;
-(function (TextNodeComputedStyles) {
-    // Caret color is important as it is the only visible part of the text node (when text is not highlighted)
-    TextNodeComputedStyles["CARET_COLOR"] = "caret-color";
-    TextNodeComputedStyles["FONT_FAMILY"] = "font-family";
-    TextNodeComputedStyles["FONT_SIZE"] = "font-size";
-    TextNodeComputedStyles["FONT_WEIGHT"] = "font-weight";
-    TextNodeComputedStyles["FONT_STYLE"] = "font-style";
-    TextNodeComputedStyles["FONT_VARIANT"] = "font-variant";
-    TextNodeComputedStyles["FONT_STRETCH"] = "font-stretch";
-    TextNodeComputedStyles["LINE_HEIGHT"] = "line-height";
-    TextNodeComputedStyles["TEXT_ALIGN"] = "text-align";
-    TextNodeComputedStyles["TEXT_TRANSFORM"] = "text-transform";
-    TextNodeComputedStyles["LETTER_SPACING"] = "letter-spacing";
-    TextNodeComputedStyles["WHITE_SPACE"] = "white-space";
-    TextNodeComputedStyles["WORD_SPACING"] = "word-spacing";
-    TextNodeComputedStyles["TEXT_INDENT"] = "text-indent";
-    TextNodeComputedStyles["TEXT_OVERFLOW"] = "text-overflow";
-    TextNodeComputedStyles["TEXT_RENDERING"] = "text-rendering";
-    TextNodeComputedStyles["WORD_BREAK"] = "word-break";
-    TextNodeComputedStyles["WORD_WRAP"] = "word-wrap";
-    TextNodeComputedStyles["DIRECTION"] = "direction";
-    TextNodeComputedStyles["UNICODE_BIDI"] = "unicode-bidi";
-    TextNodeComputedStyles["VERTICAL_ALIGN"] = "vertical-align";
-})(TextNodeComputedStyles || (TextNodeComputedStyles = {}));
 let env;
 export const initGlobalObject = () => {
     env = {
@@ -144,37 +122,23 @@ export const initGlobalObject = () => {
         : undefined));
     Object.entries(libActions).forEach(([name, module]) => window.toddle.registerAction('@toddle/' + name, module.default));
 };
+const EMPTY_COMPONENT_DATA = {
+    Location: {
+        query: {},
+        params: {},
+        page: '/',
+        path: '/',
+        hash: '',
+    },
+    Attributes: {},
+    Variables: {},
+};
 // imported by "/.toddle/preview" (see worker/src/preview.ts)
 export const createRoot = (domNode = document.getElementById('App')) => {
     if (!domNode) {
         throw new Error('Cant find root domNode');
     }
-    const isInputTarget = (event) => {
-        const target = event.target;
-        if (target instanceof HTMLElement) {
-            if (target.tagName === 'INPUT' ||
-                target.tagName === 'TEXTAREA' ||
-                target.tagName === 'SELECT' ||
-                target.tagName === 'STYLE-EDITOR') {
-                return true;
-            }
-            if (target.contentEditable?.toLocaleLowerCase() === 'true') {
-                return true;
-            }
-        }
-        return false;
-    };
-    const dataSignal = signal({
-        Location: {
-            query: {},
-            params: {},
-            page: '/',
-            path: '/',
-            hash: '',
-        },
-        Attributes: {},
-        Variables: {},
-    });
+    const dataSignal = signal(EMPTY_COMPONENT_DATA);
     let ctxDataSignal;
     let ctx = null;
     let mode = 'design';
@@ -204,63 +168,23 @@ export const createRoot = (domNode = document.getElementById('App')) => {
     let metaKey = false;
     let previewStyleAnimationFrame = -1;
     let timelineTimeAnimationFrame = -1;
-    /**
-     * Modifies all link nodes on a component
-     * NOTE: alters in place
-     */
-    const updateComponentLinks = (component) => {
-        // Find all links and add target="_blank" to them
-        Object.entries(component.nodes ?? {}).forEach(([_, node]) => {
-            if (node.type === 'element' && node.tag === 'a') {
-                node.attrs['target'] = valueFormula('_blank');
-            }
-        });
-        return component;
-    };
-    const registerActions = (allActions, packageName) => {
-        const actions = {};
-        Object.entries(allActions ?? {}).forEach(([name, action]) => {
-            if (typeof action.name === 'string' && action.version === undefined) {
-                // Legacy actions are self-registering. We need to execute them to register them
-                Function(action.handler)();
-                return;
-            }
-            // We need to convert the handler string into a real function
-            actions[name] = {
-                ...action,
-                handler: typeof action.handler === 'string'
-                    ? new Function('args, ctx', `${action.handler}
-          return ${safeFunctionName(action.name)}(args, ctx)`)
-                    : action.handler,
-            };
-        });
-        window.toddle.actions[packageName ?? window.__toddle.project] = actions;
-    };
-    const registerFormulas = (allFormulas, packageName) => {
-        const formulas = {};
-        Object.entries(allFormulas ?? {}).forEach(([name, formula]) => {
-            if (!isToddleFormula(formula) &&
-                typeof formula.name === 'string' &&
-                formula.version === undefined) {
-                // Legacy formulas are self-registering. We need to execute them to register them
-                Function(formula.handler)();
-                return;
-            }
-            else if (!isToddleFormula(formula)) {
-                // For code formulas we need to convert the handler string into a real function
-                formulas[name] = {
-                    ...formula,
-                    handler: typeof formula.handler === 'string'
-                        ? new Function('args, ctx', `${formula.handler}
-                return ${safeFunctionName(formula.name)}(args, ctx)`)
-                        : formula.handler,
-                };
-                return;
+    const setupDataSignalSubscribers = () => {
+        dataSignal.subscribe((data) => {
+            if (component && components && packageComponents && data) {
+                try {
+                    postMessageToEditor({ type: 'data', data });
+                }
+                catch {
+                    // If we're unable to send the data, let's try to JSON serialize it
+                    postMessageToEditor({
+                        type: 'data',
+                        data: JSON.parse(JSON.stringify(data)),
+                    });
+                }
             }
-            formulas[name] = formula;
         });
-        window.toddle.formulas[packageName ?? window.__toddle.project] = formulas;
     };
+    setupDataSignalSubscribers();
     window.addEventListener('message', async (message) => {
         if (!message.isTrusted) {
             console.error('UNTRUSTED MESSAGE');
@@ -272,9 +196,20 @@ export const createRoot = (domNode = document.getElementById('App')) => {
                 }
                 let scrollStateRestorer;
                 if (message.data.component.name !== component?.name) {
+                    // Store scroll state for the previous component
                     storeScrollState(component?.name);
+                    // Remove all subscribers from the previous showSignal
                     showSignal.cleanSubscribers();
+                    // Clear any previously overridden conditional elements
+                    showSignal.set({ displayedNodes: [], testMode: mode === 'test' });
+                    // Restore scroll state for the new component
                     scrollStateRestorer = getScrollStateRestorer(message.data.component.name);
+                    // Destroy the dataSignal (including subscribers) for the previous component
+                    dataSignal.destroy();
+                    // Re-subscribe all dataSignal subscribers
+                    setupDataSignalSubscribers();
+                    // Re-initialize the data signal for the new component
+                    ctxDataSignal?.destroy();
                 }
                 component = updateComponentLinks(message.data.component);
                 if (components && packageComponents && ctx) {
@@ -913,10 +848,10 @@ export const createRoot = (domNode = document.getElementById('App')) => {
                         const selectedStyleVariant = nodeLookup.node.variants?.[styleVariantSelection.styleVariantIndex] ?? { style: {} };
                         // Add a style element specific to the selected element which
                         // is only applied when the preview is in design mode
-                        const styleVariantCustomProperties = Object.entries(selectedStyleVariant.customProperties ?? {})
-                            .map(([customPropertyName, customProperty]) => ({
-                            name: customPropertyName,
-                            value: applyFormula(customProperty.formula, {
+                        const styleVariantCustomProperties = Object.fromEntries(Object.entries(selectedStyleVariant.customProperties ?? {})
+                            .map(([customPropertyName, customProperty]) => [
+                            customPropertyName,
+                            appendUnit(applyFormula(customProperty.formula, {
                                 data: {
                                     Attributes: dataSignal.get().Attributes,
                                     Variables: dataSignal.get().Variables,
@@ -928,9 +863,9 @@ export const createRoot = (domNode = document.getElementById('App')) => {
                                 package: ctx?.package,
                                 toddle: window.toddle,
                                 env,
-                            }),
-                        }))
-                            .filter(({ value }) => value !== undefined);
+                            }), customProperty.unit),
+                        ])
+                            .filter(([, value]) => isDefined(value)));
                         const styleElem = document.createElement('style');
                         const pseudoElement = selectedStyleVariant.pseudoElement
                             ? `::${selectedStyleVariant.pseudoElement}`
@@ -941,7 +876,7 @@ export const createRoot = (domNode = document.getElementById('App')) => {
                           ${styleToCss({
                             ...(!pseudoElement && nodeLookup.node.style),
                             ...selectedStyleVariant.style,
-                            ...Object.fromEntries(styleVariantCustomProperties.map(({ name, value }) => [name, value])),
+                            ...styleVariantCustomProperties,
                         })}
                         }
                       `));
@@ -1297,68 +1232,7 @@ export const createRoot = (domNode = document.getElementById('App')) => {
         }
         return ctx;
     };
-    document.addEventListener('keydown', (event) => {
-        if (isInputTarget(event)) {
-            return;
-        }
-        switch (event.key) {
-            case 'k':
-                if (event.metaKey) {
-                    event.preventDefault();
-                }
-        }
-        postMessageToEditor({
-            type: 'keydown',
-            event: {
-                key: event.key,
-                metaKey: event.metaKey,
-                shiftKey: event.shiftKey,
-                altKey: event.altKey,
-            },
-        });
-    });
-    document.addEventListener('keyup', (event) => {
-        if (isInputTarget(event)) {
-            return;
-        }
-        postMessageToEditor({
-            type: 'keyup',
-            event: {
-                key: event.key,
-                metaKey: event.metaKey,
-                shiftKey: event.shiftKey,
-                altKey: event.altKey,
-            },
-        });
-    });
-    document.addEventListener('keypress', (event) => {
-        if (isInputTarget(event)) {
-            return;
-        }
-        postMessageToEditor({
-            type: 'keypress',
-            event: {
-                key: event.key,
-                metaKey: event.metaKey,
-                shiftKey: event.shiftKey,
-                altKey: event.altKey,
-            },
-        });
-    });
-    dataSignal.subscribe((data) => {
-        if (component && components && packageComponents && data) {
-            try {
-                postMessageToEditor({ type: 'data', data });
-            }
-            catch {
-                // If we're unable to send the data, let's try to JSON serialize it
-                postMessageToEditor({
-                    type: 'data',
-                    data: JSON.parse(JSON.stringify(data)),
-                });
-            }
-        }
-    });
+    initKeyListeners();
     const clearSelectedStyleVariant = () => {
         if (styleVariantSelection) {
             const styleElem = document.head.querySelector(`[data-hash="${styleVariantSelection.nodeId}"]`);
@@ -1405,25 +1279,6 @@ export const createRoot = (domNode = document.getElementById('App')) => {
         requestAnimationFrame(() => syncOverlayRects(selectionRect, highlightRect));
     })();
 };
-function getRectData(selectedNode) {
-    if (!selectedNode) {
-        return null;
-    }
-    const { borderRadius, rotate } = window.getComputedStyle(selectedNode);
-    const rect = selectedNode.getBoundingClientRect();
-    return {
-        left: rect.left,
-        right: rect.right,
-        top: rect.top,
-        bottom: rect.bottom,
-        width: rect.width,
-        height: rect.height,
-        x: rect.x,
-        y: rect.y,
-        borderRadius: borderRadius.split(' '),
-        rotate,
-    };
-}
 const insertOrReplaceHeadNode = (id, node) => {
     const existing = document.head.querySelector(`[data-meta-id="${id}"]`);
     if (existing) {
@@ -1499,6 +1354,100 @@ const insertTheme = (parent, themes) => {
     });
     parent.appendChild(styleElem);
 };
+const initKeyListeners = () => {
+    document.addEventListener('keydown', (event) => {
+        if (isInputTarget(event)) {
+            return;
+        }
+        switch (event.key) {
+            case 'k':
+                if (event.metaKey) {
+                    event.preventDefault();
+                }
+        }
+        postMessageToEditor({
+            type: 'keydown',
+            event: {
+                key: event.key,
+                metaKey: event.metaKey,
+                shiftKey: event.shiftKey,
+                altKey: event.altKey,
+            },
+        });
+    });
+    document.addEventListener('keyup', (event) => {
+        if (isInputTarget(event)) {
+            return;
+        }
+        postMessageToEditor({
+            type: 'keyup',
+            event: {
+                key: event.key,
+                metaKey: event.metaKey,
+                shiftKey: event.shiftKey,
+                altKey: event.altKey,
+            },
+        });
+    });
+    document.addEventListener('keypress', (event) => {
+        if (isInputTarget(event)) {
+            return;
+        }
+        postMessageToEditor({
+            type: 'keypress',
+            event: {
+                key: event.key,
+                metaKey: event.metaKey,
+                shiftKey: event.shiftKey,
+                altKey: event.altKey,
+            },
+        });
+    });
+};
+const registerActions = (allActions, packageName) => {
+    const actions = {};
+    Object.entries(allActions ?? {}).forEach(([name, action]) => {
+        if (isLegacyPluginAction(action)) {
+            // Legacy actions are self-registering. We need to execute them to register them
+            Function(action.handler)();
+            return;
+        }
+        // We need to convert the handler string into a real function
+        actions[name] = {
+            ...action,
+            handler: typeof action.handler === 'string'
+                ? new Function('args, ctx', `${action.handler}
+          return ${safeFunctionName(action.name)}(args, ctx)`)
+                : action.handler,
+        };
+    });
+    window.toddle.actions[packageName ?? window.__toddle.project] = actions;
+};
+const registerFormulas = (allFormulas, packageName) => {
+    const formulas = {};
+    Object.entries(allFormulas ?? {}).forEach(([name, formula]) => {
+        if (!isToddleFormula(formula) &&
+            typeof formula.name === 'string' &&
+            formula.version === undefined) {
+            // Legacy formulas are self-registering. We need to execute them to register them
+            Function(formula.handler)();
+            return;
+        }
+        else if (!isToddleFormula(formula)) {
+            // For code formulas we need to convert the handler string into a real function
+            formulas[name] = {
+                ...formula,
+                handler: typeof formula.handler === 'string'
+                    ? new Function('args, ctx', `${formula.handler}
+                return ${safeFunctionName(formula.name)}(args, ctx)`)
+                    : formula.handler,
+            };
+            return;
+        }
+        formulas[name] = formula;
+    });
+    window.toddle.formulas[packageName ?? window.__toddle.project] = formulas;
+};
 const postMessageToEditor = (message) => {
     window.parent?.postMessage(message, '*');
 };