@nordcraft/runtime 1.0.37 → 1.0.39

package/dist/utils/nodes.d.ts

@@ -9,7 +9,7 @@ interface NodeAndAncestorLookup {
 export declare const getNodeAndAncestors: (component: Component, root: NodeModel, id: unknown) => NodeAndAncestorLookup | undefined;
 export declare const isNodeOrAncestorConditional: (nodeLookup?: NodeAndAncestorLookup) => nodeLookup is NodeAndAncestorLookup;
 /**
- * @returns The next toddle sibling element or null if this is the last element. A toddle sibling is a sibling with a higher index or a the index, but a higher repeat index.
+ * @returns The next sibling element or null if this is the last element. A nc sibling is a sibling with a higher index or the same index but a higher repeat index.
  */
 export declare const getNextSiblingElement: (path: string, parentElement: Element | ShadowRoot) => Element | null;
 /**

package/dist/utils/nodes.js

@@ -35,7 +35,7 @@ export const getNodeAndAncestors = (component, root, id) => {
 export const isNodeOrAncestorConditional = (nodeLookup) => nodeLookup?.node?.condition !== undefined ||
     nodeLookup?.ancestors.some((a) => a.condition !== undefined) === true;
 /**
- * @returns The next toddle sibling element or null if this is the last element. A toddle sibling is a sibling with a higher index or a the index, but a higher repeat index.
+ * @returns The next sibling element or null if this is the last element. A nc sibling is a sibling with a higher index or the same index but a higher repeat index.
  */
 export const getNextSiblingElement = (path, parentElement) => {
     const pathParts = path.split('.');

package/package.json

@@ -4,8 +4,8 @@
 "type": "module",
 "homepage": "https://github.com/nordcraftengine/nordcraft",
 "dependencies": {
-"@nordcraft/core": "1.0.37",
-"@nordcraft/std-lib": "1.0.37",
+"@nordcraft/core": "1.0.39",
+"@nordcraft/std-lib": "1.0.39",
 "fast-deep-equal": "3.1.3",
 "path-to-regexp": "6.3.0"
 },
@@ -21,5 +21,5 @@
 "files": ["dist", "src"],
 "main": "dist/page.main.js",
 "types": "dist/page.main.d.ts",
-"version": "1.0.37"
+"version": "1.0.39"
 }

package/src/debug/panicScreen.ts

@@ -21,9 +21,7 @@ export const createPanicScreen = ({
   return document.createRange().createContextualFragment(`
       <main style="background-color: blue; color: white; font-family: 'Courier New', monospace; font-weight: 100; display: flex; justify-content: flex-start; align-items: flex-start; margin: 0px; padding: 0px;">
         <div style="display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; height: 100vh;">
-          <div style="display: flex; flex-direction: column; gap: 20px; padding: 80px; font-size: 22px;">
-            ${content}
-          </div>
+          <div style="display: flex; flex-direction: column; gap: 20px; padding: 80px; font-size: 22px;">${content}</div>
         </div>
         <div style="position:fixed; pointer-events: none; width: 100vw; height: 100vh; background-image: linear-gradient(0deg, rgba(0,0,0,0) 25%, rgba(0,0,0,0.33) 25%, rgba(0,0,0,0.33) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgba(0,0,0,0.33) 75%, rgba(0,0,0,0.33) 100%); background-size: 4px 4px;"></div>
         <div style="position:fixed; pointer-events: none; width: 100vw; height: 100vh; background-image: radial-gradient(ellipse at center, rgba(0,0,0,0) 50%, rgba(0,0,0,0.25) 100%);"></div>
@@ -32,6 +30,6 @@ export const createPanicScreen = ({
 }
 
 const getContent = (name: string, message: string, isPage?: boolean) => `
-  <h1 style="display: inline; font-size: 1em; background: white; color: blue; padding: 0.4em 0.8em;">${name}</h1>
+  <h1 style="display: inline; font-size: 1em; background: white; color: blue; padding: 0.4em 0.8em;">Error: ${name}</h1>
   <p style="font-size: 0.8em;">The ${isPage ? 'page' : 'component'} could not be rendered. Fix the issue and try again. Join our <a style="color:white" href="https://discord.gg/nordcraft" target="_blank">Discord</a> for help.</p>
-  <p style="font-size: 0.81em;">Error Message: ${message}</p>`
+  <p style="font-size: 0.81em; white-space: pre-wrap">${message}</p>`

package/src/editor-preview.main.ts

@@ -3,7 +3,6 @@
 /* eslint-disable no-case-declarations */
 /* eslint-disable no-fallthrough */
 import { isLegacyApi } from '@nordcraft/core/dist/api/api'
-import { type ApiRequest } from '@nordcraft/core/dist/api/apiTypes'
 import type {
   AnimationKeyframe,
   Component,
@@ -692,20 +691,16 @@ export const createRoot = (
           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: FormulaContext = {
               component,
-              data: { Attributes },
+              data: dataSignal.get(),
               root: document,
               package: ctx?.package,
               toddle: window.toddle,
               env,
             }
             const introspectionResult = await introspectApiRequest({
-              api: api as ApiRequest,
+              api,
               componentName: component.name,
               formulaContext,
             })
@@ -975,13 +970,13 @@ export const createRoot = (
               )
 
               if (
-                nodeLookup?.node.type === 'element' ||
-                (nodeLookup?.node.type === 'component' &&
-                  nodeLookup.node.variants?.[
-                    styleVariantSelection.styleVariantIndex
-                  ].pseudoElement)
+                (nodeLookup?.node.type === 'element' ||
+                  nodeLookup?.node.type === 'component') &&
+                nodeLookup.node.variants?.[
+                  styleVariantSelection.styleVariantIndex
+                ].pseudoElement
               ) {
-                pseudoElement = `::${nodeLookup.node.variants?.[styleVariantSelection.styleVariantIndex].pseudoElement}`
+                pseudoElement = `::${nodeLookup.node.variants[styleVariantSelection.styleVariantIndex].pseudoElement}`
               }
             }
 
@@ -1433,13 +1428,25 @@ export const createRoot = (
             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.'
+              '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.'
           }
 
-          // Send a toast to the editor with the error
-          sendEditorToast(name, message, {
-            type: 'critical',
-          })
+          // 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).
+
+• Trying to set a property on an undefined or null value.
+
+• 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
@@ -1453,8 +1460,12 @@ export const createRoot = (
             // 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',
+            })
           }
-          console.error(name, message, error)
         }
         postMessageToEditor({
           type: 'style',
@@ -1659,7 +1670,9 @@ function getRectData(selectedNode: Element | null | undefined) {
     return null
   }
 
-  const rect = selectedNode.getBoundingClientRect()
+  const { borderRadius, rotate } = window.getComputedStyle(selectedNode)
+  const rect: DOMRect = selectedNode.getBoundingClientRect()
+
   return {
     left: rect.left,
     right: rect.right,
@@ -1669,10 +1682,8 @@ function getRectData(selectedNode: Element | null | undefined) {
     height: rect.height,
     x: rect.x,
     y: rect.y,
-    borderRadius: window
-      .getComputedStyle(selectedNode)
-      .borderRadius.split(' ')
-      .map(parseFloat),
+    borderRadius: borderRadius.split(' '),
+    rotate,
   }
 }
 

package/src/utils/nodes.ts

@@ -56,7 +56,7 @@ export const isNodeOrAncestorConditional = (
   nodeLookup?.ancestors.some((a) => a.condition !== undefined) === true
 
 /**
- * @returns The next toddle sibling element or null if this is the last element. A toddle sibling is a sibling with a higher index or a the index, but a higher repeat index.
+ * @returns The next sibling element or null if this is the last element. A nc sibling is a sibling with a higher index or the same index but a higher repeat index.
  */
 export const getNextSiblingElement = (
   path: string,