Skip to content

README ja

Jump to bottom
atomita edited this page Jun 12, 2019 · 8 revisions

xatto

xattoはVirtualDOMを使用した機能とコンテキストに基づくビューレイヤライブラリです。
これはjorgebucaran/superfineをフォークして開発されています。

Getting Started

注：このドキュメントの例では、BabelやTypeScriptなどのJavaScriptコンパイラ、JSX（TSX）transpiler、およびParcelやWebpackなどのモジュールバンドルを使用していることを前提としています。

xattoの主なAPIは2つです。
一つはxatto.xです。これは新しい仮想DOMノードツリーを返します。
もう一つはxatto.attoです。指定されたDOM要素内のコンポーネントをマウント(または更新)する関数を返します。 (mutate関数)

例：増加または減少させることができるカウンタ

import { x, atto } from "xatto"

const down = context => ({ count: context.count - 1 })
const up = context => ({ count: context.count + 1 })

const Component = (props, children, context) => (
  <div>
    <h1>{context.count}</h1>
    <button onclick={down}>-</button>
    <button onclick={up}>+</button>
  </div>
)

atto(Component, document.getElementById("app"))({
  count: 10
})

Installation

xattoはnpmでパッケージとして入手できます。

npm install xatto
import { x, atto } from "xatto"

CDNでも入手できます。

<script src="https://unpkg.com/xatto"></script>
<script>
  var x = window.xatto.x;
  var atto = window.xatto.atto;
  // ...
</script>

より簡単な方法

git clone https://github.com/atomita/xatto-starter-kit.git project
cd project
npm install
npm run serve

概要

context

contextは、コンポーネントを記述するJavaScriptオブジェクトです。
実行中にコンポーネント内を移動する動的データで構成されています。
contextを変更するには、mutate関数(またはコンポーネント内のイベントハンドラ)を使用する必要があります。

mutate関数

それはxatto.attoによって返される関数です。

コンテキストを渡して、xatto.attoで指定されたコンポーネントを指定されたコンテナーにまとめてマウントします。
2回目以降は更新します。

コンポーネント

コンポーネントは仕様を仮想DOMと呼ばれる単純なJavaScriptオブジェクトの形式で返し、それに応じてxattoは実際のDOMを更新します。
contextが変わるたびにコンポーネントが呼び出されるので、新しいコンテキストに基づいてDOMの外観を指定できます。

contextは3番目の引数で参照できます。

import { x, atto } from "xatto"

const Component = (props, children, context) => (
  <div>{context.name}</div>
)

atto(Component, document.getElementById("app"))({
  name: "foo"
})

Fragments supported

const Component = (props, children) => (
  <>
    <div>foo</div>
    <div>bar</div>
  </>
)

Context sliceとfill

子コンポーネントは、親コンポーネントで <Context slice="path">を使用することで、contextの一部をルートのcontextであるかのように扱うことができます。

また、fill属性はスライスされたcontextの一部が未定義の場合に使う値を指定することができます。

import { x, atto, Context } from "xatto"

const Parent = (props, children, context) => (
  <div>
    <span>{context.name}</span>
    <ul>
      <li><Context slice="children.0"><Child /></Context></li>
      <li><Context slice="children.1" fill={{ name: "baz" }}><Child /></Context></li>
    </ul>
  </div>
)

const Child = (props, children, context) => (
  <span>{context.name}</span>
)

atto(Parent, document.getElementById("app"))({
  name: "foo",
  children: [
    {
      name: "bar"
    }
  ]
})

イベントハンドラ

イベントハンドラはxattoによりラップされています。
通常、最初の引数で渡されるイベントオブジェクトは4番目の引数です。
戻り値はmutate関数に渡されます。

イベントハンドラの引数:

  1. context
  2. { ...extra, ...detail, dispatch }   - detailはCustomEvent.detailです   - dispatchはCustomEventを発行するための関数です
  3. props
  4. event

ライフサイクルイベント

ライフサイクルイベントは、仮想DOMによって管理される要素が作成、更新、または削除されたときに通知を受けるために使用できます。
アニメーション、データの取得、サードパーティのライブラリラッピング、リソースのクリーンアップなどに使用できます。

oncreate

このイベントは、要素が作成されてDOMにアタッチされた後に発生します。

onupdate

このイベントは、要素の属性を更新するたびに発生します。

onremove

このイベントは、要素がDOMからデタッチされる前に発生します。
detail.doneは要素を切り離すための関数を渡されます。

ondestroy

このイベントは、要素がDOMからデタッチされる直前に発生します。

onlifecycle

このイベントは、各ライフサイクルイベントが発生する直前に発生します。
detail.typeにはライフサイクルイベント名が渡されます。

key属性

key属性はxattoがDOMを更新するたびにノードを識別するのに役立ちます。
これにより、位置を変更した場合に要素を新しい位置に並べ替えることができます。

key属性は、兄弟ノード間で一意である必要があります。

必要な場合があるpolyfill

License

xatto is MIT licensed. See LICENSE.

Clone this wiki locally