@nordcraft/runtime 1.0.88 → 1.0.90

package/src/components/createNode.ts

@@ -9,6 +9,7 @@ import { toBoolean } from '@nordcraft/core/dist/utils/util'
 import type { Signal } from '../signal/signal'
 import { signal } from '../signal/signal'
 import type { ComponentContext } from '../types'
+import { getComponent } from '../utils/getComponent'
 import { ensureEfficientOrdering, getNextSiblingElement } from '../utils/nodes'
 import { createComponent } from './createComponent'
 import { createElement } from './createElement'
@@ -48,11 +49,13 @@ export function createNode({
             ...props,
           }),
         ]
-      case 'component':
-        // eslint-disable-next-line no-case-declarations
-        const isLocalComponent = ctx.components.some(
-          (c) => c.name === node.name,
-        )
+      case 'component': {
+        const isLocalComponent =
+          getComponent(
+            node.name,
+            ctx.components,
+            ctx.env.runtime !== 'preview',
+          ) !== undefined
         return createComponent({
           node: { ...node, id }, // we need the node id for instance classes
           ...props,
@@ -63,6 +66,7 @@ export function createNode({
           },
           parentElement,
         })
+      }
       case 'text':
         return [createText({ ...props, node })]
       case 'slot':
@@ -168,6 +172,7 @@ export function createNode({
 
   function repeat(): ReadonlyArray<Element | Text> {
     let firstRun = true
+    let lifetimeSize = 0
     let repeatItems = new Map<
       string | number,
       {
@@ -291,7 +296,13 @@ export function createNode({
               node: node!,
               id,
               dataSignal: childDataSignal,
-              path: Key === '0' ? path : `${path}(${Key})`,
+              // Note that we use the lifetimeSize to ensure that no two items can ever get the same path.
+              // Consider a list [A, B, C]:
+              // - Update list to [B]
+              // - Update list to [A, C, B]
+              // Now C and B would have the same path `(1)` if we only used the index or Key, as B would have kept its reference, but the others would be recreated.
+              // With lifetimeSize, the keys would be A(3), B(1), C(4) - all unique.
+              path: Key === '0' ? path : `${path}(${++lifetimeSize})`,
               ctx,
               namespace,
               parentElement,

package/src/components/meta.test.ts

@@ -0,0 +1,90 @@
+import type { MetaEntry } from '@nordcraft/core/dist/component/component.types'
+import {
+  functionFormula,
+  valueFormula,
+} from '@nordcraft/core/dist/formula/formulaUtils'
+import { describe, expect, test } from 'bun:test'
+import { getDynamicMetaEntries } from './meta'
+
+describe('getDynamicMetaEntries', () => {
+  test('returns an empty object if meta is undefined or null', () => {
+    expect(getDynamicMetaEntries(undefined)).toEqual({})
+    expect(getDynamicMetaEntries(null)).toEqual({})
+  })
+
+  test('returns an empty object if meta is an empty object', () => {
+    expect(getDynamicMetaEntries({})).toEqual({})
+  })
+
+  test('returns only entries with dynamic content', () => {
+    const meta: Record<string, MetaEntry> = {
+      'static-entry': {
+        tag: 'meta' as any,
+        content: valueFormula('static'),
+      },
+      'dynamic-entry': {
+        tag: 'meta' as any,
+        content: functionFormula('dynamic'),
+      },
+    }
+    const result = getDynamicMetaEntries(meta)
+    expect(result).toEqual({ 'dynamic-entry': meta['dynamic-entry'] })
+  })
+
+  test('returns only entries with dynamic attributes', () => {
+    const meta: Record<string, MetaEntry> = {
+      'static-entry': {
+        tag: 'meta' as any,
+        attrs: {
+          name: valueFormula('static'),
+        },
+      },
+      'dynamic-entry': {
+        tag: 'meta' as any,
+        attrs: {
+          name: functionFormula('dynamic'),
+        },
+      },
+    }
+    const result = getDynamicMetaEntries(meta)
+    expect(result).toEqual({ 'dynamic-entry': meta['dynamic-entry'] })
+  })
+
+  test('returns entry if content is dynamic and attributes are static', () => {
+    const meta: Record<string, MetaEntry> = {
+      'dynamic-entry': {
+        tag: 'meta' as any,
+        content: functionFormula('dynamic'),
+        attrs: {
+          name: valueFormula('static'),
+        },
+      },
+    }
+    const result = getDynamicMetaEntries(meta)
+    expect(result).toEqual({ 'dynamic-entry': meta['dynamic-entry'] })
+  })
+
+  test('returns entry if content is missing and one attribute is dynamic', () => {
+    const meta: Record<string, MetaEntry> = {
+      'dynamic-entry': {
+        tag: 'meta' as any,
+        attrs: {
+          name: valueFormula('static'),
+          property: functionFormula('dynamic'),
+        },
+      },
+    }
+    const result = getDynamicMetaEntries(meta)
+    expect(result).toEqual({ 'dynamic-entry': meta['dynamic-entry'] })
+  })
+
+  test('handles entries with no content or attributes', () => {
+    const meta: Record<string, MetaEntry> = {
+      'empty-entry': {
+        tag: 'meta' as any,
+      },
+    }
+    const result = getDynamicMetaEntries(meta)
+    expect(result).toEqual({})
+  })
+})

package/src/components/meta.ts

@@ -0,0 +1,23 @@
+import type { MetaEntry } from '@nordcraft/core/dist/component/component.types'
+import type { Nullable } from '@nordcraft/core/dist/types'
+import { isDefined } from '@nordcraft/core/dist/utils/util'
+
+export const getDynamicMetaEntries = (
+  meta?: Nullable<Record<string, MetaEntry>>,
+): Record<string, MetaEntry> => {
+  if (!meta) {
+    return {}
+  }
+  const dynamicMetaEntries: Record<string, MetaEntry> = {}
+  for (const key in meta) {
+    const entry = meta[key]
+    if (isDefined(entry.content) && entry.content.type !== 'value') {
+      dynamicMetaEntries[key] = entry
+    } else if (
+      Object.values(entry.attrs ?? {}).some((a) => a.type !== 'value')
+    ) {
+      dynamicMetaEntries[key] = entry
+    }
+  }
+  return dynamicMetaEntries
+}

package/src/components/renderComponent.ts

@@ -111,8 +111,7 @@ export function renderComponent({
         .subscribe((props) => {
           if (prev) {
             component.onAttributeChange?.actions?.forEach((action) => {
-              // eslint-disable-next-line @typescript-eslint/no-floating-promises
-              handleAction(
+              void handleAction(
                 action,
                 dataSignal.get(),
                 ctx,
@@ -143,8 +142,7 @@ export function renderComponent({
         })
     }
     component.onLoad?.actions?.forEach((action) => {
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      handleAction(action, dataSignal.get(), ctx)
+      void handleAction(action, dataSignal.get(), ctx)
     })
   })
   return rootElem

package/src/editor/postMessageToEditor.ts

@@ -0,0 +1,5 @@
+import type { EditorPostMessageType } from './types'
+
+export const postMessageToEditor = (message: EditorPostMessageType) => {
+  window.parent?.postMessage(message, '*')
+}

package/src/editor-preview.main.ts

@@ -63,10 +63,10 @@ import { introspectApiRequest } from './editor/graphql'
 import { isInputTarget } from './editor/input'
 import { updateComponentLinks } from './editor/links'
 import { getRectData } from './editor/overlay'
+import { postMessageToEditor } from './editor/postMessageToEditor'
 import {
   TextNodeComputedStyles,
   type DragState,
-  type EditorPostMessageType,
   type NordcraftPreviewEvent,
 } from './editor/types'
 import { handleAction } from './events/handleAction'
@@ -81,6 +81,7 @@ import type {
 } from './types'
 import { createFormulaCache } from './utils/createFormulaCache'
 import { getThemeSignal } from './utils/getThemeSignal'
+import { markSelectedElement } from './utils/markSelectedElement'
 import { getNodeAndAncestors, isNodeOrAncestorConditional } from './utils/nodes'
 import { rectHasPoint } from './utils/rectHasPoint'
 import {
@@ -457,6 +458,7 @@ export const createRoot = (
             updateConditionalElements()
 
             const node = getDOMNodeFromNodeId(selectedNodeId)
+            markSelectedElement(node)
             const element =
               component?.nodes?.[node?.getAttribute('data-node-id') ?? '']
             if (
@@ -875,10 +877,12 @@ export const createRoot = (
                 '--editor-timeline-timing-function',
               )
               document.body.style.removeProperty('--editor-timeline-fill-mode')
+              document.body.removeAttribute('data-animating')
               update()
               return
             }
 
+            document.body.setAttribute('data-animating', 'true')
             document.body.style.setProperty(
               '--editor-timeline-position',
               `${time}s`,
@@ -902,17 +906,13 @@ export const createRoot = (
                 document.head.appendChild(styleTag)
               }
 
-              // Set the animation styles for self and repeated nodes, but pause for all others
-              // TODO: Consider if we should set all other animations to follow the current timeline time, by setting animation-delay with paused
               styleTag.innerHTML = `
-[data-id] {
-  animation-play-state: paused !important;
-}
-[data-id="${animationState.animatedElementId}"], [data-id="${animationState.animatedElementId}"] ~ [data-id^="${animationState.animatedElementId}("] {
+body[data-mode="design"] [data-id="${animationState.animatedElementId}"], body[data-mode="design"] [data-id="${animationState.animatedElementId}"] ~ [data-id^="${animationState.animatedElementId}("] {
   animation: preview_timeline 1s paused normal !important;
   animation-fill-mode: var(--editor-timeline-fill-mode) !important;
   animation-timing-function: var(--editor-timeline-timing-function) !important;
   animation-delay: calc(0s - var(--editor-timeline-position)) !important;
+  animation-play-state: paused !important;
 }`
             }
           })
@@ -1547,6 +1547,7 @@ export const createRoot = (
     scrollStateRestorer((nodeId) =>
       document.querySelector(`[data-id="${nodeId}"]`),
     )
+    markSelectedElement(getDOMNodeFromNodeId(selectedNodeId))
   }
 
   const createContext = (
@@ -1710,7 +1711,7 @@ const insertHeadTags = (
           document.createRange().createContextualFragment(`
           <link
             data-meta-id="${id}"
-            ${Object.entries(entry.attrs)
+            ${Object.entries(entry.attrs ?? {})
               .map(([key, value]) => `${key}="${applyFormula(value, context)}"`)
               .join(' ')}
           />
@@ -1722,10 +1723,10 @@ const insertHeadTags = (
           document.createRange().createContextualFragment(`
           <script
             data-meta-id="${id}"
-            ${Object.entries(entry.attrs)
+            ${Object.entries(entry.attrs ?? {})
               .map(([key, value]) => `${key}="${applyFormula(value, context)}"`)
               .join(' ')}
-          ></script>
+          >${applyFormula(entry.content ?? '', context)}</script>
         `),
         )
       case HeadTagTypes.Style:
@@ -1734,7 +1735,7 @@ const insertHeadTags = (
           document.createRange().createContextualFragment(`
           <style
             data-meta-id="${id}"
-            ${Object.entries(entry.attrs)
+            ${Object.entries(entry.attrs ?? {})
               .map(([key, value]) => `${key}="${applyFormula(value, context)}"`)
               .join(' ')}
           >
@@ -1913,10 +1914,6 @@ const registerFormulas = (
   window.toddle.formulas[packageName ?? window.__toddle.project] = formulas
 }
 
-const postMessageToEditor = (message: EditorPostMessageType) => {
-  window.parent?.postMessage(message, '*')
-}
-
 let _themeRootSignal = null as Signal<string | null> | null
 function setupThemeSubscription(
   component: Component,

package/src/page.main.ts

@@ -16,6 +16,7 @@ import type {
   Toddle,
 } from '@nordcraft/core/dist/types'
 import { mapObject } from '@nordcraft/core/dist/utils/collections'
+import { VOID_HTML_ELEMENTS } from '@nordcraft/core/dist/utils/html'
 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'
@@ -24,6 +25,7 @@ import { match } from 'path-to-regexp'
 import { isContextApiV2 } from './api/apiUtils'
 import { createLegacyAPI } from './api/createAPI'
 import { createAPI } from './api/createAPIv2'
+import { getDynamicMetaEntries } from './components/meta'
 import { renderComponent } from './components/renderComponent'
 import { isContextProvider } from './context/isContextProvider'
 import { initLogState, registerComponentToLogState } from './debug/logState'
@@ -359,22 +361,21 @@ const setupMetaUpdates = (
   component: Component,
   dataSignal: Signal<ComponentData>,
 ) => {
+  const getFormulaContext = (data: ComponentData) => ({
+    data,
+    component,
+    root: document,
+    package: undefined,
+    toddle: window.toddle,
+    env,
+  })
   // Handle dynamic updates of the document language
   const langFormula = component.route?.info?.language?.formula
   const dynamicLang = langFormula && langFormula.type !== 'value'
   if (dynamicLang) {
     dataSignal
-      .map<string | null>(() =>
-        component
-          ? applyFormula(langFormula, {
-              data: dataSignal.get(),
-              component,
-              root: document,
-              package: undefined,
-              toddle: window.toddle,
-              env,
-            })
-          : null,
+      .map((data) =>
+        component ? applyFormula(langFormula, getFormulaContext(data)) : null,
       )
       .subscribe((newLang) => {
         if (isDefined(newLang) && document.documentElement.lang !== newLang) {
@@ -388,17 +389,8 @@ const setupMetaUpdates = (
   const dynamicTitle = titleFormula && titleFormula.type !== 'value'
   if (dynamicTitle) {
     dataSignal
-      .map<string | null>(() =>
-        component
-          ? applyFormula(titleFormula, {
-              data: dataSignal.get(),
-              component,
-              root: document,
-              package: undefined,
-              toddle: window.toddle,
-              env,
-            })
-          : null,
+      .map((data) =>
+        component ? applyFormula(titleFormula, getFormulaContext(data)) : null,
       )
       .subscribe((newTitle) => {
         if (isDefined(newTitle) && document.title !== newTitle) {
@@ -411,19 +403,19 @@ const setupMetaUpdates = (
   const meta = component.route?.info?.meta
   const dynamicDescription =
     descriptionFormula && descriptionFormula.type !== 'value'
-  const dynamicMetaFormulas = Object.values(meta ?? {}).some((r) =>
-    Object.values(
-      r.attrs ?? {}, // fallback to make sure we don't crash on legacy values
-    ).some((a) => a.type !== 'value'),
-  )
-  if (dynamicDescription || dynamicMetaFormulas) {
+  const dynamicMetaFormulas = getDynamicMetaEntries(meta)
+  if (dynamicDescription || Object.keys(dynamicMetaFormulas).length > 0) {
     const findMetaElement = (name: string) =>
       [...document.getElementsByTagName('meta')].find(
         (el) => el.name === name || el.getAttribute('property') === name,
       ) ?? null
 
     const updateMetaElement = (
-      entry: { tag: string; attrs: Record<string, string> },
+      entry: {
+        tag: string
+        attrs: Record<string, string>
+        content: string | undefined
+      },
       id?: string,
     ) => {
       let existingElement: HTMLElement | null = null
@@ -452,19 +444,18 @@ const setupMetaUpdates = (
         }
         existingElement!.setAttribute(key, value)
       })
+      if (
+        typeof entry.content === 'string' &&
+        !VOID_HTML_ELEMENTS.includes(entry.tag.toLowerCase())
+      ) {
+        existingElement.textContent = entry.content
+      }
     }
     if (dynamicDescription) {
       dataSignal
-        .map<string | null>((data) =>
+        .map((data) =>
           component
-            ? applyFormula(descriptionFormula, {
-                data,
-                component,
-                root: document,
-                package: undefined,
-                toddle: window.toddle,
-                env,
-              })
+            ? applyFormula(descriptionFormula, getFormulaContext(data))
             : null,
         )
         .subscribe((newDescription) => {
@@ -501,46 +492,43 @@ const setupMetaUpdates = (
                   property: 'og:description',
                   content: newDescription,
                 },
+                content: undefined,
               })
             }
           }
         })
     }
-    if (dynamicMetaFormulas) {
-      Object.entries(meta ?? {})
-        // Filter out meta tags that have no dynamic formulas
-        .filter(([_, entry]) =>
-          // fallback to make sure we don't crash on legacy values.
-          Object.values(entry.attrs ?? {}).some((a) => a.type !== 'value'),
-        )
-        .forEach(([id, entry]) => {
+    if (Object.keys(dynamicMetaFormulas).length > 0) {
+      for (const id in dynamicMetaFormulas) {
+        const entry = dynamicMetaFormulas[id]
+        if (entry) {
           dataSignal
-            .map<Record<string, string>>((data) => {
+            .map((data) => {
+              const context = getFormulaContext(data)
               // Return the new values for all attributes (we assume they're strings)
               const values = Object.entries(entry.attrs ?? {}).reduce(
                 (agg, [key, formula]) =>
                   component
                     ? {
                         ...agg,
-                        [key]: applyFormula(formula, {
-                          data,
-                          component,
-                          root: document,
-                          package: undefined,
-                          toddle: window.toddle,
-                          env,
-                        }),
+                        [key]: applyFormula(formula, context),
                       }
                     : agg,
                 {},
               )
-              return values
+              return {
+                attrs: values,
+                content: entry.content
+                  ? applyFormula(entry.content, context)
+                  : undefined,
+              }
             })
-            .subscribe((attrs) =>
+            .subscribe(({ attrs, content }) =>
               // Update the meta tags with the new values
-              updateMetaElement({ tag: entry.tag, attrs }, id),
+              updateMetaElement({ tag: entry.tag, attrs, content }, id),
             )
-        })
+        }
+      }
     }
   }
 }

package/src/styles/CustomPropertyStyleSheet.test.ts

@@ -121,7 +121,7 @@ describe('CustomPropertyStyleSheet', () => {
       '.my-class { --my-other-property: 512px; }',
     )
     instance.unregisterProperty('.my-class', '--my-other-property')
-    expect(instance.getStyleSheet().cssRules[0].cssText).toBe('.my-class {  }')
+    expect(instance.getStyleSheet().cssRules).toBeEmpty()
   })
 
   test('it unregisters a property with media queries', () => {
@@ -149,11 +149,6 @@ describe('CustomPropertyStyleSheet', () => {
         mediaQuery: { 'max-width': '600px' },
       },
     )
-    expect(instance.getStyleSheet().cssRules[0].cssText).toBe(
-      `\
-@media (max-width: 600px) {
-  .my-class-with-media {  }
-}`,
-    )
+    expect(instance.getStyleSheet().cssRules).toBeEmpty()
   })
 })

package/src/styles/CustomPropertyStyleSheet.ts

@@ -76,7 +76,6 @@ export class CustomPropertyStyleSheet {
     options?: Nullable<{
       mediaQuery?: Nullable<MediaQuery>
       startingStyle?: Nullable<boolean>
-      deepClean?: Nullable<boolean>
     }>,
   ): void {
     if (!this.ruleMap) {
@@ -97,7 +96,7 @@ export class CustomPropertyStyleSheet {
 
     // Cleaning up empty selectors is probably not necessary in production and may have performance implications.
     // However, it is required for the editor-preview as it is a dynamic environment and things may get reordered and canvas reused.
-    if (options?.deepClean && rule.style.length === 0) {
+    if (rule.style.length === 0) {
       this.styleSheet.deleteRule(
         Array.from(this.ruleMap.keys()).indexOf(fullSelector),
       )

package/src/utils/BatchQueue.ts

@@ -3,13 +3,13 @@
  * This is more efficient than processing each callback in a separate requestAnimationFrame due to the overhead.
  */
 export class BatchQueue {
+  constructor() {}
   private batchQueue: Array<() => void> = []
   private isProcessing = false
   private processBatch() {
     if (this.isProcessing) return
     this.isProcessing = true
-
-    requestAnimationFrame(() => {
+    queueMicrotask(() => {
       while (this.batchQueue.length > 0) {
         const callback = this.batchQueue.shift()
         callback?.()

package/src/utils/getComponent.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'bun:test'
+import { getComponent } from './getComponent'
+
+describe('getComponent', () => {
+  const compA = { name: 'A', value: 1 }
+  const compB = { name: 'B', value: 2 }
+  const compC = { name: 'C', value: 3 }
+
+  it('caches components after first call and ignores new list on subsequent calls with useCache=true', () => {
+    // First call: cache is built from [compA, compB]
+    expect(getComponent('A', [compA, compB])).toBe(compA)
+    expect(getComponent('B', [compA, compB])).toBe(compB)
+
+    // Second call: provide a different list, but cache should still return from the original cache
+    expect(getComponent('C', [compC])).toBeUndefined()
+    expect(getComponent('A', [compC])).toBe(compA)
+  })
+
+  it('does not use cache when useCache is false', () => {
+    // First call: should find compA in the list
+    expect(getComponent('A', [compA, compB], false)).toBe(compA)
+
+    // Second call: provide a different list, should now find compC
+    expect(getComponent('C', [compC], false)).toBe(compC)
+
+    // Should not find compA in the new list
+    expect(getComponent('A', [compC], false)).toBeUndefined()
+  })
+})

package/src/utils/getComponent.ts

@@ -0,0 +1,15 @@
+import type { Component } from '@nordcraft/core/dist/component/component.types'
+
+let componentMap: Map<string, Component> | null
+
+/**
+ * Project components is not expected to change during runtime, so we can memoize the components in a map for faster lookup.
+ */
+export const getComponent = (
+  key: string,
+  components: Component[],
+  useCache = true,
+) =>
+  useCache
+    ? (componentMap ??= new Map(components.map((c) => [c.name, c]))).get(key)
+    : components.find((c) => c.name === key)

package/src/utils/markSelectedElement.ts

@@ -0,0 +1,8 @@
+export function markSelectedElement(node: Element | null) {
+  if (node && !node.hasAttribute('data-selected')) {
+    document.querySelectorAll('[data-selected="true"]').forEach((el) => {
+      el.removeAttribute('data-selected')
+    })
+    node.setAttribute('data-selected', 'true')
+  }
+}

package/src/utils/subscribeCustomProperty.ts

@@ -2,10 +2,9 @@ import type { Signal } from '../signal/signal'
 
 import { CUSTOM_PROPERTIES_STYLESHEET_ID } from '@nordcraft/core/dist/styling/theme.const'
 import type { StyleVariant } from '@nordcraft/core/dist/styling/variantSelector'
-import type { Runtime } from '@nordcraft/core/dist/types'
 import { CustomPropertyStyleSheet } from '../styles/CustomPropertyStyleSheet'
 
-let customPropertiesStylesheet: CustomPropertyStyleSheet | undefined
+export let customPropertiesStylesheet: CustomPropertyStyleSheet | undefined
 
 export function subscribeCustomProperty({
   selector,
@@ -13,14 +12,12 @@ export function subscribeCustomProperty({
   signal,
   variant,
   root,
-  runtime,
 }: {
   selector: string
   customPropertyName: string
   signal: Signal<string>
   variant?: StyleVariant
   root: Document | ShadowRoot
-  runtime: Runtime
 }) {
   customPropertiesStylesheet ??= new CustomPropertyStyleSheet(
     root,
@@ -43,7 +40,6 @@ export function subscribeCustomProperty({
           selector,
           customPropertyName,
           {
-            deepClean: runtime === 'preview',
             mediaQuery: variant?.mediaQuery,
             startingStyle: variant?.startingStyle,
           },