komponentize v0.6.6

Komponentize

Lightweight Frontend Componentization Based on Snabbdom. It's small, simple and easy to use.

• Installation
• Quick Start
• Features
• Configurations
• Documentation
  • Component.context
  • Component.createElement
  • vnode
  • render
  • setState
  • setContext
  • connect

Installation

Node.js

npm install komponentize

Browser

<script src="node_modules/komponentize/dist/komponentize.min.js"></script>

Quick Start

import Component from "komponentize";

class MyComponent extends Component {
  constructor(name) {
    super();
    this.name = name;
  }

  render() {
    return <div>Hello {this.name}!</div>;
  }
}

const myComponent = new MyComponent("John");
myComponent.connect(document.getElementById("app")); // 'Hello John!'

myComponent.name = "Jane";
myComponent.setState(); // 'Hello Jane!'

Features

• Small: 5KB gzipped

• Simple and easy to use: a component has a vnode, a render method and a setState method, that's all, almostly

Configurations

Babel

{
  "plugins": [
    [
      "transform-react-jsx",
      {
        "pragma": "Component.createElement"
      }
    ]
  ]
}

TypeScript

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "Component.createElement"
  }
}

Then add a JSX.d.ts in your directory to suppress the errors on JSX.IntrinsicElements

declare namespace JSX {
  interface IntrinsicElements {
    [elemName: string]: any;
  }
}

Documentation

context

Component.context is a public namespace for sharing props and methods between components, you can access it directly or with setContext

componentInstance.setContext({ name: "komponentize" });
console.log(Component.context.name); // 'komponentize'

createElement

Component.createElement uses Snabbdom-pragma to produce vnodes

vnode

The vnode property is of type Snabbdom.VNode

render

The render: () => VNode method should be implemented by each component. To avoid "this binding issues", bind render to this is recommended

setState

Different from React, setState: () => void in komponentize takes no parameter

setContext

setContext: (ctx: { [key: string]: any }) => void

connect

connect: (el: HTMLElement) => void mount a component to an existing element.