Add unknown property handler

glass-easel/src/component.ts

@@ -53,7 +53,7 @@
   performanceMeasureStart,
 } from './dev_tools'
 import { Element } from './element'
 import { type ShadowedEvent, type EventListener, type EventListenerOptions } from './event'
 import { type ExternalShadowRoot } from './external_shadow_tree'
 import { FuncArr, safeCallback, type GeneralFuncType } from './func_arr'
 import {
@@ -879,6 +879,7 @@
       options.reflectToAttributes,
       comp._$dataGroupObserverTree,
       options.propertyComparer,
+      options.unknownPropertyHandler,
     )
     comp._$dataGroup = dataGroup
 

glass-easel/src/data_proxy.ts

@@ -526,6 +526,10 @@ export class DataGroup<
   private _$recUpdateLevel = 0
   /* @internal */
   private _$propertyComparer: ((a: DataValue, b: DataValue) => boolean) | null
+  /* @internal */
+  private _$unknownPropertyHandler:
+    | ((this: GeneralComponent, name: string, value: DataValue) => boolean | void)
+    | null
 
   /* @internal */
   private _$generateInnerData(data: { [key: string]: DataValue }) {
@@ -560,6 +564,9 @@ export class DataGroup<
     reflectToAttributes: boolean,
     observerTree: DataGroupObserverTree,
     propertyComparer: ((a: DataValue, b: DataValue) => boolean) | null,
+    unknownPropertyHandler:
+      | ((this: GeneralComponent, name: string, value: DataValue) => boolean | void)
+      | null,
   ) {
     this._$comp = associatedComponent
     this.data = data
@@ -571,6 +578,7 @@ export class DataGroup<
     this._$observerTree = observerTree
     this._$observerStatus = new Array(observerTree.observers.length) as boolean[]
     this._$propertyComparer = propertyComparer
+    this._$unknownPropertyHandler = unknownPropertyHandler
     this.innerData = this._$generateInnerData(data)
   }
 
@@ -585,6 +593,7 @@ export class DataGroup<
       false,
       new DataGroupObserverTree({}),
       null,
+      null,
     )
   }
 
