Browsersync snippet regex for lookbehinds

laravel-mix · Sep 18, 2019 · 19f26b5 · 19f26b5
1 parent 719edb1
commit 19f26b5
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 1 deletion.
diff --git a/src/components/Browsersync.js b/src/components/Browsersync.js
@@ -34,6 +34,14 @@ class Browsersync {
         return new BrowserSyncPlugin(this.config(), { reload: false });
     }
 
+    /**
+     * The regex used to determine where the Browsersync
+     * javascript snippet is injected onto each page.
+     */
+    regex() {
+        return /(<\/body>|<\/pre>)(?!.*(<\/body>|<\/pre>))/is;
+    }
+
     /**
      * Build the BrowserSync configuration.
      */
@@ -50,7 +58,7 @@ class Browsersync {
                 ],
                 snippetOptions: {
                     rule: {
-                        match: /(<\/body>|<\/pre>)/i,
+                        match: this.regex(),
                         fn: function(snippet, match) {
                             return snippet + match;
                         }

diff --git a/test/features/browsersync.js b/test/features/browsersync.js
@@ -1,5 +1,6 @@
 import mix from './helpers/setup';
 import mockRequire from 'mock-require';
+import Browsersync from '../../src/components/Browsersync';
 
 mockRequire(
     'browser-sync-webpack-plugin',
@@ -21,3 +22,20 @@ test.serial.cb('it handles Browsersync reloading', t => {
         );
     });
 });
+
+test.serial.cb('it injects the snippet in the right place', t => {
+    let regex = new Browsersync().regex();
+
+    t.is(regex.exec(`<div></div>`), null);
+    t.is(regex.exec(`<body></body>`).index, 6);
+    t.is(regex.exec(`<pre></pre>`).index, 5);
+    t.is(regex.exec(`<body><pre></pre></body>`).index, 17);
+
+    let html = `<body>
+        <pre></pre>
+        <div></div>
+        <pre></pre>
+        </body>
+    `;
+    t.is(regex.exec(html).index, 75);
+});