be-preactive (🪥)

![Published on webcomponents.org](https://www.webcomponents.org/element/be-preactive)
![NPM version](http://badge.fury.io/js/be-preactive)

be-preactive is a custom element enhancement that provides rendering capabilities based on Preact. It is one of a family of renderers, based on the common enhancement base class be-render-neutral. Other members include be-alit.

In this case, it builds on Preact's build-less workflows.

Example 1a - Simple list

html



    





...





A framework can theoretically pass in the view model:

JavaScript

await whenDefined('be-enhanced');

oScript.beEnhanced.by.beAlit.vm = ["He", "She", "They", "Other"];





Part II Pulling in the View Model



Example 2a



As suggested above, it is seemingly beyond most frameworks's ability to pass values to the view model in the proscribed  way.  So be-preactive can take over the reigns of binding, and tap into the power of DSS).

html



                    href="prescriptions.json?patient=zero" 

            enh-be-kvetching>

        

        










            
                Prescription
                Prescriber
                Dosage
                Frequency





Using other names



It is easy to choose alternative names.  This package supports one:

html





Viewing Locally



Any web server that serves static files and supports server-side includes will do but...



1.  Install git.

2.  Fork/clone this repo.

3.  Install node.

4.  Install Python 3 or later.

5.  Open command window to folder where you cloned this repo.

6.  > npm install

7.  > npm run serve

8.  Open http://localhost:8000/demo in a modern browser.



Importing in ES Modules:

JavaScript

import 'be-preactive/be-preactive.js';





Using from CDN:

html

Example 1a - Simple list

html

...

A framework can theoretically pass in the view model:

JavaScript
await whenDefined('be-enhanced');
oScript.beEnhanced.by.beAlit.vm = ["He", "She", "They", "Other"];

Part II Pulling in the View Model

Example 2a

As suggested above, it is seemingly beyond most frameworks's ability to pass values to the view model in the proscribed way. So be-preactive can take over the reigns of binding, and tap into the power of DSS).

html

href="prescriptions.json?patient=zero"
enh-be-kvetching>

Prescription	Prescriber	Dosage	Frequency

Using other names

It is easy to choose alternative names. This package supports one:

html

Viewing Locally

Any web server that serves static files and supports server-side includes will do but...

1. Install git.
2. Fork/clone this repo.
3. Install node.
4. Install Python 3 or later.
5. Open command window to folder where you cloned this repo.
6. > npm install
7. > npm run serve
8. Open http://localhost:8000/demo in a modern browser.

Importing in ES Modules:

JavaScript
import 'be-preactive/be-preactive.js';

Using from CDN:

html