@jsenv/core 24.1.0-alpha.0 → 24.3.1

package/src/internal/dev_server/event_source_client/event_source_client.js

@@ -0,0 +1,63 @@
+/* eslint-env browser */
+
+import { createEventSourceConnection } from "./event_source_connection.js"
+import {
+  getFileChanges,
+  addFileChange,
+  setFileChangeCallback,
+  reloadIfNeeded,
+} from "./file_changes.js"
+import {
+  isLivereloadEnabled,
+  setLivereloadPreference,
+} from "./livereload_preference.js"
+
+const eventsourceConnection = createEventSourceConnection(
+  document.location.href,
+  {
+    "file-added": ({ data }) => {
+      addFileChange({
+        file: data,
+        eventType: "added",
+      })
+    },
+    "file-modified": ({ data }) => {
+      addFileChange({
+        file: data,
+        eventType: "modified",
+      })
+    },
+    "file-removed": ({ data }) => {
+      addFileChange({
+        file: data,
+        eventType: "removed",
+      })
+    },
+  },
+  {
+    retryMaxAttempt: Infinity,
+    retryAllocatedMs: 20 * 1000,
+  },
+)
+
+const {
+  connect,
+  disconnect,
+  setConnectionStatusChangeCallback,
+  getConnectionStatus,
+} = eventsourceConnection
+
+connect()
+
+window.__jsenv_event_source_client__ = {
+  connect,
+  disconnect,
+  getConnectionStatus,
+  setConnectionStatusChangeCallback,
+  getFileChanges,
+  addFileChange,
+  setFileChangeCallback,
+  reloadIfNeeded,
+  isLivereloadEnabled,
+  setLivereloadPreference,
+}

package/src/internal/{toolbar/eventsource/connectEventSource.js → dev_server/event_source_client/event_source_connection.js}

