@jsenv/core 26.0.1 → 27.0.0-alpha.2

package/src/dev/plugins/autoreload/client/event_source_client.js

@@ -0,0 +1,186 @@
+import { createEventSourceConnection } from "./event_source_connection.js"
+import {
+  isAutoreloadEnabled,
+  setAutoreloadPreference,
+} from "./autoreload_preference.js"
+import { compareTwoUrlPaths } from "./url_helpers.js"
+import {
+  reloadHtmlPage,
+  reloadDOMNodesUsingUrl,
+  reloadJsImport,
+} from "./reload.js"
+import { urlHotMetas } from "./import_meta_hot.js"
+
+const reloadMessages = []
+const reloadMessagesSignal = { onchange: () => {} }
+let pendingCallbacks = []
+let running = false
+const addToHotQueue = async (callback) => {
+  pendingCallbacks.push(callback)
+  dequeue()
+}
+const dequeue = async () => {
+  if (running) {
+    return
+  }
+  const callbacks = pendingCallbacks.slice()
+  pendingCallbacks = []
+  running = true
+  await callbacks.reduce(async (previous, callback) => {
+    await previous
+    await callback()
+  }, Promise.resolve())
+  running = false
+  if (pendingCallbacks.length) {
+    dequeue()
+  }
+}
+
+const applyReloadMessageEffects = async () => {
+  const someEffectIsFullReload = reloadMessages.some(
+    (reloadMessage) => reloadMessage.type === "full",
+  )
+  if (someEffectIsFullReload) {
+    reloadHtmlPage()
+    return
+  }
+
+  const onApplied = (reloadMessage) => {
+    const index = reloadMessages.indexOf(reloadMessage)
+    reloadMessages.splice(index, 1)
+    reloadMessagesSignal.onchange()
+  }
+  const setReloadMessagePromise = (reloadMessage, promise) => {
+    reloadMessage.status = "pending"
+    promise.then(
+      () => {
+        onApplied(reloadMessage)
+      },
+      (e) => {
+        // TODO: reuse error display from html supervisor
+        console.error(e)
+        console.error(
+          `[hmr] Failed to reload after ${reloadMessage.reason}.
+This could be due to syntax errors or importing non-existent modules (see errors above)`,
+        )
+        reloadMessage.status = "failed"
+        reloadMessagesSignal.onchange()
+      },
+    )
+  }
+  reloadMessages.forEach((reloadMessage) => {
+    if (reloadMessage.type === "hot") {
+      const promise = addToHotQueue(() => {
+        return applyHotReload(reloadMessage)
+      })
+      setReloadMessagePromise(reloadMessage, promise)
+    } else {
+      setReloadMessagePromise(reloadMessage, Promise.resolve())
+    }
+  })
+  reloadMessagesSignal.onchange() // reload status is "pending"
+}
+
+const applyHotReload = async ({ hotInstructions }) => {
+  await hotInstructions.reduce(
+    async (previous, { type, boundary, acceptedBy }) => {
+      await previous
+
+      const urlToFetch = new URL(boundary, `${window.location.origin}/`).href
+      const urlHotMeta = urlHotMetas[urlToFetch]
+      // TODO: we should return when there is no url hot meta because
+      // it means code was not executed (code splitting with dynamic import)
+      // if (!urlHotMeta) {return }
+
+      if (type === "prune") {
+        console.group(`[jsenv] prune: ${boundary} (inside ${acceptedBy})`)
+      } else if (acceptedBy === boundary) {
+        console.group(`[jsenv] hot reloading: ${boundary}`)
+      } else {
+        console.group(`[jsenv] hot reloading: ${acceptedBy} inside ${boundary}`)
+      }
+      if (urlHotMeta && urlHotMeta.disposeCallback) {
+        console.log(`call dispose callback`)
+        await urlHotMeta.disposeCallback()
+      }
+      if (type === "prune") {
+        delete urlHotMetas[urlToFetch]
+        console.log(`cleanup pruned url`)
+        console.groupEnd()
+        return null
+      }
+      if (type === "js_module") {
+        console.log(`importing js module`)
+        const namespace = await reloadJsImport(urlToFetch)
+        if (urlHotMeta && urlHotMeta.acceptCallback) {
+          await urlHotMeta.acceptCallback(namespace)
+        }
+        console.log(`js module import done`)
+        console.groupEnd()
+        return namespace
+      }
+      if (type === "html") {
+        if (!compareTwoUrlPaths(urlToFetch, window.location.href)) {
+          // we are not in that HTML page
+          return null
+        }
+        console.log(`reloading url`)
+        const urlToReload = new URL(acceptedBy, `${window.location.origin}/`)
+          .href
+        reloadDOMNodesUsingUrl(urlToReload)
+        console.log(`url reloaded`)
+        console.groupEnd()
+        return null
+      }
+      console.warn(`unknown update type: "${type}"`)
+      return null
+    },
+    Promise.resolve(),
+  )
+}
+
+const addReloadMessage = (reloadMessage) => {
+  reloadMessages.push(reloadMessage)
+  if (isAutoreloadEnabled()) {
+    applyReloadMessageEffects()
+  } else {
+    reloadMessagesSignal.onchange()
+  }
+}
+
+const eventsourceConnection = createEventSourceConnection(
+  document.location.href,
+  {
+    reload: ({ data }) => {
+      const reloadMessage = JSON.parse(data)
+      addReloadMessage(reloadMessage)
+    },
+  },
+  {
+    retryMaxAttempt: Infinity,
+    retryAllocatedMs: 20 * 1000,
+  },
+)
+
+const { status, connect, disconnect } = eventsourceConnection
+connect()
+window.__jsenv_event_source_client__ = {
+  status,
+  connect,
+  disconnect,
+  isAutoreloadEnabled,
+  setAutoreloadPreference,
+  urlHotMetas,
+  reloadMessages,
+  reloadMessagesSignal,
+  applyReloadMessageEffects,
+  addReloadMessage,
+}
+
+// const findHotMetaUrl = (originalFileRelativeUrl) => {
+//   return Object.keys(urlHotMetas).find((compileUrl) => {
+//     return (
+//       parseCompiledUrl(compileUrl).fileRelativeUrl === originalFileRelativeUrl
+//     )
+//   })
+// }

