@nordcraft/runtime 1.0.50 → 1.0.52

package/dist/utils/createFormulaCache.js

@@ -39,7 +39,7 @@ function getFormulaCacheConfig(formula, component) {
         if (!op) {
             return;
         }
-        if (op.type == 'path' && op.path[0] !== 'Args') {
+        if (op.type === 'path' && op.path[0] !== 'Args') {
             paths.push(op.path);
         }
         if (Array.isArray(op?.arguments)) {

package/dist/utils/createFormulaCache.js.map

@@ -1 +1 @@
-{"version":3,"file":"createFormulaCache.js","sourceRoot":"","sources":["../../src/utils/createFormulaCache.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"createFormulaCache.js","sourceRoot":"","sources":["../../src/utils/createFormulaCache.ts"],"names":[],"mappings":"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"}

package/dist/utils/storeScrollState.d.ts

@@ -0,0 +1,2 @@
+export declare const storeScrollState: (key?: string, querySelector?: string, comparerFn?: (node: Element) => string | null) => (selectorFn: (id: string) => HTMLElement | null) => void;
+export declare const getScrollStateRestorer: (key: string) => (selectorFn: (id: string) => HTMLElement | null) => void;

package/dist/utils/storeScrollState.js

@@ -0,0 +1,39 @@
+export const storeScrollState = (key = '', querySelector = '[data-id]', comparerFn = (node) => node.getAttribute('data-id')) => {
+    const scrollPositions = {};
+    Array.from(document.querySelectorAll(querySelector)).forEach((node) => {
+        const nodeId = comparerFn(node);
+        if (nodeId && (node.scrollTop || node.scrollLeft)) {
+            scrollPositions[nodeId] = {
+                y: node.scrollTop,
+                x: node.scrollLeft,
+            };
+        }
+    });
+    // Always store window scroll position as well
+    scrollPositions['__window'] = {
+        y: window.scrollY,
+        x: window.scrollX,
+    };
+    sessionStorage.setItem(`scroll-position(${key})`, JSON.stringify(scrollPositions));
+    return getScrollStateRestorer(key);
+};
+export const getScrollStateRestorer = (key) => (selectorFn) => {
+    const { __window, ...rest } = JSON.parse(sessionStorage.getItem(`scroll-position(${key})`) ?? '{}');
+    if (!__window) {
+        return;
+    }
+    Object.entries(rest).forEach(([nodeId, scrollPosition]) => {
+        const domNode = selectorFn(nodeId);
+        if (!domNode) {
+            return;
+        }
+        if (scrollPosition?.y) {
+            domNode.scrollTop = scrollPosition.y;
+        }
+        if (scrollPosition?.x) {
+            domNode.scrollLeft = scrollPosition.x;
+        }
+    });
+    window.scrollTo(__window.x, __window.y);
+};
+//# sourceMappingURL=storeScrollState.js.map

package/dist/utils/storeScrollState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"storeScrollState.js","sourceRoot":"","sources":["../../src/utils/storeScrollState.ts"],"names":[],"mappings":"AASA,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,MAAc,EAAE,EAChB,aAAa,GAAG,WAAW,EAC3B,aAAa,CAAC,IAAa,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAC5D,EAAE;IACF,MAAM,eAAe,GAAoB,EAAE,CAAA;IAC3C,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAc,aAAa,CAAC,CAAC,CAAC,OAAO,CACvE,CAAC,IAAI,EAAE,EAAE;QACP,MAAM,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC,CAAA;QAC/B,IAAI,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC;YAClD,eAAe,CAAC,MAAM,CAAC,GAAG;gBACxB,CAAC,EAAE,IAAI,CAAC,SAAS;gBACjB,CAAC,EAAE,IAAI,CAAC,UAAU;aACnB,CAAA;QACH,CAAC;IACH,CAAC,CACF,CAAA;IAED,8CAA8C;IAC9C,eAAe,CAAC,UAAU,CAAC,GAAG;QAC5B,CAAC,EAAE,MAAM,CAAC,OAAO;QACjB,CAAC,EAAE,MAAM,CAAC,OAAO;KAClB,CAAA;IAED,cAAc,CAAC,OAAO,CACpB,mBAAmB,GAAG,GAAG,EACzB,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,CAChC,CAAA;IAED,OAAO,sBAAsB,CAAC,GAAG,CAAC,CAAA;AACpC,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,sBAAsB,GACjC,CAAC,GAAW,EAAE,EAAE,CAAC,CAAC,UAA8C,EAAE,EAAE;IAClE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,CACtC,cAAc,CAAC,OAAO,CAAC,mBAAmB,GAAG,GAAG,CAAC,IAAI,IAAI,CACvC,CAAA;IACpB,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAM;IACR,CAAC;IAED,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,cAAc,CAAC,EAAE,EAAE;QACxD,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,CAAC,CAAA;QAClC,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAM;QACR,CAAC;QAED,IAAI,cAAc,EAAE,CAAC,EAAE,CAAC;YACtB,OAAO,CAAC,SAAS,GAAG,cAAc,CAAC,CAAC,CAAA;QACtC,CAAC;QACD,IAAI,cAAc,EAAE,CAAC,EAAE,CAAC;YACtB,OAAO,CAAC,UAAU,GAAG,cAAc,CAAC,CAAC,CAAA;QACvC,CAAC;IACH,CAAC,CAAC,CAAA;IAEF,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAA;AACzC,CAAC,CAAA"}

package/package.json

@@ -4,8 +4,8 @@
 "type": "module",
 "homepage": "https://github.com/nordcraftengine/nordcraft",
 "dependencies": {
-"@nordcraft/core": "1.0.50",
-"@nordcraft/std-lib": "1.0.50",
+"@nordcraft/core": "1.0.52",
+"@nordcraft/std-lib": "1.0.52",
 "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.50"
+"version": "1.0.52"
 }

package/src/context/subscribeToContext.ts

@@ -25,7 +25,7 @@ export function subscribeToContext(
           if (!formulaDataSignal) {
             // eslint-disable-next-line no-console
             console.warn(
-              `Provider ${providerName} does not expose a formula named "${formulaName}". Available formulas are: ["${Object.keys(
+              `Component error(${component.name}): Provider ${providerName} does not expose a formula named "${formulaName}". Available formulas are: ["${Object.keys(
                 provider.formulaDataSignals,
               ).join('", "')}"]`,
             )
@@ -63,7 +63,7 @@ export function subscribeToContext(
         if (!testProvider) {
           // eslint-disable-next-line no-console
           console.error(
-            `Could not find provider "${providerName}". No such component exist.`,
+            `Component error(${component.name}): Could not find provider "${providerName}". No such component exist.`,
           )
           return
         }
@@ -116,7 +116,7 @@ export function subscribeToContext(
                 if (!formula) {
                   // eslint-disable-next-line no-console
                   console.warn(
-                    `Could not find formula "${formulaName}" in component "${providerName}"`,
+                    `Component error(${component.name}): Could not find formula "${formulaName}" in provider "${providerName}"`,
                   )
                   return [formulaName, null]
                 }

package/src/custom-element/ToddleComponent.ts

@@ -31,11 +31,11 @@ export class ToddleComponent extends HTMLElement {
   #ctx: ComponentContext
   #shadowRoot: ShadowRoot
   #signal: Signal<ComponentData>
-  #files: { themes: Theme[] }
+  #files: { themes: Record<string, Theme> }
 
   constructor(
     component: Component,
-    options: { components: Component[]; themes: Theme[] },
+    options: { components: Component[]; themes: Record<string, Theme> },
     toddle: Toddle<LocationSignal, never>,
   ) {
     super()
@@ -175,7 +175,9 @@ export class ToddleComponent extends HTMLElement {
     const styles = createStylesheet(
       this.#ctx.component,
       this.#ctx.components,
-      this.#files.themes ? Object.values(this.#files.themes)[0] : defaultTheme,
+      Object.entries(this.#files.themes ?? {}).length > 0
+        ? this.#files.themes
+        : { defaultTheme },
       { includeResetStyle: true, createFontFaces: false },
     )
     const stylesElem = document.createElement('style')

package/src/custom-element/defineComponents.ts

@@ -27,7 +27,7 @@ export const defineComponents = (
   componentNames: string[],
   options: {
     components: Component[]
-    themes: Theme[]
+    themes: Record<string, Theme>
   },
   toddle: Toddle<LocationSignal, never>,
 ) => {

package/src/editor-preview.main.ts

@@ -3,12 +3,13 @@
 /* eslint-disable no-case-declarations */
 /* eslint-disable no-fallthrough */
 import { isLegacyApi } from '@nordcraft/core/dist/api/api'
-import type {
-  AnimationKeyframe,
-  Component,
-  ComponentData,
-  MetaEntry,
-  StyleVariant,
+import {
+  HeadTagTypes,
+  type AnimationKeyframe,
+  type Component,
+  type ComponentData,
+  type MetaEntry,
+  type StyleVariant,
 } from '@nordcraft/core/dist/component/component.types'
 import { isPageComponent } from '@nordcraft/core/dist/component/isPageComponent'
 import type {
@@ -25,8 +26,7 @@ import {
 import { valueFormula } from '@nordcraft/core/dist/formula/formulaUtils'
 import { getClassName } from '@nordcraft/core/dist/styling/className'
 import type { OldTheme, Theme } from '@nordcraft/core/dist/styling/theme'
-import { getThemeCss } from '@nordcraft/core/dist/styling/theme'
-import { theme } from '@nordcraft/core/dist/styling/theme.const'
+import { getThemeCss, renderTheme } from '@nordcraft/core/dist/styling/theme'
 import type {
   ActionHandler,
   ActionHandlerV2,
@@ -68,6 +68,10 @@ import { createFormulaCache } from './utils/createFormulaCache'
 import { getNodeAndAncestors, isNodeOrAncestorConditional } from './utils/nodes'
 import { omitSubnodeStyleForComponent } from './utils/omitStyle'
 import { rectHasPoint } from './utils/rectHasPoint'
+import {
+  getScrollStateRestorer,
+  storeScrollState,
+} from './utils/storeScrollState'
 
 type ToddlePreviewEvent =
   | {
@@ -109,7 +113,7 @@ type ToddlePreviewEvent =
       type: 'global_actions'
       actions: Record<string, PluginActionV2 | PluginAction>
     }
-  | { type: 'theme'; theme: Theme | OldTheme }
+  | { type: 'theme'; theme: Record<string, OldTheme | Theme> }
   | { type: 'mode'; mode: 'design' | 'test' }
   | { type: 'attrs'; attrs: Record<string, unknown> }
   | { type: 'selection'; selectedNodeId: string | null }
@@ -152,7 +156,18 @@ type ToddlePreviewEvent =
         | undefined
       fillMode: 'none' | 'forwards' | 'backwards' | 'both' | undefined
     }
-  | { type: 'preview_style'; styles: Record<string, string> | null }
+  | {
+      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)
@@ -305,7 +320,6 @@ export const createRoot = (
     return false
   }
 
-  insertTheme(document.head, theme)
   const dataSignal = signal<ComponentData>({
     Location: {
       query: {},
@@ -445,8 +459,16 @@ export const createRoot = (
           if (!message.data.component) {
             return
           }
-          if (message.data.component.name != component?.name) {
+          let scrollStateRestorer:
+            | ReturnType<typeof getScrollStateRestorer>
+            | undefined
+
+          if (message.data.component.name !== component?.name) {
+            storeScrollState(component?.name)
             showSignal.cleanSubscribers()
+            scrollStateRestorer = getScrollStateRestorer(
+              message.data.component.name,
+            )
           }
 
           component = updateComponentLinks(message.data.component)
@@ -493,6 +515,12 @@ export const createRoot = (
             }
           }
 
+          requestAnimationFrame(() => {
+            scrollStateRestorer?.((nodeId) =>
+              document.querySelector(`[data-id="${nodeId}"]`),
+            )
+          })
+
           break
         }
         case 'components': {
@@ -909,6 +937,9 @@ export const createRoot = (
                 })
               }
               break
+            case undefined:
+              // TODO: Handle the case where the drag state is undefined
+              break
           }
           break
         case 'keydown':
@@ -1051,7 +1082,7 @@ export const createRoot = (
           })
           break
         case 'preview_style':
-          const { styles: previewStyleStyles } = message.data
+          const { styles: previewStyleStyles, theme } = message.data
           cancelAnimationFrame(previewStyleAnimationFrame)
           previewStyleAnimationFrame = requestAnimationFrame(() => {
             // Update or create a new style tag and set the given styles with important priority
@@ -1091,19 +1122,70 @@ export const createRoot = (
               }
             }
 
-            const previewStyles = Object.entries(previewStyleStyles)
-              .map(([key, value]) => `${key}: ${value} !important;`)
-              .join('\n')
-            styleTag.innerHTML = `[data-id="${selectedNodeId}"]${pseudoElement}, [data-id="${selectedNodeId}"] ~ [data-id^="${selectedNodeId}("]${pseudoElement} {
+            // If theme property preview, then override happens at root level and with reasonable specificity.
+            // Otherwise, force (!important) the style directly on the element.
+            if (theme) {
+              theme.value.propertyDefinitions = Object.fromEntries(
+                Object.entries(theme.value.propertyDefinitions ?? {})
+                  .filter(([key]) => previewStyleStyles[key])
+                  .map(([key, val]) => [
+                    key,
+                    { ...val, value: previewStyleStyles[key] },
+                  ]),
+              )
+              const cssBlocks: string[] = []
+              if (theme.value.default) {
+                cssBlocks.push(renderTheme(`:host, :root`, theme.value))
+              }
+              if (theme.value.defaultDark) {
+                cssBlocks.push(
+                  renderTheme(
+                    `:host, :root`,
+                    theme.value,
+                    '@media (prefers-color-scheme: dark)',
+                  ),
+                )
+              }
+              if (theme.value.defaultLight) {
+                cssBlocks.push(
+                  renderTheme(
+                    `:host, :root`,
+                    theme.value,
+                    '@media (prefers-color-scheme: light)',
+                  ),
+                )
+              }
+              cssBlocks.push(
+                renderTheme(`[data-theme~="${theme.key}"]`, theme.value),
+              )
+              styleTag.innerHTML = cssBlocks.join('\n')
+            } else {
+              const previewStyles = Object.entries(previewStyleStyles)
+                .map(([key, value]) => `${key}: ${value} !important;`)
+                .join('\n')
+              styleTag.innerHTML = `[data-id="${selectedNodeId}"]${pseudoElement}, [data-id="${selectedNodeId}"] ~ [data-id^="${selectedNodeId}("]${pseudoElement} {
     ${previewStyles}
     transition: none !important;
   }`
+            }
           })
           break
+        case 'preview_theme': {
+          const { theme } = message.data
+          if (theme) {
+            document.body.setAttribute('data-theme', theme)
+          } else {
+            document.body.removeAttribute('data-theme')
+          }
+        }
       }
     },
   )
 
+  window.addEventListener('beforeunload', () => {
+    storeScrollState(component?.name)
+  })
+
   const updateStyle = () => {
     if (component) {
       insertStyles(document.head, component, getAllComponents())
@@ -1225,6 +1307,7 @@ export const createRoot = (
       return
     }
 
+    const scrollStateRestorer = storeScrollState()
     let { Attributes, Variables, Contexts } = dataSignal.get()
     if (
       fastDeepEqual(ctx?.component.attributes, _component.attributes) === false
@@ -1588,6 +1671,9 @@ export const createRoot = (
     }
 
     ctx = newCtx
+    scrollStateRestorer((nodeId) =>
+      document.querySelector(`[data-id="${nodeId}"]`),
+    )
   }
 
   const createContext = (
@@ -1819,7 +1905,7 @@ const insertHeadTags = (
   // Skip anything that is not <link> or <script> tags, as they don't have any influence on the preview
   Object.entries(entries).forEach(([id, entry]) => {
     switch (entry.tag) {
-      case 'link':
+      case HeadTagTypes.Link:
         return insertOrReplaceHeadNode(
           id,
           document.createRange().createContextualFragment(`
@@ -1831,7 +1917,7 @@ const insertHeadTags = (
           />
         `),
         )
-      case 'script':
+      case HeadTagTypes.Script:
         return insertOrReplaceHeadNode(
           id,
           document.createRange().createContextualFragment(`
@@ -1843,6 +1929,9 @@ const insertHeadTags = (
           ></script>
         `),
         )
+      default:
+        // TODO: handle style meta tags?
+        break
     }
   })
 }
@@ -1882,12 +1971,15 @@ function getNodeId(component: Component, path: string[]) {
   return getId(path, 'root')
 }
 
-const insertTheme = (parent: HTMLElement, theme: Theme | OldTheme) => {
+const insertTheme = (
+  parent: HTMLElement,
+  themes: Record<string, OldTheme | Theme>,
+) => {
   document.getElementById('theme-style')?.remove()
   const styleElem = document.createElement('style')
   styleElem.setAttribute('type', 'text/css')
   styleElem.setAttribute('id', 'theme-style')
-  styleElem.innerHTML = getThemeCss(theme, {
+  styleElem.innerHTML = getThemeCss(themes, {
     includeResetStyle: false,
     createFontFaces: true,
   })

package/src/events/handleAction.ts

@@ -442,18 +442,21 @@ export function handleAction(
             const args = (action.arguments ?? []).reduce<
               Record<string, unknown>
             >(
-              (args, arg) => ({
-                ...args,
-                [arg.name]: applyFormula(arg.formula, {
-                  data,
-                  component: ctx.component,
-                  formulaCache: ctx.formulaCache,
-                  root: ctx.root,
-                  package: ctx.package,
-                  toddle: ctx.toddle,
-                  env: ctx.env,
-                }),
-              }),
+              (args, arg) =>
+                arg
+                  ? {
+                      ...args,
+                      [arg.name]: applyFormula(arg.formula, {
+                        data,
+                        component: ctx.component,
+                        formulaCache: ctx.formulaCache,
+                        root: ctx.root,
+                        package: ctx.package,
+                        toddle: ctx.toddle,
+                        env: ctx.env,
+                      }),
+                    }
+                  : args,
               {},
             )
             const result = newAction.handler?.(
@@ -496,7 +499,7 @@ export function handleAction(
             }
             // First evaluate any arguments (input) to the action
             const args = action.arguments?.map((arg) =>
-              applyFormula(arg.formula, {
+              applyFormula(arg?.formula, {
                 data,
                 component: ctx.component,
                 formulaCache: ctx.formulaCache,

package/src/utils/createFormulaCache.ts

@@ -53,7 +53,7 @@ function getFormulaCacheConfig(formula: Formula, component: Component) {
     if (!op) {
       return
     }
-    if (op.type == 'path' && op.path[0] !== 'Args') {
+    if (op.type === 'path' && op.path[0] !== 'Args') {
       paths.push(op.path)
     }
     if (Array.isArray((op as any)?.arguments)) {

package/src/utils/storeScrollState.ts

@@ -0,0 +1,66 @@
+interface ScrollPosition {
+  x: number
+  y: number
+}
+
+type ScrollPositionKey = '__window' | string
+
+type ScrollPositions = Partial<Record<ScrollPositionKey, ScrollPosition>>
+
+export const storeScrollState = (
+  key: string = '',
+  querySelector = '[data-id]',
+  comparerFn = (node: Element) => node.getAttribute('data-id'),
+) => {
+  const scrollPositions: ScrollPositions = {}
+  Array.from(document.querySelectorAll<HTMLElement>(querySelector)).forEach(
+    (node) => {
+      const nodeId = comparerFn(node)
+      if (nodeId && (node.scrollTop || node.scrollLeft)) {
+        scrollPositions[nodeId] = {
+          y: node.scrollTop,
+          x: node.scrollLeft,
+        }
+      }
+    },
+  )
+
+  // Always store window scroll position as well
+  scrollPositions['__window'] = {
+    y: window.scrollY,
+    x: window.scrollX,
+  }
+
+  sessionStorage.setItem(
+    `scroll-position(${key})`,
+    JSON.stringify(scrollPositions),
+  )
+
+  return getScrollStateRestorer(key)
+}
+
+export const getScrollStateRestorer =
+  (key: string) => (selectorFn: (id: string) => HTMLElement | null) => {
+    const { __window, ...rest } = JSON.parse(
+      sessionStorage.getItem(`scroll-position(${key})`) ?? '{}',
+    ) as ScrollPositions
+    if (!__window) {
+      return
+    }
+
+    Object.entries(rest).forEach(([nodeId, scrollPosition]) => {
+      const domNode = selectorFn(nodeId)
+      if (!domNode) {
+        return
+      }
+
+      if (scrollPosition?.y) {
+        domNode.scrollTop = scrollPosition.y
+      }
+      if (scrollPosition?.x) {
+        domNode.scrollLeft = scrollPosition.x
+      }
+    })
+
+    window.scrollTo(__window.x, __window.y)
+  }