@nordcraft/runtime 1.0.58 → 1.0.60

package/dist/editor-preview.main.js

@@ -3,12 +3,11 @@
 /* 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';
@@ -28,55 +27,17 @@ 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';
 import { createFormulaCache } from './utils/createFormulaCache';
 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["DISPLAY"] = "display";
-    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["FONT_KERNING"] = "font-kerning";
-    TextNodeComputedStyles["FONT_FEATURE_SETTINGS"] = "font-feature-settings";
-    TextNodeComputedStyles["FONT_VARIATION_SETTINGS"] = "font-variation-settings";
-    TextNodeComputedStyles["FONT_SMOOTHING"] = "-webkit-font-smoothing";
-    TextNodeComputedStyles["ANTI_ALIASING"] = "-moz-osx-font-smoothing";
-    TextNodeComputedStyles["FONT_OPTICAL_SIZING"] = "font-optical-sizing";
-    TextNodeComputedStyles["TAB_SIZE"] = "tab-size";
-    TextNodeComputedStyles["HYPHENS"] = "hyphens";
-    TextNodeComputedStyles["TEXT_ORIENTATION"] = "text-orientation";
-    TextNodeComputedStyles["WRITING_MODE"] = "writing-mode";
-    TextNodeComputedStyles["LINE_BREAK"] = "line-break";
-    TextNodeComputedStyles["OVERFLOW_WRAP"] = "overflow-wrap";
-})(TextNodeComputedStyles || (TextNodeComputedStyles = {}));
 let env;
 export const initGlobalObject = () => {
     env = {
@@ -159,37 +120,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';
@@ -219,63 +166,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');
@@ -287,9 +194,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) {
@@ -339,7 +257,7 @@ export const createRoot = (domNode = document.getElementById('App')) => {
                     if (ctx) {
                         ctx.components = allComponents;
                     }
-                    updateStyle();
+                    updateStyle(component);
                     update();
                 }
                 break;
@@ -366,7 +284,7 @@ export const createRoot = (domNode = document.getElementById('App')) => {
                     if (ctx) {
                         ctx.components = allComponents;
                     }
-                    updateStyle();
+                    updateStyle(component);
                     update();
                 }
                 Object.values(message.data.packages ?? {}).forEach((pkg) => {
@@ -878,7 +796,7 @@ export const createRoot = (domNode = document.getElementById('App')) => {
     window.addEventListener('beforeunload', () => {
         storeScrollState(component?.name);
     });
-    const updateStyle = () => {
+    const updateStyle = (component) => {
         if (component) {
             insertStyles(document.head, component, getAllComponents());
         }
@@ -1157,68 +1075,49 @@ export const createRoot = (domNode = document.getElementById('App')) => {
             }
         }
         if (fastDeepEqual(newCtx.component.nodes, ctx?.component?.nodes) === false) {
-            updateStyle();
+            updateStyle(newCtx.component);
             // Remove preview styles automatically when the component changes
             document.head.querySelector('[data-id="selected-node-styles"]')?.remove();
-            if (fastDeepEqual(omitSubnodeStyleForComponent(newCtx.component), omitSubnodeStyleForComponent(ctx?.component))) {
-                // If we're in here, then the latest update was only a style change, so we should try some optimistic updates
-                Object.keys(newCtx.component.nodes).forEach((nodeId) => {
-                    const newNode = newCtx.component.nodes[nodeId];
-                    const oldNode = ctx?.component.nodes[nodeId];
-                    if ((newNode.type === 'element' || newNode.type === 'component') &&
-                        (oldNode?.type === 'element' || oldNode?.type === 'component') &&
-                        (!fastDeepEqual(newNode.style, oldNode.style) ||
-                            !fastDeepEqual(newNode.variants, oldNode.variants))) {
-                        document
-                            .querySelectorAll(`[data-node-id="${nodeId}"]`)
-                            .forEach((nodeInstance) => {
-                            nodeInstance.classList.remove(getClassName([oldNode.style, oldNode.variants]));
-                            nodeInstance.classList.add(getClassName([newNode.style, newNode.variants]));
-                        });
-                    }
+            Array.from(domNode.children).forEach((child) => {
+                if (child.tagName !== 'SCRIPT') {
+                    child.remove();
+                }
+            });
+            // Clear old root signal and create a new one to not keep old signals with previous root around
+            ctxDataSignal?.destroy();
+            ctxDataSignal = dataSignal.map((data) => data);
+            try {
+                const rootElem = createNode({
+                    id: 'root',
+                    path: '0',
+                    dataSignal: ctxDataSignal,
+                    ctx: newCtx,
+                    parentElement: domNode,
+                    instance: { [newCtx.component.name]: 'root' },
                 });
-            }
-            else {
-                Array.from(domNode.children).forEach((child) => {
-                    if (child.tagName !== 'SCRIPT') {
-                        child.remove();
-                    }
+                newCtx.component.onLoad?.actions.forEach((action) => {
+                    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                    handleAction(action, dataSignal.get(), newCtx);
                 });
-                // Clear old root signal and create a new one to not keep old signals with previous root around
-                ctxDataSignal?.destroy();
-                ctxDataSignal = dataSignal.map((data) => data);
-                try {
-                    const rootElem = createNode({
-                        id: 'root',
-                        path: '0',
-                        dataSignal: ctxDataSignal,
-                        ctx: newCtx,
-                        parentElement: domNode,
-                        instance: { [newCtx.component.name]: 'root' },
-                    });
-                    newCtx.component.onLoad?.actions.forEach((action) => {
-                        // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                        handleAction(action, dataSignal.get(), newCtx);
-                    });
-                    rootElem.forEach((elem) => domNode.appendChild(elem));
+                rootElem.forEach((elem) => domNode.appendChild(elem));
+            }
+            catch (error) {
+                const isPage = isPageComponent(newCtx.component);
+                let name = `Unexpected error while rendering ${isPage ? 'page' : 'component'}`;
+                let message = error instanceof Error ? error.message : String(error);
+                let panic = false;
+                if (error instanceof RangeError) {
+                    // RangeError is unrecoverable
+                    panic = true;
+                    name = 'Infinite loop detected';
+                    message =
+                        'RangeError (Maximum call stack size exceeded): Remove any circular dependencies or recursive calls (Try undoing your last change). This is most likely caused by a component, formula or action using itself.';
                 }
-                catch (error) {
-                    const isPage = isPageComponent(newCtx.component);
-                    let name = `Unexpected error while rendering ${isPage ? 'page' : 'component'}`;
-                    let message = error instanceof Error ? error.message : String(error);
-                    let panic = false;
-                    if (error instanceof RangeError) {
-                        // RangeError is unrecoverable
-                        panic = true;
-                        name = 'Infinite loop detected';
-                        message =
-                            'RangeError (Maximum call stack size exceeded): Remove any circular dependencies or recursive calls (Try undoing your last change). This is most likely caused by a component, formula or action using itself.';
-                    }
-                    // This can be triggered by setting "type" on a select etc.
-                    if (error instanceof TypeError) {
-                        panic = true;
-                        name = 'TypeError';
-                        message = `Type errors are often caused by:
+                // This can be triggered by setting "type" on a select etc.
+                if (error instanceof TypeError) {
+                    panic = true;
+                    name = 'TypeError';
+                    message = `Type errors are often caused by:
 
 • Trying to set a read-only property (like "type" on a select element).
 
@@ -1227,34 +1126,33 @@ export const createRoot = (domNode = document.getElementById('App')) => {
 • Trying to access a property on an undefined or null value.
 
 • Trying to call a method on an undefined or null value.`;
-                    }
-                    console.error(name, message, error);
-                    if (panic) {
-                        // Show error overlay in the editor until next update
-                        const panicScreen = createPanicScreen({
-                            name: name,
-                            message,
-                            isPage,
-                            cause: error,
-                        });
-                        // Replace the inner HTML of the editor preview with the panic screen
-                        domNode.innerHTML = '';
-                        domNode.appendChild(panicScreen);
-                    }
-                    else {
-                        // Otherwise send a toast to the editor with the error (unknown errors may be recoverable), if not please add the error-type to the above
-                        sendEditorToast(name, message, {
-                            type: 'critical',
-                        });
-                    }
                 }
-                postMessageToEditor({
-                    type: 'style',
-                    time: new Intl.DateTimeFormat('en-GB', {
-                        timeStyle: 'long',
-                    }).format(new Date()),
-                });
+                console.error(name, message, error);
+                if (panic) {
+                    // Show error overlay in the editor until next update
+                    const panicScreen = createPanicScreen({
+                        name: name,
+                        message,
+                        isPage,
+                        cause: error,
+                    });
+                    // Replace the inner HTML of the editor preview with the panic screen
+                    domNode.innerHTML = '';
+                    domNode.appendChild(panicScreen);
+                }
+                else {
+                    // Otherwise send a toast to the editor with the error (unknown errors may be recoverable), if not please add the error-type to the above
+                    sendEditorToast(name, message, {
+                        type: 'critical',
+                    });
+                }
             }
+            postMessageToEditor({
+                type: 'style',
+                time: new Intl.DateTimeFormat('en-GB', {
+                    timeStyle: 'long',
+                }).format(new Date()),
+            });
         }
         ctx = newCtx;
         scrollStateRestorer((nodeId) => document.querySelector(`[data-id="${nodeId}"]`));
@@ -1312,68 +1210,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}"]`);
@@ -1420,25 +1257,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) {
@@ -1514,6 +1332,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, '*');
 };