Skip to content

Commit 292805b

Browse files
web-padawanweb-padawan
authored
chore: use private package for dev pages, add build script (#9995)
1 parent 9492abb commit 292805b

File tree

10 files changed

+489
-151
lines changed

10 files changed

+489
-151
lines changed

‎dev/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Dev pages</title>
8-
<script type="module" src="./dev/common.js"></script>
8+
<script type="module" src="./common.js"></script>
99
</head>
1010
<body>
1111
<h1>Web Component development pages</h1>

‎dev/package.json‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
{
2+
"name": "dev",
3+
"version": "25.0.0-alpha14",
4+
"private": true,
5+
"description": "Vaadin web components dev pages",
6+
"license": "Apache-2.0",
7+
"author": "Vaadin Ltd",
8+
"type": "module",
9+
"scripts": {
10+
"build": "rimraf dist && rollup -c",
11+
"start": "npm run build && web-dev-server --root-dir dist --open"
12+
},
13+
"dependencies": {
14+
"@vaadin/accordion": "25.0.0-alpha14",
15+
"@vaadin/button": "25.0.0-alpha14",
16+
"@vaadin/chai-plugins": "25.0.0-alpha14",
17+
"@vaadin/checkbox": "25.0.0-alpha14",
18+
"@vaadin/checkbox-group": "25.0.0-alpha14",
19+
"@vaadin/combo-box": "25.0.0-alpha14",
20+
"@vaadin/confirm-dialog": "25.0.0-alpha14",
21+
"@vaadin/context-menu": "25.0.0-alpha14",
22+
"@vaadin/custom-field": "25.0.0-alpha14",
23+
"@vaadin/date-picker": "25.0.0-alpha14",
24+
"@vaadin/date-time-picker": "25.0.0-alpha14",
25+
"@vaadin/details": "25.0.0-alpha14",
26+
"@vaadin/dialog": "25.0.0-alpha14",
27+
"@vaadin/email-field": "25.0.0-alpha14",
28+
"@vaadin/form-layout": "25.0.0-alpha14",
29+
"@vaadin/grid": "25.0.0-alpha14",
30+
"@vaadin/grid-pro": "25.0.0-alpha14",
31+
"@vaadin/icon": "25.0.0-alpha14",
32+
"@vaadin/integer-field": "25.0.0-alpha14",
33+
"@vaadin/list-box": "25.0.0-alpha14",
34+
"@vaadin/map": "25.0.0-alpha14",
35+
"@vaadin/menu-bar": "25.0.0-alpha14",
36+
"@vaadin/message-input": "25.0.0-alpha14",
37+
"@vaadin/multi-select-combo-box": "25.0.0-alpha14",
38+
"@vaadin/notification": "25.0.0-alpha14",
39+
"@vaadin/number-field": "25.0.0-alpha14",
40+
"@vaadin/overlay": "25.0.0-alpha14",
41+
"@vaadin/password-field": "25.0.0-alpha14",
42+
"@vaadin/popover": "25.0.0-alpha14",
43+
"@vaadin/radio-group": "25.0.0-alpha14",
44+
"@vaadin/select": "25.0.0-alpha14",
45+
"@vaadin/tabs": "25.0.0-alpha14",
46+
"@vaadin/test-runner-commands": "25.0.0-alpha14",
47+
"@vaadin/testing-helpers": "^2.0.0",
48+
"@vaadin/text-area": "25.0.0-alpha14",
49+
"@vaadin/text-field": "25.0.0-alpha14",
50+
"@vaadin/time-picker": "25.0.0-alpha14",
51+
"@vaadin/tooltip": "25.0.0-alpha14",
52+
"@vaadin/vertical-layout": "25.0.0-alpha14",
53+
"@vaadin/virtual-list": "25.0.0-alpha14"
54+
},
55+
"devDependencies": {
56+
"@rollup/plugin-node-resolve": "^16.0.1",
57+
"@rollup/plugin-terser": "^0.4.4",
58+
"@web/rollup-plugin-html": "^2.3.0",
59+
"postcss": "^8.1.0",
60+
"postcss-import": "^16.1.1",
61+
"rimraf": "^6.0.1",
62+
"rollup": "^4.46.2"
63+
}
64+
}

‎dev/rollup.config.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { nodeResolve } from '@rollup/plugin-node-resolve';
2+
import terser from '@rollup/plugin-terser';
3+
import { rollupPluginHTML as html } from '@web/rollup-plugin-html';
4+
import postcss from 'postcss';
5+
import atImport from 'postcss-import';
6+
import { appendStyles, generateListing } from '../wds-utils.js';
7+
8+
export default {
9+
input: '**/*.html',
10+
output: { dir: 'dist' },
11+
plugins: [
12+
nodeResolve(),
13+
html({
14+
flattenOutput: false, // Preserve "charts" folder
15+
transformHtml: [(html) => appendStyles(html), (html) => generateListing(html)],
16+
transformAsset: [
17+
async (content, filePath) => {
18+
if (filePath.endsWith('.css')) {
19+
const result = await postcss().use(atImport()).process(content, {
20+
from: filePath,
21+
});
22+
return result.css;
23+
}
24+
},
25+
],
26+
}),
27+
terser(),
28+
],
29+
};

‎eslint.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export default [
4545
ignores: [
4646
'coverage/**/*.js',
4747
'dist/**/*.js',
48-
'api-docs/dist/**/*.js',
48+
'**/dist/**/*',
4949
'packages/**/vendor/*.js',
5050
'packages/**/dist/*.js',
5151
'packages/**/test/dom/__snapshots__/*.snap.js',

‎lerna.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"packages": ["test/*", "packages/*", "api-docs"],
2+
"packages": ["test/*", "packages/*", "api-docs", "dev"],
33
"npmClient": "yarn",
44
"version": "25.0.0-alpha14"
55
}

‎package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,15 @@
99
"api-docs:build": "yarn analyze && yarn workspace api-docs generate ../analysis.json && yarn workspace api-docs build",
1010
"debug": "yarn test --watch",
1111
"debug:it": "yarn test --watch --config web-test-runner-it.config.js",
12+
"dev:build": "yarn workspace dev build",
13+
"dev:start": "yarn workspace dev start",
1214
"icons": "lerna run icons",
1315
"lint": "npm-run-all --parallel lint:*",
1416
"lint:css": "stylelint --ignore-path .gitignore \"packages/**/src/**/*.js\" \"packages/**/*.css\" \"dev/**/*.html\"",
1517
"lint:js": "eslint",
1618
"lint:types": "tsc",
1719
"postinstall": "patch-package",
1820
"prepare": "husky",
19-
"serve:dist": "web-dev-server --app-index dist/index.html --open",
2021
"start": "web-dev-server --node-resolve --open /dev",
2122
"start:aura": "web-dev-server --node-resolve --open /dev --theme=aura",
2223
"start:lumo": "web-dev-server --node-resolve --open /dev --theme=lumo",
@@ -90,6 +91,7 @@
9091
"workspaces": [
9192
"test/*",
9293
"packages/*",
93-
"api-docs"
94+
"api-docs",
95+
"dev"
9496
]
9597
}

‎packages/component-base/src/element-mixin.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,10 @@ export const ElementMixin = (superClass) =>
4848
window.Vaadin.registrations.push(this);
4949
registered.add(is);
5050

51-
if (window.Vaadin.developmentModeCallback) {
51+
const callback = window.Vaadin.developmentModeCallback;
52+
if (callback) {
5253
statsJob = Debouncer.debounce(statsJob, idlePeriod, () => {
53-
window.Vaadin.developmentModeCallback['vaadin-usage-statistics']();
54+
callback['vaadin-usage-statistics']();
5455
});
5556
enqueueDebouncer(statsJob);
5657
}

‎wds-utils.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import fs from 'node:fs';
2+
3+
export function appendStyles(html) {
4+
const preventFouc = `
5+
<style>
6+
body:not(.resolved) {
7+
opacity: 0;
8+
}
9+
10+
body {
11+
transition: opacity 0.2s;
12+
}
13+
</style>
14+
15+
<script type="module">
16+
// It's important to use type module for the script so the timing is correct
17+
document.body.classList.add('resolved');
18+
</script>
19+
`;
20+
21+
return html.replace(/<\/body>/u, `${preventFouc}\n</body>`);
22+
}
23+
24+
export function generateListing(html, dir, path) {
25+
if (html.includes('<ul id="listing">')) {
26+
// Add <base> to make index.html work when opening
27+
// http://localhost:8000/dev without trailing slash
28+
if (path && path.endsWith('/dev')) {
29+
html = html.replace('<head>', '<head>\n<base href="dev/">');
30+
}
31+
32+
const listing = `
33+
<ul id="listing">
34+
${fs
35+
.readdirSync(dir || '.')
36+
.filter((file) => file !== 'index.html')
37+
.filter((file) => file.endsWith('.html'))
38+
.map((file) => `<li><a href="${file}">${file}</a></li>`)
39+
.join('')}
40+
</ul>`;
41+
42+
return html.replace(/<ul id="listing">.*<\/ul>/u, listing);
43+
}
44+
45+
return html;
46+
}

‎web-dev-server.config.js‎

Lines changed: 3 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { esbuildPlugin } from '@web/dev-server-esbuild';
2-
import fs from 'node:fs';
2+
import { appendStyles, generateListing } from './wds-utils.js';
33

44
const theme = process.argv.join(' ').match(/--theme=(\w+)/u)?.[1] ?? 'base';
55

@@ -64,23 +64,6 @@ export function enforceThemePlugin(theme) {
6464
};
6565
}
6666

67-
const preventFouc = `
68-
<style>
69-
body:not(.resolved) {
70-
opacity: 0;
71-
}
72-
73-
body {
74-
transition: opacity 0.2s;
75-
}
76-
</style>
77-
78-
<script type="module">
79-
// It's important to use type module for the script so the timing is correct
80-
document.body.classList.add('resolved');
81-
</script>
82-
`;
83-
8467
export default {
8568
plugins: [
8669
{
@@ -90,21 +73,11 @@ export default {
9073
let body = context.body;
9174

9275
// Fouc prevention
93-
body = body.replace(/<\/body>/u, `${preventFouc}\n</body>`);
76+
body = appendStyles(body);
9477

9578
// Index page listing
9679
if (['/dev/index.html', '/dev', '/dev/'].includes(context.path)) {
97-
const listing = `
98-
<ul id="listing">
99-
${fs
100-
.readdirSync('./dev')
101-
.filter((file) => file !== 'index.html')
102-
.filter((file) => file.endsWith('.html'))
103-
.map((file) => `<li><a href="/dev/${file}">${file}</a></li>`)
104-
.join('')}
105-
</ul>`;
106-
107-
body = body.replace(/<ul id="listing">.*<\/ul>/u, listing);
80+
body = generateListing(body, './dev', context.path);
10881
}
10982

11083
return { body };

0 commit comments

Comments
 (0)