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

test: added a react application test (in the browser)

Browse Source
This commit is contained in:
Miel Truyen
2024-01-07 00:23:20 +01:00
parent e96c2248ee
commit 3e46055845
22 changed files with 1669 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/index.ts
View File

@@ -77,25 +77,25 @@ export default function html(opts: RollupHtmlOptions = {}): Plugin {
let filter = createFilter(include, exclude, {});
// TODO, we need to clear all these properly at sme point to avoid odd bugs in watch mode
// let htmlModules = new Map<string, HtmlModule>();// todo clean this per new build?
let virtualSources = new Map<string, string>();
let addedEntries = new Map<string, string>();
let entryNames = new Map<string,string>();
const pluginName = 'html2'; // TODO: Need a better name
const pluginName = 'html2'; // TODO: Need a better name, and work to strip everything noted below except the short summary
/**
* Short summary:
* Intercepts the loading of the html files and parses it with parse5.
* The parsed result is iterated to check for external references that need to be including in the rollup build (via for example @rollup/plugin-url).
* To satisfy rollup a JS version of the html file is returned, optionally including a few imports left for rollup to resolve
* A .js version of the html file is returned to rollup, optionally including a few imports left for rollup to resolve
* When the result is generated the rollup result for the html file and any of its inlined assets are stripped from the output.
* and replaced with the html file.
* and replaced with a html file.
*
* Caveats:
* - to get the resulting html content file we're parsing the evaluating the result JS module and take its default export
* - to get the resulting html content file we're evaluating the resulting JS module and take its default export
* This evaluation step is done in the host NodeJS context, which might screw up things that expect a browser context
* [warn] other plugins such as CJS transformer and hot-reload can severely screw this up.
* - sourcemaps won't work yet (to add support we'd need to rewrite using magic-string?)
* - to fix the naming of resulting html files, and behave properly when files are entryPoints or not... we're fighting rollup alot
* issues are likely...
*
*
* Rework by testing a stripped down version with JS imports?
@@ -182,6 +182,10 @@ export default function html(opts: RollupHtmlOptions = {}): Plugin {
// Parse document and store it
const document = htmlModule.document = parseHtml(htmlSrc);
// TODO working on this: to preserve sourcemaps as much as possible we're starting the magic string on the raw html source
// question is if we need to though. sourcemaps only make sense for inlined bits of code
//let htmlJS = new MagicString(htmlSrc);// This is where we want to go!
// Figure out which references to load from this HTML by iterating all nodes (looking for src or href attributes)
let htmlImports: HtmlImport[] = htmlModule.imports = [];
if (document.childNodes) {
@@ -261,8 +265,9 @@ export default function html(opts: RollupHtmlOptions = {}): Plugin {
} while (nodeQueue.length > 0);
}
let htmlJS = new MagicString(serializeHtml(htmlModule.document));// TODO this is still a leak of AST, we're taking parse5 edited result and then transforming sourcemaps, this will only work when no edits were made
let htmlJS = new MagicString(serializeHtml(htmlModule.document));
htmlJS.replaceAll(/`/g,'\\\`').replaceAll(/\$\{/g,'\\${');
const moduleImports = [];
for(const htmlImport of htmlImports){
if(htmlImport.type === 'default') {
@@ -275,6 +280,7 @@ export default function html(opts: RollupHtmlOptions = {}): Plugin {
}
}
// Import all dependencies and wrap the HTML in a `...`, assign to a var and export (escaping any ` characters in the HTML)
htmlJS.prepend([
...moduleImports,
`export const html = \``