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

feat: initial support for importing html from js

Browse Source
This commit is contained in:
Miel Truyen
2023-11-26 22:15:40 +01:00
parent afd4a3c9ae
commit 71a377417d
18 changed files with 332 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
test/js-import/fixtures/batman.js Normal file
View File

@@ -0,0 +1,2 @@
export const b = ()=>'batman';
console.log(b());

3
test/js-import/fixtures/icon.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path style="fill:none;stroke:#00ff0d;stroke-width:5;stroke-linecap:square;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1" d="M4.1 14.72 16 26.31 28.38 5.09"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 244 B

9
test/js-import/fixtures/index.html Normal file
View File

@@ -0,0 +1,9 @@
<html>
<head>
<link rel="icon" href="./icon.svg">
<!-- <link rel="stylesheet" href="./joker.css">-->
</head>
<body>
<!--<script src="./batman.js" type="module"></script>-->
</body>
</html>

5
test/js-import/fixtures/index.js Normal file
View File

@@ -0,0 +1,5 @@
import html from "./index.html"
export function render(){
return html;
}

1
test/js-import/fixtures/joker.css Normal file
View File

@@ -0,0 +1 @@
* { width: 100%; }

71
test/js-import/snapshots/test.js.md Normal file
View File

@@ -0,0 +1,71 @@
# Snapshot report for `test/js-import/test.js`
The actual snapshot is saved in `test.js.snap`.
Generated by [AVA](https://avajs.dev).
## js-import
> Snapshot 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}">␊
<!-- <link rel="stylesheet" href="./joker.css">-->␊
</head>␊
<body>␊
<!--<script src="./batman.js" type="module"></script>-->␊
␊
␊
</body></html>\`;␊
␊
function render(){␊
return html;␊
}␊
␊
export { render };␊
//# sourceMappingURL=index-f75fa1e5.js.map␊
`,
fileName: 'index-f75fa1e5.js',
map: SourceMap {
file: 'index-f75fa1e5.js',
mappings: 'AAAA,aAAe;;ACAf,MAAA,IAAA,GAAA,CAAA;AACA,+BAA+B,EAAwD,MAAA,CAAA;AACvF;AACA;AACA;AACA;AACA;AACA;AACA,cAAa,CAAA;;ACNN,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">␊
<!-- <link rel="stylesheet" href="./joker.css">-->␊
</head>␊
<body>␊
<!--<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-f75fa1e5.js.map',
map: undefined,
source: '{"version":3,"file":"index-f75fa1e5.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<!-- <link rel=\\"stylesheet\\" href=\\"./joker.css\\">-->\\n </head>\\n <body>\\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,cAAa,CAAA;;ACNN,SAAS,MAAM,EAAE;AACxB,IAAI,OAAO,IAAI,CAAC;AAChB;;;;"}',
},
]

BIN
test/js-import/snapshots/test.js.snap Normal file
View File

Binary file not shown.

51
test/js-import/test.js Normal file
View File

@@ -0,0 +1,51 @@
import {join, dirname} from "node:path";
import test from "ava";
import { rollup } from "rollup";
import {debugPrintOutput, getCode} from "../util/test.js";
import html from "../../src/index.ts";
import handlebars from "handlebars";
const output = {
dir: 'output', // Output all files
format: 'es', // iifi and cjs should be added to tests
sourcemap: true,// Test if #sourcemapUrl is not accidentally included in the html-output
};
import {fileURLToPath} from "node:url";
import urlPlugin from "@rollup/plugin-url";
const __dirname = dirname(fileURLToPath(import.meta.url));
process.chdir(join(__dirname, 'fixtures'));
const defaultAssetInclude = [
'**/*.(png|jpg|jpeg|gif|ico|svg)',// images, svg
'**/*.(woff|woff2|eot|ttf|otf)',// fonts
'**/*.(webm|mp4)',// video
];
test.serial('js-import', async (t) => {
const bundle = await rollup({
input: 'index.js',
plugins: [
html({
}),
// Test with assets
urlPlugin({
include: defaultAssetInclude,
limit: Number.MAX_SAFE_INTEGER,// Always inline things
}),
]
});
const code = await getCode(bundle, output, true);
debugPrintOutput('js-import',code);
t.snapshot(code);
});
// TODO various parameters
// - format: cjs, iifi, ...
// - sourcemap: inline, false, (and the various exotic sourcemap options)
// Watch mode tests would be its own dir
// ...