fix: escape \u2028 and \u2029 characters (#244)

Author: evilebottnawi

src/utils.js

@@ -63,8 +63,11 @@ export function getExportCode(html, replacers, options) {
   let exportCode = html;
 
   if (!options.interpolate) {
-    // eslint-disable-next-line no-param-reassign
-    exportCode = JSON.stringify(exportCode);
+    exportCode = JSON.stringify(exportCode)
+      // Invalid in JavaScript but valid HTML
+      .replace(/[\u2028\u2029]/g, (str) =>
+        str === '\u2029' ? '\\u2029' : '\\u2028'
+      );
   }
 
   for (const replacer of replacers) {

test/__snapshots__/loader.test.js.snap

@@ -4,16 +4,10 @@ exports[`loader should not failed contain invisible spaces: errors 1`] = `Array
 
 exports[`loader should not failed contain invisible spaces: module 1`] = `
 "// Exports
-module.exports = \\"<ul>\\\\n  <li> \\\\\\\\u2028 - 
 </li>\\\\n  <li> \\\\\\\\u2029 - 
 </li>\\\\n</ul>\\\\n\\";"
+module.exports = \\"<ul><li> \\\\\\\\u2028 - \\\\u2028 Text \\\\u2028 </li><li> \\\\\\\\u2029 - \\\\u2029 Text \\\\u2029 </li></ul>\\";"
 `;
 
-exports[`loader should not failed contain invisible spaces: result 1`] = `
-"<ul>
-  <li> \\\\u2028 - 
 </li>
-  <li> \\\\u2029 - 
 </li>
-</ul>
-"
-`;
+exports[`loader should not failed contain invisible spaces: result 1`] = `"<ul><li> \\\\u2028 - 
 Text 
 </li><li> \\\\u2029 - 
 Text 
 </li></ul>"`;
 
 exports[`loader should not failed contain invisible spaces: warnings 1`] = `Array []`;
 

test/fixtures/invisible-space.html

@@ -1,4 +1 @@
-<ul>
-  <li> \u2028 - 
 </li>
-  <li> \u2029 - 
 </li>
-</ul>
+<ul><li> \u2028 - 
 Text 
 </li><li> \u2029 - 
 Text 
 </li></ul>

test/loader.test.js

@@ -1,3 +1,6 @@
+import fs from 'fs';
+import path from 'path';
+
 import {
   compile,
   getCompiler,
@@ -34,12 +37,19 @@ describe('loader', () => {
   });
 
   it('should not failed contain invisible spaces', async () => {
+    const source = fs.readFileSync(
+      path.resolve(__dirname, './fixtures/invisible-space.html')
+    );
+
+    expect(/[\u2028\u2029]/.test(source)).toBe(true);
+
     const compiler = getCompiler('invisible-space.js');
     const stats = await compile(compiler);
 
-    expect(getModuleSource('./invisible-space.html', stats)).toMatchSnapshot(
-      'module'
-    );
+    const moduleSource = getModuleSource('./invisible-space.html', stats);
+
+    expect(moduleSource).toMatchSnapshot('module');
+    expect(/[\u2028\u2029]/.test(moduleSource)).toBe(false);
     expect(
       execute(readAsset('main.bundle.js', compiler, stats))
     ).toMatchSnapshot('result');