@nordcraft/runtime 1.0.57 → 1.0.59

package/src/editor-preview.main.ts

@@ -3,9 +3,9 @@
 /* eslint-disable no-case-declarations */
 /* eslint-disable no-fallthrough */
 import { isLegacyApi } from '@nordcraft/core/dist/api/api'
+import { isLegacyPluginAction } from '@nordcraft/core/dist/component/actionUtils'
 import {
   HeadTagTypes,
-  type AnimationKeyframe,
   type Component,
   type ComponentData,
   type MetaEntry,
@@ -24,8 +24,8 @@ import {
   type PluginFormula,
   type ToddleFormula,
 } from '@nordcraft/core/dist/formula/formulaTypes'
-import { valueFormula } from '@nordcraft/core/dist/formula/formulaUtils'
 import { getClassName } from '@nordcraft/core/dist/styling/className'
+import { appendUnit } from '@nordcraft/core/dist/styling/customProperty'
 import type { OldTheme, Theme } from '@nordcraft/core/dist/styling/theme'
 import { getThemeCss, renderTheme } from '@nordcraft/core/dist/styling/theme'
 import type { StyleVariant } from '@nordcraft/core/dist/styling/variantSelector'
@@ -41,6 +41,7 @@ import type {
 } from '@nordcraft/core/dist/types'
 import { mapObject, omitKeys } from '@nordcraft/core/dist/utils/collections'
 import { safeFunctionName } from '@nordcraft/core/dist/utils/handlerUtils'
+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'
 import fastDeepEqual from 'fast-deep-equal'
@@ -55,7 +56,15 @@ 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 type { DragState } from './editor/types'
+import { isInputTarget } from './editor/input'
+import { updateComponentLinks } from './editor/links'
+import { getRectData } from './editor/overlay'
+import {
+  TextNodeComputedStyles,
+  type DragState,
+  type EditorPostMessageType,
+  type NordcraftPreviewEvent,
+} from './editor/types'
 import { handleAction } from './events/handleAction'
 import type { Signal } from './signal/signal'
 import { signal } from './signal/signal'
@@ -75,130 +84,6 @@ import {
   storeScrollState,
 } from './utils/storeScrollState'
 
-type ToddlePreviewEvent =
-  | {
-      type: 'style_variant_changed'
-      variantIndex: number | null
-    }
-  | {
-      type: 'component'
-      component: Component
-    }
-  | { type: 'components'; components: Component[] }
-  | {
-      type: 'packages'
-      packages: Record<
-        string,
-        {
-          components: Record<string, Component>
-          formulas: Record<
-            string,
-            PluginFormula<FormulaHandlerV2> | PluginFormula<string>
-          >
-          actions: Record<string, PluginActionV2 | PluginAction>
-          manifest: {
-            name: string
-            // commit represents the commit hash (version) of the package
-            commit: string
-          }
-        }
-      >
-    }
-  | {
-      type: 'global_formulas'
-      formulas: Record<
-        string,
-        PluginFormula<FormulaHandlerV2> | PluginFormula<string>
-      >
-    }
-  | {
-      type: 'global_actions'
-      actions: Record<string, PluginActionV2 | PluginAction>
-    }
-  | { type: 'theme'; theme: Record<string, OldTheme | Theme> }
-  | { type: 'mode'; mode: 'design' | 'test' }
-  | { type: 'attrs'; attrs: Record<string, unknown> }
-  | { type: 'selection'; selectedNodeId: string | null }
-  | { type: 'highlight'; highlightedNodeId: string | null }
-  | {
-      type: 'click' | 'mousemove' | 'dblclick'
-      metaKey: boolean
-      x: number
-      y: number
-    }
-  | { type: 'report_document_scroll_size' }
-  | { type: 'update_inner_text'; innerText: string }
-  | { type: 'reload' }
-  | { type: 'fetch_api'; apiKey: string }
-  | { type: 'introspect_qraphql_api'; apiKey: string }
-  | { type: 'drag-started'; x: number; y: number }
-  | { type: 'drag-ended'; canceled?: true }
-  | { type: 'keydown'; key: string; altKey: boolean; metaKey: boolean }
-  | { type: 'keyup'; key: string; altKey: boolean; metaKey: boolean }
-  | {
-      type: 'get_computed_style'
-      styles?: string[]
-    }
-  | {
-      type: 'set_timeline_keyframes'
-      keyframes: Record<string, AnimationKeyframe> | null
-    }
-  | {
-      type: 'set_timeline_time'
-      time: number | null
-      timingFunction:
-        | 'linear'
-        | 'ease'
-        | 'ease-in'
-        | 'ease-out'
-        | 'ease-in-out'
-        | 'step-start'
-        | 'step-end'
-        | string
-        | undefined
-      fillMode: 'none' | 'forwards' | 'backwards' | 'both' | undefined
-    }
-  | {
-      type: 'preview_style'
-      styles: Record<string, string> | null
-      theme?: {
-        key: string
-        value: Theme
-      }
-    }
-  | {
-      type: 'preview_theme'
-      theme: string | null
-    }
-
-/**
- * Styles required for rendering the same exact text again somewhere else (on a overlay rect in the editor)
- */
-enum TextNodeComputedStyles {
-  // Caret color is important as it is the only visible part of the text node (when text is not highlighted)
-  CARET_COLOR = 'caret-color',
-  FONT_FAMILY = 'font-family',
-  FONT_SIZE = 'font-size',
-  FONT_WEIGHT = 'font-weight',
-  FONT_STYLE = 'font-style',
-  FONT_VARIANT = 'font-variant',
-  FONT_STRETCH = 'font-stretch',
-  LINE_HEIGHT = 'line-height',
-  TEXT_ALIGN = 'text-align',
-  TEXT_TRANSFORM = 'text-transform',
-  LETTER_SPACING = 'letter-spacing',
-  WHITE_SPACE = 'white-space',
-  WORD_SPACING = 'word-spacing',
-  TEXT_INDENT = 'text-indent',
-  TEXT_OVERFLOW = 'text-overflow',
-  TEXT_RENDERING = 'text-rendering',
-  WORD_BREAK = 'word-break',
-  WORD_WRAP = 'word-wrap',
-  DIRECTION = 'direction',
-  UNICODE_BIDI = 'unicode-bidi',
-  VERTICAL_ALIGN = 'vertical-align',
-}
-
 let env: ToddleEnv
 
 export const initGlobalObject = () => {
@@ -297,6 +182,18 @@ export const initGlobalObject = () => {
   )
 }
 
+const EMPTY_COMPONENT_DATA: ComponentData = {
+  Location: {
+    query: {},
+    params: {},
+    page: '/',
+    path: '/',
+    hash: '',
+  },
+  Attributes: {},
+  Variables: {},
+}
+
 // imported by "/.toddle/preview" (see worker/src/preview.ts)
 export const createRoot = (
   domNode: HTMLElement | null = document.getElementById('App'),
@@ -304,35 +201,8 @@ export const createRoot = (
   if (!domNode) {
     throw new Error('Cant find root domNode')
   }
-  const isInputTarget = (event: Event) => {
-    const target = event.target
-    if (target instanceof HTMLElement) {
-      if (
-        target.tagName === 'INPUT' ||
-        target.tagName === 'TEXTAREA' ||
-        target.tagName === 'SELECT' ||
-        target.tagName === 'STYLE-EDITOR'
-      ) {
-        return true
-      }
-      if (target.contentEditable?.toLocaleLowerCase() === 'true') {
-        return true
-      }
-    }
-    return false
-  }
 
-  const dataSignal = signal<ComponentData>({
-    Location: {
-      query: {},
-      params: {},
-      page: '/',
-      path: '/',
-      hash: '',
-    },
-    Attributes: {},
-    Variables: {},
-  })
+  const dataSignal = signal(EMPTY_COMPONENT_DATA)
   let ctxDataSignal: Signal<ComponentData> | undefined
 
   let ctx: ComponentContext | null = null
@@ -372,87 +242,26 @@ export const createRoot = (
   let previewStyleAnimationFrame = -1
   let timelineTimeAnimationFrame = -1
 
-  /**
-   * Modifies all link nodes on a component
-   * NOTE: alters in place
-   */
-  const updateComponentLinks = (component: Component) => {
-    // Find all links and add target="_blank" to them
-    Object.entries(component.nodes ?? {}).forEach(([_, node]) => {
-      if (node.type === 'element' && node.tag === 'a') {
-        node.attrs['target'] = valueFormula('_blank')
-      }
-    })
-    return component
-  }
-
-  const registerActions = (
-    allActions: Record<string, PluginActionV2 | PluginAction>,
-    packageName?: string,
-  ) => {
-    const actions: Record<string, PluginActionV2> = {}
-    Object.entries(allActions ?? {}).forEach(([name, action]) => {
-      if (typeof action.name === 'string' && action.version === undefined) {
-        // Legacy actions are self-registering. We need to execute them to register them
-        Function(action.handler)()
-        return
-      }
-      // We need to convert the handler string into a real function
-      actions[name] = {
-        ...(action as PluginActionV2),
-        handler:
-          typeof action.handler === 'string'
-            ? (new Function(
-                'args, ctx',
-                `${action.handler}
-          return ${safeFunctionName(action.name)}(args, ctx)`,
-              ) as ActionHandlerV2)
-            : action.handler,
-      }
-    })
-    window.toddle.actions[packageName ?? window.__toddle.project] = actions
-  }
-
-  const registerFormulas = (
-    allFormulas: Record<
-      string,
-      ToddleFormula | CodeFormula<FormulaHandlerV2> | CodeFormula<string>
-    >,
-    packageName?: string,
-  ) => {
-    const formulas: Record<string, PluginFormula<FormulaHandlerV2>> = {}
-    Object.entries(allFormulas ?? {}).forEach(([name, formula]) => {
-      if (
-        !isToddleFormula<FormulaHandlerV2 | string>(formula) &&
-        typeof formula.name === 'string' &&
-        formula.version === undefined
-      ) {
-        // Legacy formulas are self-registering. We need to execute them to register them
-        Function(formula.handler as unknown as string)()
-        return
-      } else if (!isToddleFormula<FormulaHandlerV2 | string>(formula)) {
-        // For code formulas we need to convert the handler string into a real function
-        formulas[name] = {
-          ...formula,
-          handler:
-            typeof formula.handler === 'string'
-              ? (new Function(
-                  'args, ctx',
-                  `${formula.handler}
-                return ${safeFunctionName(formula.name)}(args, ctx)`,
-                ) as FormulaHandlerV2)
-              : formula.handler,
+  const setupDataSignalSubscribers = () => {
+    dataSignal.subscribe((data) => {
+      if (component && components && packageComponents && data) {
+        try {
+          postMessageToEditor({ type: 'data', data })
+        } catch {
+          // If we're unable to send the data, let's try to JSON serialize it
+          postMessageToEditor({
+            type: 'data',
+            data: JSON.parse(JSON.stringify(data)),
+          })
         }
-        return
       }
-      formulas[name] = formula as PluginFormula<FormulaHandlerV2>
     })
-    window.toddle.formulas[packageName ?? window.__toddle.project] = formulas
   }
+  setupDataSignalSubscribers()
 
   window.addEventListener(
     'message',
-    async (message: MessageEvent<ToddlePreviewEvent>) => {
+    async (message: MessageEvent<NordcraftPreviewEvent>) => {
       if (!message.isTrusted) {
         console.error('UNTRUSTED MESSAGE')
       }
@@ -466,11 +275,22 @@ export const createRoot = (
             | undefined
 
           if (message.data.component.name !== component?.name) {
+            // Store scroll state for the previous component
             storeScrollState(component?.name)
+            // Remove all subscribers from the previous showSignal
             showSignal.cleanSubscribers()
+            // Clear any previously overridden conditional elements
+            showSignal.set({ displayedNodes: [], testMode: mode === 'test' })
+            // Restore scroll state for the new component
             scrollStateRestorer = getScrollStateRestorer(
               message.data.component.name,
             )
+            // Destroy the dataSignal (including subscribers) for the previous component
+            dataSignal.destroy()
+            // Re-subscribe all dataSignal subscribers
+            setupDataSignalSubscribers()
+            // Re-initialize the data signal for the new component
+            ctxDataSignal?.destroy()
           }
 
           component = updateComponentLinks(message.data.component)
@@ -1249,26 +1069,31 @@ export const createRoot = (
               ] ?? ({ 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 ?? {},
+            const styleVariantCustomProperties = Object.fromEntries(
+              Object.entries(
+                (selectedStyleVariant as StyleVariant).customProperties ?? {},
+              )
+                .map(([customPropertyName, customProperty]) => [
+                  customPropertyName,
+                  appendUnit(
+                    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),
+                    customProperty.unit,
+                  ),
+                ])
+                .filter(([, value]) => isDefined(value)),
             )
-              .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
@@ -1281,11 +1106,7 @@ export const createRoot = (
                           ${styleToCss({
                             ...(!pseudoElement && nodeLookup.node.style),
                             ...selectedStyleVariant.style,
-                            ...Object.fromEntries(
-                              styleVariantCustomProperties.map(
-                                ({ name, value }) => [name, value],
-                              ),
-                            ),
+                            ...styleVariantCustomProperties,
                           })}
                         }
                       `),
@@ -1742,68 +1563,7 @@ export const createRoot = (
     return ctx
   }
 
-  document.addEventListener('keydown', (event) => {
-    if (isInputTarget(event)) {
-      return
-    }
-    switch (event.key) {
-      case 'k':
-        if (event.metaKey) {
-          event.preventDefault()
-        }
-    }
-    postMessageToEditor({
-      type: 'keydown',
-      event: {
-        key: event.key,
-        metaKey: event.metaKey,
-        shiftKey: event.shiftKey,
-        altKey: event.altKey,
-      },
-    })
-  })
-  document.addEventListener('keyup', (event) => {
-    if (isInputTarget(event)) {
-      return
-    }
-    postMessageToEditor({
-      type: 'keyup',
-      event: {
-        key: event.key,
-        metaKey: event.metaKey,
-        shiftKey: event.shiftKey,
-        altKey: event.altKey,
-      },
-    })
-  })
-  document.addEventListener('keypress', (event) => {
-    if (isInputTarget(event)) {
-      return
-    }
-    postMessageToEditor({
-      type: 'keypress',
-      event: {
-        key: event.key,
-        metaKey: event.metaKey,
-        shiftKey: event.shiftKey,
-        altKey: event.altKey,
-      },
-    })
-  })
-
-  dataSignal.subscribe((data) => {
-    if (component && components && packageComponents && data) {
-      try {
-        postMessageToEditor({ type: 'data', data })
-      } catch {
-        // If we're unable to send the data, let's try to JSON serialize it
-        postMessageToEditor({
-          type: 'data',
-          data: JSON.parse(JSON.stringify(data)),
-        })
-      }
-    }
-  })
+  initKeyListeners()
 
   const clearSelectedStyleVariant = () => {
     if (styleVariantSelection) {
@@ -1864,28 +1624,6 @@ export const createRoot = (
   })()
 }
 
-function getRectData(selectedNode: Element | null | undefined) {
-  if (!selectedNode) {
-    return null
-  }
-
-  const { borderRadius, rotate } = window.getComputedStyle(selectedNode)
-  const rect: DOMRect = selectedNode.getBoundingClientRect()
-
-  return {
-    left: rect.left,
-    right: rect.right,
-    top: rect.top,
-    bottom: rect.bottom,
-    width: rect.width,
-    height: rect.height,
-    x: rect.x,
-    y: rect.y,
-    borderRadius: borderRadius.split(' '),
-    rotate,
-  }
-}
-
 const insertOrReplaceHeadNode = (id: string, node: Node) => {
   const existing = document.head.querySelector(`[data-meta-id="${id}"]`)
   if (existing) {
@@ -1988,90 +1726,121 @@ const insertTheme = (
   parent.appendChild(styleElem)
 }
 
-type PostMessageType =
-  | {
-      type: 'textComputedStyle'
-      computedStyle: Record<string, string>
-    }
-  | {
-      type: 'selection'
-      selectedNodeId: string | null
-    }
-  | {
-      type: 'highlight'
-      highlightedNodeId: string | null
-    }
-  | {
-      type: 'navigate'
-      name: string
-    }
-  | {
-      type: 'documentScrollSize'
-      scrollHeight: number
-      scrollWidth: number
-    }
-  | {
-      type: 'nodeMoved'
-      copy: boolean
-      parent?: string | null
-      index?: number
-    }
-  | {
-      type: 'computedStyle'
-      computedStyle: Record<string, string>
-    }
-  | {
-      type: 'style'
-      time: string
+const initKeyListeners = () => {
+  document.addEventListener('keydown', (event) => {
+    if (isInputTarget(event)) {
+      return
     }
-  | {
-      type: 'component event'
-      event: any
-      time: string
-      data: any
+    switch (event.key) {
+      case 'k':
+        if (event.metaKey) {
+          event.preventDefault()
+        }
     }
-  | {
-      type: 'keydown'
+    postMessageToEditor({
+      type: 'keydown',
       event: {
-        key: string
-        metaKey: boolean
-        shiftKey: boolean
-        altKey: boolean
-      }
+        key: event.key,
+        metaKey: event.metaKey,
+        shiftKey: event.shiftKey,
+        altKey: event.altKey,
+      },
+    })
+  })
+  document.addEventListener('keyup', (event) => {
+    if (isInputTarget(event)) {
+      return
     }
-  | {
-      type: 'keyup'
+    postMessageToEditor({
+      type: 'keyup',
       event: {
-        key: string
-        metaKey: boolean
-        shiftKey: boolean
-        altKey: boolean
-      }
+        key: event.key,
+        metaKey: event.metaKey,
+        shiftKey: event.shiftKey,
+        altKey: event.altKey,
+      },
+    })
+  })
+  document.addEventListener('keypress', (event) => {
+    if (isInputTarget(event)) {
+      return
     }
-  | {
-      type: 'keypress'
+    postMessageToEditor({
+      type: 'keypress',
       event: {
-        key: string
-        metaKey: boolean
-        shiftKey: boolean
-        altKey: boolean
-      }
-    }
-  | { type: 'data'; data: ComponentData }
-  | {
-      type: 'selectionRect'
-      rect: ReturnType<typeof getRectData>
+        key: event.key,
+        metaKey: event.metaKey,
+        shiftKey: event.shiftKey,
+        altKey: event.altKey,
+      },
+    })
+  })
+}
+
+const registerActions = (
+  allActions: Record<string, PluginAction>,
+  packageName?: string,
+) => {
+  const actions: Record<string, PluginActionV2> = {}
+  Object.entries(allActions ?? {}).forEach(([name, action]) => {
+    if (isLegacyPluginAction(action)) {
+      // Legacy actions are self-registering. We need to execute them to register them
+      Function(action.handler)()
+      return
     }
-  | {
-      type: 'highlightRect'
-      rect: ReturnType<typeof getRectData>
+    // We need to convert the handler string into a real function
+    actions[name] = {
+      ...(action as PluginActionV2),
+      handler:
+        typeof action.handler === 'string'
+          ? (new Function(
+              'args, ctx',
+              `${action.handler}
+          return ${safeFunctionName(action.name)}(args, ctx)`,
+            ) as ActionHandlerV2)
+          : action.handler,
     }
-  | {
-      type: 'introspectionResult'
-      data: any
-      apiKey: string
+  })
+  window.toddle.actions[packageName ?? window.__toddle.project] = actions
+}
+
+const registerFormulas = (
+  allFormulas: Record<
+    string,
+    ToddleFormula | CodeFormula<FormulaHandlerV2> | CodeFormula<string>
+  >,
+  packageName?: string,
+) => {
+  const formulas: Record<string, PluginFormula<FormulaHandlerV2>> = {}
+  Object.entries(allFormulas ?? {}).forEach(([name, formula]) => {
+    if (
+      !isToddleFormula<FormulaHandlerV2 | string>(formula) &&
+      typeof formula.name === 'string' &&
+      formula.version === undefined
+    ) {
+      // Legacy formulas are self-registering. We need to execute them to register them
+      Function(formula.handler as unknown as string)()
+      return
+    } else if (!isToddleFormula<FormulaHandlerV2 | string>(formula)) {
+      // For code formulas we need to convert the handler string into a real function
+      formulas[name] = {
+        ...formula,
+        handler:
+          typeof formula.handler === 'string'
+            ? (new Function(
+                'args, ctx',
+                `${formula.handler}
+                return ${safeFunctionName(formula.name)}(args, ctx)`,
+              ) as FormulaHandlerV2)
+            : formula.handler,
+      }
+      return
     }
+    formulas[name] = formula as PluginFormula<FormulaHandlerV2>
+  })
+  window.toddle.formulas[packageName ?? window.__toddle.project] = formulas
+}
 
-const postMessageToEditor = (message: PostMessageType) => {
+const postMessageToEditor = (message: EditorPostMessageType) => {
   window.parent?.postMessage(message, '*')
 }