@jsenv/core 26.0.1 → 27.0.0-alpha.10

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

@@ -0,0 +1,57 @@
+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
+}

package/src/dev/plugins/toolbar/client/execution/toolbar_execution.js

@@ -0,0 +1,88 @@
+import { removeForceHideElement } from "../util/dom.js"
+import { enableVariant } from "../variant/variant.js"
+import { toggleTooltip } from "../tooltip/tooltip.js"
+import { notifyExecutionResult } from "../notification/toolbar_notification.js"
+
+export const renderExecutionInToolbar = async () => {
+  // reset file execution indicator ui
+  applyExecutionIndicator()
+  removeForceHideElement(document.querySelector("#execution-indicator"))
+
+  const { status, startTime, endTime } =
+    await window.parent.__html_supervisor__.getScriptExecutionResults()
+  const execution = { status, startTime, endTime }
+  applyExecutionIndicator(execution)
+  const executionStorageKey = window.location.href
+  const previousExecution = sessionStorage.hasOwnProperty(executionStorageKey)
+    ? JSON.parse(sessionStorage.getItem(executionStorageKey))
+    : undefined
+  notifyExecutionResult(executionStorageKey, execution, previousExecution)
+  sessionStorage.setItem(executionStorageKey, JSON.stringify(execution))
+}
+
+// const changeLink = variantNode.querySelector(".eventsource-changes-link")
+// changeLink.innerHTML = reloadMessageCount
+// changeLink.onclick = () => {
+//   console.log(reloadMessages)
+//   // eslint-disable-next-line no-alert
+//   window.parent.alert(JSON.stringify(reloadMessages, null, "  "))
+// }
+
+// const someFailed = reloadMessages.some((m) => m.status === "failed")
+// const somePending = reloadMessages.some((m) => m.status === "pending")
+// const applyLink = variantNode.querySelector(".eventsource-reload-link")
+// applyLink.innerHTML = someFailed
+//   ? "failed"
+//   : somePending
+//   ? "applying..."
+//   : "apply changes"
+// applyLink.onclick = someFailed
+//   ? () => {
+//       parentEventSourceClient.applyReloadMessageEffects()
+//     }
+//   : somePending
+//   ? () => {}
+//   : () => {
+//       parentEventSourceClient.applyReloadMessageEffects()
+//     }
+
+// parentEventSourceClient.reloadMessagesSignal.onchange = () => {
+//   updateEventSourceIndicator()
+// }
+// const autoreloadCheckbox = document.querySelector("#toggle-autoreload")
+// autoreloadCheckbox.checked = parentEventSourceClient.isAutoreloadEnabled()
+// autoreloadCheckbox.onchange = () => {
+//   parentEventSourceClient.setAutoreloadPreference(autoreloadCheckbox.checked)
+//   updateEventSourceIndicator()
+// }
+
+const applyExecutionIndicator = ({
+  status = "running",
+  startTime,
+  endTime,
+} = {}) => {
+  const executionIndicator = document.querySelector("#execution-indicator")
+  enableVariant(executionIndicator, { execution: status })
+  const variantNode = executionIndicator.querySelector("[data-when-active]")
+  variantNode.querySelector("button").onclick = () =>
+    toggleTooltip(executionIndicator)
+  variantNode.querySelector(".tooltip").textContent = computeText({
+    status,
+    startTime,
+    endTime,
+  })
+}
+
+// relative time: https://github.com/tc39/proposal-intl-relative-time/issues/118
+const computeText = ({ status, startTime, endTime }) => {
+  if (status === "completed") {
+    return `Execution completed in ${endTime - startTime}ms`
+  }
+  if (status === "errored") {
+    return `Execution failed in ${endTime - startTime}ms`
+  }
+  if (status === "running") {
+    return "Executing..."
+  }
+  return ""
+}

package/src/{internal/dev_server/toolbar → dev/plugins/toolbar/client}/settings/toolbar_settings.js

