refactor(vdom): rename function component() to statefulComponent()

Makes API more consistent.

BREAKING CHANGE: `component()` function renamed to `statefulComponent()`

packages/ivi/__tests__/lifecycle.spec.ts

@@ -1,4 +1,4 @@
-import { Component, VNode, statelessComponent, component } from "ivi";
+import { Component, VNode, statelessComponent, statefulComponent } from "ivi";
 import * as h from "ivi-html";
 import { startRender, checkLifecycle, lifecycleTouch } from "./utils";
 
@@ -32,7 +32,7 @@ interface LifecycleTesterProps {
   hooks: ComponentHooks<LifecycleTesterProps>;
 }
 
-const LifecycleTester = component(class extends Component<LifecycleTesterProps> {
+const LifecycleTester = statefulComponent(class extends Component<LifecycleTesterProps> {
   constructor(props: LifecycleTesterProps) {
     super(props);
     lifecycleTouch(props.id, "constructor");

packages/ivi/__tests__/render_components.spec.ts

@@ -1,5 +1,5 @@
 import {
-  Component, VNode, statelessComponent, component, getComponentInstanceFromVNode, isComponentAttached,
+  Component, VNode, statelessComponent, statefulComponent, getComponentInstanceFromVNode, isComponentAttached,
 } from "ivi";
 import * as h from "ivi-html";
 import { startRender } from "./utils";
@@ -8,7 +8,7 @@ const Stateless = statelessComponent<VNode>(
   (child) => child,
 );
 
-const Stateful = component(class extends Component<VNode> {
+const Stateful = statefulComponent(class extends Component<VNode> {
   render() {
     return this.props;
   }

packages/ivi/__tests__/stateful_component.spec.ts

@@ -1,4 +1,4 @@
-import { Component, component } from "ivi";
+import { Component, statefulComponent } from "ivi";
 import * as h from "ivi-html";
 import { startRender } from "./utils";
 
@@ -10,7 +10,7 @@ abstract class DivComponent<T> extends Component<T> {
 
 test(`props should be passed to constructor`, () => {
   startRender((r) => {
-    const c = component(class extends DivComponent<number> {
+    const c = statefulComponent(class extends DivComponent<number> {
       constructor(props: number) {
         expect(props).toBe(1337);
         super(props);
@@ -22,7 +22,7 @@ test(`props should be passed to constructor`, () => {
 
 test(`props should be passed to newPropsReceived hook`, () => {
   startRender((r) => {
-    const c = component(class extends DivComponent<number> {
+    const c = statefulComponent(class extends DivComponent<number> {
       newPropsReceived(a: number, b: number) {
         expect(a).toBe(1337);
         expect(b).toBe(1338);
@@ -35,7 +35,7 @@ test(`props should be passed to newPropsReceived hook`, () => {
 
 test(`props should be passed to shouldUpdate hook`, () => {
   startRender((r) => {
-    const c = component(class extends DivComponent<number> {
+    const c = statefulComponent(class extends DivComponent<number> {
       shouldUpdate(a: number, b: number) {
         expect(a).toBe(1337);
         expect(b).toBe(1338);
@@ -49,7 +49,7 @@ test(`props should be passed to shouldUpdate hook`, () => {
 
 test(`props should be available when attached hook is invoked`, () => {
   startRender((r) => {
-    const c = component(class extends DivComponent<number> {
+    const c = statefulComponent(class extends DivComponent<number> {
       attached() {
         expect(this.props).toBe(1337);
       }
@@ -60,7 +60,7 @@ test(`props should be available when attached hook is invoked`, () => {
 
 test(`props should be available when detached hook is invoked`, () => {
   startRender((r) => {
-    const c = component(class extends DivComponent<number> {
+    const c = statefulComponent(class extends DivComponent<number> {
       detached() {
         expect(this.props).toBe(1337);
       }
@@ -71,7 +71,7 @@ test(`props should be available when detached hook is invoked`, () => {
 
 test(`props should be available when updated hook is invoked`, () => {
   startRender((r) => {
-    const c = component(class extends DivComponent<number> {
+    const c = statefulComponent(class extends DivComponent<number> {
       updated() {
         expect(this.props).toBe(1337);
       }

packages/ivi/__tests__/sync_components.spec.ts

@@ -1,12 +1,12 @@
-import { Component, VNode, statelessComponent, component } from "ivi";
+import { Component, VNode, statelessComponent, statefulComponent } from "ivi";
 import * as h from "ivi-html";
 import { startRender, checkDOMOps, domOps } from "./utils";
 
 const Stateless = statelessComponent<VNode>(
   (child) => child,
 );
 
-const Stateful = component(class extends Component<VNode> {
+const Stateful = statefulComponent(class extends Component<VNode> {
   render() {
     return this.props;
   }

packages/ivi/__tests__/sync_components_root.spec.ts

@@ -1,4 +1,4 @@
-import { Component, VNode, component, getComponentInstanceFromVNode } from "ivi";
+import { Component, VNode, statefulComponent, getComponentInstanceFromVNode } from "ivi";
 import { startRender, checkDOMOps, domOps } from "./utils";
 import * as h from "ivi-html";
 
@@ -34,8 +34,8 @@ class B extends Component<VNode> {
   }
 }
 
-const ca = component(A);
-const cb = component(B);
+const ca = statefulComponent(A);
+const cb = statefulComponent(B);
 
 test(`<h1><A.0> => <h1><A.1> => <A.1><h1>`, () => {
   startRender((r) => {

packages/ivi/src/index.ts

@@ -15,7 +15,7 @@ export {
 } from "./vdom/vnode";
 export { children, map, mapRange } from "./vdom/vnode_collections";
 export { elementFactory } from "./vdom/element";
-export { component, statelessComponent, context, connect } from "./vdom/vnode_factories";
+export { statefulComponent, statelessComponent, context, connect } from "./vdom/vnode_factories";
 
 /**
  * API available only in browser environment

packages/ivi/src/vdom/vnode_factories.ts

@@ -102,7 +102,7 @@ export function statelessComponent<P>(
 }
 
 /**
- * component creates a virtual DOM node factory that produces nodes for stateful components.
+ * statefulComponent creates a virtual DOM node factory that produces nodes for stateful components.
  *
  *     const A = component(class extends Component<string> {
  *       onClick = Events.onClick(() => console.log(this.props));
@@ -124,10 +124,10 @@ export function statelessComponent<P>(
  * @param c stateful component.
  * @returns factory that produces stateful component nodes.
  */
-export function component(c: StatefulComponent<undefined>): () => VNode<undefined>;
+export function statefulComponent(c: StatefulComponent<undefined>): () => VNode<undefined>;
 
 /**
- * component creates a virtual DOM node factory that produces nodes for stateful components.
+ * statefulComponent creates a virtual DOM node factory that produces nodes for stateful components.
  *
  *     const A = component(class extends Component<string> {
  *       onClick = Events.onClick(() => console.log(this.props));
@@ -149,12 +149,12 @@ export function component(c: StatefulComponent<undefined>): () => VNode<undefine
  * @param c stateful component.
  * @returns factory that produces stateful component nodes.
  */
-export function component<P>(
+export function statefulComponent<P>(
   c: StatefulComponent<P>,
 ): undefined extends P ? (props?: P) => VNode<P> : (props: P) => VNode<P>;
 
 /**
- * component creates a virtual DOM node factory that produces nodes for stateful components.
+ * statefulComponent creates a virtual DOM node factory that produces nodes for stateful components.
  *
  *     const A = component(class extends Component<string> {
  *       onClick = Events.onClick(() => console.log(this.props));
@@ -176,7 +176,7 @@ export function component<P>(
  * @param c stateful component.
  * @returns factory that produces stateful component nodes.
  */
-export function component<P>(
+export function statefulComponent<P>(
   c: StatefulComponent<P>,
 ): (props: P) => VNode<P> {
   const f = function (props: P): VNode<P> {