docs: use HTML node factories directly in examples

TypeScript server is now able to manage all imports, so it is now much
easier just to use node factories directly.

README.md

@@ -18,7 +18,7 @@ ivi is a javascript (TypeScript) library for building web user interfaces.
 
 Size of the [basic example](https://github.com/localvoid/ivi-examples/tree/master/packages/tutorial/01_introduction)
 bundled with [webpack](https://webpack.js.org/) and minified with [uglify](https://github.com/mishoo/UglifyJS2) is just
-a **4.4Kb**.
+a **4Kb**.
 
 It is possible to get size even lower with [Google Closure Compiler](https://github.com/google/closure-compiler). ivi
 library has full support for compilation with Google Closure Compiler in `ADVANCED` mode.
@@ -41,10 +41,10 @@ The smallest ivi example looks like this:
 
 ```js
 import { render } from "ivi";
-import * as h from "ivi-html";
+import { h1 } from "ivi-html";
 
 render(
-  h.h1().c("Hello World!"),
+  h1().c("Hello World!"),
   document.getElementById("app"),
 );
 ```

documentation/general/components.md

@@ -4,7 +4,7 @@
 
 ```ts
 const A = statelessComponent((props: string) => (
-  h.div().c(`Hello ${props}`)
+  div().c(`Hello ${props}`)
 ));
 
 render(
@@ -21,7 +21,7 @@ render(
 const A = withShouldUpdate<{ title: string }>(
   (prev, next) => prev.title !== next.title,
   statelessComponent((props) => (
-    h.div().c(`Hello ${props}`)
+    div().c(`Hello ${props}`)
   )),
 );
 
@@ -42,7 +42,7 @@ Stateful components are implemented with ES6 classes and should be extended from
 ```ts
 const A = statefulComponent(class extends Component<string> {
   render() {
-    return h.div().c(`Hello ${this.props}`);
+    return div().c(`Hello ${this.props}`);
   }
 });
 
@@ -64,7 +64,7 @@ class A extends Component<string> {
   }
 
   render() {
-    return h.div().c(`Hello ${this.internalState}`);
+    return div().c(`Hello ${this.internalState}`);
   }
 }
 ```
@@ -102,7 +102,7 @@ class Counter extends Component {
   }
 
   render() {
-    return h.div().c(`Counter: ${this.counter}`);
+    return div().c(`Counter: ${this.counter}`);
   }
 }
 ```
@@ -122,7 +122,7 @@ interface Component {
 ```ts
 class A extends Component<string> {
   render() {
-    return h.div().c(`Hello ${this.props}`);
+    return div().c(`Hello ${this.props}`);
   }
 }
 ```
@@ -148,7 +148,7 @@ class A extends Component<Props> {
   }
 
   render() {
-    return h.div().c(`Hello ${this.props.title}`);
+    return div().c(`Hello ${this.props.title}`);
   }
 }
 ```
@@ -172,7 +172,7 @@ class A extends Component<string> {
   }
 
   render() {
-    return h.div().c(`Hello ${this.internalState}`);
+    return div().c(`Hello ${this.internalState}`);
   }
 }
 ```

documentation/general/connect.md

@@ -43,7 +43,7 @@ const article = connect<{ content: string }, number, { articles: Map<number, str
       { content };
   },
   (props) => (
-    h.div().c(props.content)
+    div().c(props.content)
   )),
 );
 

documentation/general/context.md

@@ -42,7 +42,7 @@ const child = connect<number, undefined, { counter: number }>(
       counter;
   },
   (counter) => (
-    h.div().children(counter)
+    div().children(counter)
   ),
 );
 ```

documentation/general/synthetic-events.md

@@ -37,26 +37,30 @@ interface VNode {
 
 ```ts
 import { Component, component, render } from "ivi";
