Skip to content

Commit ead1930

Browse files
WorldMakerWorldMaker
committed
Add core HTML template for Butterfloat and main build process
1 parent 8164c16 commit ead1930

File tree

6 files changed

+709
-1
lines changed

6 files changed

+709
-1
lines changed

‎frameworks/keyed/butterfloat/.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
**/*.js
2+
index.html

‎frameworks/keyed/butterfloat/_build.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { writeFile } from 'node:fs/promises'
2+
import { buildStamp } from 'butterfloat'
3+
import { build } from 'esbuild'
4+
import { JSDOM } from 'jsdom'
5+
6+
await build({
7+
entryPoints: ['./app.tsx'],
8+
bundle: false,
9+
format: 'esm',
10+
outdir: '.',
11+
})
12+
13+
await build({
14+
entryPoints: ['./main.ts'],
15+
bundle: true,
16+
format: 'esm',
17+
outdir: '.',
18+
})
19+
20+
const dom = new JSDOM(`
21+
<!DOCTYPE html>
22+
<html lang="en">
23+
<head>
24+
<meta charset="utf-8"/>
25+
<title>VanillaJS-"keyed"</title>
26+
<link href="/css/currentStyle.css" rel="stylesheet"/>
27+
<script type="module" src="./main.js"></script>
28+
</head>
29+
<body>
30+
<div id='main'>
31+
</div>
32+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
33+
</body>
34+
</html>
35+
`)
36+
37+
const { window } = dom
38+
const { document } = window
39+
globalThis.document = document
40+
globalThis.window = window
41+
42+
const { App } = await import('./app.js')
43+
const appStamp = buildStamp(App(), document)
44+
appStamp.id = 'app'
45+
document.body.append(appStamp)
46+
47+
await writeFile('./index.html', dom.serialize())

‎frameworks/keyed/butterfloat/app.tsx

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { jsx } from 'butterfloat'
2+
3+
export function App() {
4+
return (
5+
<div class="container">
6+
<div class="jumbotron">
7+
<div class="row">
8+
<div class="col-md-6">
9+
<h1>Butterfloat</h1>
10+
</div>
11+
<div class="col-md-6">
12+
<div class="row">
13+
<div class="col-sm-6 smallpad">
14+
<button
15+
type="button"
16+
class="btn btn-primary btn-block"
17+
id="run"
18+
>
19+
Create 1,000 rows
20+
</button>
21+
</div>
22+
<div class="col-sm-6 smallpad">
23+
<button
24+
type="button"
25+
class="btn btn-primary btn-block"
26+
id="runlots"
27+
>
28+
Create 10,000 rows
29+
</button>
30+
</div>
31+
<div class="col-sm-6 smallpad">
32+
<button
33+
type="button"
34+
class="btn btn-primary btn-block"
35+
id="add"
36+
>
37+
Append 1,000 rows
38+
</button>
39+
</div>
40+
<div class="col-sm-6 smallpad">
41+
<button
42+
type="button"
43+
class="btn btn-primary btn-block"
44+
id="update"
45+
>
46+
Update every 10th row
47+
</button>
48+
</div>
49+
<div class="col-sm-6 smallpad">
50+
<button
51+
type="button"
52+
class="btn btn-primary btn-block"
53+
id="clear"
54+
>
55+
Clear
56+
</button>
57+
</div>
58+
<div class="col-sm-6 smallpad">
59+
<button
60+
type="button"
61+
class="btn btn-primary btn-block"
62+
id="swaprows"
63+
>
64+
Swap Rows
65+
</button>
66+
</div>
67+
</div>
68+
</div>
69+
</div>
70+
</div>
71+
<table class="table table-hover table-striped test-data">
72+
<tbody id="tbody"></tbody>
73+
</table>
74+
</div>
75+
)
76+
}

‎frameworks/keyed/butterfloat/main.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { runStamps, StampCollection } from 'butterfloat'
2+
import { App } from './app.js'
3+
4+
const stamps = new StampCollection()
5+
6+
const appStamp = document.querySelector<HTMLTemplateElement>('template#app')
7+
if (appStamp) {
8+
stamps.registerOnlyStamp(App, appStamp)
9+
}
10+
11+
const main = document.querySelector('#main')!
12+
runStamps(main, App, stamps)

0 commit comments

Comments
 (0)