Html2FastDom

Simple helper to compile HTML to FastDom:

Usage

Just import HtmlComponent decorator and use it with your class:

import{HtmlComponent}from'@html2FastDom/compiler';
@HtmlComponent({template: `<button fdOnClick="{{onClick}}">{{counter}}</button>`,selector: 'counter'})classCounterextendsComponent{width=100;reactive={counter: fdValue(0)};getcounter(){returnthis.reactive.counter;}onClick=()=>{this.counter.value+=1;};}exportfunctioncreateCounter(){returncreateComponent(Counter);}bootstrap('#counter',createCounter);

HtmlComponent uses componentMap under the hood so every component described with this decorator is automatically registered in the component map. After defining the component via decorator you can access it via selector or by class name if selector is not specified:

@HtmlComponent({template: `<counter fdFor="[1, 2, 3, 4, 5, 6, 7]"/>`,selector: 'counter-for'})classCounterForComponentextendsComponent{}exportfunctioncreateCounterFor(){returncreateComponent(CounterForComponent);}bootstrap('#counter_for',createCounterFor);

The code above creates 7 separate counters.

Component Map

To add your component to default componentMap use register function at defaultComponentRegistry:

import{defaultComponentRegistry}from'@html2FastDom/compiler';defaultComponentRegistry.register('my-counter',createCounter);

If you want some components not to be visible via HtmlComponent use componentRegistry property when creating your component, so the component will be registered in the given componentRegistry:

import{ComponentMapRegistry}from'@html2FastDom/compiler';constmyRegistry=newComponentMapRegistry();
@HtmlComponent({template: `<div fdFor="[1, 2, 3, 4, 5, 6, 7]">{{item}}</div>`,selector: 'counter-for',componentRegistry: myRegistry})classCounterForComponentextendsComponent{}

Advanced Usage (via compiler)

import{HtmlToFastDomCompiler}from'@html2FastDom/compiler';constsomeComponentFactory=(index)=>createComponent(SomeComponent,index)constcomponentMap={'some-component': someComponentFactory}classSimpleForComponentextendsComponent{template: FastDomNode=newHtmlToFastDomCompiler(`<div fdFor="[1, 2, 3, 4, 5, 6, 7]"> <span>Item</span> <span>{{item}}</span> <span>&mdash;</span> <span>index</span> <span>{{index}}</span> <some-component fdArgs="[item]"/> <div>`).compile(this,componentMap);}exportfunctioncreateSimpleFor(){returncreateComponent(SimpleForComponent);}

More examples at demo project in source code.

Demo

1. Clone the project
2. Install dependencies: npm i
3. Run demo: npm start