@nordcraft/runtime 1.0.63 → 1.0.64

package/package.json

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

package/src/editor-preview.main.ts

@@ -26,7 +26,11 @@ import {
 } from '@nordcraft/core/dist/formula/formulaTypes'
 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 {
+  getThemeCss,
+  getThemeEntries,
+  renderThemeValues,
+} from '@nordcraft/core/dist/styling/theme'
 import type { StyleVariant } from '@nordcraft/core/dist/styling/variantSelector'
 import type {
   ActionHandler,
@@ -190,6 +194,7 @@ const EMPTY_COMPONENT_DATA: ComponentData = {
   },
   Attributes: {},
   Variables: {},
+  Apis: {},
 }
 
 // imported by "/.toddle/preview" (see worker/src/preview.ts)
@@ -272,7 +277,11 @@ export const createRoot = (
             | ReturnType<typeof getScrollStateRestorer>
             | undefined
 
-          if (message.data.component.name !== component?.name) {
+          const switchComponent =
+            message.data.component.name !== component?.name
+          // Re-initialize state, subscribers, signals and ctx when switching component
+          // But only if a component was already loaded
+          if (switchComponent && component) {
             // Store scroll state for the previous component
             storeScrollState(component?.name)
             // Remove all subscribers from the previous showSignal
@@ -289,6 +298,7 @@ export const createRoot = (
             setupDataSignalSubscribers()
             // Re-initialize the data signal for the new component
             ctxDataSignal?.destroy()
+            ctx = null
           }
 
           component = updateComponentLinks(message.data.component)
@@ -310,7 +320,8 @@ export const createRoot = (
 
           dataSignal.update((data) => {
             const newData: ComponentData = {
-              ...data,
+              // When switching component, reset data to empty API data etc.
+              ...(switchComponent ? EMPTY_COMPONENT_DATA : data),
               Location: data.Location
                 ? {
                     ...data.Location,
@@ -950,33 +961,47 @@ export const createRoot = (
                   .filter(([key]) => previewStyleStyles[key])
                   .map(([key, val]) => [
                     key,
-                    { ...val, value: previewStyleStyles[key] },
+                    {
+                      ...val,
+                      values: {
+                        ...val.values,
+                        [theme.key]: previewStyleStyles[key],
+                      },
+                    },
                   ]),
               )
               const cssBlocks: string[] = []
-              if (theme.value.default) {
-                cssBlocks.push(renderTheme(`:host, :root`, theme.value))
+              if (theme.key === theme.value.default) {
+                cssBlocks.push(
+                  renderThemeValues(
+                    `:host, :root`,
+                    getThemeEntries(theme.value, theme.key),
+                  ),
+                )
               }
-              if (theme.value.defaultDark) {
+              if (theme.key === theme.value.defaultDark) {
                 cssBlocks.push(
-                  renderTheme(
+                  renderThemeValues(
                     `:host, :root`,
-                    theme.value,
+                    getThemeEntries(theme.value, theme.key),
                     '@media (prefers-color-scheme: dark)',
                   ),
                 )
               }
-              if (theme.value.defaultLight) {
+              if (theme.key === theme.value.defaultLight) {
                 cssBlocks.push(
-                  renderTheme(
+                  renderThemeValues(
                     `:host, :root`,
-                    theme.value,
+                    getThemeEntries(theme.value, theme.key),
                     '@media (prefers-color-scheme: light)',
                   ),
                 )
               }
               cssBlocks.push(
-                renderTheme(`[data-theme~="${theme.key}"]`, theme.value),
+                renderThemeValues(
+                  `[data-theme~="${theme.key}"]`,
+                  getThemeEntries(theme.value, theme.key),
+                ),
               )
               styleTag.innerHTML = cssBlocks.join('\n')
             } else {