@nordcraft/runtime 1.0.32 → 1.0.34

package/src/editor-preview.main.ts

@@ -8,6 +8,7 @@ import type {
   Component,
   ComponentData,
   MetaEntry,
+  StyleVariant,
 } from '@nordcraft/core/dist/component/component.types'
 import { isPageComponent } from '@nordcraft/core/dist/component/isPageComponent'
 import type {
@@ -37,6 +38,8 @@ 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'
@@ -565,7 +568,7 @@ export const createRoot = (
           }
           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' ||
@@ -582,31 +585,12 @@ export const createRoot = (
             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) {
@@ -985,10 +969,30 @@ export const createRoot = (
               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;
   }`
@@ -1053,19 +1057,49 @@ export const createRoot = (
             (nodeLookup.node.type === 'element' ||
               nodeLookup.node.type === 'component')
           ) {
-            const selectedStyleVariant = nodeLookup.node.variants?.[
-              styleVariantSelection.styleVariantIndex
-            ] ?? { style: {} }
+            const selectedStyleVariant =
+              nodeLookup.node.variants?.[
+                styleVariantSelection.styleVariantIndex
+              ] ?? ({ style: {} } as StyleVariant)
             // Add a style element specific to the selected element which
             // is only applied when the preview is in design mode
+            const styleVariantCustomProperties = Object.entries(
+              (selectedStyleVariant as StyleVariant).customProperties ?? {},
+            )
+              .map(([customPropertyName, customProperty]) => ({
+                name: customPropertyName,
+                value: applyFormula(customProperty.formula, {
+                  data: {
+                    Attributes: dataSignal.get().Attributes,
+                    Variables: dataSignal.get().Variables,
+                    Contexts: ctxDataSignal?.get().Contexts ?? {},
+                  },
+                  component: getCurrentComponent(),
+                  root: ctx?.root,
+                  formulaCache: {},
+                  package: ctx?.package,
+                  toddle: window.toddle,
+                  env,
+                } as FormulaContext),
+              }))
+              .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],
+                              ),
+                            ),
                           })}
                         }
                       `),
@@ -1379,19 +1413,53 @@ export const createRoot = (
         // 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))
+        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: unknown) {
+          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)
+        }
         window.parent?.postMessage(
           {
             type: 'style',

package/src/styles/CustomPropertyStyleSheet.test.ts

@@ -0,0 +1,104 @@
+import { describe, expect, test } from 'bun:test'
+import { CustomPropertyStyleSheet } from './CustomPropertyStyleSheet'
+
+describe('CustomPropertyStyleSheet', () => {
+  test('it creates a new stylesheet', () => {
+    const instance = new CustomPropertyStyleSheet(document)
+    expect(instance).toBeInstanceOf(CustomPropertyStyleSheet)
+    expect(instance.getStyleSheet().cssRules).toHaveLength(0)
+  })
+
+  test('it adds a property definition', () => {
+    const instance = new CustomPropertyStyleSheet(document)
+    instance.registerProperty('.my-class', '--my-property')
+    expect(instance.getStyleSheet().cssRules.length).toBe(1)
+    expect(instance.getStyleSheet().cssRules[0].cssText).toBe('.my-class {  }')
+  })
+
+  test('it puts different selectors in different rules', () => {
+    const instance = new CustomPropertyStyleSheet(document)
+    instance.registerProperty('.my-class', '--my-property')('256px')
+    instance.registerProperty('.my-other-class', '--my-property')('256px')
+    expect(instance.getStyleSheet().cssRules.length).toBe(2)
+    expect(instance.getStyleSheet().cssRules[0].cssText).toBe(
+      '.my-class { --my-property: 256px; }',
+    )
+    expect(instance.getStyleSheet().cssRules[1].cssText).toBe(
+      '.my-other-class { --my-property: 256px; }',
+    )
+  })
+
+  test('it can update properties', () => {
+    const instance = new CustomPropertyStyleSheet(document)
+    const setter = instance.registerProperty('.my-class', '--my-property')
+    setter('256px')
+    expect(instance.getStyleSheet().cssRules.length).toBe(1)
+    expect(instance.getStyleSheet().cssRules[0].cssText).toBe(
+      '.my-class { --my-property: 256px; }',
+    )
+
+    setter('inherit')
+    expect(instance.getStyleSheet().cssRules[0].cssText).toBe(
+      '.my-class { --my-property: inherit; }',
+    )
+  })
+
+  test('it works with media queries', () => {
+    const instance = new CustomPropertyStyleSheet(document)
+    instance.registerProperty('.my-class', '--my-property', {
+      mediaQuery: { 'max-width': '600px' },
+    })('256px')
+    expect(instance.getStyleSheet().cssRules.length).toBe(1)
+    expect(instance.getStyleSheet().cssRules[0].cssText).toBe(
+      '@media (max-width: 600px) { .my-class { --my-property: 256px; } }',
+    )
+  })
+
+  test('it unregisters a property', () => {
+    const instance = new CustomPropertyStyleSheet(document)
+    const setter = instance.registerProperty('.my-class', '--my-property')
+    setter('256px')
+    const setter2 = instance.registerProperty(
+      '.my-class',
+      '--my-other-property',
+    )
+    setter2('512px')
+    expect(instance.getStyleSheet().cssRules[0].cssText).toBe(
+      '.my-class { --my-property: 256px; --my-other-property: 512px; }',
+    )
+
+    instance.unregisterProperty('.my-class', '--my-property')
+    expect(instance.getStyleSheet().cssRules[0].cssText).toBe(
+      '.my-class { --my-other-property: 512px; }',
+    )
+    instance.unregisterProperty('.my-class', '--my-other-property')
+    expect(instance.getStyleSheet().cssRules[0].cssText).toBe('.my-class {  }')
+  })
+
+  test('it unregisters a property with media queries', () => {
+    const instance = new CustomPropertyStyleSheet(document)
+    const setter = instance.registerProperty(
+      '.my-class-with-media',
+      '--my-property-with-media',
+      {
+        mediaQuery: { 'max-width': '600px' },
+      },
+    )
+    setter('256px')
+    expect(instance.getStyleSheet().cssRules.length).toBe(1)
+    expect(instance.getStyleSheet().cssRules[0].cssText).toBe(
+      '@media (max-width: 600px) { .my-class-with-media { --my-property-with-media: 256px; } }',
+    )
+
+    instance.unregisterProperty(
+      '.my-class-with-media',
+      '--my-property-with-media',
+      {
+        mediaQuery: { 'max-width': '600px' },
+      },
+    )
+    expect(instance.getStyleSheet().cssRules[0].cssText).toBe(
+      '@media (max-width: 600px) { .my-class-with-media {  } }',
+    )
+  })
+})

package/src/styles/CustomPropertyStyleSheet.ts

@@ -0,0 +1,180 @@
+import type { MediaQuery } from '@nordcraft/core/dist/component/component.types'
+
+/**
+ * CustomPropertyStyleSheet is a utility class that manages CSS custom properties
+ * (variables) in a dedicated CSSStyleSheet. It allows for efficient registration,
+ * updating, and removal of style properties as fast as setting style properties.
+ *
+ * It abstracts the complexity of managing CSS rules via. indexing and
+ * provides a simple API to register and unregister style properties for specific
+ * selectors.
+ */
+export class CustomPropertyStyleSheet {
+  private styleSheet: CSSStyleSheet
+
+  // Selector to rule index mapping
+  private ruleMap: Map<string, CSSStyleRule | CSSNestedDeclarations> | undefined
+
+  constructor(root: Document | ShadowRoot, styleSheet?: CSSStyleSheet | null) {
+    if (styleSheet) {
+      this.styleSheet = styleSheet
+    } else {
+      this.styleSheet = new CSSStyleSheet()
+      root.adoptedStyleSheets.push(this.getStyleSheet())
+    }
+  }
+
+  /**
+   * @returns A function to update the property value efficiently.
+   */
+  public registerProperty(
+    selector: string,
+    name: string,
+    options?: {
+      mediaQuery?: MediaQuery
+      startingStyle?: boolean
+    },
+  ): (newValue: string) => void {
+    this.ruleMap ??= this.hydrateFromBase()
+    const fullSelector = CustomPropertyStyleSheet.getFullSelector(
+      selector,
+      options,
+    )
+
+    // Check if the selector already exists
+    let rule = this.ruleMap.get(fullSelector)
+    if (!rule) {
+      const ruleIndex = this.styleSheet.insertRule(
+        fullSelector,
+        this.styleSheet.cssRules.length,
+      )
+      let newRule = this.styleSheet.cssRules[ruleIndex]
+
+      // We are only interested in the dynamic style, so get the actual style rule, not media or other nested rules. Loop until we are at the bottom most rule.
+      while (
+        (newRule as any).cssRules &&
+        (newRule as CSSGroupingRule).cssRules.length > 0
+      ) {
+        newRule = (newRule as CSSGroupingRule).cssRules[0]
+      }
+      rule = newRule as CSSStyleRule | CSSNestedDeclarations
+      this.ruleMap.set(fullSelector, rule)
+    }
+
+    return (value: string) => {
+      rule.style.setProperty(name, value)
+    }
+  }
+
+  public unregisterProperty(
+    selector: string,
+    name: string,
+    options?: {
+      mediaQuery?: MediaQuery
+      startingStyle?: boolean
+      deepClean?: boolean
+    },
+  ): void {
+    if (!this.ruleMap) {
+      return
+    }
+
+    const fullSelector = CustomPropertyStyleSheet.getFullSelector(
+      selector,
+      options,
+    )
+
+    const rule = this.ruleMap.get(fullSelector)
+    if (!rule) {
+      return
+    }
+
+    rule.style.removeProperty(name)
+
+    // 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) {
+      this.styleSheet.deleteRule(
+        Array.from(this.ruleMap.keys()).indexOf(fullSelector),
+      )
+      this.ruleMap.delete(fullSelector)
+    }
+  }
+
+  public getStyleSheet(): CSSStyleSheet {
+    return this.styleSheet
+  }
+
+  /**
+   * Maps all selectors to their rule index. This is used to map the initial
+   * SSR style variable values to their selectors.
+   */
+  private hydrateFromBase() {
+    const ruleIndex: Map<string, CSSStyleRule> = new Map()
+    for (let i = 0; i < this.styleSheet.cssRules.length; i++) {
+      let rule = this.styleSheet.cssRules[i]
+      const selector = CustomPropertyStyleSheet.selectorFromCSSRule(rule)
+      // Get last part of the selector, which is the actual selector we are interested in
+      while (
+        (rule as CSSGroupingRule).cssRules &&
+        (rule as CSSGroupingRule).cssRules.length > 0
+      ) {
+        rule = (rule as CSSGroupingRule).cssRules[0]
+      }
+
+      ruleIndex.set(selector, rule as CSSStyleRule)
+    }
+    return ruleIndex
+  }
+
+  private static selectorFromCSSRule(rule: CSSRule): string {
+    switch (rule.constructor.name) {
+      case 'CSSStyleRule':
+        // For these rules, we just return (potentially with subrules if any cssRules exist)
+        return `${(rule as CSSStyleRule).selectorText} { ${Array.from(
+          (rule as CSSStyleRule).cssRules,
+        )
+          .map(CustomPropertyStyleSheet.selectorFromCSSRule)
+          .join(', ')}}`
+      case 'CSSStartingStyleRule':
+        return `@starting-style { ${Array.from(
+          (rule as CSSStartingStyleRule).cssRules,
+        )
+          .map(CustomPropertyStyleSheet.selectorFromCSSRule)
+          .join(', ')}}`
+      case 'CSSMediaRule':
+        return `@media ${(rule as CSSMediaRule).media.mediaText} { ${Array.from(
+          (rule as CSSMediaRule).cssRules,
+        )
+          .map(CustomPropertyStyleSheet.selectorFromCSSRule)
+          .join(', ')}}`
+      case 'CSSNestedDeclarations':
+        return ''
+      default:
+        // eslint-disable-next-line no-console
+        console.warn(
+          `Unsupported CSS rule type: ${rule.constructor.name}. Returning empty selector.`,
+        )
+        return ''
+    }
+  }
+
+  private static getFullSelector(
+    selector: string,
+    options?: {
+      mediaQuery?: MediaQuery
+      startingStyle?: boolean
+    },
+  ) {
+    let result =
+      selector + (options?.startingStyle ? ' { @starting-style { }}' : ' { }')
+    if (options?.mediaQuery) {
+      result = `@media (${Object.entries(options.mediaQuery)
+        .map(([key, value]) => `${key}: ${value}`)
+        .filter(Boolean)
+        .join(') and (')}) { ${result}}`
+    }
+
+    return result
+  }
+}

package/src/styles/style.ts

@@ -8,6 +8,10 @@ import {
   getClassName,
   toValidClassName,
 } from '@nordcraft/core/dist/styling/className'
+import {
+  syntaxNodeToPropertyAtDefinition,
+  type CssSyntaxNode,
+} from '@nordcraft/core/dist/styling/customProperty'
 import { kebabCase } from '@nordcraft/core/dist/styling/style.css'
 import { variantSelector } from '@nordcraft/core/dist/styling/variantSelector'
 import { omitKeys } from '@nordcraft/core/dist/utils/collections'
@@ -61,6 +65,7 @@ export const insertStyles = (
   root: Component,
   components: Component[],
 ) => {
+  const registeredCustomProperties = new Map<string, CssSyntaxNode>()
   const getNodeStyles = (
     node: ElementNodeModel | ComponentNodeModel,
     classHash: string,
@@ -131,6 +136,34 @@ ${
         .join('\n')
     : ''
 }
+${[
+  ...Object.entries(node.customProperties ?? {}),
+  ...(node.variants?.flatMap((variant) =>
+    Object.entries(variant.customProperties ?? {}),
+  ) ?? []),
+]
+  .map(([customPropertyName, customProperty]) => {
+    const existingCustomProperty =
+      registeredCustomProperties.get(customPropertyName)
+    if (existingCustomProperty) {
+      // Warn if the style variable is already registered with a different syntax, as registration is global.
+      // The editor should also report an Error-level issue.
+      if (
+        existingCustomProperty.type === 'primitive' &&
+        customProperty.syntax.type === 'primitive' &&
+        existingCustomProperty.name !== customProperty.syntax.name
+      ) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          `Custom property "${customPropertyName}" is already registered with a different syntax: "${existingCustomProperty.name}".`,
+        )
+      }
+      return ''
+    }
+    registeredCustomProperties.set(customPropertyName, customProperty.syntax)
+    return syntaxNodeToPropertyAtDefinition(customPropertyName, customProperty)
+  })
+  .join('\n')}
   `),
     )
     return styleElem

package/src/utils/omitStyle.ts

@@ -1,4 +1,7 @@
-import type { Component } from '@nordcraft/core/dist/component/component.types'
+import type {
+  Component,
+  StyleVariant,
+} from '@nordcraft/core/dist/component/component.types'
 
 export function omitSubnodeStyleForComponent<T extends Component | undefined>(
   component: T,
@@ -10,8 +13,13 @@ export function omitSubnodeStyleForComponent<T extends Component | undefined>(
       nodeId !== 'root'
     ) {
       delete node.style
-      delete node.variants
       delete node.animations
+      node.variants = node.variants?.map(
+        ({ customProperties }) =>
+          ({
+            customProperties,
+          }) as StyleVariant,
+      )
     }
   })
 

package/src/utils/subscribeCustomProperty.ts

@@ -0,0 +1,54 @@
+import type { StyleVariant } from '@nordcraft/core/dist/component/component.types'
+import type { Signal } from '../signal/signal'
+
+import { CUSTOM_PROPERTIES_STYLESHEET_ID } from '@nordcraft/core/dist/styling/theme.const'
+import type { Runtime } from '@nordcraft/core/dist/types'
+import { CustomPropertyStyleSheet } from '../styles/CustomPropertyStyleSheet'
+
+let customPropertiesStylesheet: CustomPropertyStyleSheet | undefined
+
+export function subscribeCustomProperty({
+  selector,
+  customPropertyName,
+  signal,
+  variant,
+  root,
+  runtime,
+}: {
+  selector: string
+  customPropertyName: string
+  signal: Signal<string>
+  variant?: StyleVariant
+  root: Document | ShadowRoot
+  runtime: Runtime
+}) {
+  customPropertiesStylesheet ??= new CustomPropertyStyleSheet(
+    root,
+    (
+      root.getElementById(CUSTOM_PROPERTIES_STYLESHEET_ID) as
+        | HTMLStyleElement
+        | undefined
+    )?.sheet,
+  )
+
+  signal.subscribe(
+    customPropertiesStylesheet.registerProperty(
+      selector,
+      customPropertyName,
+      variant,
+    ),
+    {
+      destroy: () => {
+        customPropertiesStylesheet?.unregisterProperty(
+          selector,
+          customPropertyName,
+          {
+            deepClean: runtime === 'preview',
+            mediaQuery: variant?.mediaQuery,
+            startingStyle: variant?.startingStyle,
+          },
+        )
+      },
+    },
+  )
+}