Converted @rollup/html to a standalone package (out of the original monorepo) and made it ESM-native
This commit is contained in:
0
test/fixtures/batman.js
vendored
Normal file
0
test/fixtures/batman.js
vendored
Normal file
1
test/fixtures/joker.css
vendored
Normal file
1
test/fixtures/joker.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
* { width: 100%; }
|
||||
2
test/fixtures/joker.js
vendored
Normal file
2
test/fixtures/joker.js
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
// eslint-disable-next-line
|
||||
import style from './joker.css';
|
||||
2
test/fixtures/robin.js
vendored
Normal file
2
test/fixtures/robin.js
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
// eslint-disable-next-line
|
||||
import * as batman from './batman.js';
|
||||
357
test/snapshots/test.js.md
Normal file
357
test/snapshots/test.js.md
Normal file
@@ -0,0 +1,357 @@
|
||||
# Snapshot report for `test/test.js`
|
||||
|
||||
The actual snapshot is saved in `test.js.snap`.
|
||||
|
||||
Generated by [AVA](https://avajs.dev).
|
||||
|
||||
## default options
|
||||
|
||||
> Snapshot 1
|
||||
|
||||
[
|
||||
{
|
||||
code: `(function (factory) {␊
|
||||
typeof define === 'function' && define.amd ? define(factory) :␊
|
||||
factory();␊
|
||||
})((function () { 'use strict';␊
|
||||
␊
|
||||
␊
|
||||
␊
|
||||
}));␊
|
||||
`,
|
||||
fileName: 'batman.js',
|
||||
map: null,
|
||||
source: undefined,
|
||||
},
|
||||
{
|
||||
code: undefined,
|
||||
fileName: 'index.html',
|
||||
map: undefined,
|
||||
source: `␊
|
||||
<!doctype html>␊
|
||||
<html lang="en">␊
|
||||
<head>␊
|
||||
<meta charset="utf-8">␊
|
||||
<title>Rollup Bundle</title>␊
|
||||
␊
|
||||
</head>␊
|
||||
<body>␊
|
||||
<script src="batman.js"></script>␊
|
||||
</body>␊
|
||||
</html>`,
|
||||
},
|
||||
]
|
||||
|
||||
## options
|
||||
|
||||
> Snapshot 1
|
||||
|
||||
[
|
||||
{
|
||||
code: `(function (factory) {␊
|
||||
typeof define === 'function' && define.amd ? define(factory) :␊
|
||||
factory();␊
|
||||
})((function () { 'use strict';␊
|
||||
␊
|
||||
␊
|
||||
␊
|
||||
}));␊
|
||||
`,
|
||||
fileName: 'batman.js',
|
||||
map: null,
|
||||
source: undefined,
|
||||
},
|
||||
{
|
||||
code: undefined,
|
||||
fileName: 'batman.html',
|
||||
map: undefined,
|
||||
source: `␊
|
||||
<!doctype html>␊
|
||||
<html lang="en">␊
|
||||
<head>␊
|
||||
<meta charset="utf-8">␊
|
||||
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width">␊
|
||||
<title>Batcave</title>␊
|
||||
␊
|
||||
</head>␊
|
||||
<body>␊
|
||||
<script src="batcave/batman.js"></script>␊
|
||||
</body>␊
|
||||
</html>`,
|
||||
},
|
||||
]
|
||||
|
||||
## iife
|
||||
|
||||
> Snapshot 1
|
||||
|
||||
[
|
||||
{
|
||||
code: `(function () {␊
|
||||
'use strict';␊
|
||||
␊
|
||||
␊
|
||||
␊
|
||||
})();␊
|
||||
`,
|
||||
fileName: 'batman.js',
|
||||
map: null,
|
||||
source: undefined,
|
||||
},
|
||||
{
|
||||
code: undefined,
|
||||
fileName: 'index.html',
|
||||
map: undefined,
|
||||
source: `␊
|
||||
<!doctype html>␊
|
||||
<html lang="en">␊
|
||||
<head>␊
|
||||
<meta charset="utf-8">␊
|
||||
<title>Rollup Bundle</title>␊
|
||||
␊
|
||||
</head>␊
|
||||
<body>␊
|
||||
<script src="batman.js"></script>␊
|
||||
</body>␊
|
||||
</html>`,
|
||||
},
|
||||
]
|
||||
|
||||
## esm
|
||||
|
||||
> Snapshot 1
|
||||
|
||||
[
|
||||
{
|
||||
code: `␊
|
||||
`,
|
||||
fileName: 'batman.js',
|
||||
map: null,
|
||||
source: undefined,
|
||||
},
|
||||
{
|
||||
code: undefined,
|
||||
fileName: 'index.html',
|
||||
map: undefined,
|
||||
source: `␊
|
||||
<!doctype html>␊
|
||||
<html lang="en">␊
|
||||
<head>␊
|
||||
<meta charset="utf-8">␊
|
||||
<title>Rollup Bundle</title>␊
|
||||
␊
|
||||
</head>␊
|
||||
<body>␊
|
||||
<script src="batman.js" type="module"></script>␊
|
||||
</body>␊
|
||||
</html>`,
|
||||
},
|
||||
]
|
||||
|
||||
## unsupported output format
|
||||
|
||||
> Snapshot 1
|
||||
|
||||
[
|
||||
{
|
||||
code: `'use strict';␊
|
||||
␊
|
||||
`,
|
||||
fileName: 'batman.js',
|
||||
map: null,
|
||||
source: undefined,
|
||||
},
|
||||
{
|
||||
code: undefined,
|
||||
fileName: 'index.html',
|
||||
map: undefined,
|
||||
source: `␊
|
||||
<!doctype html>␊
|
||||
<html lang="en">␊
|
||||
<head>␊
|
||||
<meta charset="utf-8">␊
|
||||
<title>Rollup Bundle</title>␊
|
||||
␊
|
||||
</head>␊
|
||||
<body>␊
|
||||
<script src="batman.js" type="module"></script>␊
|
||||
</body>␊
|
||||
</html>`,
|
||||
},
|
||||
]
|
||||
|
||||
> Snapshot 2
|
||||
|
||||
[
|
||||
{
|
||||
code: 'EMPTY_BUNDLE',
|
||||
message: 'Generated an empty chunk: "batman".',
|
||||
names: [
|
||||
'batman',
|
||||
],
|
||||
toString: Function {},
|
||||
},
|
||||
{
|
||||
code: 'PLUGIN_WARNING',
|
||||
message: 'plugin-html: The output format \'cjs\' is not directly supported. A custom `template` is probably required. Supported formats include: es, esm, iife, umd',
|
||||
plugin: 'html',
|
||||
toString: Function {},
|
||||
},
|
||||
]
|
||||
|
||||
## css
|
||||
|
||||
> Snapshot 1
|
||||
|
||||
[
|
||||
{
|
||||
code: `(function (factory) {␊
|
||||
typeof define === 'function' && define.amd ? define(factory) :␊
|
||||
factory();␊
|
||||
})((function () { 'use strict';␊
|
||||
␊
|
||||
␊
|
||||
␊
|
||||
}));␊
|
||||
`,
|
||||
fileName: 'joker.js',
|
||||
map: null,
|
||||
source: undefined,
|
||||
},
|
||||
{
|
||||
code: undefined,
|
||||
fileName: 'joker.css',
|
||||
map: undefined,
|
||||
source: Buffer @Uint8Array [
|
||||
2a207b20 77696474 683a2031 3030253b 207d0a
|
||||
],
|
||||
},
|
||||
{
|
||||
code: undefined,
|
||||
fileName: 'index.html',
|
||||
map: undefined,
|
||||
source: `␊
|
||||
<!doctype html>␊
|
||||
<html lang="en">␊
|
||||
<head>␊
|
||||
<meta charset="utf-8">␊
|
||||
<title>Rollup Bundle</title>␊
|
||||
<link href="joker.css" rel="stylesheet">␊
|
||||
</head>␊
|
||||
<body>␊
|
||||
<script src="joker.js" type="module"></script>␊
|
||||
</body>␊
|
||||
</html>`,
|
||||
},
|
||||
]
|
||||
|
||||
## attributes
|
||||
|
||||
> Snapshot 1
|
||||
|
||||
[
|
||||
{
|
||||
code: `(function (factory) {␊
|
||||
typeof define === 'function' && define.amd ? define(factory) :␊
|
||||
factory();␊
|
||||
})((function () { 'use strict';␊
|
||||
␊
|
||||
␊
|
||||
␊
|
||||
}));␊
|
||||
`,
|
||||
fileName: 'joker.js',
|
||||
map: null,
|
||||
source: undefined,
|
||||
},
|
||||
{
|
||||
code: undefined,
|
||||
fileName: 'joker.css',
|
||||
map: undefined,
|
||||
source: Buffer @Uint8Array [
|
||||
2a207b20 77696474 683a2031 3030253b 207d0a
|
||||
],
|
||||
},
|
||||
{
|
||||
code: undefined,
|
||||
fileName: 'index.html',
|
||||
map: undefined,
|
||||
source: `␊
|
||||
<!doctype html>␊
|
||||
<html batsignal="on" lang="bat">␊
|
||||
<head>␊
|
||||
<meta charset="utf-8">␊
|
||||
<title>Rollup Bundle</title>␊
|
||||
<link href="joker.css" rel="stylesheet" data-vilian="joker">␊
|
||||
</head>␊
|
||||
<body>␊
|
||||
<script src="joker.js" defer="true"></script>␊
|
||||
</body>␊
|
||||
</html>`,
|
||||
},
|
||||
]
|
||||
|
||||
## imports
|
||||
|
||||
> Snapshot 1
|
||||
|
||||
[
|
||||
{
|
||||
code: `(function (factory) {␊
|
||||
typeof define === 'function' && define.amd ? define(factory) :␊
|
||||
factory();␊
|
||||
})((function () { 'use strict';␊
|
||||
␊
|
||||
␊
|
||||
␊
|
||||
}));␊
|
||||
`,
|
||||
fileName: 'robin.js',
|
||||
map: null,
|
||||
source: undefined,
|
||||
},
|
||||
{
|
||||
code: undefined,
|
||||
fileName: 'index.html',
|
||||
map: undefined,
|
||||
source: `␊
|
||||
<!doctype html>␊
|
||||
<html lang="en">␊
|
||||
<head>␊
|
||||
<meta charset="utf-8">␊
|
||||
<title>Rollup Bundle</title>␊
|
||||
␊
|
||||
</head>␊
|
||||
<body>␊
|
||||
<script src="robin.js" type="module"></script>␊
|
||||
</body>␊
|
||||
</html>`,
|
||||
},
|
||||
]
|
||||
|
||||
## template
|
||||
|
||||
> Snapshot 1
|
||||
|
||||
[
|
||||
{
|
||||
code: `(function (factory) {␊
|
||||
typeof define === 'function' && define.amd ? define(factory) :␊
|
||||
factory();␊
|
||||
})((function () { 'use strict';␊
|
||||
␊
|
||||
␊
|
||||
␊
|
||||
}));␊
|
||||
`,
|
||||
fileName: 'batman.js',
|
||||
map: null,
|
||||
source: undefined,
|
||||
},
|
||||
{
|
||||
code: undefined,
|
||||
fileName: 'index.html',
|
||||
map: undefined,
|
||||
source: '<html><body><main></main></body></html>',
|
||||
},
|
||||
]
|
||||
BIN
test/snapshots/test.js.snap
Normal file
BIN
test/snapshots/test.js.snap
Normal file
Binary file not shown.
124
test/test.js
Normal file
124
test/test.js
Normal file
@@ -0,0 +1,124 @@
|
||||
import {join, dirname} from "node:path";
|
||||
|
||||
import test from "ava";
|
||||
import { rollup } from "rollup";
|
||||
import css from "rollup-plugin-postcss";
|
||||
|
||||
import { getCode } from "./util/test.js";
|
||||
|
||||
import html from "../src/index.ts";
|
||||
|
||||
// const read = (file = 'index.html') => readFileSync(join('output/', file), 'utf-8');
|
||||
|
||||
const output = { dir: 'output', format: 'umd' };
|
||||
|
||||
import {fileURLToPath} from "node:url";
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||
process.chdir(join(__dirname, 'fixtures'));
|
||||
|
||||
test.serial('default options', async (t) => {
|
||||
const bundle = await rollup({
|
||||
input: 'batman.js',
|
||||
plugins: [html()]
|
||||
});
|
||||
const code = await getCode(bundle, output, true);
|
||||
t.snapshot(code);
|
||||
});
|
||||
|
||||
test.serial('options', async (t) => {
|
||||
const bundle = await rollup({
|
||||
input: 'batman.js',
|
||||
plugins: [
|
||||
html({
|
||||
fileName: 'batman.html',
|
||||
publicPath: 'batcave/',
|
||||
title: 'Batcave',
|
||||
meta: [
|
||||
{ charset: 'utf-8' },
|
||||
{ name: 'viewport', content: 'minimum-scale=1, initial-scale=1, width=device-width' }
|
||||
]
|
||||
})
|
||||
]
|
||||
});
|
||||
const code = await getCode(bundle, output, true);
|
||||
t.snapshot(code);
|
||||
});
|
||||
|
||||
test.serial('iife', async (t) => {
|
||||
const bundle = await rollup({
|
||||
input: 'batman.js',
|
||||
plugins: [html()]
|
||||
});
|
||||
const code = await getCode(bundle, { dir: 'output', format: 'iife' }, true);
|
||||
t.snapshot(code);
|
||||
});
|
||||
|
||||
test.serial('esm', async (t) => {
|
||||
const bundle = await rollup({
|
||||
input: 'batman.js',
|
||||
plugins: [html()]
|
||||
});
|
||||
const code = await getCode(bundle, { dir: 'output', format: 'es' }, true);
|
||||
t.snapshot(code);
|
||||
});
|
||||
|
||||
test.serial('unsupported output format', async (t) => {
|
||||
const warnings = [];
|
||||
const bundle = await rollup({
|
||||
input: 'batman.js',
|
||||
onwarn: (warning) => warnings.push(warning),
|
||||
plugins: [html()]
|
||||
});
|
||||
const code = await getCode(bundle, { dir: 'output', format: 'cjs' }, true);
|
||||
t.snapshot(code);
|
||||
t.snapshot(warnings);
|
||||
});
|
||||
|
||||
test.serial('css', async (t) => {
|
||||
const bundle = await rollup({
|
||||
input: 'joker.js',
|
||||
plugins: [css({ extract: true }), html()]
|
||||
});
|
||||
const code = await getCode(bundle, output, true);
|
||||
t.snapshot(code);
|
||||
});
|
||||
|
||||
test.serial('attributes', async (t) => {
|
||||
const bundle = await rollup({
|
||||
input: 'joker.js',
|
||||
plugins: [
|
||||
css({ extract: true }),
|
||||
html({
|
||||
attributes: {
|
||||
html: { batsignal: 'on', lang: 'bat' },
|
||||
link: { 'data-vilian': 'joker' },
|
||||
script: { defer: true }
|
||||
}
|
||||
})
|
||||
]
|
||||
});
|
||||
const code = await getCode(bundle, output, true);
|
||||
t.snapshot(code);
|
||||
});
|
||||
|
||||
test.serial('imports', async (t) => {
|
||||
const bundle = await rollup({
|
||||
input: 'robin.js',
|
||||
plugins: [html()]
|
||||
});
|
||||
const code = await getCode(bundle, output, true);
|
||||
t.snapshot(code);
|
||||
});
|
||||
|
||||
test.serial('template', async (t) => {
|
||||
const bundle = await rollup({
|
||||
input: 'batman.js',
|
||||
plugins: [
|
||||
html({
|
||||
template: () => '<html><body><main></main></body></html>'
|
||||
})
|
||||
]
|
||||
});
|
||||
const code = await getCode(bundle, output, true);
|
||||
t.snapshot(code);
|
||||
});
|
||||
45
test/util/test.d.ts
vendored
Normal file
45
test/util/test.d.ts
vendored
Normal file
@@ -0,0 +1,45 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import type { RollupBuild, OutputOptions, OutputChunk, OutputAsset } from 'rollup';
|
||||
import type { Assertions } from 'ava';
|
||||
|
||||
interface GetCode {
|
||||
(bundle: RollupBuild, outputOptions?: OutputOptions | null, allFiles?: false): Promise<string>;
|
||||
(bundle: RollupBuild, outputOptions: OutputOptions | null | undefined, allFiles: true): Promise<
|
||||
Array<{
|
||||
code: OutputChunk['code'] | undefined;
|
||||
fileName: OutputChunk['fileName'] | OutputAsset['fileName'];
|
||||
source: OutputAsset['source'] | undefined;
|
||||
}>
|
||||
>;
|
||||
}
|
||||
|
||||
export const getCode: GetCode;
|
||||
|
||||
export function getFiles(
|
||||
bundle: RollupBuild,
|
||||
outputOptions?: OutputOptions
|
||||
): Promise<
|
||||
{
|
||||
fileName: string;
|
||||
content: any;
|
||||
}[]
|
||||
>;
|
||||
|
||||
export function evaluateBundle(bundle: RollupBuild): Promise<Pick<NodeModule, 'exports'>>;
|
||||
|
||||
export function getImports(bundle: RollupBuild): Promise<string[]>;
|
||||
|
||||
export function getResolvedModules(bundle: RollupBuild): Promise<Record<string, string>>;
|
||||
|
||||
export function onwarn(warning: string | any): void;
|
||||
|
||||
export function testBundle(
|
||||
t: Assertions,
|
||||
bundle: RollupBuild,
|
||||
options: { inject: Record<string, any>; options: Record<string, any> }
|
||||
): Promise<{
|
||||
code: string;
|
||||
error?: any;
|
||||
result?: any;
|
||||
module: Pick<NodeModule, 'exports'>;
|
||||
}>;
|
||||
95
test/util/test.js
Normal file
95
test/util/test.js
Normal file
@@ -0,0 +1,95 @@
|
||||
import path from "node:path";
|
||||
import process from "node:process";
|
||||
|
||||
/**
|
||||
* @param {import('rollup').RollupBuild} bundle
|
||||
* @param {import('rollup').OutputOptions} [outputOptions]
|
||||
*/
|
||||
export const getCode = async (bundle, outputOptions, allFiles = false) => {
|
||||
const { output } = await bundle.generate(outputOptions || { format: 'cjs', exports: 'auto' });
|
||||
|
||||
if (allFiles) {
|
||||
return output.map(({ code, fileName, source, map }) => {
|
||||
return {
|
||||
code,
|
||||
fileName,
|
||||
source,
|
||||
map
|
||||
};
|
||||
});
|
||||
}
|
||||
const [{ code }] = output;
|
||||
return code;
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {import('rollup').RollupBuild} bundle
|
||||
* @param {import('rollup').OutputOptions} [outputOptions]
|
||||
*/
|
||||
export const getFiles = async (bundle, outputOptions) => {
|
||||
if (!outputOptions.dir && !outputOptions.file)
|
||||
throw new Error('You must specify "output.file" or "output.dir" for the build.');
|
||||
|
||||
const { output } = await bundle.generate(outputOptions || { format: 'cjs', exports: 'auto' });
|
||||
|
||||
return output.map(({ code, fileName, source }) => {
|
||||
const absPath = path.resolve(outputOptions.dir || path.dirname(outputOptions.file), fileName);
|
||||
return {
|
||||
fileName: path.relative(process.cwd(), absPath).split(path.sep).join('/'),
|
||||
content: code || source
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
export const getImports = async (bundle) => {
|
||||
if (bundle.imports) {
|
||||
return bundle.imports;
|
||||
}
|
||||
const { output } = await bundle.generate({ format: 'es' });
|
||||
const [{ imports }] = output;
|
||||
return imports;
|
||||
};
|
||||
|
||||
export const getResolvedModules = async (bundle) => {
|
||||
const {
|
||||
output: [{ modules }]
|
||||
} = await bundle.generate({ format: 'es' });
|
||||
return modules;
|
||||
};
|
||||
|
||||
// eslint-disable-next-line no-console
|
||||
export const onwarn = (warning) => console.warn(warning.toString());
|
||||
|
||||
/**
|
||||
* @param {import('ava').Assertions} t
|
||||
* @param {import('rollup').RollupBuild} bundle
|
||||
* @param {object} args
|
||||
*/
|
||||
export const testBundle = async (t, bundle, { inject = {}, options = {} } = {}) => {
|
||||
const { output } = await bundle.generate({ format: 'cjs', exports: 'auto', ...options });
|
||||
const [{ code }] = output;
|
||||
const module = { exports: {} };
|
||||
// as of 1/2/2020 Github Actions + Windows has changed in a way that we must now escape backslashes
|
||||
const cwd = process.cwd().replace(/\\/g, '\\\\');
|
||||
const params = ['module', 'exports', 'require', 't', ...Object.keys(inject)].concat(
|
||||
`process.chdir('${cwd}'); let result;\n\n${code}\n\nreturn result;`
|
||||
);
|
||||
|
||||
// eslint-disable-next-line no-new-func
|
||||
const func = new Function(...params);
|
||||
let error;
|
||||
let result;
|
||||
|
||||
try {
|
||||
result = func(...[module, module.exports, require, t, ...Object.values(inject)]);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
|
||||
return { code, error, module, result };
|
||||
};
|
||||
|
||||
export const evaluateBundle = async (bundle) => {
|
||||
const { module } = await testBundle(null, bundle);
|
||||
return module.exports;
|
||||
};
|
||||
Reference in New Issue
Block a user