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 142ac35 commit ccbbadd
Show file tree
Hide file tree
Showing 8 changed files with 224 additions and 456 deletions.
7 changes: 1 addition & 6 deletions src/runtime/getUrl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,7 @@ module.exports = (url, options) => {
}

// eslint-disable-next-line no-underscore-dangle, no-param-reassign
url = String(url.__esModule ? url.default : url);

if (options.hash) {
// eslint-disable-next-line no-param-reassign
url += options.hash;
}
url = String(url);

if (options.maybeNeedQuotes && /[\t\n\f\r "'=<>`]/.test(url)) {
return `"${url}"`;
Expand Down
10 changes: 6 additions & 4 deletions src/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1269,9 +1269,9 @@ export function getModuleCode(html, replacements, loaderContext, options) {

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

Expand All @@ -1288,7 +1288,9 @@ export function getModuleCode(html, replacements, loaderContext, options) {
const name = needHelperFn ? replacementName : importName;

code = code.replace(new RegExp(replacementName, "g"), () =>
isTemplateLiteralSupported ? `\${${name}}` : `" + ${name} + "`,
isTemplateLiteralSupported
? `\${${name}}${typeof hash !== "undefined" ? hash : ""}`
: `" + ${name}${typeof hash !== "undefined" ? ` + ${JSON.stringify(hash)}` : ""} + "`,
);
}

Expand Down
77 changes: 31 additions & 46 deletions test/__snapshots__/esModule-option.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,15 +35,10 @@ 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_5___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_4___, { hash: "#icon-chevron-with-circle-up" });
var ___HTML_LOADER_REPLACEMENT_16___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_15___, { maybeNeedQuotes: true });
var ___HTML_LOADER_REPLACEMENT_18___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, { hash: "#hash" });
var ___HTML_LOADER_REPLACEMENT_19___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, { hash: "#hash", maybeNeedQuotes: true });
var ___HTML_LOADER_REPLACEMENT_20___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, { hash: "#", maybeNeedQuotes: true });
var ___HTML_LOADER_REPLACEMENT_21___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, { hash: "#foo" });
var ___HTML_LOADER_REPLACEMENT_22___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, { hash: "#bar" });
var ___HTML_LOADER_REPLACEMENT_23___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, { hash: "#baz" });
var ___HTML_LOADER_REPLACEMENT_24___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_15___, { hash: "#hash", 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 @@ -94,7 +89,7 @@ var code = \`<!doctype html>
<custom-element custom-src="image.png" />
<custom-img custom-src="image.png"/></custom-element>

<img src="\${___HTML_LOADER_REPLACEMENT_5___}">
<img src="\${___HTML_LOADER_IMPORT_4___}#icon-chevron-with-circle-up">

<a href="mailto:[email protected]"></a>

Expand Down Expand Up @@ -296,11 +291,11 @@ or

<img src="#hash" />
<img src="javascript:void(0)" />
<img src='\${___HTML_LOADER_REPLACEMENT_18___}' />
<img src=\${___HTML_LOADER_REPLACEMENT_19___} />
<img src=\${___HTML_LOADER_REPLACEMENT_20___} />
<img srcset="\${___HTML_LOADER_REPLACEMENT_18___}" />
<img srcset="\${___HTML_LOADER_REPLACEMENT_21___} 480w, \${___HTML_LOADER_REPLACEMENT_22___} 800w" sizes="(max-width: 600px) 480px, 800px" src="\${___HTML_LOADER_REPLACEMENT_23___}" alt="Elva dressed as a fairy">
<img src='\${___HTML_LOADER_IMPORT_0___}#hash' />
<img src=\${___HTML_LOADER_REPLACEMENT_19___}#hash />
<img src=\${___HTML_LOADER_REPLACEMENT_20___}# />
<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"/>
<img src="#" srcset="#" alt="test" />
<img src="###" srcset="#" alt="test" />
Expand All @@ -322,7 +317,7 @@ or

<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___} />
<img src=\${___HTML_LOADER_REPLACEMENT_24___}#hash />

<svg width="200" height="200">
<image xlink:href="\${___HTML_LOADER_IMPORT_16___}" height="200" width="200"/>
Expand Down Expand Up @@ -994,15 +989,10 @@ 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_5___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_4___, { hash: "#icon-chevron-with-circle-up" });
var ___HTML_LOADER_REPLACEMENT_15___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_14___, { maybeNeedQuotes: true });
var ___HTML_LOADER_REPLACEMENT_17___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, { hash: "#hash" });
var ___HTML_LOADER_REPLACEMENT_18___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, { hash: "#hash", maybeNeedQuotes: true });
var ___HTML_LOADER_REPLACEMENT_19___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, { hash: "#", maybeNeedQuotes: true });
var ___HTML_LOADER_REPLACEMENT_20___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, { hash: "#foo" });
var ___HTML_LOADER_REPLACEMENT_21___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, { hash: "#bar" });
var ___HTML_LOADER_REPLACEMENT_22___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, { hash: "#baz" });
var ___HTML_LOADER_REPLACEMENT_23___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_14___, { hash: "#hash", 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 @@ -1053,7 +1043,7 @@ var code = \`<!doctype html>
<custom-element custom-src="image.png" />
<custom-img custom-src="image.png"/></custom-element>

<img src="\${___HTML_LOADER_REPLACEMENT_5___}">
<img src="\${___HTML_LOADER_IMPORT_4___}#icon-chevron-with-circle-up">

<a href="mailto:[email protected]"></a>

Expand Down Expand Up @@ -1255,11 +1245,11 @@ or

<img src="#hash" />
<img src="javascript:void(0)" />
<img src='\${___HTML_LOADER_REPLACEMENT_17___}' />
<img src=\${___HTML_LOADER_REPLACEMENT_18___} />
<img src=\${___HTML_LOADER_REPLACEMENT_19___} />
<img srcset="\${___HTML_LOADER_REPLACEMENT_17___}" />
<img srcset="\${___HTML_LOADER_REPLACEMENT_20___} 480w, \${___HTML_LOADER_REPLACEMENT_21___} 800w" sizes="(max-width: 600px) 480px, 800px" src="\${___HTML_LOADER_REPLACEMENT_22___}" alt="Elva dressed as a fairy">
<img src='\${___HTML_LOADER_IMPORT_0___}#hash' />
<img src=\${___HTML_LOADER_REPLACEMENT_18___}#hash />
<img src=\${___HTML_LOADER_REPLACEMENT_19___}# />
<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"/>
<img src="#" srcset="#" alt="test" />
<img src="###" srcset="#" alt="test" />
Expand All @@ -1281,7 +1271,7 @@ or

<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___} />
<img src=\${___HTML_LOADER_REPLACEMENT_23___}#hash />

<svg width="200" height="200">
<image xlink:href="\${___HTML_LOADER_IMPORT_15___}" height="200" width="200"/>
Expand Down Expand Up @@ -1743,7 +1733,7 @@ or

<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="/webpack/public/path/image image.png#hash" />
<img src="/webpack/public/path/image image.png"#hash />

<svg width="200" height="200">
<image xlink:href="/webpack/public/path/webpack.svg" height="200" width="200"/>
Expand Down Expand Up @@ -1961,15 +1951,10 @@ 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_5___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_4___, { hash: "#icon-chevron-with-circle-up" });
var ___HTML_LOADER_REPLACEMENT_16___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_15___, { maybeNeedQuotes: true });
var ___HTML_LOADER_REPLACEMENT_18___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, { hash: "#hash" });
var ___HTML_LOADER_REPLACEMENT_19___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, { hash: "#hash", maybeNeedQuotes: true });
var ___HTML_LOADER_REPLACEMENT_20___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, { hash: "#", maybeNeedQuotes: true });
var ___HTML_LOADER_REPLACEMENT_21___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, { hash: "#foo" });
var ___HTML_LOADER_REPLACEMENT_22___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, { hash: "#bar" });
var ___HTML_LOADER_REPLACEMENT_23___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, { hash: "#baz" });
var ___HTML_LOADER_REPLACEMENT_24___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_15___, { hash: "#hash", 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 @@ -2020,7 +2005,7 @@ var code = \`<!doctype html>
<custom-element custom-src="image.png" />
<custom-img custom-src="image.png"/></custom-element>

<img src="\${___HTML_LOADER_REPLACEMENT_5___}">
<img src="\${___HTML_LOADER_IMPORT_4___}#icon-chevron-with-circle-up">

<a href="mailto:[email protected]"></a>

Expand Down Expand Up @@ -2222,11 +2207,11 @@ or

<img src="#hash" />
<img src="javascript:void(0)" />
<img src='\${___HTML_LOADER_REPLACEMENT_18___}' />
<img src=\${___HTML_LOADER_REPLACEMENT_19___} />
<img src=\${___HTML_LOADER_REPLACEMENT_20___} />
<img srcset="\${___HTML_LOADER_REPLACEMENT_18___}" />
<img srcset="\${___HTML_LOADER_REPLACEMENT_21___} 480w, \${___HTML_LOADER_REPLACEMENT_22___} 800w" sizes="(max-width: 600px) 480px, 800px" src="\${___HTML_LOADER_REPLACEMENT_23___}" alt="Elva dressed as a fairy">
<img src='\${___HTML_LOADER_IMPORT_0___}#hash' />
<img src=\${___HTML_LOADER_REPLACEMENT_19___}#hash />
<img src=\${___HTML_LOADER_REPLACEMENT_20___}# />
<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"/>
<img src="#" srcset="#" alt="test" />
<img src="###" srcset="#" alt="test" />
Expand All @@ -2248,7 +2233,7 @@ or

<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___} />
<img src=\${___HTML_LOADER_REPLACEMENT_24___}#hash />

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

0 comments on commit ccbbadd

Please sign in to comment.