compradprog/_stamp.ts at main · WorldMaker/compradprog · GitHub

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
import {
  buildStamp,
  makeTestComponentContext,
  makeTestEvent,
} from 'butterfloat'
import { JSDOM } from 'jsdom'
import {
  FastForward,
  Github,
  Pause,
  Play,
  Plus,
  Rewind,
  SkipForward,
} from 'lucide'
import { writeFile } from 'node:fs/promises'
import { Icon } from './icon.js'
import { NEVER } from 'rxjs'
import { Progress } from './progress.js'
import { ProgVm } from './progvm.js'

const dom = new JSDOM(`
    <!doctype html>
    <html>
        <head>
            <title>Composite Radial Progress Demo</title>
            <link rel="stylesheet" href="index.css" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <script type="module" src="index-stamp.js"></script>
        </head>

        <body id="container"></body>
    </html>
`)
const { window } = dom
const { document } = window
;(globalThis as any).document = document
const container = document.getElementById('container')!

// *** Main (prestamp) ***

const { context: testMainContext } = makeTestComponentContext({
  addItem: makeTestEvent<MouseEvent>(NEVER),
  toggleMenu: makeTestEvent<MouseEvent>(NEVER),
  attach: makeTestEvent<HTMLElement>(NEVER),
  pauseAll: makeTestEvent<MouseEvent>(NEVER),
  unpauseAll: makeTestEvent<MouseEvent>(NEVER),
})
// imported late to set globalThis.window above
const { Main } = await import('./main.js')
const mainTree = Main({}, testMainContext)
const mainStamp = buildStamp(mainTree, document)
container.append(mainStamp.content)

function appendStamp(stamp: HTMLTemplateElement) {
  container.append(stamp)
}

// *** Icon stamps ***

const githubIconStamp = buildStamp(Icon({ icon: Github }), document)
githubIconStamp.id = 'icon-github'
appendStamp(githubIconStamp)
const pauseIconStamp = buildStamp(Icon({ icon: Pause }), document)
pauseIconStamp.id = 'icon-pause'
appendStamp(pauseIconStamp)
const playIconStamp = buildStamp(Icon({ icon: Play }), document)
playIconStamp.id = 'icon-play'
appendStamp(playIconStamp)
const plusIconStamp = buildStamp(Icon({ icon: Plus }), document)
plusIconStamp.id = 'icon-plus'
appendStamp(plusIconStamp)
const ffIconStamp = buildStamp(Icon({ icon: FastForward }), document)
ffIconStamp.id = 'icon-fast-forward'
appendStamp(ffIconStamp)
const rwIconStamp = buildStamp(Icon({ icon: Rewind }), document)
rwIconStamp.id = 'icon-rewind'
appendStamp(rwIconStamp)
const skipIconStamp = buildStamp(Icon({ icon: SkipForward }), document)
skipIconStamp.id = 'icon-skip-forward'
appendStamp(skipIconStamp)

// *** Progress stamp ***

const { context: testProgressContext } = makeTestComponentContext({
  finish: makeTestEvent<MouseEvent>(NEVER),
  pause: makeTestEvent<MouseEvent>(NEVER),
  slowDown: makeTestEvent<MouseEvent>(NEVER),
  speedUp: makeTestEvent<MouseEvent>(NEVER),
  unpause: makeTestEvent<MouseEvent>(NEVER),
})
const progressTree = Progress({ item: new ProgVm() }, testProgressContext)
const progressStamp = buildStamp(progressTree, document)
progressStamp.id = 'progress'
appendStamp(progressStamp)

// *** Serialize to HTML ***

await writeFile('index.html', dom.serialize())