@jsenv/core 29.8.6 → 29.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "29.8.6",
+  "version": "29.9.1",
   "description": "Tool to develop, test and build js projects",
   "license": "MIT",
   "author": {
@@ -73,7 +73,7 @@
     "@jsenv/importmap": "1.2.1",
     "@jsenv/integrity": "0.0.1",
     "@jsenv/log": "3.3.1",
-    "@jsenv/node-esm-resolution": "1.0.0",
+    "@jsenv/node-esm-resolution": "1.0.1",
     "@jsenv/server": "14.1.10",
     "@jsenv/sourcemap": "1.0.7",
     "@jsenv/uneval": "1.6.0",

package/src/build/build.js

@@ -669,43 +669,43 @@ ${ANSI.color(buildUrl, ANSI.MAGENTA)}
           }
           if (rawUrlInfo.isEntryPoint) {
             addToBundlerIfAny(rawUrlInfo)
-            if (rawUrlInfo.type === "html") {
-              rawUrlInfo.dependencies.forEach((dependencyUrl) => {
-                const dependencyUrlInfo = rawGraph.getUrlInfo(dependencyUrl)
-                if (dependencyUrlInfo.isInline) {
-                  if (dependencyUrlInfo.type === "js_module") {
-                    // bundle inline script type module deps
-                    dependencyUrlInfo.references.forEach((inlineScriptRef) => {
-                      if (inlineScriptRef.type === "js_import") {
-                        const inlineUrlInfo = rawGraph.getUrlInfo(
-                          inlineScriptRef.url,
-                        )
-                        addToBundlerIfAny(inlineUrlInfo)
-                      }
-                    })
-                  }
-                  // inline content cannot be bundled
-                  return
+          }
+          if (rawUrlInfo.type === "html") {
+            rawUrlInfo.dependencies.forEach((dependencyUrl) => {
+              const dependencyUrlInfo = rawGraph.getUrlInfo(dependencyUrl)
+              if (dependencyUrlInfo.isInline) {
+                if (dependencyUrlInfo.type === "js_module") {
+                  // bundle inline script type module deps
+                  dependencyUrlInfo.references.forEach((inlineScriptRef) => {
+                    if (inlineScriptRef.type === "js_import") {
+                      const inlineUrlInfo = rawGraph.getUrlInfo(
+                        inlineScriptRef.url,
+                      )
+                      addToBundlerIfAny(inlineUrlInfo)
+                    }
+                  })
                 }
-                addToBundlerIfAny(dependencyUrlInfo)
-              })
-              rawUrlInfo.references.forEach((reference) => {
+                // inline content cannot be bundled
+                return
+              }
+              addToBundlerIfAny(dependencyUrlInfo)
+            })
+            rawUrlInfo.references.forEach((reference) => {
+              if (
+                reference.isResourceHint &&
+                reference.expectedType === "js_module"
+              ) {
+                const referencedUrlInfo = rawGraph.getUrlInfo(reference.url)
                 if (
-                  reference.isResourceHint &&
-                  reference.expectedType === "js_module"
+                  referencedUrlInfo &&
+                  // something else than the resource hint is using this url
+                  referencedUrlInfo.dependents.size > 0
                 ) {
-                  const referencedUrlInfo = rawGraph.getUrlInfo(reference.url)
-                  if (
-                    referencedUrlInfo &&
-                    // something else than the resource hint is using this url
-                    referencedUrlInfo.dependents.size > 0
-                  ) {
-                    addToBundlerIfAny(referencedUrlInfo)
-                  }
+                  addToBundlerIfAny(referencedUrlInfo)
                 }
-              })
-              return
-            }
+              }
+            })
+            return
           }
           // File referenced with new URL('./file.js', import.meta.url)
           // are entry points that should be bundled

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

@@ -1,8 +1,4 @@
 import { urlHotMetas } from "../../import_meta_hot/client/import_meta_hot.js"
-import {
-  isAutoreloadEnabled,
-  setAutoreloadPreference,
-} from "./autoreload_preference.js"
 import { compareTwoUrlPaths } from "./url_helpers.js"
 import {
   reloadHtmlPage,
@@ -12,39 +8,63 @@ import {
 
 const reloader = {
   urlHotMetas,
-  isAutoreloadEnabled,
-  setAutoreloadPreference,
-  status: "idle",
-  currentExecution: null,
-  onstatuschange: () => {},
-  setStatus: (status) => {
-    reloader.status = status
-    reloader.onstatuschange()
+  status: {
+    value: "idle",
+    onchange: () => {},
+    goTo: (value) => {
+      reloader.status.value = value
+      reloader.status.onchange()
+    },
   },
-  messages: [],
-  addMessage: (reloadMessage) => {
-    reloader.messages.push(reloadMessage)
-    if (isAutoreloadEnabled()) {
-      reloader.reload()
-    } else {
-      reloader.setStatus("can_reload")
-    }
+  autoreload: {
+    enabled: ["1", null].includes(window.localStorage.getItem("autoreload")),
+    onchange: () => {},
+    enable: () => {
+      reloader.autoreload.enabled = true
+      window.localStorage.setItem("autoreload", "1")
+      reloader.autoreload.onchange()
+    },
+    disable: () => {
+      reloader.autoreload.enabled = false
+      window.localStorage.setItem("autoreload", "0")
+      reloader.autoreload.onchange()
+    },
   },
+  changes: {
+    value: [],
+    onchange: () => {},
+    add: (reloadMessage) => {
+      reloader.changes.value.push(reloadMessage)
+      reloader.changes.onchange()
+      if (reloader.autoreload.enabled) {
+        reloader.reload()
+      } else {
+        reloader.status.goTo("can_reload")
+      }
+    },
+    remove: (reloadMessage) => {
+      const index = reloader.changes.value.indexOf(reloadMessage)
+      if (index > -1) {
+        reloader.changes.value.splice(index, 1)
+        if (reloader.changes.value.length === 0) {
+          reloader.status.goTo("idle")
+        }
+        reloader.changes.onchange()
+      }
+    },
+  },
+  currentExecution: null,
   reload: () => {
-    const someEffectIsFullReload = reloader.messages.some(
+    const someEffectIsFullReload = reloader.changes.value.some(
       (reloadMessage) => reloadMessage.type === "full",
     )
     if (someEffectIsFullReload) {
       reloadHtmlPage()
       return
     }
-    reloader.setStatus("reloading")
+    reloader.status.goTo("reloading")
     const onApplied = (reloadMessage) => {
-      const index = reloader.messages.indexOf(reloadMessage)
-      reloader.messages.splice(index, 1)
-      if (reloader.messages.length === 0) {
-        reloader.setStatus("idle")
-      }
+      reloader.changes.remove(reloadMessage)
     }
     const setReloadMessagePromise = (reloadMessage, promise) => {
       promise.then(
@@ -53,7 +73,7 @@ const reloader = {
           reloader.currentExecution = null
         },
         (e) => {
-          reloader.setStatus("failed")
+          reloader.status.goTo("failed")
           if (typeof window.reportError === "function") {
             window.reportError(e)
           } else {
@@ -67,7 +87,7 @@ This could be due to syntax errors or importing non-existent modules (see errors
         },
       )
     }
-    reloader.messages.forEach((reloadMessage) => {
+    reloader.changes.value.forEach((reloadMessage) => {
       if (reloadMessage.type === "hot") {
         const promise = addToHotQueue(() => {
           return applyHotReload(reloadMessage)
@@ -162,7 +182,13 @@ const applyHotReload = async ({ hotInstructions }) => {
         return namespace
       }
       if (type === "html") {
-        if (!compareTwoUrlPaths(urlToFetch, window.location.href)) {
+        const isRootHtmlFile =
+          window.location.pathname === "/" &&
+          new URL(urlToFetch).pathname.slice(1).indexOf("/") === -1
+        if (
+          !isRootHtmlFile &&
+          !compareTwoUrlPaths(urlToFetch, window.location.href)
+        ) {
           // we are not in that HTML page
           return null
         }
@@ -194,6 +220,6 @@ const applyHotReload = async ({ hotInstructions }) => {
 window.__reloader__ = reloader
 window.__server_events__.listenEvents({
   reload: (reloadServerEvent) => {
-    reloader.addMessage(reloadServerEvent.data)
+    reloader.changes.add(reloadServerEvent.data)
   },
 })

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

@@ -4,10 +4,13 @@ export const compareTwoUrlPaths = (url, otherUrl) => {
   }
   const urlObject = new URL(url)
   const otherUrlObject = new URL(otherUrl)
-  return (
-    urlObject.origin === otherUrlObject.origin &&
-    urlObject.pathname === otherUrlObject.pathname
-  )
+  if (urlObject.origin !== otherUrlObject.origin) {
+    return false
+  }
+  if (urlObject.pathname !== otherUrlObject.pathname) {
+    return false
+  }
+  return true
 }
 
 export const injectQuery = (url, query) => {

package/src/plugins/explorer/client/explorer.html

@@ -175,6 +175,7 @@
         padding-right: 25px;
         padding-top: 25px;
         background-color: #204143;
+        position: relative;
       }
 
       #explorables_header_bottom_spacing {
@@ -220,7 +221,7 @@
         fill: #24b1b0;
       }
 
-      #fileIconSvgConfig {
+      #explorables_icon {
         width: 25px;
         height: 25px;
         stroke: none;
@@ -325,9 +326,9 @@
         <section id="explorables">
           <div id="explorables-header">
             <div id="explorables_header_and_menu">
-              <h2 style="white-space: nowrap">
+              <h2>
                 <svg
-                  id="fileIconSvgConfig"
+                  id="explorables_icon"
                   viewBox="0 0 24 24"
                   width="32"
                   height="32"

package/src/plugins/plugins.js

@@ -83,8 +83,8 @@ export const getCorePlugins = ({
     jsenvPluginHttpUrls(),
     jsenvPluginUrlResolution({
       runtimeCompat,
-      urlResolution,
       clientMainFileUrl,
+      urlResolution,
     }),
     jsenvPluginUrlVersion(),
     jsenvPluginCommonJsGlobals(),

package/src/plugins/ribbon/jsenv_plugin_ribbon.js

@@ -14,7 +14,9 @@ export const jsenvPluginRibbon = ({
   const ribbonClientFileUrl = new URL("./client/ribbon.js", import.meta.url)
   const associations = URL_META.resolveAssociations(
     {
-      ribbon: { [htmlInclude]: true },
+      ribbon: {
+        [htmlInclude]: true,
+      },
     },
     rootDirectoryUrl,
   )
@@ -23,6 +25,9 @@ export const jsenvPluginRibbon = ({
     appliesDuring: "dev",
     transformUrlContent: {
       html: (urlInfo, context) => {
+        if (urlInfo.data.isJsenvToolbar || urlInfo.data.noribbon) {
+          return null
+        }
         const { ribbon } = URL_META.applyAssociations({
           url: asUrlWithoutSearch(urlInfo.url),
           associations,

package/src/plugins/server_events/client/connection_manager.js

@@ -34,7 +34,8 @@ export const createConnectionManager = (
     let msSpent = 0
     const attempt = () => {
       readyState.goTo(READY_STATES.CONNECTING)
-      _disconnect = attemptConnection({
+      let timeout
+      const cancelAttempt = attemptConnection({
         onClosed: () => {
           if (!retry) {
             readyState.goTo(READY_STATES.CLOSED)
@@ -55,7 +56,6 @@ export const createConnectionManager = (
             )
             return
           }
-
           // if closed while open -> connection lost
           // otherwise it's the attempt to connect for the first time
           // or to reconnect
@@ -63,7 +63,7 @@ export const createConnectionManager = (
             console.info(`[jsenv] server connection lost; retrying to connect`)
           }
           retryCount++
-          setTimeout(() => {
+          timeout = setTimeout(() => {
             msSpent += retryAfter
             attempt()
           }, retryAfter)
@@ -73,6 +73,11 @@ export const createConnectionManager = (
           // console.info(`[jsenv] connected to server`)
         },
       })
+      _disconnect = () => {
+        cancelAttempt()
+        clearTimeout(timeout)
+        readyState.goTo(READY_STATES.CLOSED)
+      }
     }
     attempt()
   }

package/src/plugins/supervisor/client/supervisor.js

@@ -664,8 +664,10 @@ window.__supervisor__ = (() => {
           errorDetailsPromise,
         })
         if (window.__reloader__) {
-          window.__reloader__.onstatuschange = () => {
-            if (window.__reloader__.status === "reloading") {
+          const onchange = window.__reloader__.status.onchange
+          window.__reloader__.status.onchange = () => {
+            onchange()
+            if (window.__reloader__.status.value === "reloading") {
               removeErrorOverlay()
             }
           }

package/src/plugins/url_resolution/jsenv_plugin_url_resolution.js

@@ -70,10 +70,11 @@ export const jsenvPluginUrlResolution = ({
     }
     if (node_esm) {
       if (node_esm === true) node_esm = {}
-      const { packageConditions } = node_esm
+      const { packageConditions, preservesSymlink } = node_esm
       resolvers[urlType] = createNodeEsmResolver({
         runtimeCompat,
         packageConditions,
+        preservesSymlink,
       })
     } else if (web) {
       resolvers[urlType] = resolveUrlUsingWebResolution
@@ -81,7 +82,10 @@ export const jsenvPluginUrlResolution = ({
   })
 
   if (!resolvers.js_module) {
-    resolvers.js_module = createNodeEsmResolver({ runtimeCompat })
+    resolvers.js_module = createNodeEsmResolver({
+      runtimeCompat,
+      preservesSymlink: true,
+    })
   }
   if (!resolvers["*"]) {
     resolvers["*"] = resolveUrlUsingWebResolution

package/src/plugins/url_resolution/node_esm_resolver.js

@@ -16,7 +16,11 @@ import {
   defaultReadPackageJson,
 } from "@jsenv/node-esm-resolution"
 
-export const createNodeEsmResolver = ({ runtimeCompat, packageConditions }) => {
+export const createNodeEsmResolver = ({
+  runtimeCompat,
+  packageConditions,
+  preservesSymlink,
+}) => {
   const nodeRuntimeEnabled = Object.keys(runtimeCompat).includes("node")
   // https://nodejs.org/api/esm.html#resolver-algorithm-specification
   packageConditions = packageConditions || [
@@ -37,6 +41,7 @@ export const createNodeEsmResolver = ({ runtimeCompat, packageConditions }) => {
       conditions: packageConditions,
       parentUrl,
       specifier: reference.specifier,
+      preservesSymlink,
     })
     if (context.dev) {
       const dependsOnPackageJson =

package/dist/js/html_src_set.js

@@ -1,20 +0,0 @@
-const parseSrcSet = srcset => {
-  const srcCandidates = [];
-  srcset.split(",").forEach(set => {
-    const [specifier, descriptor] = set.trim().split(" ");
-    srcCandidates.push({
-      specifier,
-      descriptor
-    });
-  });
-  return srcCandidates;
-};
-const stringifySrcSet = srcCandidates => {
-  const srcset = srcCandidates.map(({
-    specifier,
-    descriptor
-  }) => `${specifier} ${descriptor}`).join(", ");
-  return srcset;
-};
-
-export { parseSrcSet as p, stringifySrcSet as s };

package/src/plugins/autoreload/client/autoreload_preference.js

@@ -1,11 +0,0 @@
-export const isAutoreloadEnabled = () => {
-  const value = window.localStorage.getItem("autoreload")
-  if (value === "0") {
-    return false
-  }
-  return true
-}
-
-export const setAutoreloadPreference = (value) => {
-  window.localStorage.setItem("autoreload", value ? "1" : "0")
-}

package/src/plugins/toolbar/client/animation/toolbar_animation.js

@@ -1,39 +0,0 @@
-import { createPreference } from "../util/preferences.js"
-
-const animationPreference = createPreference("animation")
-
-export const renderToolbarAnimation = () => {
-  const animCheckbox = document.querySelector("#toggle-anims")
-  animCheckbox.checked = getAnimationPreference()
-  animCheckbox.onchange = () => {
-    setAnimationPreference(animCheckbox.checked)
-    onPreferenceChange(animCheckbox.checked)
-  }
-  onPreferenceChange()
-
-  // enable toolbar transition only after first render
-  setTimeout(() => {
-    document.querySelector("#toolbar").setAttribute("data-animate", "")
-  })
-}
-
-const onPreferenceChange = (value = getAnimationPreference()) => {
-  if (value) {
-    enableAnimation()
-  } else {
-    disableAnimation()
-  }
-}
-
-const getAnimationPreference = () =>
-  animationPreference.has() ? animationPreference.get() : true
-
-const setAnimationPreference = (value) => animationPreference.set(value)
-
-const enableAnimation = () => {
-  document.documentElement.removeAttribute("data-animation-disabled")
-}
-
-const disableAnimation = () => {
-  document.documentElement.setAttribute("data-animation-disabled", "")
-}

package/src/plugins/toolbar/client/eventsource/eventsource.css

@@ -1,83 +0,0 @@
-#eventsource-indicator button {
-  position: relative;
-}
-
-#eventsource-indicator button svg {
-  width: 40px;
-  height: 40px;
-}
-
-#eventsource-indicator .event-source-autoreload {
-  position: absolute;
-  width: 32px;
-  height: 32px;
-  margin: 4px;
-  left: 0;
-  top: 0;
-}
-
-.event-source-autoreload[data-variant="enabled"] {
-  color: green;
-}
-
-#eventsource-indicator .event-source-icon {
-  width: 40px;
-  height: 40px;
-}
-
-.eventsource-circle {
-  stroke: black;
-  stroke-width: 0;
-}
-
-.eventsource-circle[data-variant="off"] {
-  fill: #cecece;
-}
-
-.eventsource-circle[data-variant="connecting"] {
-  fill: #cecece;
-  animation: wink 1.2s ease-out infinite;
-  transform-origin: center;
-}
-
-@keyframes wink {
-  0% {
-    opacity: 0;
-  }
-  80% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-.eventsource-ring {
-  stroke: rgba(206, 206, 206, 0.46);
-  stroke-width: 4;
-  fill: transparent;
-  animation: pulse 1.2s ease-out infinite;
-  transform-origin: center;
-}
-
-@keyframes pulse {
-  0% {
-    transform: scale(0);
-    opacity: 0;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 0;
-  }
-}
-
-.eventsource-circle[data-variant="connected"] {
-  fill: green;
-}
-
-.eventsource-circle[data-variant="failed"] {
-  fill: #cc0000;
-}

package/src/plugins/toolbar/client/eventsource/toolbar_eventsource.js

@@ -1,57 +0,0 @@
-import { removeForceHideElement } from "../util/dom.js"
-import { enableVariant } from "../variant/variant.js"
-import {
-  toggleTooltip,
-  removeAutoShowTooltip,
-  autoShowTooltip,
-} from "../tooltip/tooltip.js"
-
-const parentEventSourceClient = window.parent.__jsenv_event_source_client__
-
-export const initToolbarEventSource = () => {
-  removeForceHideElement(document.querySelector("#eventsource-indicator"))
-  if (!parentEventSourceClient) {
-    disableAutoreloadSetting()
-    return
-  }
-  parentEventSourceClient.status.onchange = () => {
-    updateEventSourceIndicator()
-  }
-  updateEventSourceIndicator()
-}
-
-const updateEventSourceIndicator = () => {
-  const eventSourceIndicator = document.querySelector("#eventsource-indicator")
-  const eventSourceConnectionState = parentEventSourceClient.status.value
-  enableVariant(eventSourceIndicator, {
-    eventsource: eventSourceConnectionState,
-  })
-  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)
-  } else if (eventSourceConnectionState === "disconnected") {
-    autoShowTooltip(eventSourceIndicator)
-    variantNode.querySelector("a").onclick = () => {
-      parentEventSourceClient.connect()
-    }
-  }
-}
-
-const disableAutoreloadSetting = () => {
-  document
-    .querySelector(".settings-autoreload")
-    .setAttribute("data-disabled", "true")
-  document
-    .querySelector(".settings-autoreload")
-    .setAttribute("title", `Autoreload not available: disabled by server`)
-  document.querySelector("#toggle-autoreload").disabled = true
-}