rollup-apps/plugin-html
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chore: more readable snapshots

Browse Source
This commit is contained in:
Miel Truyen
2024-03-24 18:04:47 +01:00
parent 4cb8daf908
commit 93f99c732f
37 changed files with 1258 additions and 1096 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
test/basic/__snapshots__/test.js.snap
View File

@@ -1,78 +1,108 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`basic inline-script 1`] = `
[
{
"code": undefined,
"fileName": "script.body.script.js.js.map",
"map": undefined,
"source": "{"version":3,"file":"script.body.script.js.js","sources":["../batman.js","../script.html.body.script.js"],"sourcesContent":["export const b = ()=>'batman';\\nconsole.log(b());\\n","\\n import {b} from \\"./batman.js\\";\\n document.body.appendChild(\\n document.createTextNode(\`Inline script including \${b()}\`)\\n );\\n "],"names":[],"mappings":"AAAO,MAAM,CAAC,GAAG,IAAI,QAAQ,CAAC;AAC9B,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;;ACCJ,QAAQ,CAAC,IAAI,CAAC,WAAW;AACrC,gBAAgB,QAAQ,CAAC,cAAc,CAAC,CAAC,wBAAwB,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACzE,aAAa"}",
},
{
"code": undefined,
"fileName": "script.html",
"map": undefined,
"source": "<html><head>
</head>
<body>
<script type="module">const b = ()=>'batman';
console.log(b());
document.body.appendChild(
document.createTextNode(\`Inline script including \${b()}\`)
);
//# sourceMappingURL=script.body.script.js.js.map
</script>
</body></html>",
},
]
###############
# script.html #
###############
<html><head>
<!-- TODO:
EMPTY FAVICON, PREVENTS THE EXTRA REQUEST, but should be ignored by the rollup plugin:
<link rel="icon" href="data:,">
ONCE ADDED: change the snapshot to include full output (of browser test + code, instead of just .code)
-->
</head>
<body>
<script type="module">const b = ()=>'batman';
console.log(b());
document.body.appendChild(
document.createTextNode(\`Inline script including \${b()}\`)
);
//# sourceMappingURL=script.body.script.js.js.map
</script>
</body></html>
################################
# script.body.script.js.js.map #
################################
{"version":3,"file":"script.body.script.js.js","sources":["../batman.js","../script.html.body.script.js"],"sourcesContent":["export const b = ()=>'batman';\\nconsole.log(b());\\n","\\n import {b} from \\"./batman.js\\";\\n document.body.appendChild(\\n document.createTextNode(\`Inline script including \${b()}\`)\\n );\\n "],"names":[],"mappings":"AAAO,MAAM,CAAC,GAAG,IAAI,QAAQ,CAAC;AAC9B,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;;ACCJ,QAAQ,CAAC,IAAI,CAAC,WAAW;AACrC,gBAAgB,QAAQ,CAAC,cAAc,CAAC,CAAC,wBAAwB,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACzE,aAAa"}
#################
# RENDERED HTML #
#################
<html><head>
<!-- TODO:
EMPTY FAVICON, PREVENTS THE EXTRA REQUEST, but should be ignored by the rollup plugin:
<link rel="icon" href="data:,">
ONCE ADDED: change the snapshot to include full output (of browser test + code, instead of just .code)
-->
</head>
<body>
<script type="module">const b = ()=>'batman';
console.log(b());
document.body.appendChild(
document.createTextNode(\`Inline script including \${b()}\`)
);
//# sourceMappingURL=script.body.script.js.js.map
</script>
Inline script including batman</body></html>
###########
# CONSOLE #
###########
[log] batman
[error] Failed to load resource: the server responded with a status of 404 (Not Found)
#############
# RESPONSES #
#############
200 http://localhost/script.html
404 http://localhost/favicon.ico
`;
exports[`basic simple 1`] = `
[
{
"code": "const b = ()=>'batman';
console.log(b());
export { b };
//# sourceMappingURL=batman.js.map
",
"fileName": "batman.js",
"map": SourceMap {
"file": "batman.js",
"mappings": "AAAY,MAAC,CAAC,GAAG,IAAI,SAAS;AAC9B,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;;;;",
"names": [],
"sources": [
"../batman.js",
],
"sourcesContent": [
"export const b = ()=>'batman';
console.log(b());
",
],
"version": 3,
},
"source": undefined,
},
{
"code": undefined,
"fileName": "batman.js.map",
"map": undefined,
"source": "{"version":3,"file":"batman.js","sources":["../batman.js"],"sourcesContent":["export const b = ()=>'batman';\\nconsole.log(b());\\n"],"names":[],"mappings":"AAAY,MAAC,CAAC,GAAG,IAAI,SAAS;AAC9B,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;;;;"}",
},
{
"code": undefined,
"fileName": "index.html",
"map": undefined,
"source": "<html><head>
</head>
<body>
<script src="batman.js" type="module"></script>
</body></html>",
},
]
##############
# index.html #
##############
<html><head>
</head>
<body>
<script src="batman.js" type="module"></script>
</body></html>
#############
# batman.js #
#############
const b = ()=>'batman';
console.log(b());
export { b };
//# sourceMappingURL=batman.js.map
#################
# batman.js.map #
#################
{"version":3,"file":"batman.js","sources":["../batman.js"],"sourcesContent":["export const b = ()=>'batman';\\nconsole.log(b());\\n"],"names":[],"mappings":"AAAY,MAAC,CAAC,GAAG,IAAI,SAAS;AAC9B,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;;;;"}
#################
# RENDERED HTML #
#################
<html><head>
</head>
<body>
<script src="batman.js" type="module"></script>
</body></html>
###########
# CONSOLE #
###########
[log] batman
#############
# RESPONSES #
#############
200 http://localhost/index.html
200 http://localhost/batman.js
200 http://localhost/favicon.ico
`;

5
test/basic/fixtures/script.html
View File

@@ -1,5 +1,10 @@
<html>
<head>
<!-- TODO:
EMPTY FAVICON, PREVENTS THE EXTRA REQUEST, but should be ignored by the rollup plugin:
<link rel="icon" href="data:,">
ONCE ADDED: change the snapshot to include full output (of browser test + code, instead of just .code)
-->
</head>
<body>
<script type="module">

29
test/basic/test.js
View File