-import * as Events from "ivi-events";
-import * as h from "ivi-html";
+import { onClick } from "ivi-events";
+import { div } from "ivi-html";
 
 const StatefulComponent = component(class extends Component {
-  private counter = 0;
+  private counter1 = 0;
+  private counter2 = 0;
 
-  private onClick = Events.onClick((ev) => {
-    this.counter++;
-    this.invalidate();
-  });
+  // There are no restrictions in number of attached event handlers with the same type, it is possible to attach
+  // multiple `onClick` event handlers.
+  private events = [
+    onClick((ev) => {
+      this.counter1++;
+      this.invalidate();
+    }),
+    onClick((ev) => {
+      this.counter2++;
+      this.invalidate();
+    }),
+  ]);
 
   render() {
-    return h.div()
-      // There are no restrictions in number of attached event handlers with the same type, it is possible to attach
-      // multiple `onClick` event handlers.
-      .e([
-        this.onClick,
-        this.onClick,
-      ])
-      .c(`Clicks: ${this.counter}`);
+    return div()
+      .e(this.events)
+      .c(`Clicks: [${this.counter1}] [${this.counter2}]`);
   }
 });
 ```

documentation/general/virtual-dom.md

@@ -3,11 +3,11 @@
 Virtual DOM API is using factory functions to instantiate nodes and method chaining to assign properties.
 
 ```ts
-import * as h from "ivi-html";
-import * as Events from "ivi-events";
+import { onClick } from "ivi-events";
+import { div } from "ivi-html";
 
-const node = h.div()
-  .e(Events.onClick((ev) => { console.log("click"); }))
+const node = div()
+  .e(onClick((ev) => { console.log("click"); }))
   .a({ id: "unique-id" });
 ```
 
@@ -65,7 +65,7 @@ Each child that doesn't have a key will be automatically assigned with an implic
 Implicit keys are used to support code patterns like this:
 
 ```ts
-h.div().c(
+div().c(
   isVisible ?
     map(entries, (entry) => A().k(entry.id)) :
     null,
@@ -103,14 +103,14 @@ function fragment(...args: Array<VNode | string | number | null>): VNode | null;
 `fragment()` is a variadic function that creates a fragment children collection.
 
 ```ts
-const Button = statelessComponent((slot) => h.div("button").c(slot));
+const Button = statelessComponent((slot) => div("button").c(slot));
 
 render(
   Button(
     fragment(
-      h.span().c("Click"),
+      span().c("Click"),
       " ",
-      h.span().c("Me"),
+      span().c("Me"),
     ),
   ),
   DOMContainer,
@@ -131,8 +131,8 @@ array.
 
 ```ts
 render(
-  h.div().c(
-    map([1, 2, 3], (item) => h.div().k(item)),
+  div().c(
+    map([1, 2, 3], (item) => div().k(item)),
   ),
   DOMContainer,
 );
@@ -145,8 +145,8 @@ provided range.
 const items = [1, 2, 3];
 
 render(
-  h.div().c(
-    mapRange(0, items.length, (i) => h.div().k(items[i])),
+  div().c(
+    mapRange(0, items.length, (i) => div().k(items[i])),
   ),
   DOMContainer,
 );

documentation/misc/perf-tips.md

@@ -12,12 +12,12 @@ const Button = statelessComponent((active: boolean) => {
   if (active) {
     className += " active";
   }
-  return h.div(className);
+  return div(className);
 });
 ```
 
 #### Good
 
 ```ts
-const Button = statelessComponent((active: boolean) => h.div(active ? "button active" : "button"));
+const Button = statelessComponent((active: boolean) => div(active ? "button active" : "button"));
 ```

packages/ivi/README.md

@@ -16,7 +16,7 @@ ivi is a javascript (TypeScript) library for building web user interfaces.
 
 Size of the [basic example](https://github.com/localvoid/ivi-examples/tree/master/packages/tutorial/01_introduction)
 bundled with [webpack](https://webpack.js.org/) and minified with [uglify](https://github.com/mishoo/UglifyJS2) is just
-a **4.4Kb**.
+a **4Kb**.
 
 It is possible to get size even lower with [Google Closure Compiler](https://github.com/google/closure-compiler). ivi
 library has full support for compilation with Google Closure Compiler in `ADVANCED` mode.
@@ -39,10 +39,10 @@ The smallest ivi example looks like this:
 
 ```js
 import { render } from "ivi";
-import * as h from "ivi-html";
+import { h1 } from "ivi-html";
 
 render(
-  h.h1().c("Hello World!"),
+  h1().c("Hello World!"),
   document.getElementById("app"),
 );
 ```