deku with JSX を試してみた

dekujs/deku

プロジェクトはここ。
mizchi-sandbox/deku-test

サンプルを見ながら適当に書いた。

// define component
let Button = {
  propTypes: {
    kind: {
      type: 'string',
      expects: ['submit', 'button']
    }
  },
  render(component) {
    let {props, state} = component;
    return <button class="Button" type={props.kind}>{props.children}</button>
  },
  afterUpdate(component, prevProps, prevState, updateState) {
    let {props, state} = component;
    if (!state.clicked) {
      updateState({ clicked: true })
    }
  }
};

// use
import {tree,render,renderString, element} from 'deku'
let app = tree(
  <Button kind="submit">Hello World!</Button>
);
//server side rendering
console.log(renderString(app));
// render(app, document.body)

deku/jsx.md at master · dekujs/deku を参考に、.babelrc に次のような設定を書く。

{
  "jsxPragma": "element"
}

これでJSXリテラルのコンパイル後のReact.createElementがelementに変換される。この場合、elementはスコープよりdeku.elementを参照する。

サイズ

似たようなコードをReactでビルドすると130kbほどになるのだが、dekuだとどうなるか。

browserify with babelifyで圧縮したものをさらにuglifyjsにかけてみた。

index.js -> bundle.js -> bundle.min.js

-rw-r--r--   1 mizchi  staff    29B  6 16 19:00 .babelrc
-rw-r--r--   1 mizchi  staff    73K  6 16 19:07 bundle.js
-rw-r--r--   1 mizchi  staff    24K  6 16 19:12 bundle.min.js
-rw-r--r--   1 mizchi  staff   637B  6 16 19:05 index.js
-rw-r--r--   1 mizchi  staff   442B  6 16 19:07 package.json

これだとそこそこサイズ少なくてReactからの移行も少なくてよいのではないか。

Reactがデカくて採用しにくい！って人はここらへん挑戦するといいと思います。