@@ -633,7 +642,7 @@ export class DataGroup<
   replaceProperty(propName: string, newData: DataValue): boolean {
     let data = newData
     const prop = this._$propFields[propName]
-    if (!prop) return false
+    if (!prop) return this._$unknownPropertyHandler?.call(this._$comp!, propName, newData) ?? false
     if (this._$propertyPassingDeepCopy !== DeepCopyStrategy.None) {
       if (this._$propertyPassingDeepCopy === DeepCopyStrategy.SimpleWithRecursion) {
         data = deepCopy(newData, true)

glass-easel/src/global_options.ts

@@ -83,6 +83,10 @@ export type ComponentOptions = {
   propertyEarlyInit?: boolean
   /** Property comparer function, return false if properties are equal */
   propertyComparer?: ((a: any, b: any) => boolean) | null
+  /** Handle unknown properties or not */
+  unknownPropertyHandler?:
+    | ((this: GeneralComponent, name: string, value: any) => boolean | void)
+    | null
 }
 
 export type NormalizedComponentOptions = {
@@ -105,6 +109,9 @@ export type NormalizedComponentOptions = {
   virtualHost: boolean
   propertyEarlyInit: boolean
   propertyComparer: ((a: any, b: any) => boolean) | null
+  unknownPropertyHandler:
+    | ((this: GeneralComponent, name: string, value: any) => boolean | void)
+    | null
 }
 
 /**
@@ -147,6 +154,7 @@ export const globalOptions: NormalizedComponentOptions & EnvironmentOptions = {
   virtualHost: false,
   propertyEarlyInit: false,
   propertyComparer: null,
+  unknownPropertyHandler: null,
   throwGlobalError: false,
   writeExtraInfoToAttr: false,
   backendContext: null,
@@ -196,5 +204,7 @@ export const normalizeComponentOptions = (
     propertyEarlyInit:
       p.propertyEarlyInit !== undefined ? p.propertyEarlyInit : b.propertyEarlyInit,
     propertyComparer: p.propertyComparer !== undefined ? p.propertyComparer : b.propertyComparer,
+    unknownPropertyHandler:
+      p.unknownPropertyHandler !== undefined ? p.unknownPropertyHandler : b.unknownPropertyHandler,
   }
 }

glass-easel/src/tmpl/proc_gen_wrapper.ts

@@ -1058,10 +1058,8 @@ export class ProcGenWrapper {
 
   // set style (or property named `style`)
   y = (elem: Element, v: string) => {
-    if (isComponent(elem) && Component.hasProperty(elem, 'style')) {
-      const nodeDataProxy = Component.getDataProxy(elem)
-      const camelName = dashToCamelCase('style')
-      nodeDataProxy.replaceProperty(camelName, v)
+    if (isComponent(elem) && Component.getDataProxy(elem).replaceProperty('style', v)) {
+      // empty
     } else {
       elem.setNodeStyle(dataValueToString(v), StyleSegmentIndex.MAIN)
     }
@@ -1101,10 +1099,8 @@ export class ProcGenWrapper {
       const value = arr[i + 1]
       v += `${name}:${value};`
     }
-    if (isComponent(elem) && Component.hasProperty(elem, 'style')) {
-      const nodeDataProxy = Component.getDataProxy(elem)
-      const camelName = dashToCamelCase('style')
-      nodeDataProxy.replaceProperty(camelName, v)
+    if (isComponent(elem) && Component.getDataProxy(elem).replaceProperty('style', v)) {
+      // empty
     } else {
       elem.setNodeStyle(dataValueToString(v), StyleSegmentIndex.MAIN)
     }

glass-easel/tests/core/data_update.test.ts

@@ -1236,4 +1236,62 @@ describe('partial update', () => {
     expect(domHtml(comp)).toBe('true')
     expect(execArr).toEqual(['middle:observer:true', 'child:observer:true', 'child:property:true'])
   })
+
+  test('should support unknown property handler', () => {
+    let execArr = [] as [string, unknown][]
+    let execReturn: boolean = true
+    const childCompDef = componentSpace
+      .define()
+      .options({
+        unknownPropertyHandler(propName: string, value: unknown) {
+          execArr.push([propName, value])
+          return execReturn
+        },
+      })
+      .property('a', String)
+      .property('b', String)
+      .registerComponent()
+
+    const compDef = componentSpace
+      .define()
+      .usingComponents({
+        child: childCompDef.general(),
+      })
+      .template(
+        tmpl(`
+          <child id="child" style="{{style}}" p="{{p}}" a="{{a}}" bindff="ff" data-dd="{{dd}}" />
+        `),
+      )
+      .data(() => ({
+        p: 'p',
+        a: 'a',
+        dd: 'dd',
+        style: 'style',
+      }))
+      .registerComponent()
+
+    const comp = glassEasel.Component.createWithContext('root', compDef, domBackend)
+    const child = (comp.$.child as glassEasel.Element).asInstanceOf(childCompDef)!
+
+    expect(execArr).toEqual([
+      ['style', 'style'],
+      ['p', 'p'],
+      ['bindff', 'ff'],
+      ['dataDd', 'dd'],
+    ])
+    expect(child.style).toBe('')
+    expect(child.getListeners()).toEqual({})
+    expect(child.dataset).toEqual({})
+
+    execArr = []
+    execReturn = false
+    comp.setData({ a: 'a2', dd: 'dd2', style: 'style2' })
+    expect(execArr).toEqual([
+      ['style', 'style2'],
+      ['dataDd', 'dd2'],
+      ['data-dd', 'dd2'],
+    ])
+    expect(child.style).toBe('style2')
+    expect(child.dataset).toEqual({ dd: 'dd2' })
+  })
 })