@nordcraft/runtime 1.0.33 → 1.0.35

package/dist/editor-preview.main.js

@@ -3,6 +3,7 @@
 /* eslint-disable no-case-declarations */
 /* eslint-disable no-fallthrough */
 import { isLegacyApi } from '@nordcraft/core/dist/api/api';
+import {} from '@nordcraft/core/dist/api/apiTypes';
 import { isPageComponent } from '@nordcraft/core/dist/component/isPageComponent';
 import { applyFormula } from '@nordcraft/core/dist/formula/formula';
 import { valueFormula } from '@nordcraft/core/dist/formula/formulaUtils';
@@ -17,10 +18,13 @@ import { createLegacyAPI } from './api/createAPI';
 import { createAPI } from './api/createAPIv2';
 import { createNode } from './components/createNode';
 import { isContextProvider } from './context/isContextProvider';
+import { createPanicScreen } from './debug/panicScreen';
+import { sendEditorToast } from './debug/sendEditorToast';
 import { dragEnded } from './editor/drag-drop/dragEnded';
 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 { handleAction } from './events/handleAction';
 import { signal } from './signal/signal';
 import { insertStyles, styleToCss } from './styles/style';
@@ -198,7 +202,7 @@ export const createRoot = (domNode = document.getElementById('App')) => {
         });
         return component;
     };
