@geodaoyu/accessor 1.0.2 → 2.0.1

package/README.md

@@ -1,15 +1,9 @@
 # Accessor
 
-Class: `Accessor`
+## Overview
 
 Accessor is an abstract class that facilitates the access to instance properties as well as a mechanism to watch for property changes. Every sub-class of Accessor defines properties that are directly accessible or by using the **get()** and **set()** methods. It is possible to watch for a property changes by using the **watch()** method.
 
-## Installation
-
-``` shell
-npm install @geodaoyu/accessor
-```
-
 ## Property Overview
 
 | Name          | Type                                                         | Summary                | Class    |
@@ -24,46 +18,13 @@ The name of the class.
 
 ## Method Overview
 
-| Name    | Return Type | Summary                                       | Class    |
-| ------- | ----------- | --------------------------------------------- | -------- |
-| get()   | *           | Gets the value of a property.                 | Accessor |
-| set()   | *           | Sets the value of a property.                 | Accessor |
-| watch() | WatchHandle | Watches for property changes on the instance. | Accessor |
+| Name  | Return Type | Summary                       | Class    |
+| ----- | ----------- | ----------------------------- | -------- |
+| set() | *           | Sets the value of a property. | Accessor |
 
 ### Method Details
 
-<table><tr><td bgcolor=#ddd><b>get(path){*}</b></td></tr></table>
-
-Gets the value of a property.
-
-The name of the property can refer to a property in the instance. 
-
-```javascript
-view.get("scale"); 
-```
-
-It can also be a path to a property deeper in the instance. `get()` returns `undefined` if a property in the path doesn't exist.
-
-```javascript
-var title = map.get("basemap.title");
-
-// equivalent of
-var title = map.basemap && map.basemap.title || undefined;
-```
-
-Parameter:
-
-| **path**                         | [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) |
-| -------------------------------- | ------------------------------------------------------------ |
-| The path of the property to get. |                                                              |
-
-Returns:
-
-| Type | Description           |
-| ---- | --------------------- |
-| *    | The property's value. |
-
-<table><tr><td bgcolor=#ddd><b>set(path, value){*}</b></td></tr></table>
+<table><tr><td bgcolor=#ddd><b>set(path, value) {*}</b></td></tr></table>
 
 Sets the value of a property.
 
@@ -76,7 +37,7 @@ map.set("basemap", "topo-vector");
 map.basemap = "topo-vector";
 
 // currying set
-var updateViewScale = view.set.bind(view, "scale");
+const updateViewScale = view.set.bind(view, "scale");
 updateViewScale(5000);
 ```
 
@@ -102,7 +63,7 @@ view.set({
 });
 
 // currying set
-var updateView = view.set.bind(view);
+const updateView = view.set.bind(view);
 
 updateView({
   center: [-4.4861, 48.3904],
@@ -116,7 +77,7 @@ updateView({
 | ------------------------------------------------------------ | ------------------------------------------------------------ |
 | The path to the property to set, or an object of key-value pairs. |                                                              |
 | **value**                                                    | *                                                            |
-| *The new value to set on the property.                       |                                                              |
+| The new value to set on the property.                        |                                                              |
 
 Returns:
 
@@ -124,116 +85,139 @@ Returns:
 | ---- | ------------- |
 | *    | The instance. |
 
-<table><tr><td bgcolor=#ddd><b>watch(path, callback){WatchHandle}</b></td></tr></table>
+# reactiveUtils
 
-Watches for property changes on the instance.
+## Overview
 
-Watching for property changes is essential for tracking changes on objects. To start watching for changes on a property, call `watch()` with the property name and a callback function that will execute each time the property changes.
+`reactiveUtils` provide capabilities for observing changes to the state of the SDK's properties, and is an important part of managing your application's life-cycle. State can be observed on a variety of different data types and structures including strings, numbers, arrays, booleans, collections, and objects.
 
-``` javascript
-var handle = mapview.watch("scale", function(newValue, oldValue, propertyName, target) {
-  console.log(propertyName + " changed from " + oldValue + " to " + newValue);
-})
-```
+## Using reactiveUtils
 
-To stop watching for changes, call the `remove()` method on the object that `watch()` returns.
+`reactiveUtils` provides five methods that offer different patterns and capabilities for observing state: [on()](https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html#on), [once()](https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html#once), [watch()](https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html#watch), [when()](https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html#when) and [whenOnce()](https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html#whenOnce).
+
+The following is a basic example using [reactiveUtils.watch()](https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html#watch). It demonstrates how to track the Map component [updating](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-map/#updating) property and then send a message to the console when the property changes. This snippet uses a `getValue` function as an expression that evaluates the `updating` property, and when a change is observed the new value is passed to the callback:
 
-``` javascript
-handle.remove();
+```
+// Basic example of watching for changes on a boolean property
+const viewElement = document.querySelector("arcgis-map");
+reactiveUtils.watch(
+  // getValue function
+  () => viewElement.updating,
+  // callback
+  (updating) => {
+    console.log(updating)
+  });
 ```
 
-It is important to store the resulting objects from `watch()` to properly clean up the references.
 
