forked from mul-ink/mulink
-
Notifications
You must be signed in to change notification settings - Fork 0
/
mulStateButton.html
54 lines (49 loc) · 1.38 KB
/
mulStateButton.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
<!-- Use xstate 4.23.1 to creat HTML button with transitions through data- HTML attributes -->
<!-- https://cdn.skypack.dev/xstate -->
<!DOCTYPE html>
<html>
<script type="module">
import 'https://deno.land/x/[email protected]/demoSetup.js'
import 'https://deno.land/x/[email protected]/MulButton.js'
import { html, component, useRef, createMachine, assign } from 'https://deno.land/x/[email protected]/deps.js'
import { useMachine } from 'https://deno.land/x/[email protected]/useMachine.js'
const INC = { actions: assign({ count: (context) => context.count + 1 }) }
const DEC = { actions: assign({ count: (context) => context.count - 1 }) }
export const counterMachine = createMachine({
initial: 'active',
context: {
count: 0
},
states: {
active: { on: {INC, DEC}}
}
});
function mulState(element) {
const { state, send } = useMachine(counterMachine)
const onMinus = () => {
send('DEC')
}
const onPlus = () => {
send('INC')
}
const countValue = 0;
return html`
<mul-button @click=${onPlus}>
<span>➕</span>
</mul-button>
<mul-button @click=${onMinus}>
<span>➖</span>
</mul-button>
<span>Count: ${state.context.count}</span>
<style>
span {
color: white;
}
</style>
`
}
customElements.define('mul-state', component(mulState))
</script>
<mul-state></mul-state>
</html>
<!-- end -->