Skip to content

Commit 7a77145

Browse files
c-pyc-py
committed
Add some examples
1 parent b5031b2 commit 7a77145

File tree

1 file changed

+256
-0
lines changed

1 file changed

+256
-0
lines changed

‎examples/index.html

+256
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>one-way-data-binding-library.mjs</title>
5+
<style>
6+
.col {
7+
display: flex;
8+
flex-direction: column;
9+
}
10+
.row {
11+
display: flex;
12+
flex-direction: row;
13+
}
14+
pre {
15+
font-size: 8px;
16+
}
17+
i {
18+
font-size: 10px;
19+
}
20+
</style>
21+
<link
22+
rel="stylesheet"
23+
href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css"
24+
/>
25+
<script type="importmap">
26+
{
27+
"imports": {
28+
"one-way-data-binding-library.mjs": "https://cdn.jsdelivr.net/npm/one-way-data-binding-library.mjs/+esm"
29+
}
30+
}
31+
</script>
32+
<link
33+
rel="stylesheet"
34+
href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css"
35+
/>
36+
<script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
37+
<script>
38+
hljs.highlightAll();
39+
</script>
40+
</head>
41+
<body>
42+
<h1>one-way-data-binding-library.mjs</h1>
43+
<div class="cols">
44+
<div class="row">
45+
<div>
46+
<h2>Canvas API</h2>
47+
<canvas id="canvas" width="200" height="200"></canvas>
48+
</div>
49+
<script type="module" id="canvas-script">
50+
import bind from "one-way-data-binding-library.mjs";
51+
52+
const canvas = document.getElementById("canvas");
53+
const context = canvas.getContext("2d");
54+
55+
// Setup Mappings
56+
const run = bind({
57+
"birds[*]": () => ({
58+
update: (bird) => {
59+
context.fillStyle = bird.color;
60+
context.fillRect(bird.x, bird.y, 10, 10);
61+
},
62+
}),
63+
});
64+
65+
const state = {
66+
birds: [
67+
{ x: 0, y: 0, vx: 0, vy: 0, color: "red" },
68+
{ x: 0, y: 0, vx: 0, vy: 0, color: "green" },
69+
{ x: 0, y: 0, vx: 0, vy: 0, color: "blue" },
70+
],
71+
};
72+
73+
// Create State
74+
run(() => state);
75+
76+
const last = 0;
77+
const loop = (now) => {
78+
window.requestAnimationFrame(loop);
79+
80+
const dt = (now - last) / 1000;
81+
if (dt < 1 / 60) return;
82+
83+
context.clearRect(0, 0, canvas.width, canvas.height);
84+
85+
// Update State
86+
run((state) => {
87+
for (const bird of state.birds) {
88+
bird.x += bird.vx;
89+
bird.y += bird.vy;
90+
91+
if (bird.x <= 0) bird.vx = Math.random();
92+
if (bird.x >= canvas.width) bird.vx = -Math.random();
93+
94+
if (bird.y <= 0) bird.vy = Math.random();
95+
if (bird.y >= canvas.height) bird.vy = -Math.random();
96+
}
97+
});
98+
};
99+
100+
window.requestAnimationFrame(loop);
101+
</script>
102+
<pre><code id="canvas-pre"></code></pre>
103+
<script>
104+
document.getElementById("canvas-pre").textContent =
105+
document.getElementById("canvas-script").textContent;
106+
</script>
107+
</div>
108+
109+
<hr />
110+
111+
<div class="row">
112+
<div>
113+
<h2>DOM API</h2>
114+
<div id="container" style="width: 200px"></div>
115+
<div>
116+
<button id="add">Add</button><button id="delete">Delete</button>
117+
</div>
118+
</div>
119+
<script type="module" id="dom-script">
120+
import bind from "one-way-data-binding-library.mjs";
121+
122+
// Setup Mappings
123+
const run = bind({
124+
"birds[*]": () => {
125+
const container = document.getElementById("container");
126+
const div = document.createElement("div");
127+
128+
return {
129+
create: (bird) => {
130+
div.textContent = `Bird ${bird}`;
131+
container.append(div);
132+
},
133+
134+
delete: () => container.removeChild(div),
135+
};
136+
},
137+
});
138+
139+
const state = { birds: [1, 2, 3] };
140+
141+
// Create State
142+
run(() => state);
143+
144+
document.getElementById("add").addEventListener("click", () => {
145+
// Update State
146+
run((state) => {
147+
state.birds.push(state.birds.length + 1);
148+
});
149+
});
150+
151+
document.getElementById("delete").addEventListener("click", () => {
152+
// Update State
153+
run((state) => {
154+
state.birds.pop();
155+
});
156+
});
157+
</script>
158+
<pre><code id="dom-pre"></code></pre>
159+
<script>
160+
document.getElementById("dom-pre").textContent =
161+
document.getElementById("dom-script").textContent;
162+
</script>
163+
</div>
164+
165+
<hr />
166+
167+
<div class="row">
168+
<div>
169+
<i>Not Recommended. This code is hacky.</i>
170+
<h2>React</h2>
171+
<div id="react" style="width: 200px"></div>
172+
</div>
173+
<script src="https://unpkg.com/[email protected]" crossorigin></script>
174+
<script
175+
src="https://unpkg.com/react@16/umd/react.production.min.js"
176+
crossorigin
177+
></script>
178+
<script
179+
src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
180+
crossorigin
181+
></script>
182+
<script type="module" id="react-script">
183+
const { createElement, useState, useEffect } = React;
184+
const html = htm.bind(createElement);
185+
186+
import bind from "one-way-data-binding-library.mjs";
187+
188+
const bindings = {};
189+
const state = { birds: [1, 2, 3] };
190+
const run = bind(bindings);
191+
192+
// Create State
193+
run(() => state);
194+
195+
const addBird = () => {
196+
// Update State
197+
run((state) => {
198+
state.birds.push(state.birds.length + 1);
199+
});
200+
};
201+
202+
const removeBird = () => {
203+
// Update State
204+
run((state) => {
205+
state.birds.pop();
206+
});
207+
};
208+
209+
const List = () => {
210+
const [birds, setBirds] = useState([]);
211+
212+
useEffect(() => {
213+
// Setup Mappings
214+
bindings["birds"] = () => {
215+
return {
216+
create: (birds) => setBirds(birds),
217+
update: (birds) => setBirds(birds),
218+
delete: () => setBirds([]),
219+
};
220+
};
221+
222+
// Update State
223+
run((state) => state);
224+
225+
return () => {
226+
delete bindings["birds[*]"];
227+
};
228+
}, []);
229+
230+
return html`<div>
231+
${birds.map((bird) => html`<div>${bird}</div>`)}
232+
</div>`;
233+
};
234+
235+
const Buttons = () => {
236+
return html`<div>
237+
<button onClick=${addBird}>Add</button>
238+
<button onClick=${removeBird}>Delete</button>
239+
</div>`;
240+
};
241+
242+
const App = () => {
243+
return html`<div><${List} /><${Buttons} /></div>`;
244+
};
245+
246+
ReactDOM.render(html`<${App} />`, document.getElementById("react"));
247+
</script>
248+
<pre><code id="react-pre"></code></pre>
249+
<script>
250+
document.getElementById("react-pre").textContent =
251+
document.getElementById("react-script").textContent;
252+
</script>
253+
</div>
254+
</div>
255+
</body>
256+
</html>

0 commit comments

Comments
 (0)