@nordcraft/runtime 1.0.34 → 1.0.36

package/dist/editor/graphql.d.ts

@@ -0,0 +1,12 @@
+import { type ApiRequest } from '@nordcraft/core/dist/api/apiTypes';
+import type { FormulaContext } from '@nordcraft/core/dist/formula/formula';
+/**
+ * Run an introspection query for an existing API
+ * The introspection will usually be a POST request, but we use the method
+ * from the original API to support other methods.
+ */
+export declare const introspectApiRequest: ({ api, componentName, formulaContext, }: {
+    api: ApiRequest;
+    componentName: string;
+    formulaContext: FormulaContext;
+}) => Promise<any>;

package/dist/editor/graphql.js

@@ -0,0 +1,150 @@
+import { createApiRequest, HttpMethodsWithAllowedBody, } from '@nordcraft/core/dist/api/api';
+import { ApiMethod } from '@nordcraft/core/dist/api/apiTypes';
+import { PROXY_URL_HEADER } from '@nordcraft/core/dist/utils/url';
+const INTROSPECTION_QUERY = `\
+query IntrospectionQuery {
+  __schema {
+    queryType { ...FullType }
+    mutationType { ...FullType }
+    subscriptionType { ...FullType }
+    types {
+      ...FullType
+    }
+    directives {
+      name
+      description
+      locations
+      args {
+        ...InputValue
+      }
+    }
+  }
+}
+fragment FullType on __Type {
+  kind
+  name
+  description
+  fields(includeDeprecated: true) {
+    name
+    description
+    args {
+      ...InputValue
+    }
+    type {
+      ...TypeRef
+    }
+    isDeprecated
+    deprecationReason
+  }
+  inputFields {
+    ...InputValue
+  }
+  interfaces {
+    ...TypeRef
+  }
+  enumValues(includeDeprecated: true) {
+    name
+    description
+    isDeprecated
+    deprecationReason
+  }
+  possibleTypes {
+    ...TypeRef
+  }
+}
+fragment InputValue on __InputValue {
+  name
+  description
+  type { ...TypeRef }
+  defaultValue
+}
+fragment TypeRef on __Type {
+  kind
+  name
+  ofType {
+    kind
+    name
+    ofType {
+      kind
+      name
+      ofType {
+        kind
+        name
+        ofType {
+          kind
+          name
+          ofType {
+            kind
+            name
+            ofType {
+              kind
+              name
+              ofType {
+                kind
+                name
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}`;
+/**
+ * Run an introspection query for an existing API
+ * The introspection will usually be a POST request, but we use the method
+ * from the original API to support other methods.
+ */
+export const introspectApiRequest = async ({ api, componentName, formulaContext, }) => {
+    const { url, requestSettings } = createApiRequest({
+        api: {
+            ...api,
+            // Default to a POST request if the method of the original API doesn't support a body
+            // The introspection query should never be initiated in that case though
+            method: HttpMethodsWithAllowedBody.includes(api.method ?? ApiMethod.POST)
+                ? api.method
+                : ApiMethod.POST,
+            // Overwrite the body with a default introspection query (in a value formula)
+            body: {
+                type: 'value',
+                value: { query: INTROSPECTION_QUERY },
+            },
+        },
+        baseUrl: window.origin,
+        defaultHeaders: undefined,
+        formulaContext,
+    });
+    // We must proxy to be able to include cookies
+    const proxyUrl = `/.toddle/omvej/components/${encodeURIComponent(componentName)}/apis/${encodeURIComponent(componentName)}:${encodeURIComponent(api.name)}`;
+    const headers = new Headers(requestSettings.headers);
+    headers.set(PROXY_URL_HEADER, decodeURIComponent(url.href.replace(/\+/g, ' ')));
+    requestSettings.headers = headers;
+    const response = await fetch(proxyUrl, {
+        ...requestSettings,
+        // Set credentials to what was set on the original API
+        credentials: api.client?.credentials &&
+            ['include', 'same-origin', 'omit'].includes(api.client.credentials)
+            ? api.client.credentials
+            : // Default to same-origin
+                undefined,
+    });
+    try {
+        const data = await response.json();
+        if (response.ok) {
+            return data;
+        }
+        else {
+            // eslint-disable-next-line no-console
+            console.error('Failed to introspect API:', api.name, data);
+            // Return a generic error message if introspection failed
+            return { error: data?.message ?? 'Failed to parse introspection result' };
+        }
+    }
+    catch (e) {
+        // eslint-disable-next-line no-console
+        console.error('Failed to parses API response:', api.name, e);
+        // Return a generic error message if introspection failed
+        return { error: `Failed to introspect API: ${api.name}` };
+    }
+};
+//# sourceMappingURL=graphql.js.map

