@json-layout/core 0.11.0 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-layout/core",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "description": "Compilation and state management utilities for JSON Layout.",
   "type": "module",
   "exports": {
@@ -59,7 +59,7 @@
   },
   "homepage": "https://github.com/json-layout/json-layout#readme",
   "dependencies": {
-    "@json-layout/vocabulary": "^0.11.0",
+    "@json-layout/vocabulary": "^0.13.0",
     "@types/markdown-it": "^13.0.1",
     "ajv": "^8.12.0",
     "ajv-errors": "^3.0.0",

package/src/state/index.js

@@ -5,7 +5,7 @@ import { produce } from 'immer'
 import { evalExpression, producePatchedData } from './state-node.js'
 import { createStateTree } from './state-tree.js'
 import { Display } from './utils/display.js'
-import { isFileLayout, isGetItemsExpression, isGetItemsFetch, isItemsLayout } from '@json-layout/vocabulary'
+import { isFileLayout, isGetItemsExpression, isGetItemsFetch, isItemsLayout, editableCompNames } from '@json-layout/vocabulary'
 import { shallowProduceArray } from './utils/immutable.js'
 
 export { Display } from './utils/display.js'
@@ -74,6 +74,7 @@ function fillOptions (partialOptions, compiledLayout) {
     removeAdditional: 'error',
     autofocus: false,
     readOnlyPropertiesMode: 'show',
+    debounceInputMs: 300,
     ...partialOptions,
     messages
   }
@@ -342,11 +343,12 @@ export class StatefulLayout {
   }
 
   /**
+   * @private
    * @param {StateNode} node
    * @param {unknown} data
    * @param {number} [activateKey]
    */
-  input (node, data, activateKey) {
+  applyInput (node, data, activateKey) {
     logDataBinding('received input event from node', node, data)
 
     const transformedData = node.layout.transformData && this.evalNodeExpression(node, node.layout.transformData, data)
@@ -370,7 +372,10 @@ export class StatefulLayout {
       data = transformedData
     }
 
-    if (node.options.validateOn === 'input' && !this.validationState.validatedChildren.includes(node.fullKey)) {
+    if (
+      (node.options.validateOn === 'input' || (node.options.validateOne === 'blur' && !editableCompNames.includes(node.layout.comp))) &&
+       !this.validationState.validatedChildren.includes(node.fullKey)
+    ) {
       this.validationState = { validatedChildren: this.validationState.validatedChildren.concat([node.fullKey]) }
     }
     if (activateKey !== undefined) {
@@ -385,17 +390,54 @@ export class StatefulLayout {
     const parentNode = this._lastCreateStateTreeContext.nodes.find(p => p.fullKey === node.parentFullKey)
     if (!parentNode) throw new Error(`parent with key "${node.parentFullKey}" not found`)
     const newParentValue = producePatchedData(parentNode.data ?? (typeof node.key === 'number' ? [] : {}), node, data)
-    this.input(parentNode, newParentValue)
+    this.applyInput(parentNode, newParentValue)
 
     if (activateKey !== undefined) {
       this.handleAutofocus()
     }
   }
 
+  /**
+   * @private
+   * @type {null | [StateNode, unknown, number | undefined, ReturnType<typeof setTimeout>]}
+   */
+  debouncedInput = null
+
+  applyDebouncedInput () {
+    if (this.debouncedInput) {
+      clearTimeout(this.debouncedInput[3])
+      this.applyInput(this.debouncedInput[0], this.debouncedInput[1], this.debouncedInput[2])
+      this.debouncedInput = null
+    }
+  }
+
+  /**
+   * @param {StateNode} node
+   * @param {unknown} data
+   * @param {number} [activateKey]
+   */
+  input (node, data, activateKey) {
+    // debounced data from the same node is cancelled if a new input is received
+    // debounced data from another node is applied immediately
+    if (this.debouncedInput) {
+      if (this.debouncedInput[0] === node) clearTimeout(this.debouncedInput[3])
+      else this.applyDebouncedInput()
+    }
+
+    if (editableCompNames.includes(node.layout.comp) && node.options.debounceInputMs) {
+      this.debouncedInput = [node, data, activateKey, setTimeout(() => this.applyDebouncedInput(), node.options.debounceInputMs)]
+    } else {
+      this.applyInput(node, data, activateKey)
+    }
+  }
+
   /**
    * @param {StateNode} node
    */
   blur (node) {
+    // debounced data is applied immediately on blur
+    this.applyDebouncedInput()
+
     logDataBinding('received blur event from node', node)
     if (
       (node.options.validateOn === 'input' || node.options.validateOn === 'blur') &&

package/src/state/state-node.js

@@ -247,7 +247,10 @@ export function createStateNode (
 ) {
   /** @type {import('./types.js').StateNodeCacheKey | null} */
   let cacheKey = null
-  if (skeleton.pure && reusedNode) {
+
+  // NOTE we have to exclude nodes with errors from the cache, because context.errors is unpurely modified
+  // TODO: implement a cleaner way to filter context.errors while being able to reuse nodes with errors
+  if (skeleton.pure && reusedNode && !reusedNode.error && !reusedNode.childError) {
     cacheKey = [parentOptions, compiledLayout, fullKey, skeleton, childDefinition, parentDisplay.width, validationState, context.activeItems, context.initial, data]
     if (context.cacheKeys[fullKey] && shallowEqualArray(context.cacheKeys[fullKey], cacheKey)) return reusedNode
   }

package/src/utils/doc-options.js

@@ -123,5 +123,10 @@ export const runtimeOptions = [
       hide: 'Hide the readOnly properties but keep them in the data.',
       show: 'Show the readOnly properties.'
     }
+  },
+  {
+    key: 'debounceInputMs',
+    description: 'The debounce time for the input event of editable fields.',
+    default: 300
   }
 ]

package/types/state/index.d.ts

@@ -167,6 +167,19 @@ export class StatefulLayout {
      * @returns {any}
      */
     private evalNodeExpression;
+    /**
+     * @private
+     * @param {StateNode} node
+     * @param {unknown} data
+     * @param {number} [activateKey]
+     */
+    private applyInput;
+    /**
+     * @private
+     * @type {null | [StateNode, unknown, number | undefined, ReturnType<typeof setTimeout>]}
+     */
+    private debouncedInput;
+    applyDebouncedInput(): void;
     /**
      * @param {StateNode} node
      * @param {unknown} data

package/types/state/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/state/index.js"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/state/index.js"],"names":[],"mappings":"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"}

package/types/state/state-node.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"state-node.d.ts","sourceRoot":"","sources":["../../src/state/state-node.js"],"names":[],"mappings":"AAqKA;;;;;;;;;;GAUG;AACH,4CAVW,OAAO,aAAa,EAAE,kBAAkB,EAAE,cAC1C,OAAO,yBAAyB,EAAE,UAAU,QAC5C,GAAG,WACH,OAAO,YAAY,EAAE,gBAAgB,WACrC,OAAO,oBAAoB,EAAE,OAAO,UACpC,OAAO,yBAAyB,EAAE,UAAU,YAC5C,OAAO,cACP,OAAO,GACL,GAAG,CAMf;AA+BD;;;;;;;;;;;;;;;;;;GAkBG;AACH,yCAjBW,OAAO,YAAY,EAAE,sBAAsB,iBAC3C,OAAO,YAAY,EAAE,gBAAgB,kBACrC,OAAO,aAAa,EAAE,cAAc,OACpC,MAAM,GAAG,MAAM,WACf,MAAM,iBACN,MAAM,GAAG,IAAI,YACb,MAAM,kBACN,MAAM,GAAG,IAAI,YACb,OAAO,aAAa,EAAE,YAAY,mBAClC,OAAO,yBAAyB,EAAE,KAAK,GAAG,IAAI,iBAC9C,OAAO,oBAAoB,EAAE,OAAO,QACpC,OAAO,cACP,OAAO,mBACP,OAAO,YAAY,EAAE,eAAe,4DAElC,OAAO,YAAY,EAAE,SAAS,CAuO1C;AAED,uFAAuF;AACvF,yCADmB,GAAG,QAAQ,OAAO,YAAY,EAAE,SAAS,QAAQ,OAAO,KAAK,GAAG,CAOjF"}
+{"version":3,"file":"state-node.d.ts","sourceRoot":"","sources":["../../src/state/state-node.js"],"names":[],"mappings":"AAqKA;;;;;;;;;;GAUG;AACH,4CAVW,OAAO,aAAa,EAAE,kBAAkB,EAAE,cAC1C,OAAO,yBAAyB,EAAE,UAAU,QAC5C,GAAG,WACH,OAAO,YAAY,EAAE,gBAAgB,WACrC,OAAO,oBAAoB,EAAE,OAAO,UACpC,OAAO,yBAAyB,EAAE,UAAU,YAC5C,OAAO,cACP,OAAO,GACL,GAAG,CAMf;AA+BD;;;;;;;;;;;;;;;;;;GAkBG;AACH,yCAjBW,OAAO,YAAY,EAAE,sBAAsB,iBAC3C,OAAO,YAAY,EAAE,gBAAgB,kBACrC,OAAO,aAAa,EAAE,cAAc,OACpC,MAAM,GAAG,MAAM,WACf,MAAM,iBACN,MAAM,GAAG,IAAI,YACb,MAAM,kBACN,MAAM,GAAG,IAAI,YACb,OAAO,aAAa,EAAE,YAAY,mBAClC,OAAO,yBAAyB,EAAE,KAAK,GAAG,IAAI,iBAC9C,OAAO,oBAAoB,EAAE,OAAO,QACpC,OAAO,cACP,OAAO,mBACP,OAAO,YAAY,EAAE,eAAe,4DAElC,OAAO,YAAY,EAAE,SAAS,CA0O1C;AAED,uFAAuF;AACvF,yCADmB,GAAG,QAAQ,OAAO,YAAY,EAAE,SAAS,QAAQ,OAAO,KAAK,GAAG,CAOjF"}

package/types/utils/doc-options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"doc-options.d.ts","sourceRoot":"","sources":["../../src/utils/doc-options.js"],"names":[],"mappings":"AAEA;;GAEG;AAEH,yBAAyB;AACzB,wCA8BC;AAED,yBAAyB;AACzB,wCAsFC;yBA3HY;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,GAAG,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,MAAM,EAAE,GAAG,CAAC,CAAA;CAAC,EAAE"}
+{"version":3,"file":"doc-options.d.ts","sourceRoot":"","sources":["../../src/utils/doc-options.js"],"names":[],"mappings":"AAEA;;GAEG;AAEH,yBAAyB;AACzB,wCA8BC;AAED,yBAAyB;AACzB,wCA2FC;yBAhIY;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,GAAG,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,MAAM,EAAE,GAAG,CAAC,CAAA;CAAC,EAAE"}