refactor: code

Author: evilebottnawi

.editorconfig

@@ -9,4 +9,4 @@ insert_final_newline = true
 trim_trailing_whitespace = true
 
 [*.md]
-trim_trailing_whitespace = false
+trim_trailing_whitespace = false

package-lock.json

@@ -43,6 +43,7 @@
   "dependencies": {
     "es6-templates": "^0.2.3",
     "fastparse": "^1.1.2",
+    "file-loader": "^5.0.2",
     "html-minifier-terser": "^5.0.2",
     "loader-utils": "^1.2.3",
     "schema-utils": "^2.6.4"

package.json

@@ -1,6 +1,6 @@
 export const GET_URL_CODE =
   'function __url__(url) { return url.__esModule ? url.default : url; }';
 
-export const IDENT_REGEX = /xxxHTMLLINKxxx[0-9.]+xxx/g;
+export const IDENT_REGEX = /___HTML_LOADER_IDENT_[0-9.]+___/g;
 
 export const REQUIRE_REGEX = /\${require\([^)]*\)}/g;

src/constants.js

@@ -34,6 +34,7 @@ export default function htmlLoader(source) {
   const replacers = new Map();
 
   let offset = 0;
+
   for (const link of links) {
     if (
       link.value &&
@@ -118,7 +119,7 @@ export default function htmlLoader(source) {
     content = JSON.stringify(content);
   }
 
-  const importCode = getImportCode(replacers);
+  const importCode = getImportCode(this, content, replacers, options);
   const exportCode = getExportCode(content, replacers, options);
 
   return `${importCode}${exportCode};`;

src/index.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-useless-escape,line-comment-position */
 import Parser from 'fastparse';
 
 function processMatch(match, strUntilValue, name, value, index) {
@@ -26,8 +25,10 @@ const parser = new Parser({
     },
   },
   inside: {
-    '\\s+': true, // eat up whitespace
-    '>': 'outside', // end of attributes
+    // eat up whitespace
+    '\\s+': true,
+    // end of attributes
+    '>': 'outside',
     '(([0-9a-zA-Z\\-:]+)\\s*=\\s*")([^"]*)"': processMatch,
     "(([0-9a-zA-Z\\-:]+)\\s*=\\s*')([^']*)'": processMatch,
     '(([0-9a-zA-Z\\-:]+)\\s*=\\s*)([^\\s>]+)': processMatch,

src/parseAttributes.js

@@ -1,12 +1,8 @@
-import { urlToRequest } from 'loader-utils';
+import { urlToRequest, stringifyRequest } from 'loader-utils';
 
 import parseAttributes from './parseAttributes';
 import { GET_URL_CODE, IDENT_REGEX } from './constants';
 
-function randomIdent() {
-  return `xxxHTMLLINKxxx${Math.random()}${Math.random()}xxx`;
-}
-
 export function getTagsAndAttributes(attributes) {
   const defaultAttributes = ['img:src'];
 
@@ -50,13 +46,7 @@ export function getLinks(content, attributes) {
 }
 
 export function getUniqueIdent(data) {
-  const ident = randomIdent();
-
-  if (data.has(ident)) {
-    return getUniqueIdent(data);
-  }
-
-  return ident;
+  return `___HTML_LOADER_IDENT_${data.size}___`;
 }
 
 export function replaceLinkWithIdent(source, link, ident, offset = 0) {
@@ -71,34 +61,46 @@ export function isProductionMode(loaderContext) {
   return loaderContext.mode === 'production' || !loaderContext.mode;
 }
 
-export function getImportCode(replacers) {
+export function getImportCode(loaderContext, content, replacers, options) {
   if (replacers.size === 0) {
     return '';
   }
 
-  return GET_URL_CODE;
-}
+  const importItems = [];
 
-export function getExportCode(content, replacers, options) {
-  let newContent = content;
+  importItems.push(GET_URL_CODE);
 
-  newContent = content.replace(IDENT_REGEX, (match) => {
-    if (!replacers.has(match)) {
-      return match;
+  const idents = replacers.keys();
+
+  for (const ident of idents) {
+    const url = replacers.get(ident);
+    const request = urlToRequest(url, options.root);
+    const stringifiedRequest = stringifyRequest(loaderContext, request);
+
+    if (options.esModule) {
+      importItems.push(`import ${ident} from ${stringifiedRequest};`);
+    } else {
+      importItems.push(`var ${ident} = require(${stringifiedRequest});`);
     }
+  }
+
+  const importCode = importItems.join('\n');
 
-    let request = urlToRequest(replacers.get(match), options.root);
+  return `// Imports\n${importCode}\n`;
+}
 
-    if (options.interpolate === 'require') {
-      request = replacers.get(match);
+export function getExportCode(content, replacers, options) {
+  const exportCode = content.replace(IDENT_REGEX, (match) => {
+    if (!replacers.has(match)) {
+      return match;
     }
 
-    return `" + __url__(require(${JSON.stringify(request)})) + "`;
+    return `" + __url__(${match}) + "`;
   });
 
   if (options.esModule) {
-    return `export default ${newContent}`;
+    return `// Exports\nexport default ${exportCode}`;
   }
 
-  return `module.exports = ${newContent}`;
+  return `// Exports\nmodule.exports = ${exportCode}`;
 }