https://github.com/bahrus/proxy-decor
https://github.com/bahrus/proxy-decor
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/bahrus/proxy-decor
- Owner: bahrus
- License: mit
- Created: 2021-05-01T09:47:29.000Z (about 4 years ago)
- Default Branch: baseline
- Last Pushed: 2021-10-17T06:09:29.000Z (over 3 years ago)
- Last Synced: 2024-12-31T23:11:51.197Z (6 months ago)
- Language: TypeScript
- Size: 30.3 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# proxy-decor [TODO]
proxy-decor provides mediator capabilities between two DOM elements, one of which is a built-in element enhanced by a decorator / behavior following the pattern established by [be-decorated](https://github.com/bahrus/be-decorated). For example, the [re-formable](https://github.com/bahrus/be-reformable) decorator enhances the form, to get the JSON response on the client side. But how do we pass the result down to the JSON viewer?
```html
Operation:
Expression:
```
We could have the form emit a namespaced event, e.g. "reformable::fetch-result-changed" everytime the fetch completes. But what if json-viewer upgrades after the fetch completed? How can json-viewer "catch up" and extract the value of the last event?
This is difficult, without plopping on a custom property onto the native form element, which we are loathe to do.
So that's where proxy-decor steps in.
proxy-decor overrides the built-in addEventListener method, and applies some special logic.
If the event name starts with reformable::fetch-result-changed then it:
1. Finds the proxy associated with be-reformable.
2. Extracts the value fetchResult from the proxy.
3. Invokes the callback specified in addEventListener if there is a defined value in step 2.
4. Subscribes to the proxy for further changes to virtual property fetchResult.
5. Invokes the callback when changes happen to the virtual property.
So the markup looks like:
```html
Operation:
Expression:
```