@@ -2,40 +2,38 @@ import {join, dirname} from "node:path";
import {test, expect} from "@jest/globals";
import { rollup } from "rollup";
import {debugPrintOutput, getCode} from "../util/index.ts";
import {runBrowserTest, defaultOutput, serializer} from "../util/index.ts";
import html from "../../src/index.ts";
import {fileURLToPath} from "node:url";
const __dirname = dirname(fileURLToPath(import.meta.url));
process.chdir(join(__dirname, 'fixtures'));
describe("basic", ()=> {
expect.addSnapshotSerializer(serializer);
test('simple', async () => {
const bundle = await rollup({
const out = await runBrowserTest({
input: 'index.html',
plugins: [
html({}),
]
});
const code = await getCode(bundle);
await bundle.close();
debugPrintOutput('simple', code);
expect(code).toMatchSnapshot();
}, {
}, defaultOutput);
expect(out).toMatchSnapshot();
});
test('inline-script', async () => {
const bundle = await rollup({
const out = await runBrowserTest({
input: 'script.html',
plugins: [
html({}),
]
});
const code = await getCode(bundle);
await bundle.close();
debugPrintOutput('inline-script', code);
expect(code).toMatchSnapshot();
}, {
path: 'script.html',
}, defaultOutput);
expect(out).toMatchSnapshot();
});
// TODO various parameters
@@ -43,5 +41,4 @@ describe("basic", ()=> {
// - sourcemap: inline, false, (and the various exotic sourcemap options)
// Watch mode tests would be its own dir
// ...
});

145
test/evaluated-web-bundle/__snapshots__/test.js.snap
View File

@@ -1,36 +1,117 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`evaluated-web-bundle 1`] = `
{
"console": [
"[log] Bootstrapped, ready to go!",
"[log] Test my sourcemap: App started",
"[log] Test my sourcemap: App tick",
"[log] Test my sourcemap: App ended",
],
"errors": [],
"html": "<html lang="en"><head>
<meta charset="UTF-8">
<title>
Test bundle!
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%20%20%20%20%3Ctitle%3EHTML5%20Logo%3C%2Ftitle%3E%20%20%20%20%3Cpath%20d%3D%22M108.4%200h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206%2023h-20.3V0h63.7v23H229v46h-23M259.5%200h24.1l14.8%2024.3L313.2%200h24.1v69h-23V34.8l-16.1%2024.8l-16.1-24.8v34.2h-22.6M348.7%200h23v46.2h32.6V69h-55.6%22%2F%3E%20%20%20%20%3Cpath%20fill%3D%22%23e44d26%22%20d%3D%22M107.6%20471l-33-370.4h362.8l-33%20370.2L255.7%20512%22%2F%3E%20%20%20%20%3Cpath%20fill%3D%22%23f16529%22%20d%3D%22M256%20480.5V131H404.3L376%20447%22%2F%3E%20%20%20%20%3Cpath%20fill%3D%22%23ebebeb%22%20d%3D%22M142%20176.3h114v45.4h-64.2l4.2%2046.5h60v45.3H154.4M156.4%20336.3H202l3.2%2036.3%2050.8%2013.6v47.4l-93.2-26%22%2F%3E%20%20%20%20%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M369.6%20176.3H255.8v45.4h109.6M361.3%20268.2H255.8v45.4h56l-5.3%2059-50.7%2013.6v47.2l93-25.8%22%2F%3E%3C%2Fsvg%3E">
<title>I'm cool!</title>
</head>
<body>
<div id="root"><div style="align-self: center"><b>App ended</b></div></div>
<script src="index.js" type="module"></script>
</body></html>",
"requestsFailed": [],
"responses": [
"200 http://localhost/index.html",
"200 http://localhost/index.js",
"200 http://localhost/app.js",
],
}
##############
# index.html #
##############
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>
Test bundle!
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%20%20%20%20%3Ctitle%3EHTML5%20Logo%3C%2Ftitle%3E%20%20%20%20%3Cpath%20d%3D%22M108.4%200h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206%2023h-20.3V0h63.7v23H229v46h-23M259.5%200h24.1l14.8%2024.3L313.2%200h24.1v69h-23V34.8l-16.1%2024.8l-16.1-24.8v34.2h-22.6M348.7%200h23v46.2h32.6V69h-55.6%22%2F%3E%20%20%20%20%3Cpath%20fill%3D%22%23e44d26%22%20d%3D%22M107.6%20471l-33-370.4h362.8l-33%20370.2L255.7%20512%22%2F%3E%20%20%20%20%3Cpath%20fill%3D%22%23f16529%22%20d%3D%22M256%20480.5V131H404.3L376%20447%22%2F%3E%20%20%20%20%3Cpath%20fill%3D%22%23ebebeb%22%20d%3D%22M142%20176.3h114v45.4h-64.2l4.2%2046.5h60v45.3H154.4M156.4%20336.3H202l3.2%2036.3%2050.8%2013.6v47.4l-93.2-26%22%2F%3E%20%20%20%20%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M369.6%20176.3H255.8v45.4h109.6M361.3%20268.2H255.8v45.4h56l-5.3%2059-50.7%2013.6v47.2l93-25.8%22%2F%3E%3C%2Fsvg%3E">
<title>I'm cool!</title>
</head>
<body>
<div id="root">Here the app should load!</div>
<script src="index.js" type="module"></script>
</body></html>
##########
# app.js #
##########
async function app({root}){
const states = ['started', 'tick', 'ended'];
for(let state of states){
const text = \`App \${state}\`;
console.log(\`Test my sourcemap: \${text}\`);
root.innerHTML = \`<div style="align-self: center"><b>\${text}</b></div>\`;
await new Promise((resolve,reject)=>
setTimeout(()=>resolve(), 10)
);
}
}
export { app };
//# sourceMappingURL=app.js.map
##############
# app.js.map #
##############
{"version":3,"file":"app.js","sources":["../app.mjs"],"sourcesContent":["export async function app({root}){\\n\\n const states = ['started', 'tick', 'ended'];\\n\\n for(let state of states){\\n const text = \`App \${state}\`;\\n console.log(\`Test my sourcemap: \${text}\`);\\n root.innerHTML = \`<div style=\\"align-self: center\\"><b>\${text}</b></div>\`;\\n await new Promise((resolve,reject)=>\\n setTimeout(()=>resolve(), 10)\\n );\\n }\\n}\\n"],"names":[],"mappings":"AAAO,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC;AACjC;AACA,IAAI,MAAM,MAAM,GAAG,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;AAChD;AACA,IAAI,IAAI,IAAI,KAAK,IAAI,MAAM,CAAC;AAC5B,QAAQ,MAAM,IAAI,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;AACpC,QAAQ,OAAO,CAAC,GAAG,CAAC,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;AAClD,QAAQ,IAAI,CAAC,SAAS,GAAG,CAAC,mCAAmC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChF,QAAQ,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,CAAC,MAAM;AACzC,YAAY,UAAU,CAAC,IAAI,OAAO,EAAE,EAAE,EAAE,CAAC;AACzC,SAAS,CAAC;AACV,KAAK;AACL;;;;"}
############
# index.js #
############
// Dynamically loads libraries and bootstraps the application
(async ()=>{
// Add a loader here if any
const root = document.getElementById('root');
if(root) root.innerHTML= \`<div style="align-self: center">My app has loaded!!</div>\`;
try {
// Load app
const [
appModule,
] = await Promise.all([
import('./app.js'),
]);
console.log("Bootstrapped, ready to go!");
// Wait for DOM to be ready
if(document.readyState === 'loading') {
await new Promise((resolve)=>document.addEventListener('DOMContentLoaded', resolve));
}
// Start the app!
await appModule.app({root});
}catch(err){
console.error(err);
}
})();
//# sourceMappingURL=index.js.map
################
# index.js.map #
################
{"version":3,"file":"index.js","sources":["../index.mjs"],"sourcesContent":["// Dynamically loads libraries and bootstraps the application\\n(async ()=>{\\n // Add a loader here if any\\n const root = document.getElementById('root')\\n if(root) root.innerHTML= \`<div style=\\"align-self: center\\">My app has loaded!!</div>\`;\\n\\n try {\\n // Load app\\n const [\\n appModule,\\n ] = await Promise.all([\\n import(\\"./app.mjs\\"),\\n ]);\\n\\n console.log(\\"Bootstrapped, ready to go!\\");\\n\\n // Wait for DOM to be ready\\n if(document.readyState === 'loading') {\\n await new Promise((resolve)=>document.addEventListener('DOMContentLoaded', resolve));\\n }\\n\\n // Start the app!\\n await appModule.app({root});\\n }catch(err){\\n console.error(err);\\n }\\n})()\\n"],"names":[],"mappings":"AAAA;AACA,CAAC,UAAU;AACX;AACA,IAAI,MAAM,IAAI,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,EAAC;AAChD,IAAI,GAAG,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,yDAAyD,CAAC,CAAC;AACzF;AACA,IAAI,IAAI;AACR;AACA,QAAQ,MAAM;AACd,YAAY,SAAS;AACrB,SAAS,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;AAC9B,YAAY,OAAO,UAAW,CAAC;AAC/B,SAAS,CAAC,CAAC;AACX;AACA,QAAQ,OAAO,CAAC,GAAG,CAAC,4BAA4B,CAAC,CAAC;AAClD;AACA;AACA,QAAQ,GAAG,QAAQ,CAAC,UAAU,KAAK,SAAS,EAAE;AAC9C,YAAY,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,GAAG,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,OAAO,CAAC,CAAC,CAAC;AACjG,SAAS;AACT;AACA;AACA,QAAQ,MAAM,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACpC,KAAK,MAAM,GAAG,CAAC;AACf,QAAQ,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AAC3B,KAAK;AACL,CAAC"}
#################
# RENDERED HTML #
#################
<html lang="en"><head>
<meta charset="UTF-8">
<title>
Test bundle!
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%20%20%20%20%3Ctitle%3EHTML5%20Logo%3C%2Ftitle%3E%20%20%20%20%3Cpath%20d%3D%22M108.4%200h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206%2023h-20.3V0h63.7v23H229v46h-23M259.5%200h24.1l14.8%2024.3L313.2%200h24.1v69h-23V34.8l-16.1%2024.8l-16.1-24.8v34.2h-22.6M348.7%200h23v46.2h32.6V69h-55.6%22%2F%3E%20%20%20%20%3Cpath%20fill%3D%22%23e44d26%22%20d%3D%22M107.6%20471l-33-370.4h362.8l-33%20370.2L255.7%20512%22%2F%3E%20%20%20%20%3Cpath%20fill%3D%22%23f16529%22%20d%3D%22M256%20480.5V131H404.3L376%20447%22%2F%3E%20%20%20%20%3Cpath%20fill%3D%22%23ebebeb%22%20d%3D%22M142%20176.3h114v45.4h-64.2l4.2%2046.5h60v45.3H154.4M156.4%20336.3H202l3.2%2036.3%2050.8%2013.6v47.4l-93.2-26%22%2F%3E%20%20%20%20%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M369.6%20176.3H255.8v45.4h109.6M361.3%20268.2H255.8v45.4h56l-5.3%2059-50.7%2013.6v47.2l93-25.8%22%2F%3E%3C%2Fsvg%3E">
<title>I'm cool!</title>
</head>
<body>
<div id="root"><div style="align-self: center"><b>App ended</b></div></div>
<script src="index.js" type="module"></script>
</body></html>
###########
# CONSOLE #
###########
[log] Bootstrapped, ready to go!
[log] Test my sourcemap: App started
[log] Test my sourcemap: App tick
[log] Test my sourcemap: App ended
#############
# RESPONSES #
#############
200 http://localhost/index.html
200 http://localhost/index.js
200 http://localhost/app.js
`;

5
test/evaluated-web-bundle/test.js
View File

@@ -8,6 +8,7 @@ import {runBrowserTest} from "../util/browser-test.ts";
import {fileURLToPath} from "node:url";
import handlebars from "handlebars";
import {serializer} from "../util/index.ts";
const __dirname = dirname(fileURLToPath(import.meta.url));
process.chdir(join(__dirname, 'fixtures'));
@@ -20,11 +21,15 @@ const defaultAssetInclude = [
];
test('evaluated-web-bundle', async ()=>{
expect.addSnapshotSerializer(serializer);
const out = await runBrowserTest({
input: 'index.hbs',
treeshake: 'smallest',
plugins: [
html({
include: [
'**/*.(html|hbs)',// html or handlebars
],
transform(src) {
return handlebars.compile(src)({
head: `<title>I'm cool!</title>`

93
test/js-import/__snapshots__/test.js.snap
View File

@@ -1,69 +1,32 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`js-import 1`] = `
[
{
"code": "var asset0 = "data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%20%3Cpath%20style%3D%22fill%3Anone%3Bstroke%3A%2300ff0d%3Bstroke-width%3A5%3Bstroke-linecap%3Asquare%3Bstroke-linejoin%3Amiter%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%20d%3D%22M4.1%2014.72%2016%2026.31%2028.38%205.09%22%2F%3E%3C%2Fsvg%3E";
const html = \`<html><head>
<link rel="icon" href="\${asset0}">
<!-- TODO: support for css imports are yet to be added (as simple assets or through a preprocessor-->
<!-- <link rel="stylesheet" href="./joker.css">-->
</head>
<body>
<!-- TODO: this shouldn't have been commented out, but our plugin fails if it is included (which shoudn't happen!!) -->
<!--<script src="./batman.js" type="module"></script>-->
</body></html>\`;
function render(){
return html;
}
export { render };
//# sourceMappingURL=index.js.map
",
"fileName": "index.js",
"map": SourceMap {
"file": "index.js",
"mappings": "AAAA,aAAe;;ACAf,MAAA,IAAA,GAAA,CAAA;AACA,+BAA+B,EAAwD,MAAA,CAAA;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAa,CAAA;;ACRN,SAAS,MAAM,EAAE;AACxB,IAAI,OAAO,IAAI,CAAC;AAChB;;;;",
"names": [],
"sources": [
"../icon.svg",
"../index.html",
"../index.js",
],
"sourcesContent": [
"export default "data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%20%3Cpath%20style%3D%22fill%3Anone%3Bstroke%3A%2300ff0d%3Bstroke-width%3A5%3Bstroke-linecap%3Asquare%3Bstroke-linejoin%3Amiter%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%20d%3D%22M4.1%2014.72%2016%2026.31%2028.38%205.09%22%2F%3E%3C%2Fsvg%3E"",
"<html>
<head>
<link rel="icon" href="./icon.svg">
<!-- TODO: support for css imports are yet to be added (as simple assets or through a preprocessor-->
<!-- <link rel="stylesheet" href="./joker.css">-->
</head>
<body>
<!-- TODO: this shouldn't have been commented out, but our plugin fails if it is included (which shoudn't happen!!) -->
<!--<script src="./batman.js" type="module"></script>-->
</body>
</html>
",
"import html from "./index.html"
export function render(){
return html;
}
",
],
"version": 3,
},
"source": undefined,
},
{
"code": undefined,
"fileName": "index.js.map",
"map": undefined,
"source": "{"version":3,"file":"index.js","sources":["../icon.svg","../index.html","../index.js"],"sourcesContent":["export default \\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%20%3Cpath%20style%3D%22fill%3Anone%3Bstroke%3A%2300ff0d%3Bstroke-width%3A5%3Bstroke-linecap%3Asquare%3Bstroke-linejoin%3Amiter%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%20d%3D%22M4.1%2014.72%2016%2026.31%2028.38%205.09%22%2F%3E%3C%2Fsvg%3E\\"","<html>\\n <head>\\n <link rel=\\"icon\\" href=\\"./icon.svg\\">\\n <!-- TODO: support for css imports are yet to be added (as simple assets or through a preprocessor-->\\n<!-- <link rel=\\"stylesheet\\" href=\\"./joker.css\\">-->\\n </head>\\n <body>\\n <!-- TODO: this shouldn't have been commented out, but our plugin fails if it is included (which shoudn't happen!!) -->\\n <!--<script src=\\"./batman.js\\" type=\\"module\\"></script>-->\\n </body>\\n</html>\\n","import html from \\"./index.html\\"\\n\\nexport function render(){\\n return html;\\n}\\n"],"names":[],"mappings":"AAAA,aAAe;;ACAf,MAAA,IAAA,GAAA,CAAA;AACA,+BAA+B,EAAwD,MAAA,CAAA;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAa,CAAA;;ACRN,SAAS,MAAM,EAAE;AACxB,IAAI,OAAO,IAAI,CAAC;AAChB;;;;"}",
},
]
############
# index.js #
############
var asset0 = "data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%20%3Cpath%20style%3D%22fill%3Anone%3Bstroke%3A%2300ff0d%3Bstroke-width%3A5%3Bstroke-linecap%3Asquare%3Bstroke-linejoin%3Amiter%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%20d%3D%22M4.1%2014.72%2016%2026.31%2028.38%205.09%22%2F%3E%3C%2Fsvg%3E";
const html = \`<html><head>
<link rel="icon" href="\${asset0}">
<!-- TODO: support for css imports are yet to be added (as simple assets or through a preprocessor-->
<!-- <link rel="stylesheet" href="./joker.css">-->
</head>
<body>
<!-- TODO: this shouldn't have been commented out, but our plugin fails if it is included (which shoudn't happen!!) -->
<!--<script src="./batman.js" type="module"></script>-->
</body></html>\`;
function render(){
return html;
}
export { render };
//# sourceMappingURL=index.js.map
################
# index.js.map #
################
{"version":3,"file":"index.js","sources":["../icon.svg","../index.html","../index.js"],"sourcesContent":["export default \\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%20%3Cpath%20style%3D%22fill%3Anone%3Bstroke%3A%2300ff0d%3Bstroke-width%3A5%3Bstroke-linecap%3Asquare%3Bstroke-linejoin%3Amiter%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%20d%3D%22M4.1%2014.72%2016%2026.31%2028.38%205.09%22%2F%3E%3C%2Fsvg%3E\\"","<html>\\n <head>\\n <link rel=\\"icon\\" href=\\"./icon.svg\\">\\n <!-- TODO: support for css imports are yet to be added (as simple assets or through a preprocessor-->\\n<!-- <link rel=\\"stylesheet\\" href=\\"./joker.css\\">-->\\n </head>\\n <body>\\n <!-- TODO: this shouldn't have been commented out, but our plugin fails if it is included (which shoudn't happen!!) -->\\n <!--<script src=\\"./batman.js\\" type=\\"module\\"></script>-->\\n </body>\\n</html>\\n","import html from \\"./index.html\\"\\n\\nexport function render(){\\n return html;\\n}\\n"],"names":[],"mappings":"AAAA,aAAe;;ACAf,MAAA,IAAA,GAAA,CAAA;AACA,+BAA+B,EAAwD,MAAA,CAAA;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAa,CAAA;;ACRN,SAAS,MAAM,EAAE;AACxB,IAAI,OAAO,IAAI,CAAC;AAChB;;;;"}
`;

5
test/js-import/test.js
View File

@@ -3,7 +3,7 @@ import {test, expect} from "@jest/globals";
import { rollup } from "rollup";
import {debugPrintOutput, getCode} from "../util/index.ts";
import {debugPrintOutput, getCode, serializer} from "../util/index.ts";
import html from "../../src/index.ts";
import handlebars from "handlebars";
@@ -22,6 +22,7 @@ const defaultAssetInclude = [
test('js-import', async () => {
expect.addSnapshotSerializer(serializer);
const bundle = await rollup({
input: 'index.js',
plugins: [
@@ -36,7 +37,7 @@ test('js-import', async () => {
});
const code = await getCode(bundle);
debugPrintOutput('js-import',code);
expect(code).toMatchSnapshot();
expect({code}).toMatchSnapshot();
});

65
test/jsx-web-app/__snapshots__/test.js.snap
View File

@@ -1,36 +1,37 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`web-bundle 1`] = `
{
"console": [
"[info] %cDownload the React DevTools for a better development experience: https://reactjs.org/link/react-devtools font-weight:bold",
"[log] Bootstrapped, ready to go!",
"[log] Test my sourcemap: tick",
"[log] Test my sourcemap: ended",
],
"errors": [],
"html": "<html lang="en"><head>
<meta charset="UTF-8">
<title>
Test bundle!
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%20%20%20%20%3Ctitle%3EHTML5%20Logo%3C%2Ftitle%3E%20%20%20%20%3Cpath%20d%3D%22M108.4%200h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206%2023h-20.3V0h63.7v23H229v46h-23M259.5%200h24.1l14.8%2024.3L313.2%200h24.1v69h-23V34.8l-16.1%2024.8l-16.1-24.8v34.2h-22.6M348.7%200h23v46.2h32.6V69h-55.6%22%2F%3E%20%20%20%20%3Cpath%20fill%3D%22%23e44d26%22%20d%3D%22M107.6%20471l-33-370.4h362.8l-33%20370.2L255.7%20512%22%2F%3E%20%20%20%20%3Cpath%20fill%3D%22%23f16529%22%20d%3D%22M256%20480.5V131H404.3L376%20447%22%2F%3E%20%20%20%20%3Cpath%20fill%3D%22%23ebebeb%22%20d%3D%22M142%20176.3h114v45.4h-64.2l4.2%2046.5h60v45.3H154.4M156.4%20336.3H202l3.2%2036.3%2050.8%2013.6v47.4l-93.2-26%22%2F%3E%20%20%20%20%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M369.6%20176.3H255.8v45.4h109.6M361.3%20268.2H255.8v45.4h56l-5.3%2059-50.7%2013.6v47.2l93-25.8%22%2F%3E%3C%2Fsvg%3E">
<title>I'm cool!</title>
</head>
<body>
<div id="root"><div style="align-self: center;"><b>ended</b></div></div>
<script src="index.js" type="module"></script>
</body></html>",
"requestsFailed": [],
"responses": [
"200 http://localhost/index.html",
"200 http://localhost/index.js",
"200 http://localhost/app.js",
],
}
#################
# RENDERED HTML #
#################
<html lang="en"><head>
<meta charset="UTF-8">
<title>
Test bundle!
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%20%20%20%20%3Ctitle%3EHTML5%20Logo%3C%2Ftitle%3E%20%20%20%20%3Cpath%20d%3D%22M108.4%200h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206%2023h-20.3V0h63.7v23H229v46h-23M259.5%200h24.1l14.8%2024.3L313.2%200h24.1v69h-23V34.8l-16.1%2024.8l-16.1-24.8v34.2h-22.6M348.7%200h23v46.2h32.6V69h-55.6%22%2F%3E%20%20%20%20%3Cpath%20fill%3D%22%23e44d26%22%20d%3D%22M107.6%20471l-33-370.4h362.8l-33%20370.2L255.7%20512%22%2F%3E%20%20%20%20%3Cpath%20fill%3D%22%23f16529%22%20d%3D%22M256%20480.5V131H404.3L376%20447%22%2F%3E%20%20%20%20%3Cpath%20fill%3D%22%23ebebeb%22%20d%3D%22M142%20176.3h114v45.4h-64.2l4.2%2046.5h60v45.3H154.4M156.4%20336.3H202l3.2%2036.3%2050.8%2013.6v47.4l-93.2-26%22%2F%3E%20%20%20%20%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M369.6%20176.3H255.8v45.4h109.6M361.3%20268.2H255.8v45.4h56l-5.3%2059-50.7%2013.6v47.2l93-25.8%22%2F%3E%3C%2Fsvg%3E">
<title>I'm cool!</title>
</head>
<body>
<div id="root"><div style="align-self: center;"><b>ended</b></div></div>
<script src="index.js" type="module"></script>
</body></html>
###########
# CONSOLE #
###########
[info] %cDownload the React DevTools for a better development experience: https://reactjs.org/link/react-devtools font-weight:bold
[log] Bootstrapped, ready to go!
[log] Test my sourcemap: tick
[log] Test my sourcemap: ended
#############
# RESPONSES #
#############
200 http://localhost/index.html
200 http://localhost/index.js
200 http://localhost/app.js
`;

6
test/jsx-web-app/test.js
View File

@@ -15,6 +15,7 @@ import {runBrowserTest} from "../util/browser-test.ts";
import {fileURLToPath} from "node:url";
import handlebars from "handlebars";
import {serializer} from "../util/index.ts";
// import {debugPrintOutput, getCode, runBrowserTest} from "../util/index.ts";
const __dirname = dirname(fileURLToPath(import.meta.url));
process.chdir(join(__dirname, 'fixtures'));
@@ -29,11 +30,15 @@ const defaultAssetInclude = [
jest.setTimeout(30*1000);// Bundling react + typescript is getting heavy
test('web-bundle', async () => {
expect.addSnapshotSerializer(serializer);
const out = await runBrowserTest({
input: 'index.hbs',
treeshake: 'smallest',
plugins: [
html({
include: [
'**/*.(html|hbs)',// html or handlebars
],
transform(src) {
return handlebars.compile(src)({
head: `<title>I'm cool!</title>`
@@ -77,6 +82,7 @@ test('web-bundle', async () => {
entryFileNames: '[name].[extname]',
assetFileNames: '[name].[extname]',
});
delete out.code; // Filter out code output (because this would be a huge snapshot)
expect(out).toMatchSnapshot();
// const code = await getCode(bundle, output);

77
test/live-reload/__snapshots__/test.js.snap
View File

@@ -1,54 +1,31 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`live-reload 1`] = `
[
{
"code": "
(function(l, r) { if (!l || l.getElementById('livereloadscript')) return; r = l.createElement('script'); r.async = 1; r.src = '//' + (self.location.host || 'localhost').split(':')[0] + ':<port>/livereload.js?snipver=1'; r.id = 'livereloadscript'; l.getElementsByTagName('head')[0].appendChild(r) })(self.document);
const test = ()=>{
return \`I'm "annoying" \${"in case we need to test \\\`string\\\` escaping."}. Hence this files \\'tries\\' to include all allowed forms of 'it'\`;
};
console.log(test());
export { test };
//# sourceMappingURL=batman.js.map
",
"fileName": "batman.js",
"map": SourceMap {
"file": "batman.js",
"mappings": ";;AAAY,MAAC,IAAI,GAAG,IAAI;AACxB,IAAI,OAAO,CAAC,eAAe,EAAE,8CAA8C,CAAC,iEAAiE,CAAC,CAAC;AAC/I,EAAC;AACD,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;;;;",
"names": [],
"sources": [
"../batman.js",
],
"sourcesContent": [
"export const test = ()=>{
return \`I'm "annoying" \${"in case we need to test \\\`string\\\` escaping."}. Hence this files \\'tries\\' to include all allowed forms of 'it'\`;
}
console.log(test());
",
],
"version": 3,
},
"source": undefined,
},
{
"code": undefined,
"fileName": "batman.js.map",
"map": undefined,
"source": "{"version":3,"file":"batman.js","sources":["../batman.js"],"sourcesContent":["export const test = ()=>{\\n return \`I'm \\"annoying\\" \${\\"in case we need to test \\\\\`string\\\\\` escaping.\\"}. Hence this files \\\\'tries\\\\' to include all allowed forms of 'it'\`;\\n}\\nconsole.log(test());\\n"],"names":[],"mappings":";;AAAY,MAAC,IAAI,GAAG,IAAI;AACxB,IAAI,OAAO,CAAC,eAAe,EAAE,8CAA8C,CAAC,iEAAiE,CAAC,CAAC;AAC/I,EAAC;AACD,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;;;;"}",
},
{
"code": undefined,
"fileName": "index.html",
"map": undefined,
"source": "<html><head>
</head>
<body>
<script src="batman.js" type="module"></script>
</body></html>",
},
]
##############
# index.html #
##############
<html><head>
</head>
<body>
<script src="batman.js" type="module"></script>
</body></html>
#############
# batman.js #
#############
(function(l, r) { if (!l || l.getElementById('livereloadscript')) return; r = l.createElement('script'); r.async = 1; r.src = '//' + (self.location.host || 'localhost').split(':')[0] + ':<port>/livereload.js?snipver=1'; r.id = 'livereloadscript'; l.getElementsByTagName('head')[0].appendChild(r) })(self.document);
const test = ()=>{
return \`I'm "annoying" \${"in case we need to test \\\`string\\\` escaping."}. Hence this files \\'tries\\' to include all allowed forms of 'it'\`;
};
console.log(test());
export { test };
//# sourceMappingURL=batman.js.map
#################
# batman.js.map #
#################
{"version":3,"file":"batman.js","sources":["../batman.js"],"sourcesContent":["export const test = ()=>{\\n return \`I'm \\"annoying\\" \${\\"in case we need to test \\\\\`string\\\\\` escaping.\\"}. Hence this files \\\\'tries\\\\' to include all allowed forms of 'it'\`;\\n}\\nconsole.log(test());\\n"],"names":[],"mappings":";;AAAY,MAAC,IAAI,GAAG,IAAI;AACxB,IAAI,OAAO,CAAC,eAAe,EAAE,8CAA8C,CAAC,iEAAiE,CAAC,CAAC;AAC/I,EAAC;AACD,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;;;;"}
`;

5
test/live-reload/test.js
View File

@@ -3,7 +3,7 @@ import {test, expect} from "@jest/globals";
import {rollup} from "rollup";
import liveReload from "rollup-plugin-livereload";
import {debugPrintOutput, getCode} from "../util/index.ts";
import {debugPrintOutput, getCode, serializer} from "../util/index.ts";
import html from "../../src/index.ts";
@@ -13,6 +13,7 @@ process.chdir(join(__dirname, 'fixtures'));
test('live-reload', async () => {
expect.addSnapshotSerializer(serializer);
const bundle = await rollup({
input: 'index.html',
plugins: [
@@ -32,7 +33,7 @@ test('live-reload', async () => {
file.code = file.code.replaceAll(portRE,":<port>/livereload.js"); // remove any references to a port
}
}
expect(code).toMatchSnapshot();
expect({code}).toMatchSnapshot();
});
// TODO various parameters

194
test/multi-entry/__snapshots__/test.js.snap
View File

@@ -1,125 +1,77 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`multi-entry 1`] = `
[
{
"code": "const b = ()=>'batman';
console.log(b());
export { b };
//# sourceMappingURL=batman.js.map
",
"fileName": "admin/batman.js",
"map": SourceMap {
"file": "batman.js",
"mappings": "AAAY,MAAC,CAAC,GAAG,IAAI,SAAS;AAC9B,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;;;;",
"names": [],
"sources": [
"../../admin/batman.js",
],
"sourcesContent": [
"export const b = ()=>'batman';
console.log(b());
",
],
"version": 3,
},
"source": undefined,
},
{
"code": undefined,
"fileName": "admin/batman.js.map",
"map": undefined,
"source": "{"version":3,"file":"batman.js","sources":["../../admin/batman.js"],"sourcesContent":["export const b = ()=>'batman';\\nconsole.log(b());\\n"],"names":[],"mappings":"AAAY,MAAC,CAAC,GAAG,IAAI,SAAS;AAC9B,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;;;;"}",
},
{
"code": undefined,
"fileName": "admin/index.body.script0.js.js.map",
"map": undefined,
"source": "{"version":3,"file":"index.body.script0.js.js","sources":["../../app/admin-deps.js","../../admin/index.html.body.script0.js"],"sourcesContent":["export function adminDeps(){\\n return \\"robin!\\";\\n}\\n","\\n import {bootstrap} from \\"../app/app.js\\"\\n import {adminDeps} from \\"../app/admin-deps.js\\";\\n bootstrap(document.getElementById('root'), adminDeps());\\n "],"names":[],"mappings":";;AAAO,SAAS,SAAS,EAAE;AAC3B,IAAI,OAAO,QAAQ,CAAC;AACpB;;ACCY,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC"}",
},
{
"code": undefined,
"fileName": "admin/index.html",
"map": undefined,
"source": "<html><head>
</head>
<body>
<div id="root"></div>
<script type="module">import { b as bootstrap } from '../app.js';
function adminDeps(){
return "robin!";
}
bootstrap(document.getElementById('root'), adminDeps());
//# sourceMappingURL=index.body.script0.js.js.map
</script>
<script src="batman.js" type="module"></script>
</body></html>",
},
{
"code": "const bootstrap = (el,deps = [])=>{
el.innerHtml = \`
<div>I'm "annoying" \${"in case we need to test \\\`string\\\` escaping."}. Hence this file \\'tries\\' to include all allowed forms of 'it'</div>
<div>Deps: \${deps}</div>
\`;
};
export { bootstrap as b };
//# sourceMappingURL=app.js.map
",
"fileName": "app.js",
"map": SourceMap {
"file": "app.js",
"mappings": "AAAY,MAAC,SAAS,GAAG,CAAC,EAAE,CAAC,IAAI,GAAG,EAAE,GAAG;AACzC,IAAI,EAAE,CAAC,SAAS,GAAG,CAAC;AACpB,4BAA4B,EAAE,8CAA8C,CAAC;AAC7E,mBAAmB,EAAE,IAAI,CAAC;AAC1B,IAAI,CAAC,CAAC;AACN;;;;",
"names": [],
"sources": [
"../app/app.js",
],
"sourcesContent": [
"export const bootstrap = (el,deps = [])=>{
el.innerHtml = \`
<div>I'm "annoying" \${"in case we need to test \\\`string\\\` escaping."}. Hence this file \\'tries\\' to include all allowed forms of 'it'</div>
<div>Deps: \${deps}</div>
\`;
}
",
],
"version": 3,
},
"source": undefined,
},
{
"code": undefined,
"fileName": "app.js.map",
"map": undefined,
"source": "{"version":3,"file":"app.js","sources":["../app/app.js"],"sourcesContent":["export const bootstrap = (el,deps = [])=>{\\n el.innerHtml = \`\\n <div>I'm \\"annoying\\" \${\\"in case we need to test \\\\\`string\\\\\` escaping.\\"}. Hence this file \\\\'tries\\\\' to include all allowed forms of 'it'</div>\\n <div>Deps: \${deps}</div>\\n \`;\\n}\\n"],"names":[],"mappings":"AAAY,MAAC,SAAS,GAAG,CAAC,EAAE,CAAC,IAAI,GAAG,EAAE,GAAG;AACzC,IAAI,EAAE,CAAC,SAAS,GAAG,CAAC;AACpB,4BAA4B,EAAE,8CAA8C,CAAC;AAC7E,mBAAmB,EAAE,IAAI,CAAC;AAC1B,IAAI,CAAC,CAAC;AACN;;;;"}",
},
{
"code": undefined,
"fileName": "index.body.script.js.js.map",
"map": undefined,
"source": "{"version":3,"file":"index.body.script.js.js","sources":["../index.html.body.script.js"],"sourcesContent":["\\n import {bootstrap} from \\"./app/app.js\\"\\n bootstrap(document.getElementById('root'), \\"<none>\\");\\n "],"names":[],"mappings":";;AAEY,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,QAAQ,CAAC"}",
},
{
"code": undefined,
"fileName": "index.html",
"map": undefined,
"source": "<html><head>
</head>
<body>
<div id="root"></div>
<script type="module">import { b as bootstrap } from './app.js';
bootstrap(document.getElementById('root'), "<none>");
//# sourceMappingURL=index.body.script.js.js.map
</script>
</body></html>",
},
]
####################
# admin/index.html #
####################
<html><head>
</head>
<body>
<div id="root"></div>
<script type="module">import { b as bootstrap } from '../app.js';
function adminDeps(){
return "robin!";
}
bootstrap(document.getElementById('root'), adminDeps());
//# sourceMappingURL=index.body.script0.js.js.map
</script>
<script src="batman.js" type="module"></script>
</body></html>
##############
# index.html #
##############
<html><head>
</head>
<body>
<div id="root"></div>
<script type="module">import { b as bootstrap } from './app.js';
bootstrap(document.getElementById('root'), "<none>");
//# sourceMappingURL=index.body.script.js.js.map
</script>
</body></html>
###################
# admin/batman.js #
###################
const b = ()=>'batman';
console.log(b());
export { b };
//# sourceMappingURL=batman.js.map
#######################
# admin/batman.js.map #
#######################
{"version":3,"file":"batman.js","sources":["../../admin/batman.js"],"sourcesContent":["export const b = ()=>'batman';\\nconsole.log(b());\\n"],"names":[],"mappings":"AAAY,MAAC,CAAC,GAAG,IAAI,SAAS;AAC9B,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;;;;"}
######################################
# admin/index.body.script0.js.js.map #
######################################
{"version":3,"file":"index.body.script0.js.js","sources":["../../app/admin-deps.js","../../admin/index.html.body.script0.js"],"sourcesContent":["export function adminDeps(){\\n return \\"robin!\\";\\n}\\n","\\n import {bootstrap} from \\"../app/app.js\\"\\n import {adminDeps} from \\"../app/admin-deps.js\\";\\n bootstrap(document.getElementById('root'), adminDeps());\\n "],"names":[],"mappings":";;AAAO,SAAS,SAAS,EAAE;AAC3B,IAAI,OAAO,QAAQ,CAAC;AACpB;;ACCY,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC"}
##########
# app.js #
##########
const bootstrap = (el,deps = [])=>{
el.innerHtml = \`
<div>I'm "annoying" \${"in case we need to test \\\`string\\\` escaping."}. Hence this file \\'tries\\' to include all allowed forms of 'it'</div>
<div>Deps: \${deps}</div>
\`;
};
export { bootstrap as b };
//# sourceMappingURL=app.js.map
##############
# app.js.map #
##############
{"version":3,"file":"app.js","sources":["../app/app.js"],"sourcesContent":["export const bootstrap = (el,deps = [])=>{\\n el.innerHtml = \`\\n <div>I'm \\"annoying\\" \${\\"in case we need to test \\\\\`string\\\\\` escaping.\\"}. Hence this file \\\\'tries\\\\' to include all allowed forms of 'it'</div>\\n <div>Deps: \${deps}</div>\\n \`;\\n}\\n"],"names":[],"mappings":"AAAY,MAAC,SAAS,GAAG,CAAC,EAAE,CAAC,IAAI,GAAG,EAAE,GAAG;AACzC,IAAI,EAAE,CAAC,SAAS,GAAG,CAAC;AACpB,4BAA4B,EAAE,8CAA8C,CAAC;AAC7E,mBAAmB,EAAE,IAAI,CAAC;AAC1B,IAAI,CAAC,CAAC;AACN;;;;"}
###############################
# index.body.script.js.js.map #
###############################
{"version":3,"file":"index.body.script.js.js","sources":["../index.html.body.script.js"],"sourcesContent":["\\n import {bootstrap} from \\"./app/app.js\\"\\n bootstrap(document.getElementById('root'), \\"<none>\\");\\n "],"names":[],"mappings":";;AAEY,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,QAAQ,CAAC"}
`;

5
test/multi-entry/test.js
View File

@@ -2,7 +2,7 @@ import {resolve, join, dirname} from "node:path";
import {test, expect} from "@jest/globals";
import { rollup } from "rollup";
import {debugPrintOutput, getCode} from "../util/index.ts";
import {debugPrintOutput, getCode, serializer} from "../util/index.ts";
import html from "../../src/index.ts";
@@ -12,6 +12,7 @@ process.chdir(join(__dirname, 'fixtures'));
test('multi-entry', async () => {
expect.addSnapshotSerializer(serializer);
const bundle = await rollup({
input: {
['index']: 'index.html',
@@ -24,7 +25,7 @@ test('multi-entry', async () => {
});
const code = await getCode(bundle);
debugPrintOutput('multi-entry',code);
expect(code).toMatchSnapshot();
expect({code}).toMatchSnapshot();
});
// TODO various parameters

58
test/rewrite-url/__snapshots__/test.js.snap
View File

@@ -1,3 +1,59 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`rewrite-url 1`] = `undefined`;
exports[`rewrite-url 1`] = `
####################
# admin/index.html #
####################
<html><head>
</head>
<body>
<div id="root"></div>
<script src="/admin/app.js" type="module"></script>
</body></html>
##############
# index.html #
##############
<html><head>
</head>
<body>
<div id="root"></div>
<script src="/admin/app.js" type="module"></script>
</body></html>
################
# admin/app.js #
################
const bootstrap = (el,deps = [])=>{
el.innerHtml = \`
<div>load the app</div>
\`;
};
export { bootstrap };
//# sourceMappingURL=app.js.map
####################
# admin/app.js.map #
####################
{"version":3,"file":"app.js","sources":["../../admin/app.js"],"sourcesContent":["export const bootstrap = (el,deps = [])=>{\\n el.innerHtml = \`\\n <div>load the app</div>\\n \`;\\n}\\n"],"names":[],"mappings":"AAAY,MAAC,SAAS,GAAG,CAAC,EAAE,CAAC,IAAI,GAAG,EAAE,GAAG;AACzC,IAAI,EAAE,CAAC,SAAS,GAAG,CAAC;AACpB;AACA,IAAI,CAAC,CAAC;AACN;;;;"}
#################
# RENDERED HTML #
#################
<html><head>
</head>
<body>
<div id="root"></div>
<script src="/admin/app.js" type="module"></script>
</body></html>
#############
# RESPONSES #
#############
200 http://localhost/admin
200 http://localhost/admin/app.js
200 http://localhost/favicon.ico
`;

5
test/rewrite-url/test.js
View File

@@ -1,7 +1,7 @@
import {resolve, join, dirname} from "node:path";
import {test, expect} from "@jest/globals";
import {runBrowserTest} from "../util/index.ts";
import {runBrowserTest, serializer} from "../util/index.ts";
import html from "../../src/index.ts";
@@ -11,6 +11,7 @@ process.chdir(join(__dirname, 'fixtures'));
test('rewrite-url', async () => {
expect.addSnapshotSerializer(serializer);
const out = await runBrowserTest({
input: {
['index']: 'index.html',
@@ -34,7 +35,7 @@ test('rewrite-url', async () => {
format: 'es', // iifi and cjs should be added to tests
sourcemap: true,// Test if #sourcemapUrl is not accidentally included in the html-output
});
expect(out.code).toMatchSnapshot(); // Snapshot the result code
expect(out).toMatchSnapshot(); // Snapshot the result code
// const bundle = await rollup({
// input: {

69
test/templating/__snapshots__/test.js.snap
View File

@@ -1,49 +1,28 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`handlebars 1`] = `
[
{
"code": "const b = ()=>'batman';
console.log(b());
export { b };
//# sourceMappingURL=batman.js.map
",
"fileName": "batman.js",
"map": SourceMap {
"file": "batman.js",
"mappings": "AAAY,MAAC,CAAC,GAAG,IAAI,SAAS;AAC9B,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;;;;",
"names": [],
"sources": [
"../batman.js",
],
"sourcesContent": [
"export const b = ()=>'batman';
console.log(b());
",
],
"version": 3,
},
"source": undefined,
},
{
"code": undefined,
"fileName": "batman.js.map",
"map": undefined,
"source": "{"version":3,"file":"batman.js","sources":["../batman.js"],"sourcesContent":["export const b = ()=>'batman';\\nconsole.log(b());\\n"],"names":[],"mappings":"AAAY,MAAC,CAAC,GAAG,IAAI,SAAS;AAC9B,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;;;;"}",
},
{
"code": undefined,
"fileName": "index.html",
"map": undefined,
"source": "<html><head>
<meta data-test="a">
</head>
<body>
<script src="batman.js" type="module"></script>
</body></html>",
},
]
##############
# index.html #
##############
<html><head>
<meta data-test="a">
</head>
<body>
<script src="batman.js" type="module"></script>
</body></html>
#############
# batman.js #
#############
const b = ()=>'batman';
console.log(b());
export { b };
//# sourceMappingURL=batman.js.map
#################
# batman.js.map #
#################
{"version":3,"file":"batman.js","sources":["../batman.js"],"sourcesContent":["export const b = ()=>'batman';\\nconsole.log(b());\\n"],"names":[],"mappings":"AAAY,MAAC,CAAC,GAAG,IAAI,SAAS;AAC9B,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;;;;"}
`;

8
test/templating/test.js
View File

@@ -3,7 +3,7 @@ import {test, expect} from "@jest/globals";
import { rollup } from "rollup";
import {debugPrintOutput, getCode} from "../util/index.ts";
import {debugPrintOutput, getCode, serializer} from "../util/index.ts";
import html from "../../src/index.ts";
import handlebars from "handlebars";
@@ -13,10 +13,14 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
process.chdir(join(__dirname, 'fixtures'));
test('handlebars', async () => {
expect.addSnapshotSerializer(serializer);
const bundle = await rollup({
input: 'index.hbs',
plugins: [
html({
include: [
'**/*.(html|hbs)',// html or handlebars
],
transform(src){
return handlebars.compile(src)({a:'a'})
}
@@ -25,7 +29,7 @@ test('handlebars', async () => {
});
const code = await getCode(bundle);
debugPrintOutput('handlebars',code);
expect(code).toMatchSnapshot();
expect({code}).toMatchSnapshot();
});

138
test/url-plugin/__snapshots__/test.js.snap
View File

@@ -1,97 +1,55 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`url-plugin copied-assets 1`] = `
[
{
"code": "const b = ()=>'batman';
console.log(b());
export { b };
//# sourceMappingURL=batman.js.map
",
"fileName": "batman.js",
"map": SourceMap {
"file": "batman.js",
"mappings": "AAAY,MAAC,CAAC,GAAG,IAAI,SAAS;AAC9B,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;;;;",
"names": [],
"sources": [
"../batman.js",
],
"sourcesContent": [
"export const b = ()=>'batman';
console.log(b());
",
],
"version": 3,
},
"source": undefined,
},
{
"code": undefined,
"fileName": "batman.js.map",
"map": undefined,
"source": "{"version":3,"file":"batman.js","sources":["../batman.js"],"sourcesContent":["export const b = ()=>'batman';\\nconsole.log(b());\\n"],"names":[],"mappings":"AAAY,MAAC,CAAC,GAAG,IAAI,SAAS;AAC9B,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;;;;"}",
},
{
"code": undefined,
"fileName": "index.html",
"map": undefined,
"source": "<html><head>
<link rel="icon" href="fb585fdb6db313c9.svg">
</head>
<body>
<script src="batman.js" type="module"></script>
</body></html>",
},
]
##############
# index.html #
##############
<html><head>
<link rel="icon" href="fb585fdb6db313c9.svg">
</head>
<body>
<script src="batman.js" type="module"></script>
</body></html>
#############
# batman.js #
#############
const b = ()=>'batman';
console.log(b());
export { b };
//# sourceMappingURL=batman.js.map
#################
# batman.js.map #
#################
{"version":3,"file":"batman.js","sources":["../batman.js"],"sourcesContent":["export const b = ()=>'batman';\\nconsole.log(b());\\n"],"names":[],"mappings":"AAAY,MAAC,CAAC,GAAG,IAAI,SAAS;AAC9B,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;;;;"}
`;
exports[`url-plugin inlined-assets 1`] = `
[
{
"code": "const b = ()=>'batman';
console.log(b());
export { b };
//# sourceMappingURL=batman.js.map
",
"fileName": "batman.js",
"map": SourceMap {
"file": "batman.js",
"mappings": "AAAY,MAAC,CAAC,GAAG,IAAI,SAAS;AAC9B,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;;;;",
"names": [],
"sources": [
"../batman.js",
],
"sourcesContent": [
"export const b = ()=>'batman';
console.log(b());
",
],
"version": 3,
},
"source": undefined,
},
{
"code": undefined,
"fileName": "batman.js.map",
"map": undefined,
"source": "{"version":3,"file":"batman.js","sources":["../batman.js"],"sourcesContent":["export const b = ()=>'batman';\\nconsole.log(b());\\n"],"names":[],"mappings":"AAAY,MAAC,CAAC,GAAG,IAAI,SAAS;AAC9B,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;;;;"}",
},
{
"code": undefined,
"fileName": "index.html",
"map": undefined,
"source": "<html><head>
<link rel="icon" href="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%20%3Cpath%20style%3D%22fill%3Anone%3Bstroke%3A%2300ff0d%3Bstroke-width%3A5%3Bstroke-linecap%3Asquare%3Bstroke-linejoin%3Amiter%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%20d%3D%22M4.1%2014.72%2016%2026.31%2028.38%205.09%22%2F%3E%3C%2Fsvg%3E">
</head>
<body>
<script src="batman.js" type="module"></script>
</body></html>",
},
]
##############
# index.html #
##############
<html><head>
<link rel="icon" href="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%20%3Cpath%20style%3D%22fill%3Anone%3Bstroke%3A%2300ff0d%3Bstroke-width%3A5%3Bstroke-linecap%3Asquare%3Bstroke-linejoin%3Amiter%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%20d%3D%22M4.1%2014.72%2016%2026.31%2028.38%205.09%22%2F%3E%3C%2Fsvg%3E">
</head>
<body>
<script src="batman.js" type="module"></script>
</body></html>
#############
# batman.js #
#############
const b = ()=>'batman';
console.log(b());
export { b };
//# sourceMappingURL=batman.js.map
#################
# batman.js.map #
#################
{"version":3,"file":"batman.js","sources":["../batman.js"],"sourcesContent":["export const b = ()=>'batman';\\nconsole.log(b());\\n"],"names":[],"mappings":"AAAY,MAAC,CAAC,GAAG,IAAI,SAAS;AAC9B,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;;;;"}
`;

7
test/url-plugin/test.js
View File

@@ -4,7 +4,7 @@ import {test, expect} from "@jest/globals";
import { rollup } from "rollup";
import urlPlugin from "@rollup/plugin-url";
import {debugPrintOutput, getCode} from "../util/index.ts";
import {debugPrintOutput, getCode, serializer} from "../util/index.ts";
import html from "../../src/index.ts";
@@ -21,6 +21,7 @@ const defaultAssetInclude = [
];
describe("url-plugin", ()=>{
expect.addSnapshotSerializer(serializer);
test('copied-assets', async () => {
const bundle = await rollup({
input: 'index.html',
@@ -35,7 +36,7 @@ describe("url-plugin", ()=>{
});
const code = await getCode(bundle);
debugPrintOutput('copied-assets',code);
expect(code).toMatchSnapshot();
expect({code}).toMatchSnapshot();
});
@@ -53,7 +54,7 @@ describe("url-plugin", ()=>{
});
const code = await getCode(bundle);
debugPrintOutput('inlined-assets',code);
expect(code).toMatchSnapshot();
expect({code}).toMatchSnapshot();
});
})

2
test/util/browser-test.ts
View File

@@ -49,7 +49,7 @@ export async function runBrowserTest(
...test,
log: test.log ?? console.log,
onResult: (output)=>{
testOutput = {...testOutput, ...output};
Object.assign(testOutput, output);
}
})]: [])
]

2
test/util/index.ts
View File

@@ -1,5 +1,7 @@
// TODO: this should be the main module used, other should be imported manually if exceptions are needed?
export * from "./browser-test.ts";
export {defaultOutput} from "./default-output.ts";
export {serializer} from "./test-serializer.ts";
export * from "./code-output.ts";
export * from "./print-code-output.ts";

13
test/util/serve-test.ts
View File

@@ -133,6 +133,10 @@ export default function serveTest (options: RollupServeTestOptions ): Plugin {
let server : Server;
let bundle : OutputBundle = {};
const closeServer = async ()=>new Promise((resolve, reject)=>{
server.close((err)=>err?reject(err):resolve(undefined));
server = null as unknown as Server; // unset
});
const logTest = (msg: string, mode: 'info'|'warn' = 'info')=>{
if(isInDebugMode()){
@@ -217,9 +221,9 @@ export default function serveTest (options: RollupServeTestOptions ): Plugin {
function closeServerOnTermination () {
const terminationSignals = ['SIGINT', 'SIGTERM', 'SIGQUIT', 'SIGHUP']
terminationSignals.forEach(signal => {
process.on(signal, () => {
process.on(signal, async () => {
if (server) {
server.close()
await closeServer();
process.exit()
}
})
@@ -229,7 +233,7 @@ export default function serveTest (options: RollupServeTestOptions ): Plugin {
// release previous server instance if rollup is reloading configuration in watch mode
// @ts-ignore
if (server) {
server.close()
closeServer()
} else {
closeServerOnTermination()
}
@@ -279,8 +283,9 @@ export default function serveTest (options: RollupServeTestOptions ): Plugin {
}
}
},
closeBundle (){
async closeBundle(){
// Done with the bundle
await closeServer();
}
}
}

79
test/util/test-serializer.ts Normal file
View File

@@ -0,0 +1,79 @@
import type {runBrowserTest} from "./browser-test.ts";
import type {expect} from "@jest/globals";
import chalk from "chalk";
type TestOutput = Awaited<ReturnType<typeof runBrowserTest>>;
type Serializer = Parameters<typeof expect.addSnapshotSerializer>[0];
function headerFor(name: string): string[]{
const hr = name.split('').map(()=>`#`).join('')
return [
`##${hr}##`,
`# ${name} #`,
`##${hr}##`,
];
}
export const serializer: Serializer = {
test: (val: TestOutput)=> !!(
(val?.code && Array.isArray(val?.code))
|| (val?.html && typeof(val?.html)==='string')
),
serialize(val: TestOutput,
config,
indentation,
depth,
refs,
printer): string{
const indent = (config.indent||'')+(indentation+'');
let linesOut: string[] = [];
if(val.code){
const fileLines: string[][] = val.code.slice().sort(((a,b)=>{
const sortPropsA = [!a.fileName.endsWith('html'), a.fileName];
const sortPropsB = [!b.fileName.endsWith('html'), b.fileName];
for(let i = 0; i< 2;++i){
if(sortPropsA[i]<sortPropsB[i]) return -1;
else if(sortPropsA[i]>sortPropsB[i]) return 1;
}
return 0;
})).map(({fileName, code, source})=>{
return [
...headerFor(fileName),
...((code||source).split('\n'))
]
});
linesOut = linesOut.concat(...fileLines);
}
if(val.html){
linesOut = linesOut.concat([
...headerFor("RENDERED HTML"),
...(val.html.split('\n')),
]);
}
if(val.errors?.length){
linesOut = linesOut.concat([
...headerFor("ERRORS"),
], ...val.errors.map(x=>x.split("\n")));
}
if(val.console?.length){
linesOut = linesOut.concat([
...headerFor("CONSOLE"),
], ...val.console.map(x=>x.split("\n")));
}
if(val.requestsFailed?.length){
linesOut = linesOut.concat([
...headerFor("FAILED REQUESTS"),
], ...val.requestsFailed.map(x=>x.split("\n")));
}
if(val.responses?.length){
linesOut = linesOut.concat([
...headerFor("RESPONSES"),
], ...val.responses.map(x=>x.split("\n")));
}
return linesOut.map(x=>`${indent}${x}`).join('\n');
},
}