Directory

← Back

aggregator-fn

Web component that aggregates properties together using an inline JS expression

Author

Rating

Not enough ratings

Popularity

<100

Published on webcomponents.org

aggregator-fn

NB: aggregator-fn shares quite a bit of code with litter-g, as they both tackle similar problems. It would be natural to use the two together (without much additional overhead.)

<aggregator-fn> 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.

The initial motivator for this component is being able to build url's from a form consisting of input elements -- declaratively.

Syntax:

<aggregator-fn><script nomodule>
    ({operation, expression}) => `https://newton.now.sh/${operation}/${encodeURI(expression)}`
</script></aggregator-fn>

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 = ":

<aggregator-fn><script nomodule>
    fn = ({operation, expression}) => `https://newton.now.sh/${operation}/${encodeURI(expression)}`
</script></aggregator-fn>

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.

    <div>
        <label for="operation">Operation:</label>
        <input type="text" name="operation" value="derive">
        <p-d on="input" to="aggregator-fn" prop="operation" m="1"></p-d>
        <label for="expression">Expression:</label>
        <input type="text" name="expression" value="x^2">
        <p-d on="input" prop="expression"></p-d>
        <aggregator-fn><script nomodule>
            ({operation, expression}) => `https://newton.now.sh/${operation}/${encodeURI(expression)}`
        </script></aggregator-fn>
        <p-d on="value-changed" prop="href"></p-d>
        <xtal-fetch fetch></xtal-fetch>
        <p-d on="fetch-complete" prop="input"></p-d>
        <xtal-json-editor options="{}" height="300px"></xtal-json-editor>
        
    </div>
    <!-- Specify Mathematical Operation -->
    <label for="operation">Operation:</label>
    <input disabled type="text" name="operation" value="derive">
    <!-- Pass down Operation to aggregator-fn when operation changes-->
    <p-d on="input" to="aggregator-fn" prop="operation"></p-d>
    <!-- Specify Mathematical Expression-->
    <label for="expression">Expression:</label>
    <input disabled type="text" name="expression" value="x^2">
    <!-- Pass down Expression to aggregator-fn when expression changes -->
    <p-d on="input" prop="expression"></p-d>
    <!-- Combine Operation and Expression into URL Newton Microservice Api understands-->
    <aggregator-fn disabled><script nomodule>
        ({ operation, expression }) => `https://newton.now.sh/${operation}/${encodeURI(expression)}`
    </script></aggregator-fn>
    <!-- Pass down url calculated by aggregator-fn to xtal-fetch's href property-->
    <p-d on="value-changed" prop="href"></p-d>
    <!-- Make fetch call to Newton Microservice Api -->
    <xtal-fetch debounce-duration="100" fetch disabled></xtal-fetch>
    <!-- Pass results of fetch to Json Viewer -->
    <p-d on="fetch-complete" prop="input"></p-d>
    <xtal-json-editor options="{}" height="300px"></xtal-json-editor>
    
    <!-- ========================  Script Refs ========================== -->
    <!-- Polyfills Needed for MS browsers -->
    <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
    <!-- End Polyfills -->
    <script type="module" src="https://cdn.jsdelivr.net/npm/aggregator-fn@0.0.11/aggregator-fn.iife.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/xtal-fetch@0.0.52/xtal-fetch.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/p-d.p-u@0.0.82/dist/p-d.iife.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/xtal-json-editor@0.0.29/xtal-json-editor.js"></script>
</div>
</template>
``` -->

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. Your references can look like this:

            <!-- For Retro Browsers -->
            <script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
            <script nomodule src="https://unpkg.com/aggregator-fn@0.0.1/IE11-polyfill.js"></script>
            <script nomodule src="https://unpkg.com/xtal-latx@0.0.35/destruct.IE11.js"></script>
            <!-- End Polyfills -->

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:

<aggregator-fn>
    <script nomodule>
        ({a, b, c, __this}) => {
            console.log(__this);
            return a + b + c;
        }
    </script>
</aggregator-fn>

Install the Polymer-CLI

First, make sure you have the Polymer CLI and npm (packaged with Node.js) 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

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

0.0.17 imported 2019-05-12
0.0.16 imported 2019-03-03
0.0.15 imported 2018-11-26
0.0.14 imported 2018-11-21
0.0.13 imported 2018-11-21
0.0.12 imported 2018-10-28
0.0.11 imported 2018-10-23
0.0.10 imported 2018-09-23
0.0.9 imported 2018-09-20
0.0.8 imported 2018-09-20
0.0.7 imported 2018-09-17
0.0.6 imported 2018-09-17
0.0.5 imported 2018-09-17
0.0.4 imported 2018-09-17
0.0.3 imported 2018-09-17
0.0.2 imported 2018-09-17
0.0.1 imported 2018-09-17
0.0.0 imported 2018-09-15

Dependencies

  • xtal-element#0.0.59
  • trans-render#0.0.111
Released
2019-05-12
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Browser
Browser Independent

aggregator-fn - Vaadin Add-on Directory

Web component that aggregates properties together using an inline JS expression aggregator-fn - Vaadin Add-on Directory
[![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
```
``` --> ## 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
Online