mikser-io-live 6.1.1 → 6.1.2

package/index.js

@@ -27,6 +27,7 @@ import { existsSync, statSync } from 'node:fs'
 import { readFile } from 'node:fs/promises'
 
 import { clientScript } from './lib/client.js'
+export { samePage } from './lib/paths.js'
 
 // Where the snippet goes, in preference order. `</head>` is the fallback for
 // a document with no closing body tag.

package/lib/client.js

@@ -7,8 +7,11 @@
 // EventSource rather than a WebSocket. It reconnects on its own, survives a
 // mikser restart without any retry logic here, needs no upgrade handshake, and
 // mikser already has a `streaming: true` route kind for exactly this.
+import { samePage } from './paths.js'
+
 export function clientScript(path) {
     return `<script data-mikser-live>(() => {
+  const samePage = ${samePage.toString()}
   const source = new EventSource(${JSON.stringify(path)})
   let boot = null
 
@@ -49,9 +52,12 @@ export function clientScript(path) {
     // Anything else: reload, but only if this page is among what changed. A
     // build that rerendered forty other pages is not a reason to interrupt
     // the one being looked at.
-    const here = location.pathname
-    const asIndex = here.endsWith('/') ? here + 'index.html' : here
-    if (paths.includes(here) || paths.includes(asIndex)) location.reload()
+    //
+    // Compared after normalising both sides, because one page has three URLs.
+    // /about, /about/ and /about/index.html are all served, and the watcher
+    // only ever reports the third — so a plain comparison reloaded two of them
+    // and silently never reloaded the one people actually type or link to.
+    if (paths.some((p) => samePage(p, location.pathname))) location.reload()
   })
 })()</script>`
 }

package/lib/paths.js

@@ -0,0 +1,15 @@
+// Is a changed path the page a browser is looking at?
+//
+// One page has three URLs. /about, /about/ and /about/index.html are all
+// served, and the watcher only ever reports the third — so comparing them
+// literally reloads two of them and silently never reloads the one people
+// actually type or link to.
+//
+// Lives here, alone, because it is needed on both sides: the browser decides
+// with it, and the tests check it. The snippet inlines THIS function's source
+// rather than carrying its own copy, so the two cannot drift into disagreeing
+// about which page you are on.
+export function samePage(a, b) {
+    const norm = (p) => String(p).replace(/\/index\.html$/, '/').replace(/(.)\/$/, '$1')
+    return norm(a) === norm(b)
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mikser-io-live",
-  "version": "6.1.1",
+  "version": "6.1.2",
   "description": "Live reload for mikser-io, mounted on mikser's own HTTP server. Reloads from the build report rather than by watching files, so a CSS edit swaps the stylesheet in place and a build that touched other pages does not interrupt the one you are looking at.",
   "main": "index.js",
   "type": "module",

package/test/inject.test.js

@@ -3,7 +3,7 @@
 import { describe, it } from 'node:test'
 import assert from 'node:assert/strict'
 
-import { injectionPoint, injectInto } from '../index.js'
+import { injectionPoint, injectInto, samePage } from '../index.js'
 import { clientScript } from '../lib/client.js'
 
 describe('finding somewhere to put the snippet', () => {
@@ -95,3 +95,39 @@ describe('what it will and will not touch', () => {
         assert.match(clientScript('/live'), /&&/)
     })
 })
+
+describe('deciding whether a change is THIS page', () => {
+    // One page, three URLs. The watcher reports the file it saw —
+    // /about/index.html — and a browser may be sitting on any of the three.
+    it('treats every spelling of a page as the same page', () => {
+        for (const here of ['/about', '/about/', '/about/index.html']) {
+            assert.equal(samePage(here, '/about/index.html'), true, here)
+        }
+    })
+
+    it('treats the root the same way', () => {
+        for (const here of ['/', '/index.html']) {
+            assert.equal(samePage(here, '/index.html'), true, here)
+        }
+    })
+
+    it('still says no to a different page', () => {
+        // Over-matching would reload every browser on every build, which is
+        // the behaviour this whole comparison exists to avoid.
+        assert.equal(samePage('/contact/', '/about/index.html'), false)
+        assert.equal(samePage('/', '/about/index.html'), false)
+        assert.equal(samePage('/aboutus/', '/about/index.html'), false)
+    })
+})
+
+describe('the browser and the tests agree', () => {
+    it('the snippet uses the same comparison, not a copy of it', () => {
+        // Two implementations of "is this my page" is the shape that produced
+        // the bug: the tests would keep passing while the browser used
+        // something subtly different. The snippet inlines this function's
+        // own source.
+        const script = clientScript('/live')
+        assert.ok(script.includes(samePage.toString()),
+            'the client must carry THIS function, not a second version of it')
+    })
+})