aggregator-fn - Vaadin Add-on Directory

Web component that aggregates properties together using an inline JS expression

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/aggregator-fn)

# aggregator-fn NB: aggregator-fn shares quite a bit of code with [litter-g](https://www.webcomponents.org/element/litter-g), as they both tackle similar problems. It would be natural to use the two together (without much additional overhead.) \ is a non-visual custom element that aggregates properties together using an inline JS expression. This component is designed to provide an alternative to Polymer's template string interpolation. 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://www.webcomponents.org/element/p-d.p-u). The initial motivator for this component is being able to build url's from a form consisting of input elements -- declaratively. ## Syntax: ```html ``` 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 changes, 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. ## VS Code workaround To accomodate VS Code and gain some intellisense support, you can precede the expression with the reserved characters "fn = ": ```html ``` 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:

``` --> ## IE11 Support Note the use of lambda expressions within the script tag. This poses some compatibility challenges. Depending on which tool / server configururation you are using to serve your pages, these ES6 expressions can be transpiled on the fly or during the build to expressions that IE11 understands. Polymer's serve / build tool is one such tool that does this. If you use a tool like this, the aggregator-fn needs to know how to understand the parameters for the expression. To do this, you need to add a JS reference specifically for IE11. You also need to include a polyfill file needed for common ES6 expressions, such as the one generated by the [Financial Times polyfill service](https://polyfill.io/v2/docs/). Your references can look like this: ```html ``` Here we are using "nomodule" with the assumption that only IE11 activates such scripts. This may be slightly problematic if you are targeting Edge users who have yet to upgrade Edge 17, for example. ## Accessing the custom element itself In some (rare?) 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, __this: ```html ``` # Install the Polymer-CLI First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally. ## Viewing Your Element ``` $ polymer serve ``` ## Running Tests WIP View on NPM
View on GitHub

aggregator-fn version 0.0.0
### Dependencies

aggregator-fn version 0.0.1
### Dependencies * xtal-latx#0.0.34

aggregator-fn version 0.0.2
### Dependencies * xtal-latx#0.0.34

aggregator-fn version 0.0.3
### Dependencies * xtal-latx#0.0.34

aggregator-fn version 0.0.4
### Dependencies * xtal-latx#0.0.34

aggregator-fn version 0.0.5
### Dependencies * xtal-latx#0.0.34

aggregator-fn version 0.0.6
### Dependencies * xtal-latx#0.0.34

aggregator-fn version 0.0.7
### Dependencies * xtal-latx#0.0.34

aggregator-fn version 0.0.8
### Dependencies * xtal-latx#0.0.41

aggregator-fn version 0.0.9
### Dependencies * xtal-latx#0.0.41

aggregator-fn version 0.0.10
### Dependencies * xtal-latx#0.0.41

aggregator-fn version 0.0.11
### Dependencies * xtal-latx#0.0.47

aggregator-fn version 0.0.12
### Dependencies * xtal-latx#0.0.47

aggregator-fn version 0.0.13
### Dependencies * xtal-latx#0.0.76

aggregator-fn version 0.0.14
### Dependencies * xtal-latx#0.0.76

aggregator-fn version 0.0.15
### Dependencies * xtal-latx#0.0.77

aggregator-fn version 0.0.16
### Dependencies * xtal-element#0.0.29

aggregator-fn version 0.0.17
### Dependencies * xtal-element#0.0.59 * trans-render#0.0.111