package/src/{internal/dev_server/event_source_client → dev/plugins/autoreload/client}/event_source_connection.js

@@ -1,5 +1,3 @@
-/* eslint-env browser */
-
 export const createEventSourceConnection = (
   eventSourceUrl,
   events = {},
@@ -23,28 +21,27 @@ export const createEventSourceConnection = (
     }
   })
 
-  let connectionStatus = "default"
-  let connectionStatusChangeCallback = () => {}
-  let _disconnect = () => {}
-
-  const goToStatus = (newStatus) => {
-    if (newStatus !== connectionStatus) {
-      connectionStatus = newStatus
-      connectionStatusChangeCallback()
-    }
+  const status = {
+    value: "default",
+    goTo: (value) => {
+      if (value === status.value) {
+        return
+      }
+      status.value = value
+      status.onchange()
+    },
+    onchange: () => {},
   }
+  let _disconnect = () => {}
 
   const attemptConnection = (url) => {
     const eventSource = new EventSource(url, {
       withCredentials: true,
     })
     _disconnect = () => {
-      if (
-        connectionStatus !== "connecting" &&
-        connectionStatus !== "connected"
-      ) {
+      if (status.value !== "connecting" && status.value !== "connected") {
         console.warn(
-          `disconnect() ignored because connection is ${connectionStatus}`,
+          `disconnect() ignored because connection is ${status.value}`,
         )
         return
       }
@@ -53,7 +50,7 @@ export const createEventSourceConnection = (
       Object.keys(events).forEach((eventName) => {
         eventSource.removeEventListener(eventName, events[eventName])
       })
-      goToStatus("disconnected")
+      status.goTo("disconnected")
     }
     let retryCount = 0
     let firstRetryMs = Date.now()
@@ -79,7 +76,7 @@ export const createEventSourceConnection = (
         }
 
         retryCount++
-        goToStatus("connecting")
+        status.goTo("connecting")
         return
       }
 
@@ -89,7 +86,7 @@ export const createEventSourceConnection = (
       }
     }
     eventSource.onopen = () => {
-      goToStatus("connected")
+      status.goTo("connected")
     }
     Object.keys(events).forEach((eventName) => {
       eventSource.addEventListener(eventName, events[eventName])
@@ -101,7 +98,7 @@ export const createEventSourceConnection = (
         }
       })
     }
-    goToStatus("connecting")
+    status.goTo("connecting")
   }
 
   let connect = () => {
@@ -116,7 +113,9 @@ export const createEventSourceConnection = (
   }
 
   const removePageUnloadListener = listenPageUnload(() => {
-    _disconnect()
+    if (status.value === "connecting" || status.value === "connected") {
+      _disconnect()
+    }
   })
 
   const destroy = () => {
@@ -125,10 +124,7 @@ export const createEventSourceConnection = (
   }
 
   return {
-    getConnectionStatus: () => connectionStatus,
-    setConnectionStatusChangeCallback: (callback) => {
-      connectionStatusChangeCallback = callback
-    },
+    status,
     connect,
     disconnect: () => _disconnect(),
     destroy,

package/src/dev/plugins/autoreload/client/import_meta_hot.js

@@ -0,0 +1,80 @@
+/*
+ * https://vitejs.dev/guide/api-hmr.html#hot-accept-deps-cb
+ * https://modern-web.dev/docs/dev-server/plugins/hmr/
+ */
+
+export const urlHotMetas = {}
+
+export const createImportMetaHot = (importMetaUrl) => {
+  const data = {}
+  const url = asUrlWithoutHmrQuery(importMetaUrl)
+
+  return {
+    data,
+    accept: (firstArg, secondArg) => {
+      if (!firstArg) {
+        addUrlMeta(url, {
+          dependencies: [url],
+          acceptCallback: () => {},
+        })
+        return
+      }
+      if (typeof firstArg === "function") {
+        addUrlMeta(url, {
+          dependencies: [url],
+          acceptCallback: firstArg,
+        })
+        return
+      }
+      if (typeof firstArg === "string") {
+        addUrlMeta(url, {
+          dependencies: [firstArg],
+          acceptCallback: secondArg,
+        })
+        return
+      }
+      if (Array.isArray(firstArg)) {
+        addUrlMeta(url, {
+          dependencies: firstArg,
+          acceptCallback: secondArg,
+        })
+        return
+      }
+      throw new Error(`invalid call to hot.accept()`)
+    },
+    dispose: (callback) => {
+      addUrlMeta(url, {
+        disposeCallback: () => {
+          return callback(data)
+        },
+      })
+    },
+    decline: () => {
+      addUrlMeta(url, {
+        declined: true,
+      })
+    },
+    invalidate: () => {
+      addUrlMeta(url, {
+        invalidated: true,
+      })
+    },
+  }
+}
+
+const addUrlMeta = (url, meta) => {
+  urlHotMetas[url] = {
+    ...urlHotMetas[url],
+    ...meta,
+  }
+}
+
+const asUrlWithoutHmrQuery = (url) => {
+  const urlObject = new URL(url)
+  if (urlObject.searchParams.has("hmr")) {
+    urlObject.searchParams.delete("hmr")
+    urlObject.searchParams.delete("v")
+    return urlObject.href
+  }
+  return url
+}

package/src/dev/plugins/autoreload/client/reload.js

@@ -0,0 +1,101 @@
+import { htmlAttributeSrcSet } from "@jsenv/utils/html_ast/html_attribute_src_set.js"
+
+import { injectQuery, compareTwoUrlPaths } from "./url_helpers.js"
+
+export const reloadHtmlPage = () => {
+  window.location.reload(true)
+}
+
+// This function can consider everything as hot reloadable:
+// - no need to check [hot-accept]and [hot-decline] attributes for instance
+// This is because if something should full reload, we receive "full_reload"
+// from server and this function is not called
+export const reloadDOMNodesUsingUrl = (urlToReload) => {
+  const mutations = []
+  const shouldReloadUrl = (urlCandidate) => {
+    return compareTwoUrlPaths(urlCandidate, urlToReload)
+  }
+  const visitNodeAttributeAsUrl = (node, attributeName) => {
+    let attribute = node[attributeName]
+    if (!attribute) {
+      return
+    }
+    if (SVGAnimatedString && attribute instanceof SVGAnimatedString) {
+      attribute = attribute.animVal
+    }
+    if (!shouldReloadUrl(attribute)) {
+      return
+    }
+    mutations.push(() => {
+      node[attributeName] = injectQuery(attribute, { hmr: Date.now() })
+    })
+  }
+  Array.from(document.querySelectorAll(`link[rel="stylesheet"]`)).forEach(
+    (link) => {
+      visitNodeAttributeAsUrl(link, "href")
+    },
+  )
+  Array.from(document.querySelectorAll(`link[rel="icon"]`)).forEach((link) => {
+    visitNodeAttributeAsUrl(link, "href")
+  })
+  Array.from(document.querySelector("script")).forEach((script) => {
+    visitNodeAttributeAsUrl(script, "src")
+  })
+  // There is no real need to update a.href because the ressource will be fetched when clicked.
+  // But in a scenario where the ressource was already visited and is in browser cache, adding
+  // the dynamic query param ensure the cache is invalidated
+  Array.from(document.querySelectorAll("a")).forEach((a) => {
+    visitNodeAttributeAsUrl(a, "href")
+  })
+  // About iframes:
+  // - By default iframe itself and everything inside trigger a parent page full-reload
+  // - Adding [hot-accept] on the iframe means parent page won't reload when iframe full/hot reload
+  //   In that case and if there is code in the iframe and parent doing post message communication:
+  //   you must put import.meta.hot.decline() for code involved in communication.
+  //   (both in parent and iframe)
+  Array.from(document.querySelectorAll("img")).forEach((img) => {
+    visitNodeAttributeAsUrl(img, "src")
+    const srcset = img.srcset
+    if (srcset) {
+      const srcCandidates = htmlAttributeSrcSet.parse(srcset)
+      srcCandidates.forEach((srcCandidate) => {
+        const url = new URL(srcCandidate.specifier, `${window.location.href}`)
+        if (shouldReloadUrl(url)) {
+          srcCandidate.specifier = injectQuery(url, { hmr: Date.now() })
+        }
+      })
+      mutations.push(() => {
+        img.srcset = htmlAttributeSrcSet.stringify(srcCandidates)
+      })
+    }
+  })
+  Array.from(document.querySelectorAll("source")).forEach((source) => {
+    visitNodeAttributeAsUrl(source, "src")
+  })
+  // svg image tag
+  Array.from(document.querySelectorAll("image")).forEach((image) => {
+    visitNodeAttributeAsUrl(image, "href")
+  })
+  // svg use
+  Array.from(document.querySelectorAll("use")).forEach((use) => {
+    visitNodeAttributeAsUrl(use, "href")
+  })
+  mutations.forEach((mutation) => {
+    mutation()
+  })
+}
+
+export const reloadJsImport = async (url) => {
+  const urlWithHmr = injectQuery(url, { hmr: Date.now() })
+  const namespace = await import(urlWithHmr)
+  return namespace
+}
+
+export const reloadAllCss = () => {
+  const links = Array.from(document.getElementsByTagName("link"))
+  links.forEach((link) => {
+    if (link.rel === "stylesheet") {
+      link.href = injectQuery(link.href, { hmr: Date.now() })
+    }
+  })
+}

package/src/dev/plugins/autoreload/client/url_helpers.js

@@ -0,0 +1,20 @@
+export const compareTwoUrlPaths = (url, otherUrl) => {
+  if (url === otherUrl) {
+    return true
+  }
+  const urlObject = new URL(url)
+  const otherUrlObject = new URL(otherUrl)
+  return (
+    urlObject.origin === otherUrlObject.origin &&
+    urlObject.pathname === otherUrlObject.pathname
+  )
+}
+
+export const injectQuery = (url, query) => {
+  const urlObject = new URL(url)
+  const { searchParams } = urlObject
+  Object.keys(query).forEach((key) => {
+    searchParams.set(key, query[key])
+  })
+  return String(urlObject)
+}

package/src/dev/plugins/autoreload/html_hot_dependencies.js

@@ -0,0 +1,156 @@
+import {
+  getHtmlNodeAttributeByName,
+  parseLinkNode,
+} from "@jsenv/utils/html_ast/html_ast.js"
+import { htmlAttributeSrcSet } from "@jsenv/utils/html_ast/html_attribute_src_set.js"
+
+// Some "smart" default applied to decide what should hot reload / fullreload:
+// By default:
+//   - hot reload on <img src="./image.png" />
+//   - fullreload on <script src="./file.js" />
+// Can be controlled by [hot-decline] and [hot-accept]:
+//   - fullreload on <img src="./image.png" hot-decline />
+//   - hot reload on <script src="./file.js" hot-accept />
+export const collectHotDataFromHtmlAst = (htmlAst) => {
+  const hotReferences = []
+
+  const onSpecifier = ({ specifier, node, attributeName, hotAccepted }) => {
+    if (
+      // explicitely enabled with [hot-accept] attribute
+      hotAccepted === true ||
+      htmlNodeCanHotReload(node)
+    ) {
+      hotReferences.push({
+        type: `${node.nodeName}_${attributeName}`,
+        specifier,
+      })
+    }
+  }
+
+  const visitUrlSpecifierAttribute = ({ node, attributeName, hotAccepted }) => {
+    const attribute = getHtmlNodeAttributeByName(node, attributeName)
+    const value = attribute ? attribute.value : undefined
+    if (value) {
+      onSpecifier({
+        specifier: value,
+        node,
+        attributeName,
+        hotAccepted,
+      })
+    }
+  }
+
+  const onNode = (node, { hotAccepted }) => {
+    // explicitely disabled with [hot-decline] attribute
+    if (hotAccepted === false) {
+      return
+    }
+    if (nodeNamesWithHref.includes(node.nodeName)) {
+      visitUrlSpecifierAttribute({
+        node,
+        attributeName: "href",
+        hotAccepted,
+      })
+      visitUrlSpecifierAttribute({
+        node,
+        attributeName: "content-href",
+        hotAccepted,
+      })
+    }
+    if (nodeNamesWithSrc.includes(node.nodeName)) {
+      visitUrlSpecifierAttribute({
+        node,
+        attributeName: "src",
+        hotAccepted,
+      })
+      visitUrlSpecifierAttribute({
+        node,
+        attributeName: "content-src",
+        hotAccepted,
+      })
+    }
+    if (nodeNamesWithSrcset.includes(node.nodeName)) {
+      const srcsetAttribute = getHtmlNodeAttributeByName(node, "srcset")
+      const srcset = srcsetAttribute ? srcsetAttribute.value : undefined
+      if (srcset) {
+        const srcCandidates = htmlAttributeSrcSet.parse(srcset)
+        srcCandidates.forEach((srcCandidate) => {
+          onSpecifier({
+            node,
+            specifier: srcCandidate.specifier,
+            attributeName: "srcset",
+            hotAccepted,
+          })
+        })
+      }
+    }
+  }
+
+  const iterate = (node, context) => {
+    context = {
+      ...context,
+      ...getNodeContext(node),
+    }
+    onNode(node, context)
+    const { childNodes } = node
+    if (childNodes) {
+      let i = 0
+      while (i < childNodes.length) {
+        const childNode = childNodes[i++]
+        iterate(childNode, context)
+      }
+    }
+  }
+  iterate(htmlAst, {})
+
+  return { hotReferences }
+}
+
+const nodeNamesWithHref = ["link", "a", "image", "use"]
+const nodeNamesWithSrc = ["script", "iframe", "img"]
+const nodeNamesWithSrcset = ["img", "source"]
+
+const getNodeContext = (node) => {
+  const context = {}
+  const hotAcceptAttribute = getHtmlNodeAttributeByName(node, "hot-accept")
+  if (hotAcceptAttribute) {
+    context.hotAccepted = true
+  }
+  const hotDeclineAttribute = getHtmlNodeAttributeByName(node, "hot-decline")
+  if (hotDeclineAttribute) {
+    context.hotAccepted = false
+  }
+  return context
+}
+
+const htmlNodeCanHotReload = (node) => {
+  if (node.nodeName === "link") {
+    const { isStylesheet, isRessourceHint } = parseLinkNode(node)
+    if (isStylesheet) {
+      // stylesheets can be hot replaced by default
+      return true
+    }
+    if (isRessourceHint) {
+      // for ressource hints html will be notified the underlying ressource has changed
+      // but we won't do anything (if the ressource is deleted we should?)
+      return true
+    }
+    return false
+  }
+  return [
+    // "script_src", // script src cannot hot reload
+    "a",
+    // Iframe will have their own event source client
+    // and can hot reload independently
+    // But if the iframe communicates with the parent iframe
+    // then we canot know for sure if the communication is broken
+    // ideally, if the iframe full-reload the page must full-reload too
+    // if the iframe hot-reload we don't know but we could assume there is nothing to do
+    // if there is [hot-accept] on the iframe
+    "iframe",
+    "img",
+    "source",
+    "image",
+    "use",
+  ].includes(node.nodeName)
+}