Documentation

Installation

npm i html-tag-js

path/to/html-tag-js/dist/tag.js

Enable JSX like syntax

module.exports={module:{    ...rules:[{test:/\.jsx?$/,exclude:/node_modules/,use:['html-tag-js/jsx/tag-loader.js'],},      ...],},};

{  ..."plugins":["html-tag-js/jsx/jsx-to-tag.js","html-tag-js/jsx/syntax-parser.js",    ...],  ...}

Usage

import'html-tag-js/dist/polyfill';// optional// no need to import tag from 'html-tag-js'// if you are using tag-loaderimporttagfrom'html-tag-js';

Cheat Sheet

UseReactive to create reactive node

importReactivefrom'html-tag-js/Reactive';constcount=Reactive(0);document.body.append(<div><h1>{count}</h1><buttononclick={()=>count.value++}>Increment</button></div>);

UseRef to get reference of the node

importReffrom'html-tag-js/Ref';constref=Ref(node=>{console.log(node);// <h1>Hello</h1>});// Change style of the node before or after referencingref.style.color='red';document.body.append(<div><h1ref={ref}>Hello</h1></div>);