@nordcraft/runtime 1.0.87 → 1.0.89

package/src/components/renderComponent.ts

@@ -111,8 +111,7 @@ export function renderComponent({
         .subscribe((props) => {
           if (prev) {
             component.onAttributeChange?.actions?.forEach((action) => {
-              // eslint-disable-next-line @typescript-eslint/no-floating-promises
-              handleAction(
+              void handleAction(
                 action,
                 dataSignal.get(),
                 ctx,
@@ -143,8 +142,7 @@ export function renderComponent({
         })
     }
     component.onLoad?.actions?.forEach((action) => {
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      handleAction(action, dataSignal.get(), ctx)
+      void handleAction(action, dataSignal.get(), ctx)
     })
   })
   return rootElem

package/src/editor-preview.main.ts

@@ -1710,7 +1710,7 @@ const insertHeadTags = (
           document.createRange().createContextualFragment(`
           <link
             data-meta-id="${id}"
-            ${Object.entries(entry.attrs)
+            ${Object.entries(entry.attrs ?? {})
               .map(([key, value]) => `${key}="${applyFormula(value, context)}"`)
               .join(' ')}
           />
@@ -1722,10 +1722,10 @@ const insertHeadTags = (
           document.createRange().createContextualFragment(`
           <script
             data-meta-id="${id}"
-            ${Object.entries(entry.attrs)
+            ${Object.entries(entry.attrs ?? {})
               .map(([key, value]) => `${key}="${applyFormula(value, context)}"`)
               .join(' ')}
-          ></script>
+          >${applyFormula(entry.content ?? '', context)}</script>
         `),
         )
       case HeadTagTypes.Style:
@@ -1734,7 +1734,7 @@ const insertHeadTags = (
           document.createRange().createContextualFragment(`
           <style
             data-meta-id="${id}"
-            ${Object.entries(entry.attrs)
+            ${Object.entries(entry.attrs ?? {})
               .map(([key, value]) => `${key}="${applyFormula(value, context)}"`)
               .join(' ')}
           >

package/src/page.main.ts

@@ -16,6 +16,7 @@ import type {
   Toddle,
 } from '@nordcraft/core/dist/types'
 import { mapObject } from '@nordcraft/core/dist/utils/collections'
+import { VOID_HTML_ELEMENTS } from '@nordcraft/core/dist/utils/html'
 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'
@@ -359,22 +360,21 @@ const setupMetaUpdates = (
   component: Component,
   dataSignal: Signal<ComponentData>,
 ) => {
+  const getFormulaContext = (data: ComponentData) => ({
+    data,
+    component,
+    root: document,
+    package: undefined,
+    toddle: window.toddle,
+    env,
+  })
   // Handle dynamic updates of the document language
   const langFormula = component.route?.info?.language?.formula
   const dynamicLang = langFormula && langFormula.type !== 'value'
   if (dynamicLang) {
     dataSignal
-      .map<string | null>(() =>
-        component
-          ? applyFormula(langFormula, {
-              data: dataSignal.get(),
-              component,
-              root: document,
-              package: undefined,
-              toddle: window.toddle,
-              env,
-            })
-          : null,
+      .map((data) =>
+        component ? applyFormula(langFormula, getFormulaContext(data)) : null,
       )
       .subscribe((newLang) => {
         if (isDefined(newLang) && document.documentElement.lang !== newLang) {
@@ -388,17 +388,8 @@ const setupMetaUpdates = (
   const dynamicTitle = titleFormula && titleFormula.type !== 'value'
   if (dynamicTitle) {
     dataSignal
-      .map<string | null>(() =>
-        component
-          ? applyFormula(titleFormula, {
-              data: dataSignal.get(),
-              component,
-              root: document,
-              package: undefined,
-              toddle: window.toddle,
-              env,
-            })
-          : null,
+      .map((data) =>
+        component ? applyFormula(titleFormula, getFormulaContext(data)) : null,
       )
       .subscribe((newTitle) => {
         if (isDefined(newTitle) && document.title !== newTitle) {
@@ -411,10 +402,12 @@ const setupMetaUpdates = (
   const meta = component.route?.info?.meta
   const dynamicDescription =
     descriptionFormula && descriptionFormula.type !== 'value'
-  const dynamicMetaFormulas = Object.values(meta ?? {}).some((r) =>
-    Object.values(
-      r.attrs ?? {}, // fallback to make sure we don't crash on legacy values
-    ).some((a) => a.type !== 'value'),
+  const dynamicMetaFormulas = Object.values(meta ?? {}).some(
+    (r) =>
+      r.content?.type !== 'value' ||
+      Object.values(
+        r.attrs ?? {}, // fallback to make sure we don't crash on legacy values
+      ).some((a) => a.type !== 'value'),
   )
   if (dynamicDescription || dynamicMetaFormulas) {
     const findMetaElement = (name: string) =>
@@ -423,7 +416,11 @@ const setupMetaUpdates = (
       ) ?? null
 
     const updateMetaElement = (
-      entry: { tag: string; attrs: Record<string, string> },
+      entry: {
+        tag: string
+        attrs: Record<string, string>
+        content: string | undefined
+      },
       id?: string,
     ) => {
       let existingElement: HTMLElement | null = null
@@ -452,19 +449,18 @@ const setupMetaUpdates = (
         }
         existingElement!.setAttribute(key, value)
       })
+      if (
+        typeof entry.content === 'string' &&
+        !VOID_HTML_ELEMENTS.includes(entry.tag.toLowerCase())
+      ) {
+        existingElement.textContent = entry.content
+      }
     }
     if (dynamicDescription) {
       dataSignal
-        .map<string | null>((data) =>
+        .map((data) =>
           component
-            ? applyFormula(descriptionFormula, {
-                data,
-                component,
-                root: document,
-                package: undefined,
-                toddle: window.toddle,
-                env,
-              })
+            ? applyFormula(descriptionFormula, getFormulaContext(data))
             : null,
         )
         .subscribe((newDescription) => {
@@ -501,6 +497,7 @@ const setupMetaUpdates = (
                   property: 'og:description',
                   content: newDescription,
                 },
+                content: undefined,
               })
             }
           }
@@ -509,36 +506,37 @@ const setupMetaUpdates = (
     if (dynamicMetaFormulas) {
       Object.entries(meta ?? {})
         // Filter out meta tags that have no dynamic formulas
-        .filter(([_, entry]) =>
-          // fallback to make sure we don't crash on legacy values.
-          Object.values(entry.attrs ?? {}).some((a) => a.type !== 'value'),
+        .filter(
+          ([_, entry]) =>
+            // fallback to make sure we don't crash on legacy values.
+            entry.content?.type !== 'value' ||
+            Object.values(entry.attrs ?? {}).some((a) => a.type !== 'value'),
         )
         .forEach(([id, entry]) => {
           dataSignal
-            .map<Record<string, string>>((data) => {
+            .map((data) => {
+              const context = getFormulaContext(data)
               // Return the new values for all attributes (we assume they're strings)
               const values = Object.entries(entry.attrs ?? {}).reduce(
                 (agg, [key, formula]) =>
                   component
                     ? {
                         ...agg,
-                        [key]: applyFormula(formula, {
-                          data,
-                          component,
-                          root: document,
-                          package: undefined,
-                          toddle: window.toddle,
-                          env,
-                        }),
+                        [key]: applyFormula(formula, context),
                       }
                     : agg,
                 {},
               )
-              return values
+              return {
+                attrs: values,
+                content: entry.content
+                  ? applyFormula(entry.content, context)
+                  : undefined,
+              }
             })
-            .subscribe((attrs) =>
+            .subscribe(({ attrs, content }) =>
               // Update the meta tags with the new values
-              updateMetaElement({ tag: entry.tag, attrs }, id),
+              updateMetaElement({ tag: entry.tag, attrs, content }, id),
             )
         })
     }

package/src/styles/CustomPropertyStyleSheet.test.ts

@@ -121,7 +121,7 @@ describe('CustomPropertyStyleSheet', () => {
       '.my-class { --my-other-property: 512px; }',
     )
     instance.unregisterProperty('.my-class', '--my-other-property')
-    expect(instance.getStyleSheet().cssRules[0].cssText).toBe('.my-class {  }')
+    expect(instance.getStyleSheet().cssRules).toBeEmpty()
   })
 
   test('it unregisters a property with media queries', () => {
@@ -149,11 +149,6 @@ describe('CustomPropertyStyleSheet', () => {
         mediaQuery: { 'max-width': '600px' },
       },
     )
-    expect(instance.getStyleSheet().cssRules[0].cssText).toBe(
-      `\
-@media (max-width: 600px) {
-  .my-class-with-media {  }
-}`,
-    )
+    expect(instance.getStyleSheet().cssRules).toBeEmpty()
   })
 })

package/src/styles/CustomPropertyStyleSheet.ts

@@ -76,7 +76,6 @@ export class CustomPropertyStyleSheet {
     options?: Nullable<{
       mediaQuery?: Nullable<MediaQuery>
       startingStyle?: Nullable<boolean>
-      deepClean?: Nullable<boolean>
     }>,
   ): void {
     if (!this.ruleMap) {
@@ -97,7 +96,7 @@ export class CustomPropertyStyleSheet {
 
     // 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) {
+    if (rule.style.length === 0) {
       this.styleSheet.deleteRule(
         Array.from(this.ruleMap.keys()).indexOf(fullSelector),
       )

package/src/utils/BatchQueue.ts

@@ -3,13 +3,13 @@
  * This is more efficient than processing each callback in a separate requestAnimationFrame due to the overhead.
  */
 export class BatchQueue {
+  constructor() {}
   private batchQueue: Array<() => void> = []
   private isProcessing = false
   private processBatch() {
     if (this.isProcessing) return
     this.isProcessing = true
-
-    requestAnimationFrame(() => {
+    queueMicrotask(() => {
       while (this.batchQueue.length > 0) {
         const callback = this.batchQueue.shift()
         callback?.()

package/src/utils/formulaHasValue.ts

@@ -0,0 +1,7 @@
+import type { Formula } from '@nordcraft/core/dist/formula/formula'
+import { isDefined } from '@nordcraft/core/dist/utils/util'
+
+export const formulaHasValue = (
+  formula: Formula | undefined,
+): formula is Formula =>
+  isDefined(formula) && !(formula.type === 'value' && !isDefined(formula.value))

package/src/utils/subscribeCustomProperty.ts

@@ -2,10 +2,9 @@ import type { Signal } from '../signal/signal'
 
 import { CUSTOM_PROPERTIES_STYLESHEET_ID } from '@nordcraft/core/dist/styling/theme.const'
 import type { StyleVariant } from '@nordcraft/core/dist/styling/variantSelector'
-import type { Runtime } from '@nordcraft/core/dist/types'
 import { CustomPropertyStyleSheet } from '../styles/CustomPropertyStyleSheet'
 
-let customPropertiesStylesheet: CustomPropertyStyleSheet | undefined
+export let customPropertiesStylesheet: CustomPropertyStyleSheet | undefined
 
 export function subscribeCustomProperty({
   selector,
@@ -13,14 +12,12 @@ export function subscribeCustomProperty({
   signal,
   variant,
   root,
-  runtime,
 }: {
   selector: string
   customPropertyName: string
   signal: Signal<string>
   variant?: StyleVariant
   root: Document | ShadowRoot
-  runtime: Runtime
 }) {
   customPropertiesStylesheet ??= new CustomPropertyStyleSheet(
     root,
@@ -43,7 +40,6 @@ export function subscribeCustomProperty({
           selector,
           customPropertyName,
           {
-            deepClean: runtime === 'preview',
             mediaQuery: variant?.mediaQuery,
             startingStyle: variant?.startingStyle,
           },