@nordcraft/core 1.0.93 → 1.0.95

package/src/formula/formula.ts

@@ -9,6 +9,7 @@ import type {
   Runtime,
   Toddle,
 } from '../types'
+import { measure } from '../utils/measure'
 import { isDefined, toBoolean } from '../utils/util'
 import { type PluginFormula, type ToddleFormula } from './formulaTypes'
 
@@ -38,13 +39,13 @@ export interface FunctionOperation extends BaseOperation {
   name: string
   display_name?: Nullable<string>
   package?: Nullable<string>
-  arguments: FunctionArgument[]
+  arguments?: Nullable<FunctionArgument[]>
   variableArguments?: Nullable<boolean>
 }
 
 export interface RecordOperation extends BaseOperation {
   type: 'record'
-  entries: FunctionArgument[]
+  entries?: Nullable<FunctionArgument[]>
 }
 
 export interface ObjectOperation extends BaseOperation {
@@ -54,23 +55,23 @@ export interface ObjectOperation extends BaseOperation {
 
 export interface ArrayOperation extends BaseOperation {
   type: 'array'
-  arguments: Array<{ formula: Formula }>
+  arguments?: Nullable<Array<{ formula: Formula }>>
 }
 
 export interface OrOperation extends BaseOperation {
   type: 'or'
-  arguments: Array<{ formula: Formula }>
+  arguments?: Nullable<Array<{ formula: Formula }>>
 }
 
 export interface AndOperation extends BaseOperation {
   type: 'and'
-  arguments: Array<{ formula: Formula }>
+  arguments?: Nullable<Array<{ formula: Formula }>>
 }
 
 export interface ApplyOperation extends BaseOperation {
   type: 'apply'
   name: string
-  arguments: FunctionArgument[]
+  arguments?: Nullable<FunctionArgument[]>
 }
 
 export interface ValueOperation extends BaseOperation {
@@ -82,10 +83,12 @@ export type ValueOperationValue = string | number | boolean | null | object
 
 export interface SwitchOperation extends BaseOperation {
   type: 'switch'
-  cases: Array<{
-    condition: Formula
-    formula: Formula
-  }>
+  cases?: Nullable<
+    Array<{
+      condition: Formula
+      formula: Formula
+    }>
+  >
   default: Formula
 }
 
@@ -204,7 +207,7 @@ export function applyFormula(
         return input
       }
       case 'switch': {
-        for (const branch of formula.cases) {
+        for (const branch of formula.cases ?? []) {
           if (toBoolean(applyFormula(branch.condition, ctx))) {
             return applyFormula(branch.formula, ctx)
           }
@@ -212,7 +215,7 @@ export function applyFormula(
         return applyFormula(formula.default, ctx)
       }
       case 'or': {
-        for (const entry of formula.arguments) {
+        for (const entry of formula.arguments ?? []) {
           if (toBoolean(applyFormula(entry.formula, ctx))) {
             return true
           }
@@ -220,7 +223,7 @@ export function applyFormula(
         return false
       }
       case 'and': {
-        for (const entry of formula.arguments) {
+        for (const entry of formula.arguments ?? []) {
           if (!toBoolean(applyFormula(entry.formula, ctx))) {
             return false
           }
@@ -228,6 +231,10 @@ export function applyFormula(
         return true
       }
       case 'function': {
+        const stopMeasure = measure(`Formula: ${formula.name}`, {
+          formula,
+          component: ctx.component?.name,
+        })
         const packageName = formula.package ?? ctx.package ?? undefined
         const newFunc = (
           ctx.toddle ??
@@ -235,7 +242,9 @@ export function applyFormula(
         )?.getCustomFormula(formula.name, packageName)
         if (isDefined(newFunc)) {
           ctx.package = packageName
-          const args = formula.arguments.reduce<Record<string, unknown>>(
+          const args = (formula.arguments ?? []).reduce<
+            Record<string, unknown>
+          >(
             (args, arg, i) => ({
               ...args,
               [arg.name ?? `${i}`]: arg.isFunction
@@ -271,6 +280,8 @@ export function applyFormula(
               console.error(e)
             }
             return null
+          } finally {
+            stopMeasure()
           }
         } else {
           // Lookup legacy formula
@@ -301,6 +312,8 @@ export function applyFormula(
                 console.error(e)
               }
               return null
+            } finally {
+              stopMeasure()
             }
           }
         }
@@ -323,13 +336,13 @@ export function applyFormula(
         )
       case 'record': // object used to be called record, there are still examples in the wild.
         return Object.fromEntries(
-          formula.entries.map((entry) => [
+          (formula.entries ?? []).map((entry) => [
             entry.name,
             applyFormula(entry.formula, ctx),
           ]),
         )
       case 'array':
-        return formula.arguments.map((entry) =>
+        return (formula.arguments ?? []).map((entry) =>
           applyFormula(entry.formula, ctx),
         )
       case 'apply': {
@@ -343,8 +356,12 @@ export function applyFormula(
           }
           return null
         }
+        const stopMeasure = measure(`Formula: ${componentFormula.name}`, {
+          formula,
+          component: ctx.component?.name,
+        })
         const Input = Object.fromEntries(
-          formula.arguments.map((arg) =>
+          (formula.arguments ?? []).map((arg) =>
             arg.isFunction
               ? [
                   arg.name,
@@ -371,6 +388,7 @@ export function applyFormula(
         const cache = ctx.formulaCache?.[formula.name]?.get(data)
 
         if (cache?.hit) {
+          stopMeasure({ cache: 'hit' })
           return cache.data
         } else {
           const result = applyFormula(componentFormula.formula, {
@@ -378,6 +396,7 @@ export function applyFormula(
             data,
           })
           ctx.formulaCache?.[formula.name]?.set(data, result)
+          stopMeasure({ cache: 'miss' })
           return result
         }
       }

package/src/formula/formulaUtils.ts

@@ -67,7 +67,7 @@ export function* getFormulasInFormula<Handler>({
     case 'value':
       break
     case 'record':
-      for (const [key, entry] of formula.entries.entries()) {
+      for (const [key, entry] of (formula.entries ?? []).entries()) {
         yield* getFormulasInFormula({
           formula: entry.formula,
           globalFormulas,
@@ -148,7 +148,7 @@ export function* getFormulasInFormula<Handler>({
       }
       break
     case 'switch':
-      for (const [key, c] of formula.cases.entries()) {
+      for (const [key, c] of formula.cases?.entries() ?? []) {
         yield* getFormulasInFormula({
           formula: c.condition,
           globalFormulas,

package/src/styling/customProperty.ts

@@ -129,15 +129,15 @@ const FALLBACK_VALUES: Record<CssSyntax | CssCustomSyntax, string> = {
   angle: '0deg',
   time: '0s',
   resolution: '0dpi',
-  'custom-ident': 'none',
+  'custom-ident': '',
   string: '""',
   image: 'none',
   url: 'none',
   'transform-function': 'none',
   'transform-list': 'none',
   integer: '0',
-  'font-family': 'initial',
-  '*': 'initial',
+  'font-family': 'sans-serif',
+  '*': '',
 }
 
 export const appendUnit = (value: any, unit: Nullable<string>) =>

package/src/utils/measure.ts

@@ -0,0 +1,59 @@
+const globalScope: any = typeof globalThis !== 'undefined' ? globalThis : window
+globalScope.__nc_measure_max_depth = 10
+globalScope.__nc_measure_enabled =
+  typeof sessionStorage !== 'undefined' &&
+  sessionStorage.getItem('__nc_measure') === 'true'
+
+globalScope.__nc_enableMeasure = (enabled = true, maxDepth = 10) => {
+  if (enabled) {
+    sessionStorage.setItem('__nc_measure', 'true')
+  } else {
+    sessionStorage.removeItem('__nc_measure')
+  }
+  globalScope.__nc_measure_enabled = enabled
+  globalScope.__nc_measure_max_depth = maxDepth
+}
+
+let measureCount = 0
+const STACK: string[] = []
+const NOOP = () => {}
+
+export const measure = (key: string, details: Record<string, unknown>) => {
+  if (!globalScope.__nc_measure_enabled) {
+    return NOOP
+  }
+
+  const selfIndex = measureCount++
+  if (STACK.length >= globalScope.__nc_measure_max_depth) {
+    return NOOP
+  }
+
+  const start = performance.now()
+  STACK.push(key)
+
+  return (extraDetails?: Record<string, unknown>) => {
+    const end = performance.now()
+    const mergedDetails = extraDetails
+      ? { ...details, ...extraDetails }
+      : details
+
+    performance.measure(key, {
+      start,
+      end,
+      detail: {
+        devtools: {
+          dataType: 'track-entry',
+          track: 'Nordcraft devtools',
+          properties: [
+            ...Object.entries(mergedDetails).map(([k, v]) => [k, String(v)]),
+            ['Stack', STACK.join(' > ')],
+            ['Measure index', selfIndex],
+            ['Sub-measures', measureCount - selfIndex],
+          ],
+          tooltipText: `${selfIndex}. ${key}`,
+        },
+      },
+    })
+    STACK.pop()
+  }
+}