1.0.6 Update

README.md

@@ -1,42 +1,46 @@
-# CalDOM
-
 ![CalDOM JS Logo](https://www.caldom.org/images/caldom_logo.png)
 
-A minimalist (2.7kb) JavaScript UI library inspired by jQuery & Reactive Components.
+A minimalist (3kb) and performant JavaScript UI library inspired by jQuery & Reactive Components.
 
-Since the library is just wrapping the official DOM API, the performance drop is about 1.2X compared to vanilla/pure JavaScript based on unit level benchmarks: [View Benchmark Results](https://caldom.org/benchmark/)
+Instead of micromanaging everything, CalDOM let you **fully access the DOM** directly while keeping the **reactivity** 💥.
+So you could take full advantage of native APIs & even mix it with other libraries to gain superior performance & flexibility in the development process.
 
-Official site: [caldom.org](https://www.caldom.org)
+In essence, CalDOM is just a wrapper around the native Node/Element. The overall performance drop is about 0.05x compared to vanilla/pure JavaScript. This is based on averaged unit level benchmarks in handling single & multiple-element instances: [View Benchmark Results](https://caldom.org/benchmark/) against Vanilla JS, jQuery, React JS, Vue & more.
 
+Official site: [caldom.org](https://www.caldom.org)
 
 Documentation: [caldom.org/docs/](https://caldom.org/docs/)
 
 # Basic Syntax
 
 ## Hello World!
 ```js
-_("body")
+_("#output-1")
     .append(
         _("+h1").text("Hello World!")
     );
 
+
+//Short form
+_( "#output-1", [ _("+h2", ["This is CalDOM."]) ]); 
 ```
 
 ## Hello World - Reactive
 ```js
 var app = _().react(
-    { name: "World!" },
+    {},
     {
         render: function(state){
-            return _("+h1").text( `Hello ${state.name}` );
+            return _("+h1")
+                .text( `Hello ${state.name}` );
         }
     }
 )
 
-_("body").append( app );
+_("#output-2").append( app );
 
 //Edit below line to update state
-app.state.name = "CalDOM!";
+app.state.name = "World Reactively 💥";
 ```
 
 ## Hello World - Reactive (ES6)
@@ -55,12 +59,12 @@ class HelloWorld extends _.Component{
                     _("+h1").text( "Hello " + state.name ),
 
                     //Can pass children as an array too
-                    _( "+p", ["Time is: ", state.time] )
+                    _( "+p", ["The time is: ", state.time] )
                 )
     }
 
     tick(){
-        this.state.time = new Date().toTimeString();
+        this.state.time = new Date().toTimeString().substr(0, 8);
     }
 
     didMount(){
@@ -71,11 +75,100 @@ class HelloWorld extends _.Component{
 
 let app = new HelloWorld( { name: "World!", time: "" } );
 
-_("body").append( app );
+_("#output-3").append( app );
+```
+
+
+## Make existing HTML reactive
+Not a fan of rendering & virtual-DOM thingies? Use CalDOM to update pre-defined HTML content reactively.
+```js
+var person_one = _("#person-1").react(
+    {},
+
+    {
+        update: function(state, person){
+            person.find(".name").text( state.name );
+            person.find(".age").text( state.age );
+        }
+    }
+)
+
+//CalDOM batches these 2 state updates to only render once.
+person_one.state.name = "Jane Doe";
+person_one.state.age = 22;   
+```
+
+## Summon the power of both worlds!
+Efficiently update() the DOM directly and/or proceed to virtual-DOM render if it's more suitable.
+
+```js
+class Person extends _.Component{
+    constructor(){
+        super();
+
+        this.react({ name: "John", likes: ["SpongeBob"] });
+    }
+
+    render(state){
+        return _("+div")
+            .append(
+                _("+h1", [ "I'm " + state.name ]),
+                _("+p", [ "I like " + state.likes.join(" & ") ])
+            );
+    }
+
+    update(state, person, changed_keys, changes_count){
+
+        if( changes_count != 1 || !("name" in changed_keys) ){
+
+            // Too complex to update,
+            return true; //to proceed to render.
+        }
+        else{ //Update changed name directly
+            this.find("h1")
+                .text( `I'm ${state.name} Directly. 🦄` );
+        }
+    }
+}
+
+var user = new Person();
+_("#output-4").append( user );
+
+user.state.likes.push( "Hulk" ); //This is handled by render()
+
+setTimeout( () => 
+    user.state.name = "Jane" //This is handled by update()
+, 1000);
+```
+
+## You can even make jQuery reactive
+Basic building box of CalDOM is just native Node/Element. Thus, making it compatible with almost any library on the web.
+
+```js
+class HelloJquery extends _.Component{
+
+    constructor(){
+        super();
+
+        this.react({ prompt: "Click Me!" });
+    }
+
+    render(state){
+
+        //Creating element & attaching click event using jQuery
+        return $("<h1></h1>")
+            .text( state.prompt )
+            .click( () => state.prompt = "Hello from jQuery!")[0];
+    }
+}
+
+let app = new HelloJquery();
+
+_("#output-6").append( app );
 ```
 
 ## CalDOM also runs on Node JS
-You can use a library like [JS-DOM](<https://github.com/jsdom/jsdom>) to implement a browser context on the server.
+You can use a library like [JS-DOM](https://github.com/jsdom/jsdom) to implement a browser context on the server.
 
 ```js
 const { JSDOM } = require("jsdom"); 
@@ -112,9 +205,9 @@ require("fs").writeFileSync(
 );
 ```
 
-
 Visit [caldom.org](https://www.caldom.org) to experiment with many live code examples.
 
+
 # Get Started
 
 ## CDN
@@ -147,7 +240,7 @@ requirejs( ["caldom"], function(_){} );
 
 ```js
 //ES6 Module
-import _ from "./dist/caldom-1.0.5.min.mjs.js";
+import _ from "./dist/caldom.min.mjs.js";
 ```
 
 # Contributing
@@ -161,7 +254,55 @@ Your contributions are very welcome and thank you in advance.
 * Supporting legacy browsers is not a priority.
 
 ## To-Do
-* Implement tests
+* ~~Implement tests~~
 * Implement helpful debug outputs for the development version
 * Thorough browser version tests
-* Further optimize virtual DOM diffing algorithm
+* Further optimize virtual DOM diffing algorithm
+
+## Building
+Currently the entire source code is in one file, so there isn't a huge build process other than using uglify-js to minify it.
+
+This simply build the .min.js & .min.mjs.js & related .map files in the ./dist/ folder.
+
+```sh
+# Install dev dependencies
+npm install
+
+# Build
+npm run build
+```
+
+## Unit Testing & Benchmarking
+Tests and benchmarks sources are at the ./tests_and_benchmarks.
+CalDOM is using a brand new unit-testing & benchmarking framework called [pFreak](https://github.com/dumijay/pfreak). Which was created as a side project of CalDOM.
+
+Unit test results for the latest build is available at [caldom.org/tests/](https://caldom.org/tests/)
+
+Initiate pFreak after installation to set sym links properly
+```shell
+pfreak init ./tests_and_benchmarks/internal/
+pfreak init ./tests_and_benchmarks/external/
+```
+
+Unit Tests
+```shell
+npm test
+```
+
+or 
+
+```shell
+pfreak test ./tests_and_benchmarks/internal/
+```
+
+Run benchmarks against other libraries (This takes a lot of time, you can run tasks selectively using flags.)
+
+```shell
+cd ./tests_and_benchmarks/external/
+pfreak benchmark
+```
+
+refer pFreak's help for details
+```shell
+pfreak --help
+```

package.json

@@ -1,11 +1,12 @@
 {
   "name": "caldom",
   "title": "CalDOM",
-  "version": "1.0.5",
-  "description": "A minimalist (2.7kb) JavaScript UI library inspired by jQuery & Reactive Components.",
-  "main": "dist/caldom-1.0.5.min.js",
+  "version": "1.0.6",
+  "description": "A minimalist (3kb) JavaScript UI library inspired by jQuery & Reactive Components.",
+  "homepage": "https://caldom.org",
+  "main": "dist/caldom.min.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "pfreak test ./tests_and_benchmarks/internal/",
     "build": "./make.sh"
   },
   "repository": {
@@ -14,25 +15,30 @@
   },
   "keywords": [
     "Lightweight",
+    "Performant",
     "Minimalist",
     "Reactive",
     "Components",
     "JavaScript",
     "Browser",
+    "UI",
+    "Frontend",
     "DOM",
     "Library",
     "Tiny",
     "Small",
     "jQuery",
+    "React",
+    "Vue",
     "Alternative"
   ],
   "author": "Dumi Jay",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/dumijay/CalDom/issues"
   },
-  "homepage": "https://caldom.org",
   "devDependencies": {
+    "pfreak": "^0.3.1",
     "uglify-js": "^3.13.8"
   }
 }