package/dist/editor/graphql.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graphql.js","sourceRoot":"","sources":["../../src/editor/graphql.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,0BAA0B,GAC3B,MAAM,8BAA8B,CAAA;AACrC,OAAO,EAAE,SAAS,EAAmB,MAAM,mCAAmC,CAAA;AAE9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAA;AAEjE,MAAM,mBAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwF1B,CAAA;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,EAAE,EACzC,GAAG,EACH,aAAa,EACb,cAAc,GAKf,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,EAAE,eAAe,EAAE,GAAG,gBAAgB,CAAC;QAChD,GAAG,EAAE;YACH,GAAI,GAAkB;YACtB,qFAAqF;YACrF,wEAAwE;YACxE,MAAM,EAAE,0BAA0B,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,IAAI,SAAS,CAAC,IAAI,CAAC;gBACvE,CAAC,CAAC,GAAG,CAAC,MAAM;gBACZ,CAAC,CAAC,SAAS,CAAC,IAAI;YAClB,6EAA6E;YAC7E,IAAI,EAAE;gBACJ,IAAI,EAAE,OAAO;gBACb,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE;aACtC;SACF;QACD,OAAO,EAAE,MAAM,CAAC,MAAM;QACtB,cAAc,EAAE,SAAS;QACzB,cAAc;KACf,CAAC,CAAA;IACF,8CAA8C;IAC9C,MAAM,QAAQ,GAAG,6BAA6B,kBAAkB,CAC9D,aAAa,CACd,SAAS,kBAAkB,CAAC,aAAa,CAAC,IAAI,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAA;IAC7E,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC,eAAe,CAAC,OAAO,CAAC,CAAA;IACpD,OAAO,CAAC,GAAG,CACT,gBAAgB,EAChB,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CACjD,CAAA;IACD,eAAe,CAAC,OAAO,GAAG,OAAO,CAAA;IACjC,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,EAAE;QACrC,GAAG,eAAe;QAClB,sDAAsD;QACtD,WAAW,EACT,GAAG,CAAC,MAAM,EAAE,WAAW;YACvB,CAAC,SAAS,EAAE,aAAa,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,WAAW,CAAC;YACjE,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,WAAW;YACxB,CAAC,CAAC,yBAAyB;gBACzB,SAAS;KAChB,CAAC,CAAA;IACF,IAAI,CAAC;QACH,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAA;QAClC,IAAI,QAAQ,CAAC,EAAE,EAAE,CAAC;YAChB,OAAO,IAAI,CAAA;QACb,CAAC;aAAM,CAAC;YACN,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,2BAA2B,EAAE,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;YAC1D,yDAAyD;YACzD,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,IAAI,sCAAsC,EAAE,CAAA;QAC3E,CAAC;IACH,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC;QACX,sCAAsC;QACtC,OAAO,CAAC,KAAK,CAAC,gCAAgC,EAAE,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,CAAA;QAC5D,yDAAyD;QACzD,OAAO,EAAE,KAAK,EAAE,6BAA6B,GAAG,CAAC,IAAI,EAAE,EAAE,CAAA;IAC3D,CAAC;AACH,CAAC,CAAA"}

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';
@@ -23,6 +24,7 @@ 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';
@@ -200,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');
         }
@@ -323,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;
@@ -412,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 &&
@@ -453,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,
-                            }, '*');
+                            });
                         }
                     }
                 }
@@ -475,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,
@@ -499,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) {
@@ -534,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;
                             });
                         }
@@ -555,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;
                             });
                         }
@@ -606,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;
@@ -1070,12 +1099,12 @@ export const createRoot = (domNode = document.getElementById('App')) => {
                     }
                     console.error(name, message, error);
                 }
-                window.parent?.postMessage({
+                postMessageToEditor({
                     type: 'style',
                     time: new Intl.DateTimeFormat('en-GB', {
                         timeStyle: 'long',
                     }).format(new Date()),
-                }, '*');
+                });
             }
         }
         ctx = newCtx;
@@ -1085,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,
@@ -1143,7 +1172,7 @@ export const createRoot = (domNode = document.getElementById('App')) => {
                     event.preventDefault();
                 }
         }
-        window.parent?.postMessage({
+        postMessageToEditor({
             type: 'keydown',
             event: {
                 key: event.key,
@@ -1151,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,
@@ -1165,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,
@@ -1179,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)),
+                });
             }
         }
     });
@@ -1223,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));
     })();
@@ -1330,4 +1362,7 @@ const insertTheme = (parent, theme) => {
     });
     parent.appendChild(styleElem);
 };
+const postMessageToEditor = (message) => {
+    window.parent?.postMessage(message, '*');
+};
 //# sourceMappingURL=editor-preview.main.js.map