-    window.addEventListener('message', (message) => {
+    window.addEventListener('message', async (message) => {
         if (!message.isTrusted) {
             console.error('UNTRUSTED MESSAGE');
         }
@@ -321,20 +325,20 @@ export const createRoot = (domNode = document.getElementById('App')) => {
                         element.type === 'text' &&
                         element.value.type === 'value') {
                         const computedStyle = window.getComputedStyle(node);
-                        window.parent?.postMessage({
+                        postMessageToEditor({
                             type: 'textComputedStyle',
                             computedStyle: Object.fromEntries(Object.values(TextNodeComputedStyles).map((style) => [
                                 style,
                                 computedStyle.getPropertyValue(style),
                             ])),
-                        }, '*');
+                        });
                     }
                     else if (node && node.getAttribute('data-node-type') !== 'text') {
                         // Reset computed style on blur
-                        window.parent?.postMessage({
+                        postMessageToEditor({
                             type: 'textComputedStyle',
                             computedStyle: {},
-                        }, '*');
+                        });
                     }
                 }
                 return;
@@ -382,7 +386,7 @@ export const createRoot = (domNode = document.getElementById('App')) => {
                 }
                 const { x, y, type } = message.data;
                 const elementsAtPoint = document.elementsFromPoint(x, y);
-                let element = elementsAtPoint.find((elem) => {
+                const element = elementsAtPoint.find((elem) => {
                     const id = elem.getAttribute('data-id');
                     if (typeof id !== 'string' ||
                         component === null ||
@@ -397,21 +401,10 @@ export const createRoot = (domNode = document.getElementById('App')) => {
                     if (elem.getAttribute('data-node-type') === 'text') {
                         return (
                         // Select text nodes if the meta key is pressed or the text node is double-clicked
-                        metaKey ||
-                            type === 'dblclick' ||
-                            // Select text nodes if the selected node is a text node. This is useful as the user is likely in a text editing mode
-                            getDOMNodeFromNodeId(selectedNodeId)?.getAttribute('data-node-type') === 'text');
+                        metaKey || type === 'dblclick');
                     }
                     return true;
                 });
-                // Bubble selection to the topmost parent that has the exact same size as the element.
-                // This is important for drag and drop as you are often left with childless parents after dragging.
-                while (element?.parentElement &&
-                    element.getAttribute('data-node-id') !== 'root' &&
-                    fastDeepEqual(element.getBoundingClientRect().toJSON(), element.parentElement.getBoundingClientRect().toJSON()) &&
-                    element.getAttribute('data-node-type') !== 'text') {
-                    element = element.parentElement;
-                }
                 const id = element?.getAttribute('data-id') ?? null;
                 if (type === 'click' && id !== selectedNodeId) {
                     if (message.data.metaKey) {
@@ -421,36 +414,36 @@ export const createRoot = (domNode = document.getElementById('App')) => {
                         if (root && id) {
                             const nodeLookup = getNodeAndAncestors(component, root, id);
                             if (nodeLookup?.node.type === 'text') {
-                                window.parent?.postMessage({
+                                postMessageToEditor({
                                     type: 'selection',
                                     selectedNodeId: id,
-                                }, '*');
+                                });
                             }
                             else {
                                 const firstTextChild = nodeLookup?.node.type === 'element'
                                     ? nodeLookup.node.children.find((c) => component?.nodes[c]?.type === 'text')
                                     : undefined;
                                 if (firstTextChild) {
-                                    window.parent?.postMessage({
+                                    postMessageToEditor({
                                         type: 'selection',
                                         selectedNodeId: `${id}.0`,
-                                    }, '*');
+                                    });
                                 }
                             }
                         }
                     }
                     else {
-                        window.parent?.postMessage({
+                        postMessageToEditor({
                             type: 'selection',
                             selectedNodeId: id,
-                        }, '*');
+                        });
                     }
                 }
                 else if (type === 'mousemove' && id !== highlightedNodeId) {
-                    window.parent?.postMessage({
+                    postMessageToEditor({
                         type: 'highlight',
                         highlightedNodeId: id,
-                    }, '*');
+                    });
                 }
                 else if (type === 'dblclick' &&
                     id &&
@@ -462,17 +455,17 @@ export const createRoot = (domNode = document.getElementById('App')) => {
                         const nodeLookup = getNodeAndAncestors(component, root, id);
                         if (nodeLookup?.node.type === 'component' &&
                             nodeLookup.node.name) {
-                            window.parent?.postMessage({
+                            postMessageToEditor({
                                 type: 'navigate',
                                 name: nodeLookup.node.name,
-                            }, '*');
+                            });
                         }
                         // Double click on text node should select the text node for editing
                         else if (nodeLookup?.node.type === 'text') {
-                            window.parent?.postMessage({
+                            postMessageToEditor({
                                 type: 'selection',
                                 selectedNodeId: id,
-                            }, '*');
+                            });
                         }
                     }
                 }
@@ -484,16 +477,16 @@ export const createRoot = (domNode = document.getElementById('App')) => {
             // We request manually instead of automatic to avoid mutation observer spam.
             // Also, reporting automatically proved unreliable when elements' height was in %
             case 'report_document_scroll_size':
-                window.parent?.postMessage({
+                postMessageToEditor({
                     type: 'documentScrollSize',
                     scrollHeight: domNode.scrollHeight,
                     scrollWidth: domNode.scrollWidth,
-                }, '*');
+                });
                 break;
             case 'reload':
                 window.location.reload();
                 break;
-            case 'fetch_api':
+            case 'fetch_api': {
                 const { apiKey } = message.data;
                 dataSignal.update((data) => ({
                     ...data,
@@ -508,6 +501,33 @@ export const createRoot = (domNode = document.getElementById('App')) => {
                 }));
                 void ctx?.apis[apiKey]?.fetch({});
                 break;
+            }
+            case 'introspect_qraphql_api': {
+                const { apiKey } = message.data;
+                const api = component?.apis[apiKey];
+                if (api && !isLegacyApi(api) && component) {
+                    const Attributes = mapObject(component.attributes, ([name, { testValue }]) => [name, testValue]);
+                    const formulaContext = {
+                        component,
+                        data: { Attributes },
+                        root: document,
+                        package: ctx?.package,
+                        toddle: window.toddle,
+                        env,
+                    };
+                    const introspectionResult = await introspectApiRequest({
+                        api: api,
+                        componentName: component.name,
+                        formulaContext,
+                    });
+                    postMessageToEditor({
+                        type: 'introspectionResult',
+                        data: introspectionResult,
+                        apiKey,
+                    });
+                }
+                break;
+            }
             case 'drag-started':
                 const draggedElement = getDOMNodeFromNodeId(selectedNodeId);
                 if (!draggedElement || !draggedElement.parentElement) {
@@ -543,14 +563,14 @@ export const createRoot = (domNode = document.getElementById('App')) => {
                             (nextSibling !== dragState?.initialNextSibling ||
                                 dragState?.copy)) {
                             void dragEnded(dragState, false).then(() => {
-                                window.parent?.postMessage({
+                                postMessageToEditor({
                                     type: 'nodeMoved',
                                     copy: Boolean(dragState?.copy),
                                     parent: parentDataId,
                                     index: !isNaN(nextSiblingId)
                                         ? nextSiblingId
                                         : component?.nodes[parentNodeId]?.children?.length,
-                                }, '*');
+                                });
                                 dragState = null;
                             });
                         }
@@ -564,12 +584,12 @@ export const createRoot = (domNode = document.getElementById('App')) => {
                         const selectedPermutation = dragState?.insertAreas?.[dragState?.selectedInsertAreaIndex ?? -1];
                         if (selectedPermutation && !message.data.canceled) {
                             void dragEnded(dragState, false).then(() => {
-                                window.parent?.postMessage({
+                                postMessageToEditor({
                                     type: 'nodeMoved',
                                     copy: Boolean(dragState?.copy),
                                     parent: selectedPermutation?.parent.getAttribute('data-id'),
                                     index: selectedPermutation?.index,
-                                }, '*');
+                                });
                                 dragState = null;
                             });
                         }
@@ -615,13 +635,13 @@ export const createRoot = (domNode = document.getElementById('App')) => {
                 }
                 const { styles } = message.data;
                 const computedStyle = window.getComputedStyle(selectedNode);
-                window.parent?.postMessage({
+                postMessageToEditor({
                     type: 'computedStyle',
                     computedStyle: Object.fromEntries((styles ?? []).map((style) => [
                         style,
                         computedStyle.getPropertyValue(style),
                     ])),
-                }, '*');
+                });
                 break;
             case 'set_timeline_keyframes':
                 const { keyframes } = message.data;
@@ -705,10 +725,20 @@ export const createRoot = (domNode = document.getElementById('App')) => {
                         styleTag.setAttribute('data-id', 'selected-node-styles');
                         document.head.appendChild(styleTag);
                     }
+                    // If style variant targets a pseudo-element, apply styles to it instead
+                    let pseudoElement = '';
+                    if (component && styleVariantSelection) {
+                        const nodeLookup = getNodeAndAncestors(component, component.nodes.root, styleVariantSelection.nodeId);
+                        if (nodeLookup?.node.type === 'element' ||
+                            (nodeLookup?.node.type === 'component' &&
+                                nodeLookup.node.variants?.[styleVariantSelection.styleVariantIndex].pseudoElement)) {
+                            pseudoElement = `::${nodeLookup.node.variants?.[styleVariantSelection.styleVariantIndex].pseudoElement}`;
+                        }
+                    }
                     const previewStyles = Object.entries(previewStyleStyles)
                         .map(([key, value]) => `${key}: ${value} !important;`)
                         .join('\n');
-                    styleTag.innerHTML = `[data-id="${selectedNodeId}"], [data-id="${selectedNodeId}"] ~ [data-id^="${selectedNodeId}("] {
+                    styleTag.innerHTML = `[data-id="${selectedNodeId}"]${pseudoElement}, [data-id="${selectedNodeId}"] ~ [data-id^="${selectedNodeId}("]${pseudoElement} {
     ${previewStyles}
     transition: none !important;
   }`;
@@ -785,11 +815,14 @@ export const createRoot = (domNode = document.getElementById('App')) => {
                         }))
                             .filter(({ value }) => value !== undefined);
                         const styleElem = document.createElement('style');
+                        const pseudoElement = selectedStyleVariant.pseudoElement
+                            ? `::${selectedStyleVariant.pseudoElement}`
+                            : '';
                         styleElem.setAttribute('data-hash', selectedNodeId);
                         styleElem.appendChild(document.createTextNode(`
-                        body[data-mode="design"] [data-id="${selectedNodeId}"] {
+                        body[data-mode="design"] [data-id="${selectedNodeId}"]${pseudoElement} {
                           ${styleToCss({
-                            ...nodeLookup.node.style,
+                            ...(!pseudoElement && nodeLookup.node.style),
                             ...selectedStyleVariant.style,
                             ...Object.fromEntries(styleVariantCustomProperties.map(({ name, value }) => [name, value])),
                         })}
@@ -1021,25 +1054,57 @@ export const createRoot = (domNode = document.getElementById('App')) => {
                 // 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);
-                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));
-                window.parent?.postMessage({
+                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));
+                }
+                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. This is most likely caused by components, formulas or actions using themselves without an exit case.';
+                    }
+                    // Send a toast to the editor with the error
+                    sendEditorToast(name, message, {
+                        type: 'critical',
+                    });
+                    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);
+                    }
+                    console.error(name, message, error);
+                }
+                postMessageToEditor({
                     type: 'style',
                     time: new Intl.DateTimeFormat('en-GB', {
                         timeStyle: 'long',
                     }).format(new Date()),
-                }, '*');
+                });
             }
         }
         ctx = newCtx;
@@ -1049,14 +1114,14 @@ export const createRoot = (domNode = document.getElementById('App')) => {
             component,
             components,
             triggerEvent: (event, data) => {
-                window.parent?.postMessage({
+                postMessageToEditor({
                     type: 'component event',
                     event,
                     time: new Intl.DateTimeFormat('en-GB', {
                         timeStyle: 'long',
                     }).format(new Date()),
                     data,
-                }, '*');
+                });
             },
             dataSignal,
             root: document,
@@ -1107,7 +1172,7 @@ export const createRoot = (domNode = document.getElementById('App')) => {
                     event.preventDefault();
                 }
         }
-        window.parent?.postMessage({
+        postMessageToEditor({
             type: 'keydown',
             event: {
                 key: event.key,
@@ -1115,13 +1180,13 @@ export const createRoot = (domNode = document.getElementById('App')) => {
                 shiftKey: event.shiftKey,
                 altKey: event.altKey,
             },
-        }, '*');
+        });
     });
     document.addEventListener('keyup', (event) => {
         if (isInputTarget(event)) {
             return;
         }
-        window.parent?.postMessage({
+        postMessageToEditor({
             type: 'keyup',
             event: {
                 key: event.key,
@@ -1129,13 +1194,13 @@ export const createRoot = (domNode = document.getElementById('App')) => {
                 shiftKey: event.shiftKey,
                 altKey: event.altKey,
             },
-        }, '*');
+        });
     });
     document.addEventListener('keypress', (event) => {
         if (isInputTarget(event)) {
             return;
         }
-        window.parent?.postMessage({
+        postMessageToEditor({
             type: 'keypress',
             event: {
                 key: event.key,
@@ -1143,16 +1208,19 @@ export const createRoot = (domNode = document.getElementById('App')) => {
                 shiftKey: event.shiftKey,
                 altKey: event.altKey,
             },
-        }, '*');
+        });
     });
     dataSignal.subscribe((data) => {
         if (component && components && packageComponents && data) {
             try {
-                window.parent?.postMessage({ type: 'data', data }, '*');
+                postMessageToEditor({ type: 'data', data });
             }
             catch {
                 // If we're unable to send the data, let's try to JSON serialize it
-                window.parent?.postMessage({ type: 'data', data: JSON.parse(JSON.stringify(data)) }, '*');
+                postMessageToEditor({
+                    type: 'data',
+                    data: JSON.parse(JSON.stringify(data)),
+                });
             }
         }
     });
@@ -1187,17 +1255,17 @@ export const createRoot = (domNode = document.getElementById('App')) => {
     (function syncOverlayRects(prevSelectionRect, prevHighlightedRect) {
         const selectionRect = getRectData(getDOMNodeFromNodeId(selectedNodeId));
         if (!fastDeepEqual(prevSelectionRect, selectionRect)) {
-            window.parent?.postMessage({
+            postMessageToEditor({
                 type: 'selectionRect',
                 rect: selectionRect,
-            }, '*');
+            });
         }
         const highlightRect = getRectData(getDOMNodeFromNodeId(highlightedNodeId));
         if (!fastDeepEqual(prevHighlightedRect, highlightRect)) {
-            window.parent?.postMessage({
+            postMessageToEditor({
                 type: 'highlightRect',
                 rect: highlightRect,
-            }, '*');
+            });
         }
         requestAnimationFrame(() => syncOverlayRects(selectionRect, highlightRect));
     })();
@@ -1294,4 +1362,7 @@ const insertTheme = (parent, theme) => {
     });
     parent.appendChild(styleElem);
 };
+const postMessageToEditor = (message) => {
+    window.parent?.postMessage(message, '*');
+};
 //# sourceMappingURL=editor-preview.main.js.map