@json-layout/core 0.10.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-layout/core",
-  "version": "0.10.0",
+  "version": "0.12.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.10.0",
+    "@json-layout/vocabulary": "^0.12.0",
     "@types/markdown-it": "^13.0.1",
     "ajv": "^8.12.0",
     "ajv-errors": "^3.0.0",

package/src/compile/index.js

@@ -6,6 +6,7 @@ import addFormats from 'ajv-formats'
 import ajvErrors from 'ajv-errors'
 import ajvLocalizeModule from 'ajv-i18n'
 import MarkdownIt from 'markdown-it'
+import { produce } from 'immer'
 import i18n from '../i18n/index.js'
 import { makeSkeletonTree } from './skeleton-tree.js'
 import { resolveRefs } from './utils/resolve-refs.js'
@@ -29,6 +30,17 @@ const ajvLocalize = /** @type {typeof ajvLocalizeModule.default} */ (ajvLocalize
 
 // const exprEvalParser = new ExprEvalParser()
 
+// use Immer for efficient updating with immutability and no-op detection
+/** @type {(draft: PartialCompileOptions, newOptions: PartialCompileOptions) => PartialCompileOptions} */
+export const produceCompileOptions = produce((draft, newOptions) => {
+  for (const key of ['ajv', 'ajvOptions', 'code', 'markdown', 'markdownItOptions', 'locale', 'messages', 'optionsKeys']) {
+    // @ts-ignore
+    if (key in newOptions) draft[key] = newOptions[key]
+    // @ts-ignore
+    else delete draft[key]
+  }
+})
+
 /**
  * @param {PartialCompileOptions} partialOptions
  * @returns {CompileOptions}

package/src/compile/skeleton-node.js

@@ -1,5 +1,5 @@
 // import Debug from 'debug'
-import { normalizeLayoutFragment, isSwitchStruct, isGetItemsExpression, isGetItemsFetch, isItemsLayout } from '@json-layout/vocabulary'
+import { normalizeLayoutFragment, isSwitchStruct, isGetItemsExpression, isGetItemsFetch, isItemsLayout, getSchemaFragmentType } from '@json-layout/vocabulary'
 import { makeSkeletonTree } from './skeleton-tree.js'
 
 /**
@@ -27,8 +27,7 @@ export function makeSkeletonNode (
   parentPointer,
   required
 ) {
-  // consolidate schema
-  if (!schema.type && schema.properties) schema.type = 'object'
+  const { type, nullable } = getSchemaFragmentType(schema)
 
   // improve on ajv error messages based on ajv-errors (https://ajv.js.org/packages/ajv-errors.html)
   schema.errorMessage = schema.errorMessage ?? {}
@@ -49,8 +48,9 @@ export function makeSkeletonNode (
   let defaultData
   if ('default' in schema) defaultData = schema.default
   else if (required) {
-    if (schema.type === 'object') defaultData = {}
-    if (schema.type === 'array') defaultData = []
+    if (nullable) defaultData = null
+    else if (type === 'object') defaultData = {}
+    else if (type === 'array') defaultData = []
   }
 
   let pure = true
@@ -103,7 +103,7 @@ export function makeSkeletonNode (
 
   /** @type {import('./types.js').SkeletonNode} */
   const node = { key: key ?? '', pointer, parentPointer, pure, propertyKeys: [], roPropertyKeys: [] }
-  if (schema.type === 'object') {
+  if (type === 'object') {
     if (schema.properties) {
       node.children = node.children ?? []
       for (const propertyKey of Object.keys(schema.properties)) {
@@ -166,7 +166,7 @@ export function makeSkeletonNode (
       const childrenTrees = []
       /** @type {string[]} */
       for (let i = 0; i < schema.oneOf.length; i++) {
-        if (!schema.oneOf[i].type) schema.oneOf[i].type = schema.type
+        if (!schema.oneOf[i].type) schema.oneOf[i].type = type
         const title = schema.oneOf[i].title ?? `option ${i}`
         delete schema.oneOf[i].title
         childrenTrees.push(makeSkeletonTree(
@@ -195,7 +195,7 @@ export function makeSkeletonNode (
     }
   }
 
-  if (schema.type === 'array' && schema.items) {
+  if (type === 'array' && schema.items) {
     if (Array.isArray(schema.items)) {
       node.children = schema.items.map((/** @type {any} */ itemSchema, /** @type {number} */ i) => {
         return makeSkeletonNode(

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/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/compile/index.d.ts

@@ -5,6 +5,8 @@
  */
 export function compile(_schema: object, partialOptions?: import("./types.js").PartialCompileOptions | undefined): CompiledLayout;
 export { resolveRefs } from "./utils/resolve-refs.js";
+/** @type {(draft: PartialCompileOptions, newOptions: PartialCompileOptions) => PartialCompileOptions} */
+export const produceCompileOptions: (draft: PartialCompileOptions, newOptions: PartialCompileOptions) => PartialCompileOptions;
 export type SkeletonTree = import('./types.js').SkeletonTree;
 export type SkeletonNode = import('./types.js').SkeletonNode;
 export type CompiledLayout = import('./types.js').CompiledLayout;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/compile/index.js"],"names":[],"mappings":"AAsEA;;;;GAIG;AACH,iCAJW,MAAM,4EAEJ,cAAc,CA6E1B;;2BAtIY,OAAO,YAAY,EAAE,YAAY;2BACjC,OAAO,YAAY,EAAE,YAAY;6BACjC,OAAO,YAAY,EAAE,cAAc;6BACnC,OAAO,YAAY,EAAE,cAAc;oCACnC,OAAO,YAAY,EAAE,qBAAqB;iCAC1C,OAAO,YAAY,EAAE,kBAAkB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/compile/index.js"],"names":[],"mappings":"AAkFA;;;;GAIG;AACH,iCAJW,MAAM,4EAEJ,cAAc,CA6E1B;;AAjID,yGAAyG;AACzG,4CADmB,qBAAqB,cAAc,qBAAqB,KAAK,qBAAqB,CAQnG;2BAxBW,OAAO,YAAY,EAAE,YAAY;2BACjC,OAAO,YAAY,EAAE,YAAY;6BACjC,OAAO,YAAY,EAAE,cAAc;6BACnC,OAAO,YAAY,EAAE,cAAc;oCACnC,OAAO,YAAY,EAAE,qBAAqB;iCAC1C,OAAO,YAAY,EAAE,kBAAkB"}

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/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"}