Skip to content

Commit 6fa80d5

Browse files
alexander-akaitalexander-akait
authoredJul 25, 2024··
feat: using template literals in code when it supported (#520)
·
v5.1.0
1 parent cc34b06 commit 6fa80d5

10 files changed

+16118
-4663
lines changed
 

‎README.md

+10-3
Original file line numberDiff line numberDiff line change
@@ -628,7 +628,12 @@ module.exports = {
628628
loader: "html-loader",
629629
options: {
630630
postprocessor: (content, loaderContext) => {
631-
return content.replace(/<%=/g, '" +').replace(/%>/g, '+ "');
631+
// When you environment supports template literals (using browserslist or options) we will generate code using them
632+
const isTemplateLiteralSupported = content[0] === "`";
633+
634+
return content
635+
.replace(/<%=/g, isTemplateLiteralSupported ? `\${` : '" +')
636+
.replace(/%>/g, isTemplateLiteralSupported ? "}" : '+ "');
632637
},
633638
},
634639
},
@@ -655,10 +660,12 @@ module.exports = {
655660
options: {
656661
postprocessor: async (content, loaderContext) => {
657662
const value = await getValue();
663+
// When you environment supports template literals (using browserslist or options) we will generate code using them
664+
const isTemplateLiteralSupported = content[0] === "`";
658665

659666
return content
660-
.replace(/<%=/g, '" +')
661-
.replace(/%>/g, '+ "')
667+
.replace(/<%=/g, isTemplateLiteralSupported ? `\${` : '" +')
668+
.replace(/%>/g, isTemplateLiteralSupported ? "}" : '+ "')
662669
.replace("my-value", value);
663670
},
664671
},

‎src/index.js

+16-6
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import {
66
getModuleCode,
77
getExportCode,
88
defaultMinimizerOptions,
9+
supportTemplateLiteral,
10+
convertToTemplateLiteral,
911
} from "./utils";
1012

1113
import schema from "./options.json";
@@ -57,7 +59,17 @@ export default async function loader(content) {
5759

5860
let { html } = await pluginRunner(plugins).process(content);
5961

60-
html = JSON.stringify(html)
62+
for (const error of errors) {
63+
this.emitError(error instanceof Error ? error : new Error(error));
64+
}
65+
66+
const isTemplateLiteralSupported = supportTemplateLiteral(this);
67+
68+
html = (
69+
isTemplateLiteralSupported
70+
? convertToTemplateLiteral(html)
71+
: JSON.stringify(html)
72+
)
6173
// Invalid in JavaScript but valid HTML
6274
.replace(/[\u2028\u2029]/g, (str) =>
6375
str === "\u2029" ? "\\u2029" : "\\u2028",
@@ -68,12 +80,10 @@ export default async function loader(content) {
6880
html = await options.postprocessor(html, this);
6981
}
7082

71-
for (const error of errors) {
72-
this.emitError(error instanceof Error ? error : new Error(error));
73-
}
74-
7583
const importCode = getImportCode(html, this, imports, options);
76-
const moduleCode = getModuleCode(html, replacements, options);
84+
const moduleCode = getModuleCode(html, replacements, {
85+
isTemplateLiteralSupported,
86+
});
7787
const exportCode = getExportCode(html, options);
7888

7989
return `${importCode}${moduleCode}${exportCode}`;

‎src/utils.js

+57-8
Original file line numberDiff line numberDiff line change
@@ -1240,10 +1240,31 @@ export function getImportCode(html, loaderContext, imports, options) {
12401240
return `// Imports\n${code}`;
12411241
}
12421242

1243-
export function getModuleCode(html, replacements) {
1243+
const SLASH = "\\".charCodeAt(0);
1244+
const BACKTICK = "`".charCodeAt(0);
1245+
const DOLLAR = "$".charCodeAt(0);
1246+
1247+
export function convertToTemplateLiteral(str) {
1248+
let escapedString = "";
1249+
1250+
for (let i = 0; i < str.length; i++) {
1251+
const code = str.charCodeAt(i);
1252+
1253+
escapedString +=
1254+
code === SLASH || code === BACKTICK || code === DOLLAR
1255+
? `\\${str[i]}`
1256+
: str[i];
1257+
}
1258+
1259+
return `\`${escapedString}\``;
1260+
}
1261+
1262+
export function getModuleCode(html, replacements, options) {
12441263
let code = html;
12451264
let replacersCode = "";
12461265

1266+
const { isTemplateLiteralSupported } = options;
1267+
12471268
for (const item of replacements) {
12481269
const { runtime, importName, replacementName, isValueQuoted, hash } = item;
12491270

@@ -1256,20 +1277,24 @@ export function getModuleCode(html, replacements) {
12561277

12571278
replacersCode += `var ${replacementName} = ${GET_SOURCE_FROM_IMPORT_NAME}(${importName}${preparedOptions});\n`;
12581279

1259-
code = code.replace(
1260-
new RegExp(replacementName, "g"),
1261-
() => `" + ${replacementName} + "`,
1280+
code = code.replace(new RegExp(replacementName, "g"), () =>
1281+
isTemplateLiteralSupported
1282+
? `\${${replacementName}}`
1283+
: `" + ${replacementName} + "`,
12621284
);
12631285
} else {
1264-
code = code.replace(
1265-
new RegExp(replacementName, "g"),
1266-
() => `" + ${importName} + "`,
1286+
code = code.replace(new RegExp(replacementName, "g"), () =>
1287+
isTemplateLiteralSupported
1288+
? `\${${replacementName}}`
1289+
: `" + ${replacementName} + "`,
12671290
);
12681291
}
12691292
}
12701293

12711294
// Replaces "<script>" or "</script>" to "<" + "script>" or "<" + "/script>".
1272-
code = code.replace(/<(\/?script)/g, (_, s) => `<" + "${s}`);
1295+
code = code.replace(/<(\/?script)/g, (_, s) =>
1296+
isTemplateLiteralSupported ? `\${"<" + "${s}"}` : `<" + "${s}`,
1297+
);
12731298

12741299
return `// Module\n${replacersCode}var code = ${code};\n`;
12751300
}
@@ -1342,4 +1367,28 @@ export function traverse(root, callback) {
13421367
visit(root, null);
13431368
}
13441369

1370+
export function supportTemplateLiteral(loaderContext) {
1371+
if (loaderContext.environment && loaderContext.environment.templateLiteral) {
1372+
return true;
1373+
}
1374+
1375+
// TODO remove in the next major release
1376+
if (
1377+
// eslint-disable-next-line no-underscore-dangle
1378+
loaderContext._compilation &&
1379+
// eslint-disable-next-line no-underscore-dangle
1380+
loaderContext._compilation.options &&
1381+
// eslint-disable-next-line no-underscore-dangle
1382+
loaderContext._compilation.options.output &&
1383+
// eslint-disable-next-line no-underscore-dangle
1384+
loaderContext._compilation.options.output.environment &&
1385+
// eslint-disable-next-line no-underscore-dangle
1386+
loaderContext._compilation.options.output.environment.templateLiteral
1387+
) {
1388+
return true;
1389+
}
1390+
1391+
return false;
1392+
}
1393+
13451394
export const webpackIgnoreCommentRegexp = /webpackIgnore:(\s+)?(true|false)/;

‎test/__snapshots__/esModule-option.test.js.snap

+1,860-510
Large diffs are not rendered by default.

‎test/__snapshots__/loader.test.js.snap

+1,432-398
Large diffs are not rendered by default.

‎test/__snapshots__/minimize-option.test.js.snap

+1,742-379
Large diffs are not rendered by default.

‎test/__snapshots__/postprocessor-option.test.js.snap

+37-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@ import ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ from "../../src/runtime/getUrl.j
88
var ___HTML_LOADER_IMPORT_0___ = new URL("./image.png", import.meta.url);
99
// Module
1010
var ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);
11-
var code = "<div>\\n <p>{{firstname}} {{lastname}}</p>\\n <img src=\\"" + ___HTML_LOADER_REPLACEMENT_0___ + "\\" alt=\\"alt\\" />\\n<div>\\n";
11+
var code = \`<div>
12+
<p>{{firstname}} {{lastname}}</p>
13+
<img src="\${___HTML_LOADER_REPLACEMENT_0___}" alt="alt" />
14+
<div>
15+
\`;
1216
// Exports
1317
export default code;"
1418
`;
@@ -23,6 +27,31 @@ exports[`'postprocess' option should work with async "postprocessor" function op
2327
2428
exports[`'postprocess' option should work with async "postprocessor" function option: warnings 1`] = `[]`;
2529
30+
exports[`'postprocess' option should work with the "postprocessor" option #1: errors 1`] = `[]`;
31+
32+
exports[`'postprocess' option should work with the "postprocessor" option #1: module 1`] = `
33+
"// Imports
34+
import ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ from "../../src/runtime/getUrl.js";
35+
var ___HTML_LOADER_IMPORT_0___ = new URL("./image.png", import.meta.url);
36+
// Module
37+
var ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);
38+
var code = "<img src=\\"" + ___HTML_LOADER_REPLACEMENT_0___ + "\\">\\n<img src=\\"" + 'Hello ' + (1+1) + "\\">\\n<img src=\\"" + require('./image.png') + "\\">\\n<img src=\\"" + new URL('./image.png', import.meta.url) + "\\">\\n<div>" + require('./gallery.html').default + "</div>\\n<!--Works fine, but need improve testing <div>< %= (await import('./gallery.html')).default % ></div>-->\\n";
39+
// Exports
40+
export default code;"
41+
`;
42+
43+
exports[`'postprocess' option should work with the "postprocessor" option #1: result 1`] = `
44+
"<img src="replaced_file_protocol_/webpack/public/path/image.png">
45+
<img src="Hello 2">
46+
<img src="/webpack/public/path/image.png">
47+
<img src="replaced_file_protocol_/webpack/public/path/image.png">
48+
<div><h2>Gallery</h2></div>
49+
<!--Works fine, but need improve testing <div>< %= (await import('./gallery.html')).default % ></div>-->
50+
"
51+
`;
52+
53+
exports[`'postprocess' option should work with the "postprocessor" option #1: warnings 1`] = `[]`;
54+
2655
exports[`'postprocess' option should work with the "postprocessor" option: errors 1`] = `[]`;
2756
2857
exports[`'postprocess' option should work with the "postprocessor" option: module 1`] = `
@@ -31,7 +60,13 @@ import ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ from "../../src/runtime/getUrl.j
3160
var ___HTML_LOADER_IMPORT_0___ = new URL("./image.png", import.meta.url);
3261
// Module
3362
var ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);
34-
var code = "<img src=\\"" + ___HTML_LOADER_REPLACEMENT_0___ + "\\">\\n<img src=\\"" + 'Hello ' + (1+1) + "\\">\\n<img src=\\"" + require('./image.png') + "\\">\\n<img src=\\"" + new URL('./image.png', import.meta.url) + "\\">\\n<div>" + require('./gallery.html').default + "</div>\\n<!--Works fine, but need improve testing <div>< %= (await import('./gallery.html')).default % ></div>-->\\n";
63+
var code = \`<img src="\${___HTML_LOADER_REPLACEMENT_0___}">
64+
<img src="\${ 'Hello ' + (1+1) }">
65+
<img src="\${ require('./image.png') }">
66+
<img src="\${ new URL('./image.png', import.meta.url) }">
67+
<div>\${ require('./gallery.html').default }</div>
68+
<!--Works fine, but need improve testing <div>< %= (await import('./gallery.html')).default % ></div>-->
69+
\`;
3570
// Exports
3671
export default code;"
3772
`;

‎test/__snapshots__/preprocessor-option.test.js.snap

+14-4
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@ import ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ from "../../src/runtime/getUrl.j
88
var ___HTML_LOADER_IMPORT_0___ = new URL("./image.png", import.meta.url);
99
// Module
1010
var ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);
11-
var code = "<div>\\n <p>Alexander Krasnoyarov</p>\\n <img src=\\"" + ___HTML_LOADER_REPLACEMENT_0___ + "\\" alt=\\"alt\\" />\\n<div>\\n";
11+
var code = \`<div>
12+
<p>Alexander Krasnoyarov</p>
13+
<img src="\${___HTML_LOADER_REPLACEMENT_0___}" alt="alt" />
14+
<div>
15+
\`;
1216
// Exports
1317
export default code;"
1418
`;
@@ -33,7 +37,8 @@ var ___HTML_LOADER_IMPORT_1___ = new URL("./image.png", import.meta.url);
3337
// Module
3438
var ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);
3539
var ___HTML_LOADER_REPLACEMENT_1___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_1___);
36-
var code = "<picture><source type=\\"image/webp\\" srcset=\\"" + ___HTML_LOADER_REPLACEMENT_0___ + "\\"><img src=\\"" + ___HTML_LOADER_REPLACEMENT_1___ + "\\"></picture>\\n";
40+
var code = \`<picture><source type="image/webp" srcset="\${___HTML_LOADER_REPLACEMENT_0___}"><img src="\${___HTML_LOADER_REPLACEMENT_1___}"></picture>
41+
\`;
3742
// Exports
3843
export default code;"
3944
`;
@@ -53,7 +58,11 @@ import ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ from "../../src/runtime/getUrl.j
5358
var ___HTML_LOADER_IMPORT_0___ = new URL("./image.png", import.meta.url);
5459
// Module
5560
var ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);
56-
var code = "<div>\\n <p>Alexander Krasnoyarov</p>\\n <img src=\\"" + ___HTML_LOADER_REPLACEMENT_0___ + "\\" alt=\\"alt\\" />\\n<div>\\n";
61+
var code = \`<div>
62+
<p>Alexander Krasnoyarov</p>
63+
<img src="\${___HTML_LOADER_REPLACEMENT_0___}" alt="alt" />
64+
<div>
65+
\`;
5766
// Exports
5867
export default code;"
5968
`;
@@ -78,7 +87,8 @@ var ___HTML_LOADER_IMPORT_1___ = new URL("./image.png", import.meta.url);
7887
// Module
7988
var ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);
8089
var ___HTML_LOADER_REPLACEMENT_1___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_1___);
81-
var code = "<picture><source type=\\"image/webp\\" srcset=\\"" + ___HTML_LOADER_REPLACEMENT_0___ + "\\"><img src=\\"" + ___HTML_LOADER_REPLACEMENT_1___ + "\\"></picture>\\n";
90+
var code = \`<picture><source type="image/webp" srcset="\${___HTML_LOADER_REPLACEMENT_0___}"><img src="\${___HTML_LOADER_REPLACEMENT_1___}"></picture>
91+
\`;
8292
// Exports
8393
export default code;"
8494
`;

‎test/__snapshots__/sources-option.test.js.snap

+10,897-3,351
Large diffs are not rendered by default.

‎test/postprocessor-option.test.js

+53-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import path from "path";
2+
13
import {
24
compile,
35
execute,
@@ -15,7 +17,11 @@ describe("'postprocess' option", () => {
1517
expect(typeof content).toBe("string");
1618
expect(loaderContext).toBeDefined();
1719

18-
return content.replace(/<%=/g, '" +').replace(/%>/g, '+ "');
20+
const isTemplateLiteralSupported = content[0] === "`";
21+
22+
return content
23+
.replace(/<%=/g, isTemplateLiteralSupported ? `\${` : '" +')
24+
.replace(/%>/g, isTemplateLiteralSupported ? "}" : '+ "');
1925
},
2026
});
2127
const stats = await compile(compiler);
@@ -30,13 +36,58 @@ describe("'postprocess' option", () => {
3036
expect(getErrors(stats)).toMatchSnapshot("errors");
3137
});
3238

39+
it('should work with the "postprocessor" option #1', async () => {
40+
const compiler = getCompiler(
41+
"postprocessor.html",
42+
{
43+
postprocessor: (content, loaderContext) => {
44+
expect(typeof content).toBe("string");
45+
expect(loaderContext).toBeDefined();
46+
47+
const isTemplateLiteralSupported = content[0] === "`";
48+
49+
return content
50+
.replace(/<%=/g, isTemplateLiteralSupported ? `\${` : '" +')
51+
.replace(/%>/g, isTemplateLiteralSupported ? "}" : '+ "');
52+
},
53+
},
54+
{
55+
output: {
56+
path: path.resolve(__dirname, "./outputs"),
57+
filename: "[name].bundle.js",
58+
chunkFilename: "[name].chunk.js",
59+
chunkLoading: "require",
60+
publicPath: "/webpack/public/path/",
61+
library: "___TEST___",
62+
assetModuleFilename: "[name][ext]",
63+
hashFunction: "xxhash64",
64+
environment: { templateLiteral: false },
65+
},
66+
},
67+
);
68+
const stats = await compile(compiler);
69+
70+
expect(getModuleSource("./postprocessor.html", stats)).toMatchSnapshot(
71+
"module",
72+
);
73+
expect(
74+
execute(readAsset("main.bundle.js", compiler, stats)),
75+
).toMatchSnapshot("result");
76+
expect(getWarnings(stats)).toMatchSnapshot("warnings");
77+
expect(getErrors(stats)).toMatchSnapshot("errors");
78+
});
79+
3380
it('should work with async "postprocessor" function option', async () => {
3481
const compiler = getCompiler("preprocessor.hbs", {
3582
postprocessor: async (content, loaderContext) => {
3683
await expect(typeof content).toBe("string");
3784
await expect(loaderContext).toBeDefined();
3885

39-
return content.replace(/<%=/g, '" +').replace(/%>/g, '+ "');
86+
const isTemplateLiteralSupported = content[0] === "`";
87+
88+
return content
89+
.replace(/<%=/g, isTemplateLiteralSupported ? `\${` : '" +')
90+
.replace(/%>/g, isTemplateLiteralSupported ? "}" : '+ "');
4091
},
4192
});
4293
const stats = await compile(compiler);

0 commit comments

Comments
 (0)
Please sign in to comment.