@json-layout/core 0.22.0 → 0.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-layout/core",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "description": "Compilation and state management utilities for JSON Layout.",
   "type": "module",
   "exports": {
@@ -68,8 +68,7 @@
     "debug": "^4.3.4",
     "immer": "^10.0.3",
     "magicast": "^0.3.3",
-    "markdown-it": "^13.0.2",
-    "mitt": "^3.0.1"
+    "markdown-it": "^13.0.2"
   },
   "devDependencies": {
     "@types/debug": "^4.1.7",

package/src/compile/index.js

@@ -12,6 +12,7 @@ import { makeSkeletonTree } from './skeleton-tree.js'
 import { resolveLocaleRefs } from './utils/resolve-refs.js'
 import clone from '../utils/clone.js'
 import { standardComponents } from '@json-layout/vocabulary'
+import { shallowEqualArray } from '../state/utils/immutable.js'
 
 export { resolveLocaleRefs } from './utils/resolve-refs.js'
 
@@ -36,9 +37,18 @@ const ajvLocalize = /** @type {typeof ajvLocalizeModule.default} */ (ajvLocalize
 export const produceCompileOptions = produce((draft, newOptions) => {
   for (const key of ['ajv', 'ajvOptions', 'code', 'markdown', 'markdownItOptions', 'locale', 'messages', 'optionsKeys', 'components']) {
     // @ts-ignore
-    if (key in newOptions) draft[key] = newOptions[key]
-    // @ts-ignore
-    else delete draft[key]
+    if (key in newOptions) {
+      // components is problematic because it is an object with nested objects
+      // simply compare there keys instead of the whole object
+      if (key === 'components' && shallowEqualArray(Object.keys(draft.components ?? []), Object.keys(newOptions.components ?? []))) {
+        continue
+      }
+      // @ts-ignore
+      draft[key] = newOptions[key]
+    } else {
+      // @ts-ignore
+      delete draft[key]
+    }
   }
 })
 

package/src/state/index.js

@@ -1,5 +1,4 @@
 // eslint-disable-next-line import/no-named-default
-import mittModule from 'mitt'
 import debug from 'debug'
 import { produce } from 'immer'
 import { evalExpression, producePatchedData } from './state-node.js'
@@ -14,7 +13,6 @@ export { Display } from './utils/display.js'
  * @typedef {import('./types.js').StateNode} StateNode
  * @typedef {import('./types.js').StateTree} StateTree
  * @typedef {import('./types.js').StatefulLayoutOptions} StatefulLayoutOptions
- * @typedef {import('./types.js').StatefulLayoutEvents} StatefulLayoutEvents
  * @typedef {import('./types.js').CreateStateTreeContext} CreateStateTreeContext
  * @typedef {import('./types.js').TextFieldNode} TextFieldNode
  * @typedef {import('./types.js').TextareaNode} TextareaNode
@@ -51,10 +49,6 @@ export const isItemsNode = (node, components) => !!node && isItemsLayout(node.la
 
 const logDataBinding = debug('jl:data-binding')
 
-// ugly fix of modules whose default export were wrongly declared
-// @ts-ignore
-const mitt = /** @type {typeof mittModule.default} */ (mittModule)
-
 /**
  * @param {Partial<StatefulLayoutOptions>} partialOptions
  * @param {import('../index.js').CompiledLayout} compiledLayout
@@ -78,18 +72,15 @@ function fillOptions (partialOptions, compiledLayout) {
     removeAdditional: 'error',
     autofocus: false,
     readOnlyPropertiesMode: 'show',
+    onAutofocus: () => {},
+    onUpdate: () => {},
+    onData: () => {},
     ...partialOptions,
     messages
   }
 }
 
 export class StatefulLayout {
-  /**
-   * @readonly
-   * @type {import('mitt').Emitter<StatefulLayoutEvents>}
-   */
-  events
-
   /**
    * @private
    * @readonly
@@ -218,14 +209,14 @@ export class StatefulLayout {
    * @param {unknown} [data]
    */
   constructor (compiledLayout, skeletonTree, options, data) {
+    logDataBinding('create stateful layout', compiledLayout, skeletonTree, options, data)
     this._compiledLayout = compiledLayout
     this.skeletonTree = skeletonTree
-    /** @type {import('mitt').Emitter<StatefulLayoutEvents>} */
-    this.events = mitt()
     this.prepareOptions(options)
     this._autofocusTarget = this.options.autofocus ? '' : null
     this._previousAutofocusTarget = null
     this._data = data
+    this._previousData = data
     this.initValidationState()
     this.activatedItems = {}
     this.updateState()
@@ -272,7 +263,7 @@ export class StatefulLayout {
       this.createStateTree(true)
     }
     logDataBinding('emit update event', this._data, this._stateTree)
-    this.events.emit('update', this)
+    this.options.onUpdate(this)
     this.emitData()
   }
 
@@ -283,7 +274,7 @@ export class StatefulLayout {
     // emit data event only if the data has changed, as it is immutable this simple comparison should suffice
     if (!this._dataWaitingForBlur && this._data !== this._previousData) {
       logDataBinding('emit data event', this._data)
-      this.events.emit('data', this._data)
+      this.options.onData(this._data)
       this._previousData = this._data
     }
   }
@@ -604,20 +595,22 @@ export class StatefulLayout {
   prepareSelectItem (node, rawItem) {
     /** @type {Partial<import('@json-layout/vocabulary').SelectItem>} */
     const item = {}
+    /** @type {import('@json-layout/vocabulary').ItemsBasedCompObject} */
+    const layout = node.layout
     if (typeof rawItem === 'object') {
-      item.value = node.layout.getItems?.itemValue ? this.evalNodeExpression(node, node.layout.getItems.itemValue, rawItem) : (node.layout.getItems?.returnObjects ? rawItem : rawItem.value)
-      item.key = node.layout.getItems?.itemKey ? this.evalNodeExpression(node, node.layout.getItems.itemKey, rawItem) : rawItem.key
-      item.title = node.layout.getItems?.itemTitle ? this.evalNodeExpression(node, node.layout.getItems.itemTitle, rawItem) : rawItem.title
+      item.value = layout.getItems?.itemValue ? this.evalNodeExpression(node, layout.getItems.itemValue, rawItem) : (layout.getItems?.returnObjects ? rawItem : rawItem.value)
+      item.key = layout.getItems?.itemKey ? this.evalNodeExpression(node, layout.getItems.itemKey, rawItem) : rawItem.key
+      item.title = layout.getItems?.itemTitle ? this.evalNodeExpression(node, layout.getItems.itemTitle, rawItem) : rawItem.title
       item.value = item.value ?? item.key
       item.key = item.key ?? item.value + ''
       item.title = item.title ?? item.key
       if (!item.icon && rawItem.icon) item.icon = rawItem.icon
     } else {
-      item.value = node.layout.getItems?.itemValue ? this.evalNodeExpression(node, node.layout.getItems.itemValue, rawItem) : rawItem
-      item.key = node.layout.getItems?.itemKey ? this.evalNodeExpression(node, node.layout.getItems.itemKey, rawItem) : item.value
-      item.title = node.layout.getItems?.itemTitle ? this.evalNodeExpression(node, node.layout.getItems.itemTitle, rawItem) : item.value
+      item.value = layout.getItems?.itemValue ? this.evalNodeExpression(node, layout.getItems.itemValue, rawItem) : rawItem
+      item.key = layout.getItems?.itemKey ? this.evalNodeExpression(node, layout.getItems.itemKey, rawItem) : item.value
+      item.title = layout.getItems?.itemTitle ? this.evalNodeExpression(node, layout.getItems.itemTitle, rawItem) : item.value
     }
-    if (node.layout.getItems?.itemIcon) item.icon = this.evalNodeExpression(node, node.layout.getItems?.itemIcon, rawItem)
+    if (layout.getItems?.itemIcon) item.icon = this.evalNodeExpression(node, layout.getItems?.itemIcon, rawItem)
     return /** @type {import('@json-layout/vocabulary').SelectItem} */(item)
   }
 
@@ -660,7 +653,7 @@ export class StatefulLayout {
       this._previousAutofocusTarget = autofocusTarget
       setTimeout(() => {
         logDataBinding('emit autofocus event', autofocusTarget)
-        this.events.emit('autofocus', autofocusTarget)
+        this.options.onAutofocus(autofocusTarget)
       })
     }
   }

package/src/state/state-node.js

@@ -449,7 +449,10 @@ export function createStateNode (
   } else {
     if (layout.getDefaultData && useDefaultData(nodeData, layout, options)) {
       if (!context.rehydrate) {
-        nodeData = evalExpression(compiledLayout.expressions, layout.getDefaultData, nodeData, options, display, layout, compiledLayout.validates, context.rootData, parentContext)
+        const defaultData = evalExpression(compiledLayout.expressions, layout.getDefaultData, nodeData, options, display, layout, compiledLayout.validates, context.rootData, parentContext)
+        if (nodeData === undefined || !isDataEmpty(defaultData)) {
+          nodeData = defaultData
+        }
       }
     } else {
       if (isDataEmpty(nodeData)) {

package/src/state/types.ts

@@ -96,17 +96,13 @@ export interface ValidationState {
   validatedChildren: string[]
 }
 
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
-export type StatefulLayoutEvents = {
-  data: any
-  update: StatefulLayout
-  autofocus: string
-}
-
 // StateNodeOptionsBase come from the vocabulary and should contain all node options that can be set in the layout
 export type StateNodeOptions = Required<StateNodeOptionsBase & {
   context: Record<string, any>
   messages: LocaleMessages
+  onData: (data: any) => void
+  onUpdate: (statefulLayout: StatefulLayout) => void
+  onAutofocus: (key: string) => void
 }>
 
 export type StatefulLayoutOptions = StateNodeOptions & {

package/src/state/utils/immutable.js

@@ -28,11 +28,12 @@ export function shallowProduceObject (previousObj = {}, newObj = {}) {
 
 /**
  * @template ItemType
- * @param {any[]} a1
- * @param {any[]} a2
+ * @param {any[] | null | undefined} a1
+ * @param {any[] | null | undefined} a2
  * @returns {boolean}
  */
 export function shallowEqualArray (a1 = [], a2 = []) {
+  if (!a1 || !a2) return a1 === a2
   if (a1.length !== a2.length) return false
   for (let i = 0; i < a1.length; i++) { if (a1[i] !== a2[i]) return false }
   return true