-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
147 lines (139 loc) · 9.75 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base data-ice="baseUrl">
<title data-ice="title">Stardux API Document</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
<script src="script/prettify/prettify.js"></script>
<script src="script/manual.js"></script>
<link data-ice="userStyle" rel="stylesheet" href="user/css/0-style.css">
</head>
<body class="layout-container" data-ice="rootContainer">
<header>
<a href="./">Home</a>
<a href="./manual/index.html" data-ice="manualHeaderLink">Manual</a>
<a href="identifiers.html">Reference</a>
<a href="source.html">Source</a>
<a href="test.html" data-ice="testLink">Test</a>
<a data-ice="repoURL" href="https://github.com/littlstar/stardux.git" class="repo-url-github">Repository</a>
<div class="search-box">
<span>
<img src="./image/search.png">
<span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
</span>
<ul class="search-result"></ul>
</div>
</header>
<nav class="navigation" data-ice="nav"><div>
<ul>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/index.js~Container.html">Container</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-clearContainers">clearContainers</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-composeContainers">composeContainers</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-createContainer">createContainer</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-createContainerUid">createContainerUid</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-fetchContainer">fetchContainer</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-forEachContainer">forEachContainer</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getAllContainers">getAllContainers</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getContainerData">getContainerData</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-makeContainer">makeContainer</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-realignContainerTree">realignContainerTree</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-removeContainer">removeContainer</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-replaceDOMElement">replaceDOMElement</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-restoreContainerFromJSON">restoreContainerFromJSON</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-restoreOrphanedTree">restoreOrphanedTree</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-saveContainer">saveContainer</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-traverseContainer">traverseContainer</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-UPDATE">UPDATE</a></span></span></li>
</ul>
</div>
</nav>
<div class="content" data-ice="content"><div data-ice="index" class="github-markdown"><h2 id="introduction">Introduction</h2>
<p><em>stardux</em> builds upon the container concept introduced in
<a href="https://github.com/rackt/redux">redux</a>. Containers provide
a predictable interface around DOM elements. State is represented
in objects and expressed in the DOM with ES6 template notation.</p>
<p>A <code>Container</code> is a wrapper around a DOM element and its state. State is
represented in objects and expressed in the DOM with ES6 template
notation. Containers use reducers and middleware to transform input
into state. If you are familiar with
<a href="https://github.com/rackt/redux">redux</a> and reducers then this should be
easy for you. DOM updates are made possible with
<a href="https://github.com/littlstar/starplate">starplate</a> and it's internal
patching algorithm built on
<a href="https://github.com/google/incremental-dom">IncrementalDOM</a>.</p>
<h2 id="hello-world">Hello World</h2>
<p>Define DOM and template source body.</p>
<pre><code class="lang-html"><code class="source-code prettyprint"><div><span> ${ value } </span></div></code>
</code></pre>
<p>Create container from DOM element and update state.</p>
<pre><code class="lang-js"><code class="source-code prettyprint">import { createcontainer } from 'stardux'
const container = createContainer(document.querySelector('div'))
container.update({ value: 'hello, world' })</code>
</code></pre>
<p>Realize patches made to wrapped DOM element.</p>
<pre><code class="lang-html"><code class="source-code prettyprint"><div><span> hello, world </span></div></code>
</code></pre>
<h2 id="containers">Containers</h2>
<p>Containers are created with the <code>createContainer()</code> function.</p>
<pre><code class="lang-js"><code class="source-code prettyprint">import { createContainer } from 'stardux'
const container = createContainer(domElement)</code>
</code></pre>
<h2 id="reducers">Reducers</h2>
<p>Containers apply reducers when an action is dispatched. When a container
is updated with a call to the <code>.update()</code> method, an <code>UPDATE</code> action is
dispatched with optional data. Every container instance has an internal
root reducer that applies middleware to the <code>state</code> and <code>action</code> values
provided by <code>redux</code>. User reducers given to <code>createContainer()</code> or the
<code>Container</code> constructor are applied after.</p>
<h2 id="templating">Templating</h2>
<p>Containers provide a way to express state to the DOM. A containers DOM
can be expressed with ES6 template notation making it easy to
create resuable dynamic views.</p>
<pre><code class="lang-js"><code class="source-code prettyprint">const container = createContainer(domElement)
domElement.innerHTML = 'Hello ${name}'
container.update({ name: 'kinkajou' })
console.log(domElement.innerHTML) // "Hello kinkajou"</code>
</code></pre>
<h2 id="pipes-and-composition">Pipes and Composition</h2>
<p>Containers can be composed into a container chain and even allow for
middleware to transform input data. Piping and middleware are provided by
familiar interfaces such as <code>.pipe(container)</code> and <code>.use(middleware)</code>
respectively. The <code>state</code> and <code>action</code> values given to a container from
a pipe are transformed by any middleware given to a container with the
<code>.use()</code> method.</p>
<p>Here 3 containers are constructed into a pipeline <code>A -> B -> C</code>.</p>
<pre><code class="lang-js"><code class="source-code prettyprint">containerA.pipe(containerB).pipe(containerC)</code>
</code></pre>
<p>When an update occurs on <code>containerA</code>, is propagated to <code>containerB</code> and
then to <code>containerC</code>. This is effectively the samething as container
composition.</p>
<p>Middleware has the following usage.</p>
<pre><code class="lang-js"><code class="source-code prettyprint">container.use((state, action) => {
// middleware here ...
})</code>
</code></pre>
<h2 id="child-containers">Child containers</h2>
<p>Containers can have child containers which are added and removed with
familiar methods like <code>.appendChild()</code> and <code>.removeChild()</code>.</p>
<p><em>Adding a child to a container.</em></p>
<pre><code class="lang-js"><code class="source-code prettyprint">container.appendChild(child)</code>
</code></pre>
<p><em>Removing a child to a container.</em></p>
<pre><code class="lang-js"><code class="source-code prettyprint">container.appendChild(child)</code>
</code></pre>
</div>
</div>
<footer class="footer">
Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(0.4.3)</span></a>
</footer>
<script src="script/search_index.js"></script>
<script src="script/search.js"></script>
<script src="script/pretty-print.js"></script>
<script src="script/inherited-summary.js"></script>
<script src="script/test-summary.js"></script>
<script src="script/inner-link.js"></script>
<script src="script/patch-for-local.js"></script>
</body>
</html>