@jsenv/core 24.0.0 → 24.2.0

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") {
@@ -18,82 +12,40 @@ export const connectEventSource = (
 
   const eventSourceOrigin = new URL(eventSourceUrl).origin
 
-  // 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) => {
+    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 })
+      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,24 +57,24 @@ 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) {
@@ -140,21 +92,38 @@ 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()
   })
 
-  return () => {
+  const destroy = () => {
     removePageUnloadListener()
     disconnect()
   }
+
+  return {
+    getConnectionStatus: () => connectionStatus,
+    setConnectionStatusCallback: (callback) => {
+      connectionStatusChangeCallback = callback
+    },
+    connect,
+    disconnect,
+    destroy,
+  }
 }
 
 const addLastEventIdIntoUrlSearchParams = (url, lastEventId) => {

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>
 

package/src/internal/dev_server/exploring/exploring_file_info.js

@@ -0,0 +1,21 @@
+import { jsenvCoreDirectoryUrl } from "@jsenv/core/src/internal/jsenvCoreDirectoryUrl.js"
+
+const htmlSourceUrl = new URL(
+  "./src/internal/dev_server/exploring/exploring.html",
+  jsenvCoreDirectoryUrl,
+).href
+export const exploringIndexHtmlFileInfo = {
+  sourceUrl: htmlSourceUrl,
+}
+
+const jsSourceRelativeUrl = "./src/internal/dev_server/exploring/exploring.js"
+const jsBuildRelativeUrl = "./jsenv_exploring_index.js"
+const jsBuildUrl = new URL(
+  "./dist/jsenv_exploring_index.js",
+  jsenvCoreDirectoryUrl,
+).href
+export const exploringIndexJsFileInfo = {
+  sourceRelativeUrl: jsSourceRelativeUrl,
+  buildRelativeUrl: jsBuildRelativeUrl,
+  buildUrl: jsBuildUrl,
+}

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

@@ -1,6 +1,6 @@
 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 {

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

@@ -8,6 +8,6 @@
   </head>
 
   <body>
-    <script src="/.jsenv/exploring.redirector.js"></script>
+    <script src="/.jsenv/redirector.js"></script>
   </body>
 </html>

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

@@ -1,4 +1,4 @@
-import { scanBrowserRuntimeFeatures } from "../runtime/createBrowserRuntime/scanBrowserRuntimeFeatures.js"
+import { scanBrowserRuntimeFeatures } from "../../runtime/createBrowserRuntime/scanBrowserRuntimeFeatures.js"
 
 const redirect = async () => {
   const redirectTarget = new URLSearchParams(window.location.search).get(

package/src/internal/dev_server/redirector/redirector_file_info.js

@@ -0,0 +1,24 @@
+/*
+ * auto redirection to a compile group depending on browser capabilities
+ */
+
+import { jsenvCoreDirectoryUrl } from "@jsenv/core/src/internal/jsenvCoreDirectoryUrl.js"
+
+const htmlSourceUrl = new URL(
+  "./src/internal/dev_server/redirector/redirector.html",
+  jsenvCoreDirectoryUrl,
+).href
+export const redirectorHtmlFileInfo = {
+  sourceUrl: htmlSourceUrl,
+}
+
+const jsSourceRelativeUrl = "./src/internal/dev_server/redirector/redirector.js"
+const jsBuildRelativeUrl = "./jsenv_redirector.js"
+const jsSourceUrl = new URL(jsSourceRelativeUrl, jsenvCoreDirectoryUrl).href
+const jsBuildUrl = new URL("./dist/jsenv_redirector.js", jsenvCoreDirectoryUrl)
+export const redirectorJsFileInfo = {
+  sourceRelativeUrl: jsSourceRelativeUrl,
+  buildRelativeUrl: jsBuildRelativeUrl,
+  sourceUrl: jsSourceUrl,
+  buildUrl: jsBuildUrl,
+}

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 "../../../runtime/createBrowserRuntime/scanBrowserRuntimeFeatures.js"
 import { removeForceHideElement } from "../util/dom.js"
 import { enableVariant } from "../variant/variant.js"
 

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
+}

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

@@ -130,9 +130,9 @@
               </svg>
             </button>
           </div>
-          <div data-when="eventsource:failed">
+          <div data-when="eventsource:disconnected">
             <div class="tooltip">
-              Cannot connect to server
+              Disconnected from server
               <br />
               <div class="tooltipAction">
                 <a href="javascript:void(0);">
@@ -147,7 +147,7 @@
                       d="M16 9v4.66l-3.5 3.51V19h-1v-1.83L8 13.65V9h8m0-6h-2v4h-4V3H8v4h-.01C6.9 6.99 6 7.89 6 8.98v5.52L9.5 18v3h5v-3l3.5-3.51V9c0-1.1-.9-2-2-2V3z"
                     />
                   </svg>
-                  retry
+                  connect
                 </a>
               </div>
             </div>
@@ -155,7 +155,7 @@
               <svg>
                 <circle
                   class="eventsource-circle"
-                  data-variant="failed"
+                  data-variant="off"
                   cx="20"
                   cy="20"
                   r="5"
@@ -218,39 +218,6 @@
               </svg>
             </button>
           </div>
-          <div data-when="eventsource:disabled">
-            <div class="tooltip">
-              Disconnected from server
-              <br />
-              <div class="tooltipAction">
-                <a href="javascript:void(0);">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    id="powerIconSvg"
-                    class="tooltipIcon"
-                  >
-                    <path d="M0 0h24v24H0V0z" fill="none" />
-                    <path
-                      d="M16 9v4.66l-3.5 3.51V19h-1v-1.83L8 13.65V9h8m0-6h-2v4h-4V3H8v4h-.01C6.9 6.99 6 7.89 6 8.98v5.52L9.5 18v3h5v-3l3.5-3.51V9c0-1.1-.9-2-2-2V3z"
-                    />
-                  </svg>
-                  connect
-                </a>
-              </div>
-            </div>
-            <button>
-              <svg>
-                <circle
-                  class="eventsource-circle"
-                  data-variant="off"
-                  cx="20"
-                  cy="20"
-                  r="5"
-                />
-              </svg>
-            </button>
-          </div>
         </section>
 
         <section id="settings" data-responsive-toolbar-element>