v2.0.0

Author: Ajit Kumar

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change log html-tag-js
 
+## 2.0.0
+
+- Removed `tag.use` method instead use `html-tag-js/Reactive` to create reactive node. E.g. `const count = Reactive(0);`
+- Now you can pass `onref` callback to `Ref(onrefCallback)` constructor to get reference of the node.
+- Supports promise in children. E.g. `<div>{Promise.resolve('hello')}</div` will render `<div>hello</div>`
+
 ## 1.4.0
 
 - Filter out null and undefined node from children

README.md

@@ -1,7 +1,6 @@
 # html-tag-js
 
-A simple library for creating and manipulating DOM using JavaScript DOM api.
-See
+A simple library for creating and manipulating DOM using JavaScript DOM api with out of the box support for JSX like syntax.
 
 ## Documentation
 
@@ -17,54 +16,87 @@ or directly import into browser
 path/to/html-tag-js/dist/tag.js
 ```
 
+### Enable JSX like syntax
+
+To enable JSX like syntax, use `html-tag-js/tag-loader` as loader in webpack.
+
+```json
+module.exports = {
+  module: {
+    ...
+    rules: [
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        use: ['html-tag-js/jsx/tag-loader.js'],
+      },
+      ...
+    ],
+  },
+};
+```
+
+And in add following lines in babel configuration file.
+
+```json
+{
+  ...
+  "plugins": [
+    "html-tag-js/jsx/jsx-to-tag.js",
+    "html-tag-js/jsx/syntax-parser.js",
+    ...
+  ],
+  ...
+}
+```
+
 ### Usage
 
-#### es6
+To create elements, use `tag` function. It accepts tag name, options and children as arguments. Checkout [tag](./docs/tag.md) for more details.
 
 ```javascript
+import 'html-tag-js/dist/polyfill'; // optional
+// no need to import tag from 'html-tag-js'
+// if you are using tag-loader
 import tag from 'html-tag-js';
-import 'html-tag-js/dist/polyfill'; //Important (only once);
 ```
 
-##### usage
+### Cheat Sheet
 
-```javascript
-//creating element with options
-const span = tag('span', {
-  textContent: 'This is span tag',
-  className: 'myspan',
-  id: 'span1',
-});
+#### Use `Reactive` to create reactive node
 
-//create element with child
-const div = tag('div', {
-  child: span,
-});
+To create a reactive node, use `Reactive` constructor. It accepts initial value and returns an object with `value` property to get/set the value and `onChange` callback to listen for value changes. Checkout [Reactive](./docs/reactive.md) for more details.
 
-const elements = [el1, el2, el3];
+```javascript
+import Reactive from 'html-tag-js/Reactive';
 
-//append child(s)
-div.append(...elements);
+const count = Reactive(0);
 
-//easily get any child of parent element using get method which
-//takes query selector string as argument
-div.get('#span1');
+document.body.append(
+  <div>
+    <h1>{count}</h1>
+    <button onclick={() => count.value++}>Increment</button>
+  </div>
+);
+```
 
-//get all element
-//return array of html elements
-div.getAll('span');
+#### Use `Ref` to get reference of the node
 
-// --or--
+To get reference of the node, use `Ref` constructor. It accepts a callback function which will be called with the node as argument. Checkout [Ref](./docs/ref.md) for more details.
 
-tag.get('body');
-tag.getAll('.mydiv');
+```javascript
+import Ref from 'html-tag-js/Ref';
 
-//parse html string
+const ref = Ref(node => {
+  console.log(node); // <h1>Hello</h1>
+});
 
-//returns html element
-const el = tag.parse('<div class="mydiv"></div>');
-console.log(el);
+// Change style of the node before or after referencing
+ref.style.color = 'red';
 
-//return html element collection
-const el2 = tag.parse('<div class="mydiv"></div><p class="myp">');
+document.body.append(
+  <div>
+    <h1 ref={ref}>Hello</h1>
+  </div>
+);
 ```