Skip to content

Commit e7770a7

Browse files
WorldMakerWorldMaker
authored
Use Stamps! (#15)
Butterfloat 1.5.0 added "Stamps" for server-side/static rendering of HTML from components. Render all the interesting components to Stamps for a little bit of startup bonus and a little bit of runtime performance (at the expense of a few KBs extra downloaded).
2 parents cd8059c + 85b5832 commit e7770a7

20 files changed

+17227
-489
lines changed

‎.github/workflows/node.js.yml‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,12 @@ name: Node.js CI
55

66
on:
77
push:
8-
branches: [ "main" ]
8+
branches: ['main']
99
pull_request:
10-
branches: [ "main" ]
10+
branches: ['main']
1111

1212
jobs:
1313
build:
14-
1514
runs-on: ubuntu-latest
1615

1716
strategy:
@@ -20,12 +19,12 @@ jobs:
2019
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
2120

2221
steps:
23-
- uses: actions/checkout@v3
24-
- name: Use Node.js ${{ matrix.node-version }}
25-
uses: actions/setup-node@v3
26-
with:
27-
node-version: ${{ matrix.node-version }}
28-
cache: 'npm'
29-
- run: npm ci
30-
- run: npm run build
31-
- run: npm test
22+
- uses: actions/checkout@v3
23+
- name: Use Node.js ${{ matrix.node-version }}
24+
uses: actions/setup-node@v3
25+
with:
26+
node-version: ${{ matrix.node-version }}
27+
cache: 'npm'
28+
- run: npm ci
29+
- run: npm run build
30+
- run: npm test

‎.prettierignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
11
package-lock.json
2+
3+
# generated (with stamps)
4+
index.html
5+
**/*.js

‎.vscode/settings.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
2-
"editor.formatOnSave": true,
3-
"editor.defaultFormatter": "esbenp.prettier-vscode"
4-
}
2+
"editor.formatOnSave": true,
3+
"editor.defaultFormatter": "esbenp.prettier-vscode"
4+
}

‎_build.js‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,16 @@ import * as esbuild from 'esbuild'
22
import { sassPlugin } from 'esbuild-sass-plugin'
33

44
await esbuild.build({
5-
entryPoints: ['main.tsx'],
5+
entryPoints: ['index.ts'],
66
bundle: true,
7-
outfile: 'main.js',
7+
outfile: 'index.js',
8+
format: 'esm',
9+
})
10+
11+
await esbuild.build({
12+
entryPoints: ['index-stamp.ts'],
13+
bundle: true,
14+
outfile: 'index-stamp.js',
815
format: 'esm',
916
})
1017

@@ -17,10 +24,13 @@ await esbuild.build({
1724

1825
// *** Test Modules ***
1926
await esbuild.build({
20-
entryPoints: ['*.test.ts'],
27+
entryPoints: ['*.test.ts', '_stamp.ts'],
2128
platform: 'node',
2229
bundle: true,
2330
splitting: true,
2431
outdir: '.',
2532
format: 'esm',
33+
external: ['jsdom'],
2634
})
35+
36+
await import('./_stamp.js')

‎_stamp.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import "./chunk-BYXBJQAS.js";
2+
import {
3+
ProgVm
4+
} from "./chunk-MH565JGM.js";
5+
import {
6+
Icon,
7+
Progress,
8+
buildStamp,
9+
makeTestComponentContext,
10+
makeTestEvent,
11+
require_lucide
12+
} from "./chunk-X4RUJGUJ.js";
13+
import {
14+
__toESM,
15+
require_cjs
16+
} from "./chunk-QC5UYQHG.js";
17+
18+
// _stamp.ts
19+
var import_lucide = __toESM(require_lucide(), 1);
20+
import { JSDOM } from "jsdom";
21+
import { writeFile } from "node:fs/promises";
22+
var import_rxjs = __toESM(require_cjs(), 1);
23+
var dom = new JSDOM(`
24+
<!doctype html>
25+
<html>
26+
<head>
27+
<title>Composite Radial Progress Demo</title>
28+
<link rel="stylesheet" href="index.css" />
29+
<meta name="viewport" content="width=device-width, initial-scale=1" />
30+
<script type="module" src="index-stamp.js"></script>
31+
</head>
32+
33+
<body id="container"></body>
34+
</html>
35+
`);
36+
var { window } = dom;
37+
globalThis.window = window;
38+
var { document } = window;
39+
globalThis.document = document;
40+
var jQuery = function() {
41+
};
42+
jQuery.fn = {};
43+
globalThis.jQuery = jQuery;
44+
var container = document.getElementById("container");
45+
var { context: testMainContext } = makeTestComponentContext({
46+
addItem: makeTestEvent(import_rxjs.NEVER),
47+
toggleMenu: makeTestEvent(import_rxjs.NEVER),
48+
attach: makeTestEvent(import_rxjs.NEVER),
49+
pauseAll: makeTestEvent(import_rxjs.NEVER),
50+
unpauseAll: makeTestEvent(import_rxjs.NEVER)
51+
});
52+
var { Main } = await import("./main-PT6WCVI2.js");
53+
var mainTree = Main({}, testMainContext);
54+
var mainStamp = buildStamp(mainTree, document);
55+
container.append(mainStamp.content);
56+
function appendStamp(stamp) {
57+
container.append(stamp);
58+
}
59+
var githubIconStamp = buildStamp(Icon({ icon: import_lucide.Github }), document);
60+
githubIconStamp.id = "icon-github";
61+
appendStamp(githubIconStamp);
62+
var pauseIconStamp = buildStamp(Icon({ icon: import_lucide.Pause }), document);
63+
pauseIconStamp.id = "icon-pause";
64+
appendStamp(pauseIconStamp);
65+
var playIconStamp = buildStamp(Icon({ icon: import_lucide.Play }), document);
66+
playIconStamp.id = "icon-play";
67+
appendStamp(playIconStamp);
68+
var plusIconStamp = buildStamp(Icon({ icon: import_lucide.Plus }), document);
69+
plusIconStamp.id = "icon-plus";
70+
appendStamp(plusIconStamp);
71+
var ffIconStamp = buildStamp(Icon({ icon: import_lucide.FastForward }), document);
72+
ffIconStamp.id = "icon-fast-forward";
73+
appendStamp(ffIconStamp);
74+
var rwIconStamp = buildStamp(Icon({ icon: import_lucide.Rewind }), document);
75+
rwIconStamp.id = "icon-rewind";
76+
appendStamp(rwIconStamp);
77+
var skipIconStamp = buildStamp(Icon({ icon: import_lucide.SkipForward }), document);
78+
skipIconStamp.id = "icon-skip-forward";
79+
appendStamp(skipIconStamp);
80+
var { context: testProgressContext } = makeTestComponentContext({
81+
finish: makeTestEvent(import_rxjs.NEVER),
82+
pause: makeTestEvent(import_rxjs.NEVER),
83+
slowDown: makeTestEvent(import_rxjs.NEVER),
84+
speedUp: makeTestEvent(import_rxjs.NEVER),
85+
unpause: makeTestEvent(import_rxjs.NEVER)
86+
});
87+
var progressTree = Progress({ item: new ProgVm() }, testProgressContext);
88+
var progressStamp = buildStamp(progressTree, document);
89+
progressStamp.id = "progress";
90+
appendStamp(progressStamp);
91+
await writeFile("index.html", dom.serialize());

‎_stamp.ts‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import {
2+
buildStamp,
3+
makeTestComponentContext,
4+
makeTestEvent,
5+
} from 'butterfloat'
6+
import { JSDOM } from 'jsdom'
7+
import {
8+
FastForward,
9+
Github,
10+
Pause,
11+
Play,
12+
Plus,
13+
Rewind,
14+
SkipForward,
15+
} from 'lucide'
16+
import { writeFile } from 'node:fs/promises'
17+
import { Icon } from './icon.js'
18+
import { NEVER } from 'rxjs'
19+
import { Progress } from './progress.js'
20+
import { ProgVm } from './progvm.js'
21+
22+
const dom = new JSDOM(`
23+
<!doctype html>
24+
<html>
25+
<head>
26+
<title>Composite Radial Progress Demo</title>
27+
<link rel="stylesheet" href="index.css" />
28+
<meta name="viewport" content="width=device-width, initial-scale=1" />
29+
<script type="module" src="index-stamp.js"></script>
30+
</head>
31+
32+
<body id="container"></body>
33+
</html>
34+
`)
35+
const { window } = dom
36+
;(globalThis as any).window = window
37+
const { document } = window
38+
;(globalThis as any).document = document
39+
const jQuery: any = function () {}
40+
jQuery.fn = {}
41+
;(globalThis as any).jQuery = jQuery
42+
const container = document.getElementById('container')!
43+
44+
// *** Main (prestamp) ***
45+
46+
const { context: testMainContext } = makeTestComponentContext({
47+
addItem: makeTestEvent<MouseEvent>(NEVER),
48+
toggleMenu: makeTestEvent<MouseEvent>(NEVER),
49+
attach: makeTestEvent<HTMLElement>(NEVER),
50+
pauseAll: makeTestEvent<MouseEvent>(NEVER),
51+
unpauseAll: makeTestEvent<MouseEvent>(NEVER),
52+
})
53+
// imported late to set globalThis.window above
54+
const { Main } = await import('./main.js')
55+
const mainTree = Main({}, testMainContext)
56+
const mainStamp = buildStamp(mainTree, document)
57+
container.append(mainStamp.content)
58+
59+
function appendStamp(stamp: HTMLTemplateElement) {
60+
container.append(stamp)
61+
}
62+
63+
// *** Icon stamps ***
64+
65+
const githubIconStamp = buildStamp(Icon({ icon: Github }), document)
66+
githubIconStamp.id = 'icon-github'
67+
appendStamp(githubIconStamp)
68+
const pauseIconStamp = buildStamp(Icon({ icon: Pause }), document)
69+
pauseIconStamp.id = 'icon-pause'
70+
appendStamp(pauseIconStamp)
71+
const playIconStamp = buildStamp(Icon({ icon: Play }), document)
72+
playIconStamp.id = 'icon-play'
73+
appendStamp(playIconStamp)
74+
const plusIconStamp = buildStamp(Icon({ icon: Plus }), document)
75+
plusIconStamp.id = 'icon-plus'
76+
appendStamp(plusIconStamp)
77+
const ffIconStamp = buildStamp(Icon({ icon: FastForward }), document)
78+
ffIconStamp.id = 'icon-fast-forward'
79+
appendStamp(ffIconStamp)
80+
const rwIconStamp = buildStamp(Icon({ icon: Rewind }), document)
81+
rwIconStamp.id = 'icon-rewind'
82+
appendStamp(rwIconStamp)
83+
const skipIconStamp = buildStamp(Icon({ icon: SkipForward }), document)
84+
skipIconStamp.id = 'icon-skip-forward'
85+
appendStamp(skipIconStamp)
86+
87+
// *** Progress stamp ***
88+
89+
const { context: testProgressContext } = makeTestComponentContext({
90+
finish: makeTestEvent<MouseEvent>(NEVER),
91+
pause: makeTestEvent<MouseEvent>(NEVER),
92+
slowDown: makeTestEvent<MouseEvent>(NEVER),
93+
speedUp: makeTestEvent<MouseEvent>(NEVER),
94+
unpause: makeTestEvent<MouseEvent>(NEVER),
95+
})
96+
const progressTree = Progress({ item: new ProgVm() }, testProgressContext)
97+
const progressStamp = buildStamp(progressTree, document)
98+
progressStamp.id = 'progress'
99+
appendStamp(progressStamp)
100+
101+
// *** Serialize to HTML ***
102+
103+
await writeFile('index.html', dom.serialize())

‎compradprogvm.test.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
import {
22
ProgVm,
33
Subscription,
4-
__commonJS,
5-
__toESM,
64
butterfly,
75
combineLatest,
86
combineLatestAll,
97
filter,
108
map,
9+
shareReplay
10+
} from "./chunk-MH565JGM.js";
11+
import {
12+
__commonJS,
13+
__toESM,
1114
require_Notification,
1215
require_NotificationFactories,
1316
require_Observable,
@@ -20,9 +23,8 @@ import {
2023
require_immediateProvider,
2124
require_intervalProvider,
2225
require_performanceTimestampProvider,
23-
require_timeoutProvider,
24-
shareReplay
25-
} from "./chunk-33WHBTN2.js";
26+
require_timeoutProvider
27+
} from "./chunk-QC5UYQHG.js";
2628

2729
// node_modules/rxjs/dist/cjs/internal/testing/SubscriptionLog.js
2830
var require_SubscriptionLog = __commonJS({

0 commit comments

Comments
 (0)