https://github.com/bahrus/aggregator-fn
Web component that aggregates properties together using an inline JS expression
https://github.com/bahrus/aggregator-fn
Last synced: 2 months ago
JSON representation
Web component that aggregates properties together using an inline JS expression
- Host: GitHub
- URL: https://github.com/bahrus/aggregator-fn
- Owner: bahrus
- License: mit
- Created: 2018-09-15T15:49:34.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T02:50:46.000Z (about 2 years ago)
- Last Synced: 2025-03-21T06:33:21.774Z (2 months ago)
- Language: TypeScript
- Homepage:
- Size: 656 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.webcomponents.org/element/aggregator-fn)
[](https://github.com/bahrus/aggregator-fn/actions?query=workflow%3ACI)
# aggregator-fn
\ (or \ for short) is a non-visual custom element that aggregates properties together using an inline JS expression, and which can act as a "piping" processor between two or more elements.
It is most useful for markup-centric applications, consisting of web components that are not controlled by some state managed component container -- for example a ["peer-to-peer" binding framework](https://github.com/bahrus/p-et-alia).
The initial motivator for this component is being able to build url's from a form consisting of input elements -- declaratively.
See [form-matter](https://github.com/bahrus/form-matter) for an alternative.
## Syntax:
```html
({operation, expression}) => `https://newton.now.sh/${operation}/${encodeURI(expression)}`
```
or
```html
({operation, expression}) => `https://newton.now.sh/${operation}/${encodeURI(expression)}`
```
does the following:
1) Dynamically attaches properties to the aggregator-fn element for each of the function arguments -- "operation" and "expression" in this case.
2) Any time any of the property values change, the aggregator function is evaluated (allowing for some debouncing), and the result is stored in the element's value property. An event, "value-changed" is fired every time the value changes.
aggregator-fn doesn't make much sense standing on its own. Let's see how we can use it in the markup below, to handle sending a request to the [Newton Api Advanced Math microservice](https://newton.now.sh/).
```html
Operation:
Expression:
({operation, expression}) => `https://newton.now.sh/api/v2/${operation}/${encodeURI(expression)}`
import 'https://cdn.skypack.dev/[email protected]?min';
import 'https://cdn.skypack.dev/[email protected]?min';
import 'https://cdn.skypack.dev/[email protected]?min';
```
## [Demo](https://codepen.io/bahrus/pen/VwWdGBJ)
## [Post IE/11 Support](https://docs.microsoft.com/en-us/deployedge/edge-ie-mode)
## Accessing the custom element itself, containing host
In some circumstances, you may need the aggregator function to have access to the context from which it is being called. To do this, add an argument, "self":
```html
({a, b, c, self}) => {
console.log(self);
return a + b + c;
}
```
You can also reference the host component if it is available. The host is obtained via self.getRootNode().host. This makes sense if aggregator-fn/ag-fn is used within a traditional web component that uses Shadow DOM. If it is used inside a web component that doesn't use shadowDOM, or some other containing DOM element you want to give special access to and call it "host", use property/attribute hostSelector/host-selector.
## [API Reference](https://bahrus.github.io/wc-info/cdn-base.html?npmPackage=aggregator-fn)
## Viewing Your Element
1. Install node.js
2. Install git. Fork or clone this repo.
3. From a command window, navigate to the folder created in step 2.
4. Now run:
```
$ npm run serve
```
## Running Tests
```
$ npm run test
```