Skip to content

Commit

Permalink
refactor: reduce runtime code
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexander-akait
alexander-akait committed Jul 25, 2024
1 parent ccbbadd commit 41f6330
Show file tree
Hide file tree
Showing 7 changed files with 242 additions and 396 deletions.
9 changes: 2 additions & 7 deletions src/runtime/getUrl.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,12 @@
module.exports = (url, options) => {
if (!options) {
// eslint-disable-next-line no-param-reassign
options = {};
}

module.exports = (url, maybeNeedQuotes) => {
if (!url) {
return url;
}

// eslint-disable-next-line no-underscore-dangle, no-param-reassign
url = String(url);

if (options.maybeNeedQuotes && /[\t\n\f\r "'=<>`]/.test(url)) {
if (maybeNeedQuotes && /[\t\n\f\r "'=<>`]/.test(url)) {
return `"${url}"`;
}

Expand Down
22 changes: 6 additions & 16 deletions src/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1261,31 +1261,21 @@ const GET_SOURCE_FROM_IMPORT_NAME = "___HTML_LOADER_GET_SOURCE_FROM_IMPORT___";

export function getModuleCode(html, replacements, loaderContext, options) {
let code = html;
let replacersCode = "";

const { isTemplateLiteralSupported } = options;

let needHelperImport = false;

for (const item of replacements) {
const { importName, replacementName, isValueQuoted, hash } = item;
const getUrlOptions = [].concat(
isValueQuoted ? [] : "maybeNeedQuotes: true",
);
const preparedOptions =
getUrlOptions.length > 0 ? `, { ${getUrlOptions.join(", ")} }` : "";

const needHelperFn = getUrlOptions.length > 0;

if (needHelperFn) {
if (!needHelperImport) {
needHelperImport = true;
}

replacersCode += `var ${replacementName} = ${GET_SOURCE_FROM_IMPORT_NAME}(${importName}${preparedOptions});\n`;
if (!isValueQuoted && !needHelperImport) {
needHelperImport = true;
}

const name = needHelperFn ? replacementName : importName;
const name = !isValueQuoted
? `${GET_SOURCE_FROM_IMPORT_NAME}(${importName}${!isValueQuoted ? ", true" : ""})`
: importName;

code = code.replace(new RegExp(replacementName, "g"), () =>
isTemplateLiteralSupported
Expand All @@ -1299,7 +1289,7 @@ export function getModuleCode(html, replacements, loaderContext, options) {
isTemplateLiteralSupported ? `\${"<" + "${s}"}` : `<" + "${s}`,
);

code = `// Module\n${replacersCode}var code = ${code};\n`;
code = `// Module\nvar code = ${code};\n`;

if (needHelperImport) {
// TODO simplify in the next major release
Expand Down
81 changes: 33 additions & 48 deletions test/__snapshots__/esModule-option.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,6 @@ var ___HTML_LOADER_IMPORT_26___ = new URL("./noscript.png", import.meta.url);
var ___HTML_LOADER_IMPORT_27___ = new URL("./😀abc.png", import.meta.url);
import ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ from "../../src/runtime/getUrl.js";
// Module
var ___HTML_LOADER_REPLACEMENT_1___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, { maybeNeedQuotes: true });
var ___HTML_LOADER_REPLACEMENT_16___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_15___, { maybeNeedQuotes: true });
var ___HTML_LOADER_REPLACEMENT_19___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, { maybeNeedQuotes: true });
var ___HTML_LOADER_REPLACEMENT_20___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, { maybeNeedQuotes: true });
var ___HTML_LOADER_REPLACEMENT_24___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_15___, { maybeNeedQuotes: true });
var code = \`<!doctype html>

<h1>My First Heading</h1>
Expand Down Expand Up @@ -74,7 +69,7 @@ var code = \`<!doctype html>

<img src="\${___HTML_LOADER_IMPORT_0___}">
<img src='\${___HTML_LOADER_IMPORT_0___}'>
<img src=\${___HTML_LOADER_REPLACEMENT_1___}>
<img src=\${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, true)}>
<img src="\${___HTML_LOADER_IMPORT_0___}">
<img src="\${___HTML_LOADER_IMPORT_1___}">
<img src="\${___HTML_LOADER_IMPORT_2___}">
Expand Down Expand Up @@ -275,25 +270,25 @@ or
function test() {}
\${"<" + "/script"}>

<img src=\${___HTML_LOADER_REPLACEMENT_1___} />
<img src=\${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, true)} />
<img src="\${___HTML_LOADER_IMPORT_12___}" />
<img src='\${___HTML_LOADER_IMPORT_12___}' />
<img src=\${___HTML_LOADER_REPLACEMENT_16___} />
<img srcset=\${___HTML_LOADER_REPLACEMENT_1___} />
<img src=\${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_15___, true)} />
<img srcset=\${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, true)} />
<img srcset="\${___HTML_LOADER_IMPORT_12___}" />
<img srcset='\${___HTML_LOADER_IMPORT_12___}' />
<img srcset=\${___HTML_LOADER_REPLACEMENT_16___} />
<img srcset=\${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_15___, true)} />
<img srcset="\${___HTML_LOADER_IMPORT_0___} 480w, \${___HTML_LOADER_IMPORT_12___} 640w, \${___HTML_LOADER_IMPORT_15___} 800w" sizes="(max-width: 600px) 480px, 800px" src="\${___HTML_LOADER_IMPORT_0___}" alt="Elva dressed as a fairy">
<img src = \${___HTML_LOADER_REPLACEMENT_1___} />
<img src = \${___HTML_LOADER_REPLACEMENT_16___} />
<img src = \${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, true)} />
<img src = \${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_15___, true)} />
<img src = "\${___HTML_LOADER_IMPORT_15___}" />
<img src = '\${___HTML_LOADER_IMPORT_15___}' />

<img src="#hash" />
<img src="javascript:void(0)" />
<img src='\${___HTML_LOADER_IMPORT_0___}#hash' />
<img src=\${___HTML_LOADER_REPLACEMENT_19___}#hash />
<img src=\${___HTML_LOADER_REPLACEMENT_20___}# />
<img src=\${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, true)}#hash />
<img src=\${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, true)}# />
<img srcset="\${___HTML_LOADER_IMPORT_0___}#hash" />
<img srcset="\${___HTML_LOADER_IMPORT_0___}#foo 480w, \${___HTML_LOADER_IMPORT_0___}#bar 800w" sizes="(max-width: 600px) 480px, 800px" src="\${___HTML_LOADER_IMPORT_0___}#baz" alt="Elva dressed as a fairy">
<img src="#" alt="test"/>
Expand All @@ -310,14 +305,14 @@ or
<img src=


\${___HTML_LOADER_REPLACEMENT_1___}
\${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, true)}


/>

<img data-srcset="image.png 480w, image.png 800w" sizes="(max-width: 600px) 480px, 800px" data-src="image.png" alt="Elva dressed as a fairy">

<img src=\${___HTML_LOADER_REPLACEMENT_24___}#hash />
<img src=\${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_15___, true)}#hash />

<svg width="200" height="200">
<image xlink:href="\${___HTML_LOADER_IMPORT_16___}" height="200" width="200"/>
Expand Down Expand Up @@ -988,11 +983,6 @@ var ___HTML_LOADER_IMPORT_24___ = require("./noscript.png");
var ___HTML_LOADER_IMPORT_25___ = require("./😀abc.png");
var ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ = require("../../src/runtime/getUrl.js");
// Module
var ___HTML_LOADER_REPLACEMENT_1___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, { maybeNeedQuotes: true });
var ___HTML_LOADER_REPLACEMENT_15___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_14___, { maybeNeedQuotes: true });
var ___HTML_LOADER_REPLACEMENT_18___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, { maybeNeedQuotes: true });
var ___HTML_LOADER_REPLACEMENT_19___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, { maybeNeedQuotes: true });
var ___HTML_LOADER_REPLACEMENT_23___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_14___, { maybeNeedQuotes: true });
var code = \`<!doctype html>

<h1>My First Heading</h1>
Expand Down Expand Up @@ -1028,7 +1018,7 @@ var code = \`<!doctype html>

<img src="\${___HTML_LOADER_IMPORT_0___}">
<img src='\${___HTML_LOADER_IMPORT_0___}'>
<img src=\${___HTML_LOADER_REPLACEMENT_1___}>
<img src=\${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, true)}>
<img src="\${___HTML_LOADER_IMPORT_0___}">
<img src="\${___HTML_LOADER_IMPORT_1___}">
<img src="\${___HTML_LOADER_IMPORT_2___}">
Expand Down Expand Up @@ -1229,25 +1219,25 @@ or
function test() {}
\${"<" + "/script"}>

<img src=\${___HTML_LOADER_REPLACEMENT_1___} />
<img src=\${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, true)} />
<img src="\${___HTML_LOADER_IMPORT_11___}" />
<img src='\${___HTML_LOADER_IMPORT_11___}' />
<img src=\${___HTML_LOADER_REPLACEMENT_15___} />
<img srcset=\${___HTML_LOADER_REPLACEMENT_1___} />
<img src=\${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_14___, true)} />
<img srcset=\${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, true)} />
<img srcset="\${___HTML_LOADER_IMPORT_11___}" />
<img srcset='\${___HTML_LOADER_IMPORT_11___}' />
<img srcset=\${___HTML_LOADER_REPLACEMENT_15___} />
<img srcset=\${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_14___, true)} />
<img srcset="\${___HTML_LOADER_IMPORT_0___} 480w, \${___HTML_LOADER_IMPORT_11___} 640w, \${___HTML_LOADER_IMPORT_14___} 800w" sizes="(max-width: 600px) 480px, 800px" src="\${___HTML_LOADER_IMPORT_0___}" alt="Elva dressed as a fairy">
<img src = \${___HTML_LOADER_REPLACEMENT_1___} />
<img src = \${___HTML_LOADER_REPLACEMENT_15___} />
<img src = \${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, true)} />
<img src = \${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_14___, true)} />
<img src = "\${___HTML_LOADER_IMPORT_14___}" />
<img src = '\${___HTML_LOADER_IMPORT_14___}' />

<img src="#hash" />
<img src="javascript:void(0)" />
<img src='\${___HTML_LOADER_IMPORT_0___}#hash' />
<img src=\${___HTML_LOADER_REPLACEMENT_18___}#hash />
<img src=\${___HTML_LOADER_REPLACEMENT_19___}# />
<img src=\${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, true)}#hash />
<img src=\${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, true)}# />
<img srcset="\${___HTML_LOADER_IMPORT_0___}#hash" />
<img srcset="\${___HTML_LOADER_IMPORT_0___}#foo 480w, \${___HTML_LOADER_IMPORT_0___}#bar 800w" sizes="(max-width: 600px) 480px, 800px" src="\${___HTML_LOADER_IMPORT_0___}#baz" alt="Elva dressed as a fairy">
<img src="#" alt="test"/>
Expand All @@ -1264,14 +1254,14 @@ or
<img src=


\${___HTML_LOADER_REPLACEMENT_1___}
\${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, true)}


/>

<img data-srcset="image.png 480w, image.png 800w" sizes="(max-width: 600px) 480px, 800px" data-src="image.png" alt="Elva dressed as a fairy">

<img src=\${___HTML_LOADER_REPLACEMENT_23___}#hash />
<img src=\${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_14___, true)}#hash />

<svg width="200" height="200">
<image xlink:href="\${___HTML_LOADER_IMPORT_15___}" height="200" width="200"/>
Expand Down Expand Up @@ -1950,11 +1940,6 @@ var ___HTML_LOADER_IMPORT_26___ = new URL("./noscript.png", import.meta.url);
var ___HTML_LOADER_IMPORT_27___ = new URL("./😀abc.png", import.meta.url);
import ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ from "../../src/runtime/getUrl.js";
// Module
var ___HTML_LOADER_REPLACEMENT_1___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, { maybeNeedQuotes: true });
var ___HTML_LOADER_REPLACEMENT_16___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_15___, { maybeNeedQuotes: true });
var ___HTML_LOADER_REPLACEMENT_19___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, { maybeNeedQuotes: true });
var ___HTML_LOADER_REPLACEMENT_20___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, { maybeNeedQuotes: true });
var ___HTML_LOADER_REPLACEMENT_24___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_15___, { maybeNeedQuotes: true });
var code = \`<!doctype html>

<h1>My First Heading</h1>
Expand Down Expand Up @@ -1990,7 +1975,7 @@ var code = \`<!doctype html>

<img src="\${___HTML_LOADER_IMPORT_0___}">
<img src='\${___HTML_LOADER_IMPORT_0___}'>
<img src=\${___HTML_LOADER_REPLACEMENT_1___}>
<img src=\${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, true)}>
<img src="\${___HTML_LOADER_IMPORT_0___}">
<img src="\${___HTML_LOADER_IMPORT_1___}">
<img src="\${___HTML_LOADER_IMPORT_2___}">
Expand Down Expand Up @@ -2191,25 +2176,25 @@ or
function test() {}
\${"<" + "/script"}>

<img src=\${___HTML_LOADER_REPLACEMENT_1___} />
<img src=\${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, true)} />
<img src="\${___HTML_LOADER_IMPORT_12___}" />
<img src='\${___HTML_LOADER_IMPORT_12___}' />
<img src=\${___HTML_LOADER_REPLACEMENT_16___} />
<img srcset=\${___HTML_LOADER_REPLACEMENT_1___} />
<img src=\${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_15___, true)} />
<img srcset=\${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, true)} />
<img srcset="\${___HTML_LOADER_IMPORT_12___}" />
<img srcset='\${___HTML_LOADER_IMPORT_12___}' />
<img srcset=\${___HTML_LOADER_REPLACEMENT_16___} />
<img srcset=\${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_15___, true)} />
<img srcset="\${___HTML_LOADER_IMPORT_0___} 480w, \${___HTML_LOADER_IMPORT_12___} 640w, \${___HTML_LOADER_IMPORT_15___} 800w" sizes="(max-width: 600px) 480px, 800px" src="\${___HTML_LOADER_IMPORT_0___}" alt="Elva dressed as a fairy">
<img src = \${___HTML_LOADER_REPLACEMENT_1___} />
<img src = \${___HTML_LOADER_REPLACEMENT_16___} />
<img src = \${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, true)} />
<img src = \${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_15___, true)} />
<img src = "\${___HTML_LOADER_IMPORT_15___}" />
<img src = '\${___HTML_LOADER_IMPORT_15___}' />

<img src="#hash" />
<img src="javascript:void(0)" />
<img src='\${___HTML_LOADER_IMPORT_0___}#hash' />
<img src=\${___HTML_LOADER_REPLACEMENT_19___}#hash />
<img src=\${___HTML_LOADER_REPLACEMENT_20___}# />
<img src=\${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, true)}#hash />
<img src=\${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, true)}# />
<img srcset="\${___HTML_LOADER_IMPORT_0___}#hash" />
<img srcset="\${___HTML_LOADER_IMPORT_0___}#foo 480w, \${___HTML_LOADER_IMPORT_0___}#bar 800w" sizes="(max-width: 600px) 480px, 800px" src="\${___HTML_LOADER_IMPORT_0___}#baz" alt="Elva dressed as a fairy">
<img src="#" alt="test"/>
Expand All @@ -2226,14 +2211,14 @@ or
<img src=


\${___HTML_LOADER_REPLACEMENT_1___}
\${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, true)}


/>

<img data-srcset="image.png 480w, image.png 800w" sizes="(max-width: 600px) 480px, 800px" data-src="image.png" alt="Elva dressed as a fairy">

<img src=\${___HTML_LOADER_REPLACEMENT_24___}#hash />
<img src=\${___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_15___, true)}#hash />

<svg width="200" height="200">
<image xlink:href="\${___HTML_LOADER_IMPORT_16___}" height="200" width="200"/>
Expand Down
Loading

0 comments on commit 41f6330

Please sign in to comment.