-
Notifications
You must be signed in to change notification settings - Fork 0
/
preact-example.html
85 lines (78 loc) · 3 KB
/
preact-example.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
<html>
<head>
<!-- Generated by @jspm/generator VSCode Extension - https://github.com/jspm/jspm-vscode -->
<script async src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js" crossorigin="anonymous"></script>
<script type="importmap">
{
"imports": {
"@preact/signals": "https://ga.jspm.io/npm:@preact/[email protected]/dist/signals.module.js",
"htm": "https://ga.jspm.io/npm:[email protected]/dist/htm.module.js",
"phx-live-state": "https://ga.jspm.io/npm:[email protected]/build/src/index.js",
"preact": "https://ga.jspm.io/npm:[email protected]/dist/preact.module.js",
"signal-polyfill": "https://ga.jspm.io/npm:[email protected]/dist/index.js",
"subscript": "https://ga.jspm.io/npm:[email protected]/subscript.js"
},
"scopes": {
"https://ga.jspm.io/": {
"@preact/signals-core": "https://ga.jspm.io/npm:@preact/[email protected]/dist/signals-core.module.js",
"json-joy/esm/json-patch": "https://ga.jspm.io/npm:[email protected]/esm/json-patch/index.js",
"phoenix": "https://ga.jspm.io/npm:[email protected]/priv/static/phoenix.mjs",
"preact/hooks": "https://ga.jspm.io/npm:[email protected]/hooks/dist/hooks.module.js",
"process": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/process.js",
"reflect-metadata": "https://ga.jspm.io/npm:[email protected]/Reflect.js",
"subscript": "https://ga.jspm.io/npm:[email protected]/subscript.js",
"wc-context": "https://ga.jspm.io/npm:[email protected]/core.js"
}
}
}
</script>
<script type="module">
import { h, render } from 'preact';
import htm from 'htm';
import { createPreactSignal } from './src/live-signals.js';
const [peopleSignal, dispatchEvent] = createPreactSignal({
url: 'ws://localhost:4000/live_state',
topic: 'people:all',
initialValue: [],
path: 'people'
});
const html = htm.bind(h);
function People(props) {
const onSubmit = (event) => {
event.preventDefault();
const person = Object.fromEntries(new FormData(event.target));
console.log('person', person);
dispatchEvent(new CustomEvent('save-person', { detail: person }));
};
return html`
<table>
<thead>
<tr>
<th>Last name</th>
<th>First name</th>
<th>Birth date</th>
</tr>
</thead>
<tbody>
${peopleSignal.value.map((person) => html`
<tr>
<td>${person.last_name}</td>
<td>${person.first_name}</td>
<td>${person.birth_date}</td>
<td></td>
</tr>`)}
</tbody>
</table>
<form onSubmit=${onSubmit}>
<input type="text" name="last_name" placeholder="Last name" />
<input type="text" name="first_name" placeholder="First name" />
<input type="text" name="birth_date" type="date" />
<button type="submit">Add</button>
</form>
`;
}
render(html`<${People} />`, document.body);
</script>
</head>
<body></body>
</html>