@nordcraft/runtime 1.0.51 → 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.51",
-"@nordcraft/std-lib": "1.0.51",
+"@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.51"
+"version": "1.0.52"
 }

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 {
@@ -67,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 =
   | {
@@ -159,6 +164,10 @@ type ToddlePreviewEvent =
         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)
@@ -450,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)
@@ -498,6 +515,12 @@ export const createRoot = (
             }
           }
 
+          requestAnimationFrame(() => {
+            scrollStateRestorer?.((nodeId) =>
+              document.querySelector(`[data-id="${nodeId}"]`),
+            )
+          })
+
           break
         }
         case 'components': {
@@ -914,6 +937,9 @@ export const createRoot = (
                 })
               }
               break
+            case undefined:
+              // TODO: Handle the case where the drag state is undefined
+              break
           }
           break
         case 'keydown':
@@ -1144,10 +1170,22 @@ export const createRoot = (
             }
           })
           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())
@@ -1269,6 +1307,7 @@ export const createRoot = (
       return
     }
 
+    const scrollStateRestorer = storeScrollState()
     let { Attributes, Variables, Contexts } = dataSignal.get()
     if (
       fastDeepEqual(ctx?.component.attributes, _component.attributes) === false
@@ -1632,6 +1671,9 @@ export const createRoot = (
     }
 
     ctx = newCtx
+    scrollStateRestorer((nodeId) =>
+      document.querySelector(`[data-id="${nodeId}"]`),
+    )
   }
 
   const createContext = (
@@ -1863,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(`
@@ -1875,7 +1917,7 @@ const insertHeadTags = (
           />
         `),
         )
-      case 'script':
+      case HeadTagTypes.Script:
         return insertOrReplaceHeadNode(
           id,
           document.createRange().createContextualFragment(`
@@ -1887,6 +1929,9 @@ const insertHeadTags = (
           ></script>
         `),
         )
+      default:
+        // TODO: handle style meta tags?
+        break
     }
   })
 }

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)
+  }