@@ -9,6 +9,7 @@ import { enableVariant } from "../variant/variant.js"
 export const renderToolbarSettings = () => {
   document.querySelector("#settings-button").onclick = toggleSettings
   document.querySelector("#button-close-settings").onclick = toggleSettings
+  disableWarningStyle()
 }
 
 const toggleSettings = () => {

package/src/{internal/dev_server/toolbar → dev/plugins/toolbar/client}/theme/jsenv_theme.css

@@ -10,15 +10,6 @@ html[data-theme="jsenv"] .iconToolbar:hover {
 html[data-theme="jsenv"] #loader-icon {
   color: #404040;
 }
-html[data-theme="jsenv"] .livereload-circle[data-variant="off"] {
-  fill: #757575;
-}
-html[data-theme="jsenv"] .livereload-circle[data-variant="connecting"] {
-  fill: #717171;
-}
-html[data-theme="jsenv"] .livereload-ring {
-  stroke: rgba(138, 136, 136, 0.46);
-}
 
 /* settings */
 html[data-theme="jsenv"] #settings-box,
@@ -56,11 +47,6 @@ html[data-theme="jsenv"] .switch .slider:before {
   background-color: grey;
 }
 
-/* file input */
-html[data-theme="jsenv"] #file[data-active] {
-  background: rgba(222, 86, 0, 0.7);
-}
-
 /* tooltips */
 html[data-theme="jsenv"] .tooltip {
   background-color: #ffd390;
@@ -79,7 +65,7 @@ html[data-theme="jsenv"] .tooltip::after {
   border-color: #ffd390 transparent transparent transparent;
 }
 
-/*  page file list */
+/* page file list */
 html[data-theme="jsenv"] h2 {
   color: orange;
 }

package/src/{internal/dev_server/toolbar → dev/plugins/toolbar/client}/theme/light_theme.css

@@ -15,15 +15,6 @@ html[data-theme="light"] .iconToolbar:hover {
 html[data-theme="light"] #loader-icon {
   color: #404040;
 }
-html[data-theme="light"] .livereload-circle[data-variant="off"] {
-  fill: #757575;
-}
-html[data-theme="light"] .livereload-circle[data-variant="connecting"] {
-  fill: #717171;
-}
-html[data-theme="light"] .livereload-ring {
-  stroke: rgba(138, 136, 136, 0.46);
-}
 
 /* settings */
 html[data-theme="light"] #settings-box,
@@ -61,14 +52,6 @@ html[data-theme="light"] .switch input:checked + * .square {
   background-color: #076570;
 }
 
-/* file input */
-html[data-theme="light"] #file[data-active] {
-  background: rgba(129, 177, 214, 0.34);
-}
-html[data-theme="light"] #file-input {
-  color: #076570;
-}
-
 /* tooltips */
 html[data-theme="light"] .tooltip {
   background-color: rgb(138, 145, 154);

package/src/{internal/dev_server/toolbar → dev/plugins/toolbar/client}/toolbar.html

@@ -34,17 +34,6 @@
           </a>
         </section>
 
-        <section id="file">
-          <input
-            type="text"
-            id="file-input"
-            value=""
-            dir="rtl"
-            tabindex="-1"
-            readonly
-          />
-        </section>
-
         <section id="execution-indicator">
           <div data-when="execution:default">
             <div class="tooltip">Unknown state</div>
@@ -90,6 +79,19 @@
           </div>
         </section>
 
+        <section id="changes-indicator" data-when="autoreload:off">
+          <div data-when="changes:no"></div>
+          <div data-when="changes:yes">
+            <div class="tooltip">There is X changes to apply</div>
+            <button>
+              <svg>
+                <circle class="eventsource-circle" cx="20" cy="20" r="5" />
+              </svg>
+              <span>X</span>
+            </button>
+          </div>
+        </section>
+
         <div style="width: 100%"></div>
 
         <section id="eventsource-indicator" data-responsive-toolbar-element>
@@ -169,49 +171,14 @@
             </button>
           </div>
           <div data-when="eventsource:connected">
-            <div class="tooltip">
-              Connected to server
-              <br />
-              Livereload:
-              <span data-when="livereload:on" style="color: green">ON</span
-              ><span data-when="livereload:off" style="color: grey">OFF</span>
-              <br />
-              Changes:
-              <span data-when="changes:yes"
-                ><a
-                  class="eventsource-changes-link"
-                  style="color: inherit"
-                  href="javascript:void(0);"
-                  >X</a
-                ></span
-              ><span data-when="changes:no">none</span>
-              <div data-when="changes:yes">
-                <br />
-                <a
-                  class="eventsource-reload-link"
-                  style="color: inherit"
-                  href="javascript:void(0);"
-                  >reload</a
-                >
-              </div>
-            </div>
+            <div class="tooltip">Connected to server</div>
             <button>
-              <div data-when="livereload:on">
-                <svg
-                  class="event-source-livereload iconToolbar"
-                  data-variant="enabled"
-                >
-                  <use xlink:href="#loading_svg"></use>
-                </svg>
-              </div>
-              <div data-when="changes:yes">
-                <svg
-                  class="event-source-livereload iconToolbar"
-                  data-variant="disabled"
-                >
-                  <use xlink:href="#loading_svg"></use>
-                </svg>
-              </div>
+              <svg
+                class="event-source-autoreload iconToolbar"
+                data-variant="enabled"
+              >
+                <use xlink:href="#loading_svg"></use>
+              </svg>
               <svg class="event-source-icon">
                 <circle
                   class="eventsource-circle"
@@ -256,6 +223,24 @@
             </div>
             <div id="settings-box-body">
               <div class="settings-box-items-wrapper">
+                <div class="settings-box-item settings-autoreload">
+                  <div class="category-title">
+                    <svg width="20px" height="20px">
+                      <use xlink:href="#loading_svg"></use>
+                    </svg>
+                    <span>Autoreload</span>
+                  </div>
+                  <label class="switch" data-contains-hidden-input>
+                    <input id="toggle-autoreload" type="checkbox" />
+                    <div>
+                      <div class="slider"></div>
+                      <div class="square"></div>
+                    </div>
+                  </label>
+                  <div class="category-subtitle">
+                    Auto reload when a file is modified, deleted or created.
+                  </div>
+                </div>
                 <div class="settings-box-item settings-notification">
                   <div class="category-title">
                     <svg
@@ -289,24 +274,7 @@
                     </div>
                   </div>
                 </div>
-                <div class="settings-box-item settings-livereload">
-                  <div class="category-title">
-                    <svg width="20px" height="20px">
-                      <use xlink:href="#loading_svg"></use>
-                    </svg>
-                    <span>Livereload</span>
-                  </div>
-                  <label class="switch" data-contains-hidden-input>
-                    <input id="toggle-livereload" type="checkbox" />
-                    <div>
-                      <div class="slider"></div>
-                      <div class="square"></div>
-                    </div>
-                  </label>
-                  <div class="category-subtitle">
-                    Reload page when a file is modified, deleted or created.
-                  </div>
-                </div>
+
                 <div class="settings-box-item">
                   <div class="category-title">
                     <svg
@@ -360,114 +328,6 @@
                     Choose between light and dark theme for jsenv toolbar.
                   </div>
                 </div>
-                <div class="settings-box-item" id="browser_support">
-                  <div class="category-title">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 512 512"
-                      width="20px"
-                      height="20px"
-                      style="enable-background: new 0 0 512 512"
-                      id="browser_support_svg"
-                    >
-                      <path
-                        d="M497.938,430.063l-126.914-126.91C389.287,272.988,400,237.762,400,200C400,89.719,310.281,0,200,0
-		C89.719,0,0,89.719,0,200c0,110.281,89.719,200,200,200c37.762,0,72.984-10.711,103.148-28.973l126.914,126.91
-		C439.438,507.313,451.719,512,464,512c12.281,0,24.563-4.688,33.938-14.063C516.688,479.195,516.688,448.805,497.938,430.063z
-		 M64,200c0-74.992,61.016-136,136-136s136,61.008,136,136s-61.016,136-136,136S64,274.992,64,200z"
-                      />
-                    </svg>
-                    Browser support
-                  </div>
-                  <div class="category-subtitle">
-                    <div>
-                      <span
-                        class="browser_support_text"
-                        data-when="browserSupport:no"
-                        >No browser support</span
-                      >
-                      <span
-                        class="browser_support_text"
-                        data-when="browserSupport:partial"
-                        >Excellent browser support
-                        <span class="emoji">❤️</span></span
-                      >
-                      <span
-                        class="browser_support_text"
-                        data-when="browserSupport:full"
-                        >Perfect browser support
-                        <span class="emoji">❤️</span></span
-                      >
-                    </div>
-                    <a
-                      class="browser_support_read_more_link"
-                      href="javascript:void(0);"
-                      >Read more</a
-                    >
-                  </div>
-                </div>
-                <div class="settings-box-item" id="files_compilation">
-                  <div class="category-title">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="-74 0 512 512"
-                      width="20px"
-                      height="20px"
-                      id="browser_support_svg"
-                    >
-                      <path
-                        d="m361.414062 443.589844-108.269531-263.902344c-6.003906-14.640625-9.050781-30.085938-9.050781-45.910156v-69.757813c0-7.511719 2.925781-14.574219 8.238281-19.886719 6.476563-6.476562 10.046875-15.089843 10.046875-24.25v-9.882812c0-5.523438-4.480468-10-10-10h-139.621094c-5.523437 0-10 4.476562-10 10v9.882812c0 9.160157 3.566407 17.773438 10.042969 24.25 5.3125 5.3125 8.238281 12.375 8.238281 19.890626v69.753906c0 15.824218-3.042968 31.269531-9.050781 45.910156l-29.75 72.515625c-.011719.027344-.023437.054687-.035156.082031l-78.484375 191.304688c-6.285156 15.324218-4.53125 32.6875 4.695312 46.441406 9.226563 13.757812 24.621094 21.96875 41.183594 21.96875h265.9375c16.5625 0 31.960938-8.210938 41.1875-21.96875 9.222656-13.757812 10.976563-31.117188 4.691406-46.441406zm-230.921874-256.3125c7-17.058594 10.546874-35.058594 10.546874-53.5v-69.757813c0-12.851562-5.003906-24.9375-14.09375-34.027343-2.671874-2.671876-4.15625-6.21875-4.1875-9.992188h119.621094c-.03125 3.773438-1.515625 7.316406-4.191406 9.992188-9.085938 9.089843-14.09375 21.171874-14.09375 34.027343v69.753907c0 18.441406 3.550781 36.441406 10.546875 53.5l24.144531 58.851562h-152.4375zm209.617187 291.613281c-5.585937 8.332031-14.542969 13.109375-24.574219 13.109375h-265.9375c-10.027344 0-18.984375-4.777344-24.574218-13.109375-4.214844-6.285156-5.824219-13.574219-4.730469-20.761719h16.476562c5.519531 0 10-4.480468 10-10 0-5.523437-4.480469-10-10-10h-9.1875l11.484375-28h16.867188c5.523437 0 10-4.480468 10-10 0-5.523437-4.476563-10-10-10h-8.660156l11.484374-28h17.34375c5.523438 0 10-4.480468 10-10 0-5.523437-4.476562-10-10-10h-9.136718l11.488281-28h17.8125c5.523437 0 10-4.480468 10-10 0-5.523437-4.476563-10-10-10h-9.609375l11.488281-28h168.84375l75.921875 185.054688c3.804688 9.277344 2.785156 19.378906-2.800781 27.707031zm0 0"
-                      />
-                      <path
-                        d="m312.03125 444.214844c-2.09375-5.113282-7.929688-7.558594-13.042969-5.46875-5.109375 2.09375-7.558593 7.929687-5.46875 13.042968l.054688.125c1.585937 3.871094 5.316406 6.214844 9.257812 6.214844 1.261719 0 2.542969-.238281 3.785157-.746094 5.109374-2.09375 7.558593-7.933593 5.464843-13.042968zm0 0"
-                      />
-                      <path
-                        d="m297.898438 409.761719-35.8125-87.289063c-2.09375-5.109375-7.933594-7.554687-13.046876-5.457031-5.109374 2.09375-7.550781 7.9375-5.457031 13.046875l35.8125 87.289062c1.585938 3.871094 5.316407 6.207032 9.257813 6.207032 1.261718 0 2.546875-.238282 3.789062-.75 5.109375-2.09375 7.554688-7.9375 5.457032-13.046875zm0 0"
-                      />
-                    </svg>
-                    Files compilation
-                  </div>
-                  <div class="category-subtitle">
-                    <div class="files_compilation_text">
-                      <span data-when="filesCompilation:no"
-                        >Files shown are source files</span
-                      >
-                      <span data-when="filesCompilation:html_only"
-                        >Files shown are source files, except html</span
-                      >
-                      <span data-when="filesCompilation:yes"
-                        >Files shown are compiled for {runtime}</span
-                      >
-                      <span data-when="filesCompilation:mismatch"
-                        >Files shown are compiled for an other runtime</span
-                      >
-                    </div>
-                    <a
-                      data-when="compilation_link:source"
-                      class="link_to_source_files"
-                      href="javascript:void(0);"
-                      >Switch to source files</a
-                    >
-                    <a
-                      data-when="compilation_link:mismatch"
-                      class="link_to_appropriate_files"
-                      href="javascript:void(0);"
-                      >Switch to appropriate files</a
-                    >
-                    <a
-                      data-when="compilation_link:compiled"
-                      class="link_to_compiled_files"
-                      href="javascript:void(0);"
-                      >Switch to compiled files</a
-                    >
-                    <a
-                      data-when="compilation_link:force"
-                      class="link_to_compilation_forced_files"
-                      href="javascript:void(0);"
-                      >Force compilation</a
-                    >
-                  </div>
-                </div>
               </div>
             </div>
           </div>
@@ -587,30 +447,11 @@
         <circle fill="currentColor" cx="362.721" cy="309.694" r="36.012" />
       </svg>
     </div>
-
-    <!--
-    <script type="module" src="./toolbar.main.js"></script>
-    The script type module approach works too but
-    is slower than having a prebuilt file.
-    Because this will impact every page using jsenv let's
-    use the fatest solution for now.
-    The day browser support import maps the script
-    module approach wil be faster because
-    no compilation will be necessary
-    -->
-    <script
-      type="importmap"
-      src="../../../../node_resolution.importmap"
-    ></script>
-    <script>
-      // here we should create something like window.toolbar = {}
-      // and a promise the toolbar injector can listen to act on the toolbar
-      // or we could just consider all communication should pass by postmessage
-    </script>
     <script
       type="module"
       src="./toolbar_main.js"
       data-jsenv-force-inline
+      no-html-supervisor
     ></script>
   </body>
 </html>

package/src/{internal/dev_server/toolbar → dev/plugins/toolbar/client}/toolbar_injector.js

@@ -1,12 +1,13 @@
-import { fetchExploringJson } from "@jsenv/core/src/internal/dev_server/exploring/fetch_exploring_json.js"
-
 import { setAttributes, setStyles } from "./util/dom.js"
 
-// eslint-disable-next-line no-undef
-const TOOLBAR_BUILD_RELATIVE_URL = __TOOLBAR_BUILD_RELATIVE_URL_
 const jsenvLogoSvgUrl = new URL("./jsenv_logo.svg", import.meta.url)
 
-const injectToolbar = async () => {
+export const injectToolbar = async ({ toolbarUrl, logs = false }) => {
+  if (document.readyState !== "complete") {
+    await new Promise((resolve) => {
+      window.addEventListener("load", resolve)
+    })
+  }
   await new Promise((resolve) => {
     if (window.requestIdleCallback) {
       window.requestIdleCallback(resolve, { timeout: 400 })
@@ -14,7 +15,6 @@ const injectToolbar = async () => {
       window.requestAnimationFrame(resolve)
     }
   })
-  const exploringJSON = await fetchExploringJson()
   const placeholder = getToolbarPlaceholder()
 
   const iframe = document.createElement("iframe")
@@ -38,20 +38,12 @@ const injectToolbar = async () => {
     "border": "none",
   })
   const iframeLoadedPromise = iframeToLoadedPromise(iframe)
-  const jsenvCoreDirectoryServerUrl = new URL(
-    exploringJSON.jsenvCoreDirectoryRelativeUrl,
-    document.location.origin,
-  ).href
-  const jsenvToolbarHtmlServerUrl = new URL(
-    TOOLBAR_BUILD_RELATIVE_URL,
-    jsenvCoreDirectoryServerUrl,
-  )
   // set iframe src BEFORE putting it into the DOM (prevent firefox adding an history entry)
-  iframe.setAttribute("src", jsenvToolbarHtmlServerUrl)
+  iframe.setAttribute("src", toolbarUrl)
   placeholder.parentNode.replaceChild(iframe, placeholder)
 
   addToolbarEventCallback(iframe, "toolbar_ready", () => {
-    sendCommandToToolbar(iframe, "renderToolbar", { exploringJSON })
+    sendCommandToToolbar(iframe, "renderToolbar", { logs })
   })
 
   await iframeLoadedPromise
@@ -172,7 +164,6 @@ const addToolbarEventCallback = (iframe, eventName, callback) => {
     }
     callback(__jsenv__.data)
   }
-
   window.addEventListener("message", messageEventCallback, false)
   return () => {
     window.removeEventListener("message", messageEventCallback, false)
@@ -225,14 +216,3 @@ const iframeToLoadedPromise = (iframe) => {
     iframe.addEventListener("load", onload, true)
   })
 }
-
-if (document.readyState === "complete") {
-  injectToolbar()
-} else {
-  window.addEventListener("load", injectToolbar)
-  // document.addEventListener("readystatechange", () => {
-  //   if (document.readyState === "complete") {
-  //     injectToolbar()
-  //   }
-  // })
-}

package/src/{internal/dev_server/toolbar → dev/plugins/toolbar/client}/toolbar_main.css

@@ -1,5 +1,4 @@
 @import "./execution/execution.css";
-@import "./compilation/compilation.css";
 @import "./focus/focus.css";
 @import "./eventsource/eventsource.css";
 @import "./responsive/overflow_menu.css";
@@ -80,29 +79,6 @@ html {
   cursor: pointer;
 }
 
-/* file name input & indicators */
-#file {
-  max-width: 40%;
-  padding: 0 1.2em;
-}
-
-#file-input {
-  width: 100%;
-  padding: 0px;
-  font-family: monospace;
-  font-size: 15px;
-  color: #cecece;
-  background: transparent;
-  border: transparent;
-  display: inline-block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-#file-input:focus {
-  border-bottom: 1px solid grey;
-}
-
 /* file and settings icons */
 #fileIconSvg,
 .settings-icon {