@jsenv/core 24.0.0 → 24.2.0

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

@@ -1,95 +1,6 @@
-import { fetchExploringJson } from "@jsenv/core/src/internal/exploring/fetchExploringJson.js"
+import { fetchExploringJson } from "@jsenv/core/src/internal/dev_server/exploring/fetchExploringJson.js"
 import { setAttributes, setStyles } from "./util/dom.js"
 
-/*
-We must connect to livereload server asap so that if a file is modified
-while page is loading we are notified of it.
-
-Otherwise it's possible that a file is loaded and used by browser then its modified before
-livereload connection is established.
-
-When toolbar is loaded it will open an other connection to server sent events and close this one.
-*/
-const connectLivereload = () => {
-  const { EventSource } = window
-  if (typeof EventSource !== "function") {
-    return () => {}
-  }
-
-  const getLivereloadPreference = () => {
-    return localStorage.hasOwnProperty("livereload")
-      ? JSON.parse(localStorage.getItem("livereload"))
-      : true
-  }
-
-  const url = document.location.href
-  let isOpen = false
-  let lastEventId
-  const latestChangeMap = {}
-
-  const events = {
-    "file-modified": ({ data }) => {
-      latestChangeMap[data] = "modified"
-      if (getLivereloadPreference()) {
-        window.location.reload(true)
-      }
-    },
-    "file-removed": ({ data }) => {
-      latestChangeMap[data] = "removed"
-      if (getLivereloadPreference()) {
-        window.location.reload(true)
-      }
-    },
-    "file-added": ({ data }) => {
-      latestChangeMap[data] = "added"
-      if (getLivereloadPreference()) {
-        window.location.reload(true)
-      }
-    },
-  }
-
-  const eventSourceOrigin = new URL(url).origin
-  const eventSource = new EventSource(url, {
-    withCredentials: true,
-  })
-
-  const disconnect = () => {
-    eventSource.close()
-  }
-
-  eventSource.onopen = () => {
-    isOpen = true
-  }
-
-  eventSource.onerror = (errorEvent) => {
-    if (errorEvent.target.readyState === EventSource.CLOSED) {
-      isOpen = false
-    }
-  }
-
-  Object.keys(events).forEach((eventName) => {
-    eventSource.addEventListener(eventName, (e) => {
-      if (e.origin === eventSourceOrigin) {
-        if (e.lastEventId) {
-          lastEventId = e.lastEventId
-        }
-        events[eventName](e)
-      }
-    })
-  })
-
-  return () => {
-    return {
-      isOpen,
-      latestChangeMap,
-      lastEventId,
-      disconnect,
-    }
-  }
-}
-// eslint-disable-next-line camelcase
-window.__jsenv_eventsource__ = connectLivereload()
-
 const injectToolbar = async () => {
   await new Promise((resolve) => {
     if (window.requestIdleCallback) {
@@ -129,7 +40,7 @@ const injectToolbar = async () => {
   })
   const iframeLoadedPromise = iframeToLoadedPromise(iframe)
   const jsenvToolbarHtmlServerUrl = resolveUrl(
-    "./src/internal/toolbar/toolbar.html",
+    "./src/internal/dev_server/toolbar/toolbar.html",
     jsenvDirectoryServerUrl,
   )
   // set iframe src BEFORE putting it into the DOM (prevent firefox adding an history entry)
@@ -165,7 +76,7 @@ const injectToolbar = async () => {
 
   const div = document.createElement("div")
   const jsenvLogoUrl = resolveUrl(
-    "./src/internal/toolbar/jsenv-logo.svg",
+    "./src/internal/dev_server/toolbar/jsenv-logo.svg",
     jsenvDirectoryServerUrl,
   )
   const jsenvLogoSvgSrc = jsenvLogoUrl

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

@@ -0,0 +1,37 @@
+import { jsenvCoreDirectoryUrl } from "@jsenv/core/src/internal/jsenvCoreDirectoryUrl.js"
+
+const injectorSourceRelativeUrl =
+  "./src/internal/dev_server/toolbar/toolbar.injector.js"
+const injectorBuildRelativeUrl = "./jsenv_toolbar_injector.js"
+const injectorBuildUrl = new URL(
+  "./dist/jsenv_toolbar_injector.js",
+  jsenvCoreDirectoryUrl,
+).href
+export const toolbarInjectorFileInfo = {
+  sourceRelativeUrl: injectorSourceRelativeUrl,
+  buildRelativeUrl: injectorBuildRelativeUrl,
+  buildUrl: injectorBuildUrl,
+}
+
+const htmlSourceUrl = new URL(
+  "./src/internal/dev_server/toolbar/toolbar.html",
+  jsenvCoreDirectoryUrl,
+).href
+export const toolbarHtmlFileInfo = {
+  sourceUrl: htmlSourceUrl,
+}
+
+const jsSourceRelativeUrl = "./src/internal/dev_server/toolbar/toolbar.main.js"
+const jsBuildRelativeUrl = "./jsenv_toolbar.js"
+const jsSourceUrl = new URL(
+  "./src/internal/dev_server/toolbar/toolbar.main.js",
+  jsenvCoreDirectoryUrl,
+).href
+const jsBuildUrl = new URL("./dist/jsenv_toolbar.js", jsenvCoreDirectoryUrl)
+  .href
+export const toolbarJsFileInfo = {
+  sourceRelativeUrl: jsSourceRelativeUrl,
+  buildRelativeUrl: jsBuildRelativeUrl,
+  sourceUrl: jsSourceUrl,
+  buildUrl: jsBuildUrl,
+}

package/src/internal/{toolbar → dev_server/toolbar}/util/fetching.js

@@ -1,4 +1,4 @@
-import { memoize } from "../../memoize.js"
+import { memoize } from "../../../memoize.js"
 
 const fetchPolyfill = async (...args) => {
   const { fetchUsingXHR } = await loadPolyfill()
@@ -6,7 +6,7 @@ const fetchPolyfill = async (...args) => {
 }
 
 const loadPolyfill = memoize(() =>
-  import("../../browser-utils/fetchUsingXHR.js"),
+  import("../../../browser-utils/fetchUsingXHR.js"),
 )
 
 export const fetchUrl =

package/src/internal/jsenvInternalFiles.js

@@ -48,64 +48,6 @@ export const sourcemapMappingFileInfo = {
   url: fileSystemPathToUrl(require.resolve("source-map/lib/mappings.wasm")),
 }
 
-// Exploring redirection
-// (auto redirection to a compile group depending on browser capabilities)
-export const jsenvExploringRedirectorHtmlFileInfo = {
-  url: resolveUrl(
-    "./src/internal/exploring/exploring.redirector.html",
-    jsenvCoreDirectoryUrl,
-  ),
-}
-
-export const jsenvExploringRedirectorJsFileInfo = {
-  jsenvRelativeUrl: "./src/internal/exploring/exploring.redirector.js",
-  jsenvBuildRelativeUrl: "./jsenv_exploring_redirector.js",
-  url: resolveUrl(
-    "./src/internal/exploring/exploring.redirector.js",
-    jsenvCoreDirectoryUrl,
-  ),
-  jsenvBuildUrl: resolveUrl(
-    "./dist/jsenv_exploring_redirector.js",
-    jsenvCoreDirectoryUrl,
-  ),
-}
-
-// Exploring index and toolbar
-export const jsenvExploringIndexJsFileInfo = {
-  jsenvRelativeUrl: "./src/internal/exploring/exploring.js",
-  jsenvBuildRelativeUrl: "./jsenv_exploring_index.js",
-  jsenvBuildUrl: resolveUrl(
-    "./dist/jsenv_exploring_index.js",
-    jsenvCoreDirectoryUrl,
-  ),
-}
-export const jsenvExploringIndexHtmlFileInfo = {
-  url: resolveUrl(
-    "./src/internal/exploring/exploring.html",
-    jsenvCoreDirectoryUrl,
-  ),
-}
-export const jsenvToolbarHtmlFileInfo = {
-  url: resolveUrl("./src/internal/toolbar/toolbar.html", jsenvCoreDirectoryUrl),
-}
-export const jsenvToolbarInjectorFileInfo = {
-  jsenvRelativeUrl: "./src/internal/toolbar/toolbar.injector.js",
-  jsenvBuildRelativeUrl: "./jsenv_toolbar_injector.js",
-  jsenvBuildUrl: resolveUrl(
-    "./dist/jsenv_toolbar_injector.js",
-    jsenvCoreDirectoryUrl,
-  ),
-}
-export const jsenvToolbarJsFileInfo = {
-  jsenvRelativeUrl: "./src/internal/toolbar/toolbar.main.js",
-  jsenvBuildRelativeUrl: "./jsenv_toolbar.js",
-  url: resolveUrl(
-    "./src/internal/toolbar/toolbar.main.js",
-    jsenvCoreDirectoryUrl,
-  ),
-  jsenvBuildUrl: resolveUrl("./dist/jsenv_toolbar.js", jsenvCoreDirectoryUrl),
-}
-
 export const jsenvSystemJsFileInfo = {
   url: resolveUrl("./src/internal/runtime/s.js", jsenvCoreDirectoryUrl),
   jsenvRelativeUrl: "./src/internal/runtime/s.js",

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

@@ -1,74 +0,0 @@
-import { connectEventSource } from "./connectEventSource.js"
-import { jsenvLogger } from "../util/jsenvLogger.js"
-
-export const connectCompileServerEventSource = (
-  fileRelativeUrl,
-  {
-    onFileModified,
-    onFileRemoved,
-    onConnecting,
-    onConnectionCancelled,
-    onConnectionFailed,
-    onConnected,
-    lastEventId,
-  },
-) => {
-  const eventSourceUrl = `${window.origin}/${fileRelativeUrl}`
-
-  let cancel = () => {}
-
-  const connect = () => {
-    return new Promise((resolve) => {
-      cancel = connectEventSource(
-        eventSourceUrl,
-        {
-          "file-modified": ({ data }) => {
-            jsenvLogger.debug(`${data} modified`)
-            onFileModified(data)
-          },
-          "file-removed": ({ data }) => {
-            jsenvLogger.debug(`${data} removed`)
-            onFileRemoved(data)
-          },
-        },
-        {
-          connecting: ({ cancel }) => {
-            jsenvLogger.debug(`connecting to ${eventSourceUrl}`)
-            onConnecting({
-              cancel: () => {
-                cancel()
-              },
-            })
-          },
-          connected: ({ cancel }) => {
-            jsenvLogger.debug(`connected to ${eventSourceUrl}`)
-            resolve(true)
-            onConnected({
-              cancel: () => {
-                cancel()
-              },
-            })
-          },
-          cancelled: ({ connect }) => {
-            jsenvLogger.debug(`disconnected from ${eventSourceUrl}`)
-            resolve(false)
-            onConnectionCancelled({ connect })
-          },
-          failed: ({ connect }) => {
-            jsenvLogger.debug(`disconnected from ${eventSourceUrl}`)
-            resolve(false)
-            onConnectionFailed({ connect })
-          },
-          retryMaxAttempt: Infinity,
-          retryAllocatedMs: 20 * 1000,
-          lastEventId,
-        },
-      )
-    })
-  }
-
-  return {
-    connect,
-    disconnect: () => cancel(),
-  }
-}

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

@@ -1,239 +0,0 @@
-import { removeForceHideElement } from "../util/dom.js"
-import { createPromiseAndHooks } from "../util/util.js"
-import { createPreference } from "../util/preferences.js"
-import { enableVariant } from "../variant/variant.js"
-
-import {
-  toggleTooltip,
-  removeAutoShowTooltip,
-  autoShowTooltip,
-} from "../tooltip/tooltip.js"
-import { connectCompileServerEventSource } from "./connectCompileServerEventSource.js"
-
-const livereloadingPreference = createPreference("livereloading")
-let eventSourceState = "default"
-let livereloadingAvailableOnServer = false
-
-export const initToolbarEventSource = ({
-  executedFileRelativeUrl,
-  livereloading,
-}) => {
-  const getLivereloadCallback = (originalFileProjectRelativeUrl) => {
-    const callbacks = window.parent.__jsenv__.livereloadingCallbacks
-    return callbacks[originalFileProjectRelativeUrl]
-  }
-
-  removeForceHideElement(document.querySelector("#eventsource-indicator"))
-  connectEventSource({ executedFileRelativeUrl, getLivereloadCallback })
-  livereloadingAvailableOnServer = livereloading
-  if (!livereloadingAvailableOnServer) {
-    disableLivereloadSetting()
-  }
-
-  const livereloadCheckbox = document.querySelector("#toggle-livereload")
-  livereloadCheckbox.checked = shouldLivereload()
-  livereloadCheckbox.onchange = () => {
-    livereloadingPreference.set(livereloadCheckbox.checked)
-    updateEventSourceIndicator()
-  }
-  updateEventSourceIndicator()
-}
-
-const shouldLivereload = () => {
-  return livereloadingAvailableOnServer && getLivereloadingPreference()
-}
-
-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
-}
-
-const parentEventSource = window.parent.__jsenv_eventsource__()
-const latestChangeMap = parentEventSource.latestChangeMap
-let eventSourceHooks = {}
-let eventSourceConnection
-let connectionReadyPromise
-
-const handleFileChange = ({ file, eventType, livereloadCallback }) => {
-  latestChangeMap[file] = eventType
-  updateEventSourceIndicator()
-
-  if (shouldLivereload()) {
-    if (livereloadCallback) {
-      livereloadCallback({
-        file,
-        latestChangeMap,
-        reloadPage,
-      })
-    } else if (
-      file.endsWith(".css") ||
-      file.endsWith(".scss") ||
-      file.endsWith(".sass")
-    ) {
-      reloadAllCss()
-      delete latestChangeMap[file]
-      updateEventSourceIndicator()
-    } else {
-      reloadPage()
-    }
-  }
-}
-
-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)
-}
-
-const reloadChanges = () => {
-  const fullReloadRequired = Object.keys(latestChangeMap).some(
-    (key) => !key.endsWith(".css"),
-  )
-  if (fullReloadRequired) {
-    reloadPage()
-    return
-  }
-  const cssReloadRequired = Object.keys(latestChangeMap).some((key) =>
-    key.endsWith(".css"),
-  )
-  if (cssReloadRequired) {
-    reloadAllCss()
-    Object.keys(latestChangeMap).forEach((key) => {
-      if (key.endsWith(".css")) {
-        delete latestChangeMap[key]
-      }
-      updateEventSourceIndicator()
-    })
-  }
-}
-
-const connectEventSource = ({
-  executedFileRelativeUrl,
-  getLivereloadCallback,
-}) => {
-  updateEventSourceIndicator()
-  connectionReadyPromise = createPromiseAndHooks()
-
-  eventSourceConnection = connectCompileServerEventSource(
-    executedFileRelativeUrl,
-    {
-      onFileModified: (file) => {
-        handleFileChange({
-          file,
-          eventType: "modified",
-          livereloadCallback: getLivereloadCallback(file),
-        })
-      },
-      onFileRemoved: (file) => {
-        handleFileChange({
-          file,
-          eventType: "removed",
-          livereloadCallback: getLivereloadCallback(file),
-        })
-      },
-      onFileAdded: (file) => {
-        handleFileChange({
-          file,
-          eventType: "added",
-          livereloadCallback: getLivereloadCallback(file),
-        })
-      },
-      onConnecting: ({ cancel }) => {
-        eventSourceState = "connecting"
-        eventSourceHooks = { abort: cancel }
-        updateEventSourceIndicator()
-      },
-      onConnectionCancelled: ({ connect }) => {
-        eventSourceState = "disabled"
-        eventSourceHooks = { connect }
-        updateEventSourceIndicator()
-      },
-      onConnectionFailed: ({ connect }) => {
-        eventSourceState = "failed"
-        eventSourceHooks = { reconnect: connect }
-        updateEventSourceIndicator()
-      },
-      onConnected: ({ cancel }) => {
-        eventSourceState = "connected"
-        eventSourceHooks = { disconnect: cancel }
-        updateEventSourceIndicator()
-        connectionReadyPromise.resolve()
-        parentEventSource.disconnect()
-      },
-      lastEventId: parentEventSource.lastEventId,
-    },
-  )
-
-  eventSourceConnection.connect()
-}
-
-const getLivereloadingPreference = () => {
-  return livereloadingPreference.has() ? livereloadingPreference.get() : true
-}
-
-export const disconnectEventSource = () => {
-  if (eventSourceConnection) {
-    eventSourceConnection.disconnect()
-    eventSourceConnection = undefined
-  }
-}
-
-export const waitEventSourceReady = () => connectionReadyPromise
-
-const updateEventSourceIndicator = () => {
-  const { connect, abort, reconnect } = eventSourceHooks
-
-  const eventSourceIndicator = document.querySelector("#eventsource-indicator")
-  const changeCount = Object.keys(latestChangeMap).length
-  enableVariant(eventSourceIndicator, {
-    eventsource: eventSourceState,
-    livereload: shouldLivereload() ? "on" : "off",
-    changes: changeCount > 0 ? "yes" : "no",
-  })
-
-  const variantNode = document.querySelector(
-    "#eventsource-indicator > [data-when-active]",
-  )
-  variantNode.querySelector("button").onclick = () => {
-    toggleTooltip(eventSourceIndicator)
-  }
-
-  if (eventSourceState === "disabled") {
-    variantNode.querySelector("a").onclick = connect
-  } else if (eventSourceState === "connecting") {
-    variantNode.querySelector("a").onclick = abort
-  } else if (eventSourceState === "connected") {
-    removeAutoShowTooltip(eventSourceIndicator)
-    if (changeCount) {
-      const changeLink = variantNode.querySelector(".eventsource-changes-link")
-      changeLink.innerHTML = changeCount
-      changeLink.onclick = () => {
-        console.log(
-          JSON.stringify(latestChangeMap, null, "  "),
-          latestChangeMap,
-        )
-        // eslint-disable-next-line no-alert
-        window.parent.alert(JSON.stringify(latestChangeMap, null, "  "))
-      }
-      variantNode.querySelector(".eventsource-reload-link").onclick =
-        reloadChanges
-    }
-  } else if (eventSourceState === "failed") {
-    autoShowTooltip(eventSourceIndicator)
-    variantNode.querySelector("a").onclick = reconnect
-  }
-}