@@ -1,15 +1,9 @@
-export const connectEventSource = (
+/* eslint-env browser */
+
+export const createEventSourceConnection = (
   eventSourceUrl,
   events = {},
-  {
-    connecting = () => {},
-    connected = () => {},
-    cancelled = () => {},
-    failed = () => {},
-    retryMaxAttempt = Infinity,
-    retryAllocatedMs = Infinity,
-    lastEventId,
-  } = {},
+  { retryMaxAttempt = Infinity, retryAllocatedMs = Infinity, lastEventId } = {},
 ) => {
   const { EventSource } = window
   if (typeof EventSource !== "function") {
@@ -17,83 +11,57 @@ export const connectEventSource = (
   }
 
   const eventSourceOrigin = new URL(eventSourceUrl).origin
+  Object.keys(events).forEach((eventName) => {
+    const eventCallback = events[eventName]
+    events[eventName] = (e) => {
+      if (e.origin === eventSourceOrigin) {
+        if (e.lastEventId) {
+          lastEventId = e.lastEventId
+        }
+        eventCallback(e)
+      }
+    }
+  })
 
-  // will be either abort, disconnect or a third function calling cancelled
-  // depending on connectionStatus
-  let cancelCurrentConnection = () => {}
+  let connectionStatus = "default"
+  let connectionStatusChangeCallback = () => {}
+  let _disconnect = () => {}
 
-  const reconnect = () => {
-    attemptConnection(
-      lastEventId
-        ? addLastEventIdIntoUrlSearchParams(eventSourceUrl, lastEventId)
-        : eventSourceUrl,
-    )
+  const goToStatus = (newStatus) => {
+    if (newStatus !== connectionStatus) {
+      connectionStatus = newStatus
+      connectionStatusChangeCallback()
+    }
   }
 
   const attemptConnection = (url) => {
     const eventSource = new EventSource(url, {
       withCredentials: true,
     })
-
-    let connectionStatus = "connecting"
-    const abort = () => {
-      if (connectionStatus !== "connecting") {
-        console.warn(`abort ignored because connection is ${connectionStatus}`)
+    _disconnect = () => {
+      if (
+        connectionStatus !== "connecting" &&
+        connectionStatus !== "connected"
+      ) {
+        console.warn(
+          `disconnect() ignored because connection is ${connectionStatus}`,
+        )
         return
       }
-      connectionStatus = "aborted"
       eventSource.onerror = undefined
       eventSource.close()
-      cancelled({ connect: reconnect })
-    }
-    cancelCurrentConnection = abort
-    connecting({ cancel: abort })
-
-    eventSource.onopen = () => {
-      connectionStatus = "connected"
-      const disconnect = () => {
-        if (connectionStatus !== "connected") {
-          console.warn(
-            `disconnect ignored because connection is ${connectionStatus}`,
-          )
-          return
-        }
-        connectionStatus = "disconnected"
-        eventSource.onerror = undefined
-        eventSource.close()
-        cancelled({ connect: reconnect })
-      }
-      cancelCurrentConnection = disconnect
-      connected({ cancel: disconnect })
+      Object.keys(events).forEach((eventName) => {
+        eventSource.removeEventListener(eventName, events[eventName])
+      })
+      goToStatus("disconnected")
     }
-
     let retryCount = 0
     let firstRetryMs = Date.now()
-
     eventSource.onerror = (errorEvent) => {
-      const considerFailed = () => {
-        connectionStatus = "disconnected"
-        failed({
-          cancel: () => {
-            if (connectionStatus !== "failed") {
-              console.warn(
-                `disable ignored because connection is ${connectionStatus}`,
-              )
-              return
-            }
-            connectionStatus = "disabled"
-            cancelled({ connect: reconnect })
-          },
-          connect: reconnect,
-        })
-      }
-
       if (errorEvent.target.readyState === EventSource.CONNECTING) {
         if (retryCount > retryMaxAttempt) {
           console.info(`could not connect after ${retryMaxAttempt} attempt`)
-          eventSource.onerror = undefined
-          eventSource.close()
-          considerFailed()
+          _disconnect()
           return
         }
 
@@ -105,33 +73,26 @@ export const connectEventSource = (
             console.info(
               `could not connect in less than ${retryAllocatedMs} ms`,
             )
-            eventSource.onerror = undefined
-            eventSource.close()
-            considerFailed()
+            _disconnect()
             return
           }
         }
 
-        connectionStatus = "connecting"
         retryCount++
-        connecting({ cancel: abort })
+        goToStatus("connecting")
         return
       }
 
       if (errorEvent.target.readyState === EventSource.CLOSED) {
-        considerFailed()
+        _disconnect()
         return
       }
     }
+    eventSource.onopen = () => {
+      goToStatus("connected")
+    }
     Object.keys(events).forEach((eventName) => {
-      eventSource.addEventListener(eventName, (e) => {
-        if (e.origin === eventSourceOrigin) {
-          if (e.lastEventId) {
-            lastEventId = e.lastEventId
-          }
-          events[eventName](e)
-        }
-      })
+      eventSource.addEventListener(eventName, events[eventName])
     })
     if (!events.hasOwnProperty("welcome")) {
       eventSource.addEventListener("welcome", (e) => {
@@ -140,20 +101,37 @@ export const connectEventSource = (
         }
       })
     }
+    goToStatus("connecting")
   }
 
-  attemptConnection(eventSourceUrl)
-  const disconnect = () => {
-    cancelCurrentConnection()
+  let connect = () => {
+    attemptConnection(eventSourceUrl)
+    connect = () => {
+      attemptConnection(
+        lastEventId
+          ? addLastEventIdIntoUrlSearchParams(eventSourceUrl, lastEventId)
+          : eventSourceUrl,
+      )
+    }
   }
 
   const removePageUnloadListener = listenPageUnload(() => {
-    disconnect()
+    _disconnect()
   })
 
-  return () => {
+  const destroy = () => {
     removePageUnloadListener()
-    disconnect()
+    _disconnect()
+  }
+
+  return {
+    getConnectionStatus: () => connectionStatus,
+    setConnectionStatusChangeCallback: (callback) => {
+      connectionStatusChangeCallback = callback
+    },
+    connect,
+    disconnect: () => _disconnect(),
+    destroy,
   }
 }
 

package/src/internal/dev_server/event_source_client/file_changes.js

@@ -0,0 +1,82 @@
+/* eslint-env browser */
+
+import { isLivereloadEnabled } from "./livereload_preference.js"
+
+let fileChanges = {}
+let filechangeCallback = () => {}
+
+export const getFileChanges = () => fileChanges
+
+export const addFileChange = ({ file, eventType }) => {
+  fileChanges[file] = eventType
+  if (isLivereloadEnabled()) {
+    reloadIfNeeded()
+  } else {
+    filechangeCallback()
+  }
+}
+
+export const setFileChangeCallback = (callback) => {
+  filechangeCallback = callback
+}
+
+export const reloadIfNeeded = () => {
+  const customReloads = []
+  const cssReloads = []
+  const fullReloads = []
+
+  Object.keys(fileChanges).forEach((key) => {
+    const livereloadCallback = window.__jsenv__.livereloadingCallbacks[key]
+    if (livereloadCallback) {
+      customReloads.push(() => {
+        delete fileChanges[key]
+        livereloadCallback({
+          reloadPage,
+        })
+      })
+    } else if (
+      key.endsWith(".css") ||
+      key.endsWith(".scss") ||
+      key.endsWith(".sass")
+    ) {
+      cssReloads.push(() => {
+        delete fileChanges[key]
+      })
+    } else {
+      fullReloads.push(key)
+    }
+  })
+
+  if (fullReloads.length > 0) {
+    reloadPage()
+    return
+  }
+
+  customReloads.forEach((customReload) => {
+    customReload()
+  })
+
+  if (cssReloads.length) {
+    reloadAllCss()
+    cssReloads.forEach((cssReload) => {
+      cssReload()
+    })
+  }
+
+  filechangeCallback()
+}
+
+const reloadAllCss = () => {
+  const links = Array.from(window.parent.document.getElementsByTagName("link"))
+  links.forEach((link) => {
+    if (link.rel === "stylesheet") {
+      const url = new URL(link.href)
+      url.searchParams.set("t", Date.now())
+      link.href = String(url)
+    }
+  })
+}
+
+const reloadPage = () => {
+  window.parent.location.reload(true)
+}

package/src/internal/dev_server/event_source_client/livereload_preference.js

@@ -0,0 +1,13 @@
+/* eslint-env browser */
+
+export const isLivereloadEnabled = () => {
+  const value = window.localStorage.hasOwnProperty("livereload")
+  if (value === "0") {
+    return false
+  }
+  return true
+}
+
+export const setLivereloadPreference = (value) => {
+  window.localStorage.setItem("livereload", value ? "1" : "0")
+}

package/src/internal/{exploring → dev_server/exploring}/exploring.html

@@ -4,7 +4,7 @@
     <title>Exploring</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta charset="utf-8" />
-    <link rel="icon" href="../jsenv.png" />
+    <link rel="icon" href="../../jsenv.png" />
     <link rel="stylesheet" type="text/css" href="./exploring.css" />
   </head>
 
@@ -35,7 +35,12 @@
           <div id="explorables-header">
             <div id="explorables_header_and_menu">
               <h2 style="white-space: nowrap">
-                <svg id="fileIconSvgConfig" viewBox="0 0 24 24">
+                <svg
+                  id="fileIconSvgConfig"
+                  viewBox="0 0 24 24"
+                  width="32"
+                  height="32"
+                >
                   <path d="M0 0h24v24H0V0z" fill="none" />
                   <path
                     d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"
@@ -69,6 +74,6 @@
         </section>
       </article>
     </div>
-    <script src="/.jsenv/exploring.index.js"></script>
+    <script type="module" src="./exploring.js"></script>
   </body>
 </html>

package/src/internal/{exploring → dev_server/exploring}/fetchExploringJson.js

@@ -1,6 +1,4 @@
-import { createDetailedMessage } from "@jsenv/logger"
-
-import { fetchJson } from "../browser-utils/fetchJson.js"
+import { fetchJson } from "../../browser_utils/fetchJson.js"
 
 export const fetchExploringJson = async ({ signal } = {}) => {
   try {
@@ -13,12 +11,9 @@ export const fetchExploringJson = async ({ signal } = {}) => {
       throw e
     }
     throw new Error(
-      createDetailedMessage(
-        `Cannot communicate with exploring server due to a network error`,
-        {
-          ["error stack"]: e.stack,
-        },
-      ),
+      `Cannot communicate with exploring server due to a network error
+--- error stack ---
+${e.stack}`,
     )
   }
 }

package/src/internal/dev_server/redirector/redirector.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Jsenv redirector</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8" />
+    <link rel="icon" href="data:," />
+  </head>
+
+  <body>
+    <script
+      type="importmap"
+      src="../../../../node_resolution.importmap"
+    ></script>
+    <script type="module">
+      import { scanBrowserRuntimeFeatures } from "../../browser_feature_detection/browser_feature_detection.js"
+
+      const redirect = async () => {
+        const redirectTarget = new URLSearchParams(window.location.search).get(
+          "redirect",
+        )
+        const browserRuntimeFeaturesReport = await scanBrowserRuntimeFeatures({
+          failFastOnFeatureDetection: true,
+        })
+
+        const href = `${getDirectoryUrl(
+          browserRuntimeFeaturesReport,
+        )}${redirectTarget}`
+        // It's IMPORTANT to use location.replace and NOT location.href = url
+        // otherwise it would break the back button
+        window.location.replace(href)
+      }
+
+      const getDirectoryUrl = ({
+        canAvoidCompilation,
+        outDirectoryRelativeUrl,
+        compileId,
+      }) => {
+        if (canAvoidCompilation) {
+          return `/`
+        }
+        return `/${outDirectoryRelativeUrl}${compileId}/`
+      }
+
+      redirect()
+    </script>
+  </body>
+</html>

package/src/internal/{toolbar → dev_server/toolbar}/compilation/toolbar.compilation.js

@@ -1,4 +1,4 @@
-import { scanBrowserRuntimeFeatures } from "../../runtime/createBrowserRuntime/scanBrowserRuntimeFeatures.js"
+import { scanBrowserRuntimeFeatures } from "../../../browser_feature_detection/browser_feature_detection.js"
 import { removeForceHideElement } from "../util/dom.js"
 import { enableVariant } from "../variant/variant.js"
 
@@ -133,8 +133,7 @@ const getBrowserSupportMessage = ({
 }) => {
   const parts = []
 
-  const { importmapSupported } = featuresReport
-  if (importmapSupported) {
+  if (featuresReport.importmap) {
     if (!missingOnly) {
       if (inlineImportMapIntoHTML) {
         parts.push(`importmaps are supported (only when inlined in html files)`)
@@ -146,8 +145,7 @@ const getBrowserSupportMessage = ({
     parts.push(`importmaps are not supported`)
   }
 
-  const { dynamicImportSupported } = featuresReport
-  if (dynamicImportSupported) {
+  if (featuresReport.dynamicImport) {
     if (!missingOnly) {
       parts.push(`dynamic imports are supported`)
     }
@@ -155,8 +153,7 @@ const getBrowserSupportMessage = ({
     parts.push(`dynamic imports are not supported`)
   }
 
-  const { topLevelAwaitSupported } = featuresReport
-  if (topLevelAwaitSupported) {
+  if (featuresReport.topLevelAwait) {
     if (!missingOnly) {
       parts.push(`top level await is supported`)
     }

package/src/internal/dev_server/toolbar/eventsource/toolbar.eventsource.js

@@ -0,0 +1,83 @@
+import { removeForceHideElement } from "../util/dom.js"
+import { enableVariant } from "../variant/variant.js"
+import {
+  toggleTooltip,
+  removeAutoShowTooltip,
+  autoShowTooltip,
+} from "../tooltip/tooltip.js"
+
+let livereloadingAvailableOnServer = false
+const parentEventSourceClient = window.parent.__jsenv_event_source_client__
+
+export const initToolbarEventSource = ({ livereloading }) => {
+  removeForceHideElement(document.querySelector("#eventsource-indicator"))
+  livereloadingAvailableOnServer = livereloading
+  if (!livereloadingAvailableOnServer) {
+    disableLivereloadSetting()
+  }
+  parentEventSourceClient.setConnectionStatusChangeCallback(() => {
+    updateEventSourceIndicator()
+  })
+  const livereloadCheckbox = document.querySelector("#toggle-livereload")
+  livereloadCheckbox.checked = parentEventSourceClient.isLivereloadEnabled()
+  livereloadCheckbox.onchange = () => {
+    parentEventSourceClient.setLivereloadPreference(livereloadCheckbox.checked)
+    updateEventSourceIndicator()
+  }
+  updateEventSourceIndicator()
+}
+
+const updateEventSourceIndicator = () => {
+  const eventSourceIndicator = document.querySelector("#eventsource-indicator")
+  const fileChanges = parentEventSourceClient.getFileChanges()
+  const changeCount = Object.keys(fileChanges).length
+  const eventSourceConnectionState =
+    parentEventSourceClient.getConnectionStatus()
+  enableVariant(eventSourceIndicator, {
+    eventsource: eventSourceConnectionState,
+    livereload: parentEventSourceClient.isLivereloadEnabled() ? "on" : "off",
+    changes: changeCount > 0 ? "yes" : "no",
+  })
+
+  const variantNode = document.querySelector(
+    "#eventsource-indicator > [data-when-active]",
+  )
+  variantNode.querySelector("button").onclick = () => {
+    toggleTooltip(eventSourceIndicator)
+  }
+
+  if (eventSourceConnectionState === "connecting") {
+    variantNode.querySelector("a").onclick = () => {
+      parentEventSourceClient.disconnect()
+    }
+  } else if (eventSourceConnectionState === "connected") {
+    removeAutoShowTooltip(eventSourceIndicator)
+    if (changeCount) {
+      const changeLink = variantNode.querySelector(".eventsource-changes-link")
+      changeLink.innerHTML = changeCount
+      changeLink.onclick = () => {
+        console.log(JSON.stringify(fileChanges, null, "  "), fileChanges)
+        // eslint-disable-next-line no-alert
+        window.parent.alert(JSON.stringify(fileChanges, null, "  "))
+      }
+      variantNode.querySelector(".eventsource-reload-link").onclick = () => {
+        parentEventSourceClient.reloadIfNeeded()
+      }
+    }
+  } else if (eventSourceConnectionState === "disconnected") {
+    autoShowTooltip(eventSourceIndicator)
+    variantNode.querySelector("a").onclick = () => {
+      parentEventSourceClient.connect()
+    }
+  }
+}
+
+const disableLivereloadSetting = () => {
+  document
+    .querySelector(".settings-livereload")
+    .setAttribute("data-disabled", "true")
+  document
+    .querySelector(".settings-livereload")
+    .setAttribute("title", `Livereload not available: disabled by server`)
+  document.querySelector("#toggle-livereload").disabled = true
+}