-```javascript
-var viewHandles = [];
-function setView(view) {
-  // remove the handles for the current view.
-  viewHandles.forEach(function(handle) {
-    handle.remove();
+
+### Working with collections
+
+`reactiveUtils` can be used to observe changes within a collection, such as [Map.allLayers](https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html#allLayers). Out-of-the-box JavaScript methods such as [`.map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) and [`.filter()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) can be used as expressions to be evaluated in the `getValue` function.
+
+```
+// Watching for changes within a collection
+// whenever a new layer is added to the map
+const viewElement = document.querySelector("arcgis-map");
+reactiveUtils.watch(
+  () => viewElement.map.allLayers.map( layer => layer.id),
+  (ids) => {
+    console.log(`FeatureLayer IDs ${ids}`);
   });
-  viewHandles.length = 0;
+```
 
-  this.view = view;
 
-  // watch for properties on the newly set view.
-  if (view) {
-    viewHandles.push(
-      view.watch("scale", scaleWatcher);
-    );
-  }
-}
 
-setView(mapView);
-setView(null);
+### Working with objects
+
+With `reactiveUtils` you can track named object properties through dot notation (e.g. `viewElement.updating`) or through bracket notation (e.g. `viewElement["updating"]`). You can also use the [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) operator (`?.`). This operator simplifies the process of verifying that properties used in the `getValue` function are not `undefined` or `null`.
+
+```
+// Watch for changes in an object using optional chaining
+// whenever the map's extent changes
+const viewElement = document.querySelector("arcgis-map");
+reactiveUtils.watch(
+  () => viewElement?.extent?.xmin,
+  (xmin) => {
+    console.log(`Extent change xmin = ${xmin}`)
+  });
 ```
 
-Like `get()` and `set()`, it is possible to watch for a property deep in the object hierarchy by passing a path. If a property in the path doesn't exist the watch callback is called with `undefined`.
 
-``` javascript
-var view = new SceneView({
-  map: new Map({
-    basemap: "streets-vector"
-  })
-});
 
-view.watch("map.basemap.title", function(newValue, oldValue) {
-  console.log("basemap's title changed from " + oldValue + " to " + newValue);
-});
+### WatchHandles and Promises
 
-view.map.basemap = "topo-vector";
-// output: "basemap's title changed from Streets to Topographic"
+The [watch()](https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html#watch), [on()](https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html#on) and [when()](https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html#when) methods return a [WatchHandle](https://developers.arcgis.com/javascript/latest/api-reference/esri-core-Accessor.html#WatchHandle). Be sure to remove watch handles when they are no longer needed to avoid memory leaks.
 
-view.map = null;
-// output: "basemap's title changed from Topographic to undefined"
 ```
+// Use a WatchHandle to stop watching
+const viewElement = document.querySelector("arcgis-map");
+const handle = reactiveUtils.watch(
+  () => viewElement?.extent?.xmin,
+  (xmin) => {
+    console.log(`Extent change xmin = ${xmin}`)
+  });
 
-Pass a comma delimited list of property paths, or an array of property paths, to watch multiple properties with the same callback. Use the third parameter of the callback call to determine what property changed.
+// In another function
+handle.remove()
+```
 
-``` javascript
-view.watch("center, scale, rotation", function(newValue, oldValue, propertyName) {
-  console.log(propertyName + " changed");
-});
+The [once()](https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html#once) and [whenOnce()](https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html#whenOnce) methods return a Promise instead of a `WatchHandle`. In some advanced use cases where an API action may take additional time, these methods also offer the option to cancel the async callback via an [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal). Be aware that if the returned Promise is not resolved, it can also result in a memory leak.
 
-// equivalent of
-view.watch(["center", "scale", "rotation"], function(newValue, oldValue, propertyName) {
-  console.log(propertyName + " changed");
-});
+```
+// Use an AbortSignal to cancel an async callback
+// during view animation
+const abortController = new AbortController();
+
+// Observe the View's animation state
+reactiveUtils.whenOnce(
+  () => view?.animation, {signal: abortController.signal})
+  .then((animation) => {
+    console.log(`View animation state is ${animation.state}`)
+  });
 
-// equivalent of
-var callback = function(newValue, oldValue, propertyName) {
-  console.log(propertyName + " changed");
+// Cancel the async callback
+const someFunction = () => {
+  abortController.abort();
 }
-view.watch("center", callback);
-view.watch("scale", callback);
-view.watch("rotation", callback);
 ```
 
-`Accessor` doesn't call the watch callbacks for a property immediately after its value changes. Instead, when a property's value changes and if that property is watched, `Accessor` schedules a notification which is then processed at a later time. Properties that change frequently like `view.scale` can be watched without having to throttle the callback.
 
-``` javascript
-// Divides the view.scale three times
-view.watch("scale", function(newValue, oldValue) {
-  console.log("view's scale changed from " + oldValue + " to " + newValue);
-});
-console.log("current view scale: " + view.scale);
-view.scale = view.scale / 2;
-view.scale = view.scale / 2;
-view.scale = view.scale / 2;
-console.log("current view scale: " + view.scale);
-
-// output the following:
-// current view scale: 36978595.474472
-// current view scale: 4622324.434309
-// view's scale changed from 36978595.474472 to 4622324.434309
+
+### Working with truthy values
+
+The [when()](https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html#when) and [whenOnce()](https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html#whenOnce) methods watch for *truthy* values, these are values that evaluate to `true` in boolean contexts. To learn more about using truthy, visit this [MDN Web doc](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) article. The snippets below use the [Popup.visible](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Popup.html) property, which is a boolean.
+
 ```
+// Observe changes on a boolean property
+const viewElement = document.querySelector("arcgis-map");
+reactiveUtils.when(() => viewElement.popup?.visible, () => console.log("Truthy"));
+reactiveUtils.when(() => !viewElement.popup?.visible, () => console.log("Not truthy"));
+reactiveUtils.when(() => viewElement.popup?.visible === true, () => console.log("True"));
+reactiveUtils.when(() => viewElement.popup?.visible !== undefined, () => console.log("Defined"));
+reactiveUtils.when(() => viewElement.popup?.visible === undefined, () => console.log("Undefined"));
+```
+
+## Method Overview
+
+| Name    | Return Type | Summary                                                      | Object        |
+| ------- | ----------- | ------------------------------------------------------------ | ------------- |
+| watch() | WatchHandle | Tracks any properties accessed in the `getValue` function and calls the callback when any of them change. | reactiveUtils |
+
+### Method Details
+<table><tr><td bgcolor=#ddd><b>watch(getValue, callback, options?){WatchHandle}</b></td></tr></table>
+
+Tracks any properties accessed in the `getValue` function and calls the callback when any of them change.
 
 Parameters:
 
-| **path**                                                     | [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) \| String[] |
-| ------------------------------------------------------------ | ------------------------------------------------------------ |
-| The property or properties to watch. Multiple properties can be specified as a comma-separated list. |                                                              |
-| **callback**                                                 | watchCallback                                                |
-| The callback to execute when the property value has changed. |                                                              |
+| **getValue**                                                 | ReactiveWatchExpression   |
+| ------------------------------------------------------------ | ------------------------- |
+| Function used to get the current value. All accessed properties will be tracked. |                           |
+| **callback**                                                 | **ReactiveWatchCallback** |
+| The function to call when there are changes.                 |                           |
+| **options**                                                  | **ReactiveWatchOptions**  |
+| Options used to configure how the tracking happens and how the callback is to be called. |                           |
 
 Returns:
 
@@ -241,27 +225,55 @@ Returns:
 | ----------- | -------------- |
 | WatchHandle | A watch handle |
 
-## Type Definitions
-
-<table><tr><td bgcolor=#ddd><b>watchCallback(newValue, oldValue, propertyName, target)</b></td></tr></table>
-
-Callback to be called when a watched property changes.
-
-Parameters:
+Examples
+
+```js
+// Watching for changes in a boolean value
+// Equivalent to watchUtils.watch()
+const viewElement = document.querySelector("arcgis-map");
+reactiveUtils.watch(
+ () => viewElement.popup?.visible,
+ () => {
+   console.log(`Popup visible: ${viewElement.popup.visible}`);
+ });
+// Watching for changes within a Collection
+const viewElement = document.querySelector("arcgis-map");
+reactiveUtils.watch(
+ () => viewElement.map.allLayers.length,
+ () => {
+   console.log(`Layer collection length changed: ${viewElement.map.allLayers.length}`);
+ });
+// Watch for changes in a numerical value.
+// Providing `initial: true` in ReactiveWatchOptions
+// checks immediately after initialization
+// Equivalent to watchUtils.init()
+const viewElement = document.querySelector("arcgis-map");
+reactiveUtils.watch(
+ () => viewElement.zoom,
+ () => {
+   console.log(`zoom changed to ${viewElement.zoom}`);
+ },
+ {
+   initial: true
+ });
+// Watch properties from multiple sources
+const viewElement = document.querySelector("arcgis-map");
+const handle = reactiveUtils.watch(
+ () => [viewElement.stationary, viewElement.zoom],
+ ([stationary, zoom]) => {
+   // Only print the new zoom value when the map component is stationary
+   if(stationary){
+     console.log(`Change in zoom level: ${zoom}`);
+   }
+ }
+);
+```
 
-| **newValue**                                      | *                                                            |
-| ------------------------------------------------- | ------------------------------------------------------------ |
-| The new value of the watched property.            |                                                              |
-| **oldValue**                                      | *                                                            |
-| The old value of the watched property.            |                                                              |
-| **propertyName**                                  | [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) |
-| The property name.                                |                                                              |
-| **target**                                        | Accessor                                                     |
-| The object containing the property being watched. |                                                              |
+## Type Definitions
 
 <table><tr><td bgcolor=#ddd><b>WatchHandle</b> <span>Object</span></td></tr></table>
 
-Represents a watch created when an object invokes **watch()**.
+Represents a watch or event handler which can be removed.
 
 Property:
 
@@ -272,11 +284,78 @@ Property:
 Example:
 
 ``` javascript
-var handle = map.watch('basemap', function(newVal){
+const handle = reactiveUtils.watch(() => map.basemap, (newVal) => {
   // Each time the value of map.basemap changes, it is logged in the console
   console.log("new basemap: ", newVal);
 });
 
 // When remove() is called on the watch handle, the map no longer watches for changes to basemap
 handle.remove();
-```
+```
+
+<table><tr><td bgcolor=#ddd><b>ReactiveEqualityFunction(newValue, oldValue) {Boolean}</b></td></tr></table>
+
+Function used to check whether two values are the same, in which case the watch callback isn't called.
+
+Parameters:
+
+| **newValue**   | *    |
+| -------------- | ---- |
+| The new value. |      |
+| **oldValue**   | *    |
+| The old value. |      |
+
+Returns:
+
+| Type    | Description                                      |
+| ------- | ------------------------------------------------ |
+| Boolean | Whether the new value is equal to the old value. |
+
+<table><tr><td bgcolor=#ddd><b>ReactiveListenerChangeCallback(target?)</b></td></tr></table>
+
+Function used to check whether two values are the same, in which case the watch callback isn't called.
+
+Parameters:
+
+| **target**                                                   | *    |
+| ------------------------------------------------------------ | ---- |
+| The event target to which the listener was added or from which it was removed. |      |
+
+<table><tr><td bgcolor=#ddd><b>ReactiveWatchCallback(newValue, oldValue) {Boolean}</b></td></tr></table>
+
+Function to be called when a value changes.
+
+Parameters:
+
+| **newValue**   | *    |
+| -------------- | ---- |
+| The new value. |      |
+| **oldValue**   | *    |
+| The old value. |      |
+
+<table><tr><td bgcolor=#ddd><b>ReactiveWatchExpression(){*}</b></td></tr></table>
+
+Function which is auto-tracked and should return a value to pass to the ReactiveWatchCallback
+
+Returns:
+
+| Type | Description    |
+| ---- | -------------- |
+| *    | The new value. |
+
+<table><tr><td bgcolor=#ddd><b>ReactiveWatchOptions</b> <span>Object</span></td></tr></table>
+
+Options used to configure how auto-tracking is performed and how the callback should be called.
+
+Property:
+
+| **initial**                                                  | Boolean                      |
+| ------------------------------------------------------------ | ---------------------------- |
+| Default Value:false<br />Whether to fire the callback immediately after initialization, if the necessary conditions are met. |                              |
+| **sync**                                                     | **Boolean**                  |
+| Default Value:false<br />Whether to fire the callback synchronously or on the next tick. |                              |
+| **once**                                                     | **Boolean**                  |
+| Default Value:false<br />Whether to fire the callback only once. |                              |
+| **equals**                                                   | **ReactiveEqualityFunction** |
+| Function used to check whether two values are the same, in which case the callback isn't called. Checks whether two objects, arrays or primitive values are shallow equal, e.g. one level deep. Non-plain objects are considered equal if they are strictly equal (===). |                              |
+

package/dist/accessor.d.ts

@@ -1,2 +1,16 @@
-declare const _default: any;
-export default _default;
+type WatchCallback = (newValue: any, oldValue: any, propertyName: string, target: Accessor) => void;
+interface WatchHandle extends Object {
+    /**
+     * Removes the watch handle.
+     */
+    remove(): void;
+}
+declare class Accessor {
+    declaredClass: string;
+    private _handles;
+    constructor(props?: object);
+    get(path: string): any;
+    set(path: string | object, value: any): this;
+    watch(path: string | string[], callback: WatchCallback): WatchHandle;
+}
+export default Accessor;

package/dist/accessor.js

@@ -1,103 +1,89 @@
-/**
- * observe class
- * @param cls class
- * @returns Proxy
- */
-function observe(cls) {
-    return new Proxy(cls, {
-        construct(target, args) {
-            const obj = new target(...args);
-            return new Proxy(obj, {
-                set: (target, key, value, receiver) => {
-                    const oldValue = target[key];
-                    target._handles.forEach((handle) => {
-                        if (handle.path === key) {
-                            handle.callback(value, oldValue, key, target);
-                        }
-                    });
-                    return Reflect.set(target, key, value, receiver);
-                },
-            });
-        },
-    });
-}
-class Accessor {
-    constructor(props) {
-        for (let prop in props) {
-            this[prop] = props[prop];
-        }
-        this.declaredClass = "Accessor";
-        this._handles = new Set();
-    }
-    get(path) {
-        const dotIndex = path.indexOf(".");
-        if (dotIndex !== -1) {
-            const key = path.slice(0, dotIndex);
-            const value = path.slice(dotIndex + 1);
-            return this[key] && this[key].get(value);
-        }
-        return this[path];
-    }
-    set(path, value) {
-        if (typeof path === "string") {
-            const dotIndex = path.indexOf(".");
-            if (dotIndex !== -1) {
-                const key = path.slice(0, dotIndex);
-                const childPath = path.slice(dotIndex + 1);
-                if (this[key]) {
-                    this[key].set(childPath, value);
-                }
-            }
-            else {
-                this[path] = value;
-            }
-        }
-        else {
-            for (const key in path) {
-                this.set(key, path[key]);
-            }
-        }
-        return this;
-    }
-    watch(path, callback) {
-        const handles = [];
-        const pathArray = [];
-        if (typeof path === "object") {
-            pathArray.push(...path);
-        }
-        if (typeof path === "string") {
-            if (path.includes(",")) {
-                pathArray.push(...path.replace(" ", "").split(","));
-            }
-            else {
-                pathArray.push(path);
-            }
-        }
-        pathArray.forEach((item) => {
-            let handle;
-            const dotIndex = item.indexOf(".");
-            if (dotIndex !== -1) {
-                const key = item.slice(0, dotIndex);
-                const value = item.slice(dotIndex + 1);
-                handle = this[key].watch(value, callback);
-            }
-            else {
-                handle = {
-                    path: item,
-                    callback,
-                };
-            }
-            handles.push(handle);
-            this._handles.add(handle);
-        });
-        const watchHandle = {
-            remove: () => {
-                handles.forEach((handle) => {
-                    this._handles.delete(handle);
-                });
-            },
-        };
-        return watchHandle;
-    }
-}
-export default observe(Accessor);
+class Accessor {
+    declaredClass;
+    _handles;
+    constructor(props = {}) {
+        // 为当前实例创建一个代理
+        const proxy = new Proxy(this, {
+            set: (target, key, value, receiver) => {
+                if (key !== '_handles' && target._handles) {
+                    const oldValue = target[key];
+                    target._handles.forEach((handle) => {
+                        if (handle.path === key) {
+                            handle.callback(value, oldValue, key, target);
+                        }
+                    });
+                }
+                return Reflect.set(target, key, value, receiver);
+            }
+        });
+        // 初始化属性
+        for (let prop in props) {
+            proxy[prop] = props[prop];
+        }
+        proxy.declaredClass = "Accessor";
+        proxy._handles = new Set();
+        return proxy;
+    }
+    get(path) {
+        const dotIndex = path.indexOf(".");
+        if (dotIndex !== -1) {
+            const key = path.slice(0, dotIndex);
+            const value = path.slice(dotIndex + 1);
+            return this[key] && this[key].get(value);
+        }
+        return this[path];
+    }
+    set(path, value) {
+        if (typeof path === "string") {
+            const dotIndex = path.indexOf(".");
+            if (dotIndex !== -1) {
+                const key = path.slice(0, dotIndex);
+                const childPath = path.slice(dotIndex + 1);
+                if (this[key]) {
+                    this[key].set(childPath, value);
+                }
+            }
+            else {
+                this[path] = value;
+            }
+        }
+        else {
+            for (const key in path) {
+                this.set(key, path[key]);
+            }
+        }
+        return this;
+    }
+    watch(path, callback) {
+        const handles = [];
+        const pathArray = [];
+        if (typeof path === "object") {
+            pathArray.push(...path);
+        }
+        if (typeof path === "string") {
+            if (path.includes(",")) {
+                pathArray.push(...path.replace(" ", "").split(","));
+            }
+            else {
+                pathArray.push(path);
+            }
+        }
+        pathArray.forEach((item) => {
+            const dotIndex = item.indexOf(".");
+            const handle = dotIndex !== -1
+                ? this[item.slice(0, dotIndex)].watch(item.slice(dotIndex + 1), callback)
+                : { path: item, callback };
+            handles.push(handle);
+            this._handles.add(handle);
+        });
+        const watchHandle = {
+            remove: () => {
+                handles.forEach((handle) => {
+                    this._handles.delete(handle);
+                });
+            },
+        };
+        return watchHandle;
+    }
+}
+export default Accessor;

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-import Accessor from './accessor';
-export default Accessor;
+import Accessor from './accessor.js';
+export default Accessor;

package/dist/index.js

@@ -1,2 +1,2 @@
-import Accessor from './accessor.js';
-export default Accessor;
+import Accessor from './accessor.js';
+export default Accessor;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@geodaoyu/accessor",
-  "version": "1.0.2",
-  "description": "Implement esri/core/Accessor by myself.",
+  "version": "2.0.1",
+  "description": "mini @arcgis/core/core/Accessor & @arcgis/core/core/reactiveUtils",
   "main": "index.js",
   "module": "dist/index.js",
   "scripts": {
@@ -11,11 +11,18 @@
   "keywords": [
     "Accessor",
     "Esri",
-    "ArcGIS"
+    "ArcGIS",
+    "Proxy"
   ],
   "author": "GeoDaoyu",
   "license": "MIT",
   "type": "module",
+  "files": [
+    "dist/**/*",
+    "src/**/*",
+    "README.md",
+    "LICENSE"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/GeoDaoyu/Accessor.git"

package/src/accessor.ts

@@ -1,122 +1,119 @@
-type WatchCallback = (
-  newValue: any,
-  oldValue: any,
-  propertyName: string,
-  target: Accessor
-) => void;
-
-interface WatchHandle extends Object {
-  /**
-   * Removes the watch handle.
-   */
-  remove(): void;
-}
-
-interface Handle {
-  path: string;
-  callback: Function;
-}
-
-/**
- * observe class
- * @param cls class
- * @returns Proxy
- */
-function observe(cls) {
-  return new Proxy(cls, {
-    construct(target, args) {
-      const obj = new target(...args);
-      return new Proxy(obj, {
-        set: (target, key, value, receiver) => {
-          const oldValue = target[key];
-          target._handles.forEach((handle) => {
-            if (handle.path === key) {
-              handle.callback(value, oldValue, key, target);
-            }
-          });
-          return Reflect.set(target, key, value, receiver);
-        },
-      });
-    },
-  });
-}
-
-class Accessor {
-  declaredClass: string;
-  private _handles: Set<Handle>;
-
-  constructor(props: object) {
-    for (let prop in props) {
-      this[prop] = props[prop];
-    }
-    this.declaredClass = "Accessor";
-    this._handles = new Set();
-  }
-  get(path: string): any {
-    const dotIndex = path.indexOf(".");
-    if (dotIndex !== -1) {
-      const key = path.slice(0, dotIndex);
-      const value = path.slice(dotIndex + 1);
-      return this[key] && this[key].get(value);
-    }
-    return this[path];
-  }
-  set(path: string | object, value: any): this {
-    if (typeof path === "string") {
-      const dotIndex = path.indexOf(".");
-      if (dotIndex !== -1) {
-        const key = path.slice(0, dotIndex);
-        const childPath = path.slice(dotIndex + 1);
-        if (this[key]) {
-          this[key].set(childPath, value);
-        }
-      } else {
-        this[path] = value;
-      }
-    } else {
-      for (const key in path) {
-        this.set(key, path[key]);
-      }
-    }
-
-    return this;
-  }
-  watch(path: string | string[], callback: WatchCallback): WatchHandle {
-    const handles = [];
-    const pathArray = [];
-    if (typeof path === "object") {
-      pathArray.push(...path);
-    }
-    if (typeof path === "string") {
-      if (path.includes(",")) {
-        pathArray.push(...path.replace(" ", "").split(","));
-      } else {
-        pathArray.push(path);
-      }
-    }
-    pathArray.forEach((item) => {
-      const dotIndex = item.indexOf(".");
-      const handle =
-        dotIndex !== -1
-          ? this[item.slice(0, dotIndex)].watch(
-              item.slice(dotIndex + 1),
-              callback
-            )
-          : { path: item, callback };
-
-      handles.push(handle);
-      this._handles.add(handle);
-    });
-
-    const watchHandle = {
-      remove: () => {
-        handles.forEach((handle) => {
-          this._handles.delete(handle);
-        });
-      },
-    };
-    return watchHandle;
-  }
-}
-
-export default observe(Accessor);
+type WatchCallback = (
+  newValue: any,
+  oldValue: any,
+  propertyName: string,
+  target: Accessor
+) => void;
+
+interface WatchHandle extends Object {
+  /**
+   * Removes the watch handle.
+   */
+  remove(): void;
+}
+
+interface Handle {
+  path: string;
+  callback: Function;
+}
+
+class Accessor {
+  declaredClass: string;
+  private _handles: Set<Handle>;
+
+  constructor(props: object = {}) {
+    // 为当前实例创建一个代理
+    const proxy = new Proxy(this, {
+      set: (target, key, value, receiver) => {
+        if (key !== '_handles' && target._handles) {
+          const oldValue = target[key];
+          target._handles.forEach((handle) => {
+            if (handle.path === key) {
+              handle.callback(value, oldValue, key, target);
+            }
+          });
+        }
+        return Reflect.set(target, key, value, receiver);
+      }
+    });
+
+    // 初始化属性
+    for (let prop in props) {
+      proxy[prop] = props[prop];
+    }
+    proxy.declaredClass = "Accessor";
+    proxy._handles = new Set();
+
+    return proxy;
+  }
+  
+  get(path: string): any {
+    const dotIndex = path.indexOf(".");
+    if (dotIndex !== -1) {
+      const key = path.slice(0, dotIndex);
+      const value = path.slice(dotIndex + 1);
+      return this[key] && this[key].get(value);
+    }
+    return this[path];
+  }
+  
+  set(path: string | object, value: any): this {
+    if (typeof path === "string") {
+      const dotIndex = path.indexOf(".");
+      if (dotIndex !== -1) {
+        const key = path.slice(0, dotIndex);
+        const childPath = path.slice(dotIndex + 1);
+        if (this[key]) {
+          this[key].set(childPath, value);
+        }
+      } else {
+        this[path] = value;
+      }
+    } else {
+      for (const key in path) {
+        this.set(key, path[key]);
+      }
+    }
+
+    return this;
+  }
+  
+  watch(path: string | string[], callback: WatchCallback): WatchHandle {
+    const handles = [];
+    const pathArray = [];
+    if (typeof path === "object") {
+      pathArray.push(...path);
+    }
+    if (typeof path === "string") {
+      if (path.includes(",")) {
+        pathArray.push(...path.replace(" ", "").split(","));
+      } else {
+        pathArray.push(path);
+      }
+    }
+    pathArray.forEach((item) => {
+      const dotIndex = item.indexOf(".");
+      const handle =
+        dotIndex !== -1
+          ? this[item.slice(0, dotIndex)].watch(
+              item.slice(dotIndex + 1),
+              callback
+            )
+          : { path: item, callback };
+
+      handles.push(handle);
+      this._handles.add(handle);
+    });
+
+    const watchHandle = {
+      remove: () => {
+        handles.forEach((handle) => {
+          this._handles.delete(handle);
+        });
+      },
+    };
+    return watchHandle;
+  }
+}
+
+export default Accessor;

package/src/index.ts

@@ -1,3 +1,3 @@
-import Accessor from './accessor';
+import Accessor from './accessor.js';
 
 export default Accessor;

package/test/construct.test.js

@@ -1,31 +0,0 @@
-import Accessor from '../dist/index.js';
-import assert from 'assert';
-
-describe('#constructor()', function() {
-  it('typeof accessor should be "object"', function() {
-    const accessor = new Accessor();
-    assert.strictEqual(typeof accessor, 'object');
-  });
-  /**
-   * 可以通过 对象的形式给类 赋初值
-   */
-  it('accessor\'s props can be an object', function() {
-    const view = new Accessor({
-      zoom: 4,
-    });
-    assert.strictEqual(view.zoom, 4);
-  });
-  /**
-   * 子类可以继承Accessor
-   */
-  it('subclass can extend from Accessor', function() {
-    class View extends Accessor {
-      constructor() {
-        super();
-        this.declaredClass = "View";
-      }
-    }
-    const view = new View();
-    assert.strictEqual(view instanceof Accessor, true);
-  });
-});

package/test/get.test.js

@@ -1,34 +0,0 @@
-import Accessor from '../dist/index.js';
-import assert from 'assert';
-
-describe('#get()', function() {
-  /**
-   * 属性不存在,返回undefined
-   */
-  it('should return undefined when the property in the path does not exist', function() {
-    const accessor = new Accessor();
-    assert.strictEqual(accessor.get('map'), undefined);
-  });
-  /**
-   * 设值取值
-   */
-  it('should return 4 when the property is set to 4', function() {
-    const view = new Accessor();
-    view.set('zoom', 4);
-    assert.strictEqual(view.get('zoom'), 4);
-  });
-  it('deep path:should return undefined when the property in the path does not exist', function() {
-    const view = new Accessor();
-    assert.strictEqual(view.get('map.basemap'), undefined);
-  });
-  /**
-   * 获取属性的属性
-   */
-  it('should return the property in the deep path', function() {
-    const map = new Accessor();
-    const basemap = new Accessor();
-    map.set('basemap', basemap);
-    basemap.set('title', 'World Topographic Map');
-    assert.strictEqual(map.get('basemap.title'), 'World Topographic Map');
-  });
-});

package/test/set.test.js

@@ -1,56 +0,0 @@
-import Accessor from "../dist/index.js";
-import assert from "assert";
-
-describe("#set()", function () {
-  it("should return 4 when the property is set to 4", function () {
-    const view = new Accessor();
-    view.set("zoom", 4);
-    assert.strictEqual(view.get("zoom"), 4);
-  });
-  it("should return 4 when the property is 4", function () {
-    const view = new Accessor();
-    view.zoom = 4;
-    assert.strictEqual(view.zoom, 4);
-  });
-  /**
-   * 设置属性的属性
-   */
-  it("deep path set property", function () {
-    const map = new Accessor();
-    const basemap = new Accessor();
-    map.set("basemap", basemap);
-    map.set("basemap.title", "World Topographic Map");
-    assert.strictEqual(map.get("basemap.title"), "World Topographic Map");
-  });
-  /**
-   * 设置属性的属性,当属性不存在的时候,不设置
-   */
-  it("deep path set property which does not exist", function () {
-    const map = new Accessor();
-    map.set("basemap.title", "World Topographic Map");
-    assert.strictEqual(map.get("basemap.title"), undefined);
-  });
-  /**
-   * 可以通过对象的形式批量设置属性
-   */
-  it("An object with key-value pairs can be passed into", function () {
-    const view = new Accessor();
-    view.set({
-      center: [-4.4861, 48.3904],
-      scale: 5000,
-    });
-    assert.strictEqual(view.get("scale"), 5000);
-  });
-  /**
-   * 柯里化
-   */
-  it("An object with key-value pairs can be passed into", function () {
-    const view = new Accessor();
-    const updateView = view.set.bind(view);
-    updateView({
-      center: [-4.4861, 48.3904],
-      scale: 5000,
-    });
-    assert.strictEqual(view.get("scale"), 5000);
-  });
-});

package/test/watch.test.js

@@ -1,168 +0,0 @@
-import Accessor from "../dist/index.js";
-import assert from "assert";
-class Counter extends Accessor {
-  constructor() {
-    super();
-    this.number = 0;
-  }
-  setNumber = (value) => {
-    this.number = value;
-  };
-}
-
-describe("#watch()", function () {
-  it("watch property change", function () {
-    const result = [];
-    const callback = (newValue, oldValue, propertyName, target) => {
-      result.push(newValue, oldValue, propertyName, target);
-    };
-    const view = new Accessor();
-    view.zoom = 4;
-    view.watch("zoom", callback);
-    view.zoom = 5;
-    assert.deepStrictEqual(result, [5, 4, "zoom", view]);
-  });
-  /**
-   * 深层属性的变更的监听
-   * 注意,此时callback的target是指向 拥有这个属性的类,而不是最外层的类
-   */
-  it("watch deep path property change", function () {
-    const result = [];
-    const callback = (newValue, oldValue, propertyName, target) => {
-      result.push(newValue, oldValue, propertyName, target);
-    };
-    const view = new Accessor({
-      map: new Accessor({
-        basemap: new Accessor({
-          title: "streets-vector",
-        }),
-      }),
-    });
-    view.watch("map.basemap.title", callback);
-    view.map.basemap.title = "topo-vector";
-    assert.deepStrictEqual(result, [
-      "topo-vector",
-      "streets-vector",
-      "title",
-      view.map.basemap,
-    ]);
-  });
-  /**
-   * 一个callback监听多个属性, 字符串形式
-   */
-  it("watch multiple propertys change in string", function () {
-    const result = [];
-    const callback = (newValue, oldValue, propertyName, target) => {
-      result.push(newValue, oldValue, propertyName, target);
-    };
-    const view = new Accessor({
-      zoom: 12,
-      scale: 144447.638572,
-    });
-    view.watch("zoom, scale", callback);
-    view.zoom = 11;
-    view.scale = 288895.277144;
-    assert.deepStrictEqual(result, [
-      11,
-      12,
-      "zoom",
-      view,
-      288895.277144,
-      144447.638572,
-      "scale",
-      view,
-    ]);
-  });
-  /**
-   * 一个callback监听多个属性, 数组形式
-   */
-  it("watch multiple propertys change in string array", function () {
-    const result = [];
-    const callback = (newValue, oldValue, propertyName, target) => {
-      result.push(newValue, oldValue, propertyName, target);
-    };
-    const view = new Accessor({
-      zoom: 12,
-      scale: 144447.638572,
-    });
-    view.watch(["zoom", "scale"], callback);
-    view.zoom = 11;
-    view.scale = 288895.277144;
-    assert.deepStrictEqual(result, [
-      11,
-      12,
-      "zoom",
-      view,
-      288895.277144,
-      144447.638572,
-      "scale",
-      view,
-    ]);
-  });
-  /**
-   * 调用remove方法移除handle,callback将不执行
-   */
-  it("remove watch handle", function () {
-    const result = [];
-    const callback = (newValue, oldValue, propertyName, target) => {
-      result.push(newValue, oldValue, propertyName, target);
-    };
-    const view = new Accessor();
-    view.zoom = 4;
-    const handle = view.watch("zoom", callback);
-    handle.remove();
-    view.zoom = 5;
-    assert.deepStrictEqual(result, []);
-  });
-  /**
-   * 只在注册的属性变更后执行callback
-   */
-  it("only watch registered property", function () {
-    const result = [];
-    const callback = (newValue, oldValue, propertyName, target) => {
-      result.push(newValue, oldValue, propertyName, target);
-    };
-    const view = new Accessor();
-    view.zoom = 4;
-    view.watch("scale", callback);
-    view.zoom = 5;
-    assert.deepStrictEqual(result, []);
-  });
-  /**
-   * 子类上的方法也可以被监听
-   */
-  it("watch subclass member", function () {
-    const counter = new Counter();
-    const result = [];
-    const callback = (newValue, oldValue, propertyName, target) => {
-      result.push(newValue, oldValue, propertyName, target);
-    };
-    counter.number = 4;
-    counter.watch("number", callback);
-    counter.setNumber(5);
-
-    assert.deepStrictEqual(result, [5, 4, "number", counter]);
-  });
-
-  /**
-   * 子类上的方法 监听变更次数
-   */
-  it("watch subclass member changed times", function () {
-    const counter = new Counter();
-    let times = 0;
-    const callback = () => {
-      times++;
-    };
-    counter.watch("number", callback);
-    counter.number = 1; // +1;
-    counter.number = 1; // +1;
-    counter.set("number", 2); // +1;
-    counter.set("number", 2); // +1;
-    counter.set({ number: 3 }); // +1;
-    counter.set({ number: 3 }); // +1;
-    counter.setNumber(4); // +1;
-    counter.setNumber(4); // +1;
-
-    assert.equal(times, 8);
-  });
-});

package/tsconfig.json

@@ -1,18 +0,0 @@
-{
-  "compilerOptions": {
-    "experimentalDecorators": true,
-    "module": "ESNext",
-    "target": "ESNext",
-    "sourceMap": false,
-    "rootDir": "./src",
-    "outDir": "./dist",
-    "esModuleInterop": true,
-    "declaration": true,
-    "skipLibCheck": true,
-    "moduleResolution": "node",
-  },
-  "include": [
-    "src/**/*.ts",
-  ],
-  "exclude": []
-}