npm - @jsenv/core - Versions diffs - 26.0.1 → 27.0.0-alpha.2 - Mend

@jsenv/core 26.0.1 → 27.0.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (465) hide show

package/src/dev/plugins/explorer/client/explorer.html ADDED Viewed

@@ -0,0 +1,607 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Exploring</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8" />
+    <link rel="icon" href="FAVICON_HREF" />
+    <style>
+      button:focus,
+      a:focus,
+      input:focus,
+      *[data-contains-hidden-input] input:focus + * {
+        outline-style: none;
+        outline-offset: -2px;
+      }
+      *[data-contains-hidden-input] input:focus + * {
+        outline-width: 4px;
+        outline-offset: -2px;
+      }
+      html[data-last-interaction="keyboard"] button:focus,
+      html[data-last-interaction="keyboard"] a:focus,
+      html[data-last-interaction="keyboard"] input:focus,
+      html[data-last-interaction="keyboard"]
+        *[data-contains-hidden-input]
+        input:focus
+        + * {
+        outline-style: auto;
+      }
+      html[data-last-interaction="keyboard"]
+        *[data-contains-hidden-input]
+        input:focus
+        + * {
+        outline-color: rgb(0, 150, 255);
+      }
+      /*
+      Don't try to replace @-moz-document url-prefix() this by
+      -moz-outline or -moz-outline-color
+      Because firefox would take into account outline instead of -moz-outline
+      :moz-focus-ring
+      Because for some element we set the focus outline on a div which would not match :focusring
+      */
+      @-moz-document url-prefix() {
+        html[data-last-interaction="keyboard"] button:focus,
+        html[data-last-interaction="keyboard"] a:focus,
+        html[data-last-interaction="keyboard"] input:focus,
+        html[data-last-interaction="keyboard"]
+          *[data-input-customized]
+          input:focus
+          + * {
+          outline-width: 2px;
+          outline-offset: 0;
+          outline-style: solid;
+          /*
+          force a blue color for firefox otherwise
+          it uses outline-color: inherit
+          making it unpredictible and sometimes hard to see
+          */
+          outline-color: rgb(0, 150, 255);
+        }
+      }
+      ::-moz-focus-inner {
+        border: 0;
+      }
+    </style>
+    <style>
+      /* reset stuff */
+      * {
+        box-sizing: border-box;
+      }
+      [data-force-hide] {
+        display: none !important;
+      }
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+      }
+      html {
+        font-family: arial, sans;
+        height: 100%;
+      }
+      main {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+      }
+      main > * {
+        min-width: 100%;
+        flex: 1;
+      }
+      hr {
+        color: black;
+        background-color: black;
+        border-color: black;
+        margin: 15px 0;
+      }
+      article[data-page="file-list"] {
+        background-color: #204143;
+        color: #97a0a0;
+      }
+      nav,
+      #explorables-message {
+        background: #1f262c;
+      }
+      #explorables nav {
+        /* overflow hidden to ensure it wraps li which have margins
+        otherwise the background color is not the one from <nav> */
+        overflow: hidden;
+      }
+      #explorables-message {
+        overflow: auto; /* propagate background to margins cause by h4 inside */
+      }
+      article h2 {
+        margin: 0;
+        display: flex;
+      }
+      article h2 svg {
+        margin-right: 15px;
+      }
+      #main_html_file {
+        padding: 25px;
+        padding-bottom: 0;
+      }
+      #main_file_link {
+        color: #e7f2f3;
+      }
+      h2 {
+        margin: 20px 0;
+        color: #24b1b0;
+        display: inline-block;
+      }
+      h4 {
+        font-weight: normal;
+        font-size: 15px;
+        color: #97a0a0;
+        padding: 0 25px;
+      }
+      #explorables {
+        word-break: break-word;
+      }
+      #explorables-header {
+        /* padding-bottom: 10px; */
+        width: 100%;
+        position: sticky;
+        top: 0;
+      }
+      #explorables_header_and_menu {
+        padding-left: 25px;
+        padding-right: 25px;
+        padding-top: 25px;
+        background-color: #204143;
+      }
+      #explorables_header_bottom_spacing {
+        height: 20px;
+        background: #1f262c;
+      }
+      #directory_relative_url {
+        color: orange;
+      }
+      #explorables ul {
+        padding: 0px 25px 25px 25px;
+        margin: 0;
+      }
+      #explorables li {
+        list-style-type: none;
+        margin: 10px 0;
+      }
+      #explorables li:first-child {
+        margin-top: 0;
+      }
+      #explorables li .execution-link {
+        width: 100%;
+        word-break: break-all;
+      }
+      .execution-link {
+        background: #204143;
+        padding: 6px 12px;
+        font-size: 14px;
+        display: inline-block;
+        color: #e7f2f3;
+        font-family: monospace;
+        text-decoration: unset;
+      }
+      /* icons */
+      #main_file_icon {
+        fill: #24b1b0;
+      }
+      #fileIconSvgConfig {
+        width: 25px;
+        height: 25px;
+        stroke: none;
+        fill: #24b1b0;
+      }
+      #explorables fieldset {
+        border: none;
+        padding: 0;
+        margin: 0;
+      }
+      #explorables fieldset label {
+        display: inline-block;
+        padding: 0;
+      }
+      #explorables fieldset input {
+        opacity: 0;
+        position: absolute;
+      }
+      #explorables fieldset label input + * {
+        display: block;
+        padding: 0.7em 1em;
+        background-color: #204143;
+        border-radius: 0.1em;
+        min-width: 8em;
+        text-align: center;
+      }
+      #explorables fieldset input:checked + * {
+        color: orange;
+        background: #1f262c;
+      }
+      /* scrolable menu */
+      .menu-wrapper {
+        position: relative;
+        max-width: 100%;
+        overflow-x: hidden;
+        overflow-y: hidden;
+        transition: 300ms;
+        margin-top: 25px;
+      }
+      .menu {
+        box-sizing: border-box;
+        white-space: nowrap;
+        overflow-x: auto;
+        overflow-y: hidden;
+        -webkit-overflow-scrolling: touch;
+      }
+      .menu .item {
+        display: inline-block;
+        height: 100%;
+        padding: 1em;
+        box-sizing: border-box;
+      }
+      .paddle {
+        position: absolute;
+        height: 36px;
+        bottom: 0;
+        border: none;
+        background: #24b1b0;
+        color: #1f262c;
+      }
+      .left-paddle {
+        left: 0;
+      }
+      .right-paddle {
+        right: 0;
+      }
+      .hidden {
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <main></main>
+    <div style="display: none">
+      <article data-page="file-list">
+        <!--
+        <section id="main_html_file">
+          <h2>
+            <svg id="main_file_icon" viewBox="0 0 16 16" width="25px" height="25px">
+              <path
+                d="M15.45,7L14,5.551V2c0-0.55-0.45-1-1-1h-1c-0.55,0-1,0.45-1,1v0.553L9,0.555C8.727,0.297,8.477,0,8,0S7.273,0.297,7,0.555  L0.55,7C0.238,7.325,0,7.562,0,8c0,0.563,0.432,1,1,1h1v6c0,0.55,0.45,1,1,1h3v-5c0-0.55,0.45-1,1-1h2c0.55,0,1,0.45,1,1v5h3  c0.55,0,1-0.45,1-1V9h1c0.568,0,1-0.437,1-1C16,7.562,15.762,7.325,15.45,7z"
+              />
+            </svg>
+            <span
+              >Main html file:
+              <a id="main_file_link" href="javascript:void(0)">${mainFileRelativeUrl}</a></span
+            >
+          </h2>
+          <div>
+            <iframe id="main_file_iframe" src="about:blank"></iframe>
+          </div>
+        </section>
+        <hr />
+        !-->
+        <section id="explorables">
+          <div id="explorables-header">
+            <div id="explorables_header_and_menu">
+              <h2 style="white-space: nowrap">
+                <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"
+                  />
+                </svg>
+                <span
+                  >File(s) to explore in
+                  <span id="directory_relative_url" title="${directoryUrl}"
+                    >${directoryName}</span
+                  ></span
+                >
+              </h2>
+              <div class="menu-wrapper">
+                <fieldset id="filter-group-set" class="menu"></fieldset>
+              </div>
+              <div class="paddles">
+                <button class="left-paddle paddle hidden">&#60;</button>
+                <button class="right-paddle paddle">&#62;</button>
+              </div>
+            </div>
+            <div id="explorables_header_bottom_spacing"></div>
+          </div>
+          <div>
+            <div id="explorables-message">
+              <h4 style="margin-top: 0">${message}</h4>
+            </div>
+            <nav>
+              <ul></ul>
+            </nav>
+          </div>
+        </section>
+      </article>
+    </div>
+    <script>
+      // eslint-disable-next-line no-undef
+      const { rootDirectoryUrl, groups, files } = SERVER_PARAMS
+      const groupPreference = {
+        has: () => localStorage.hasOwnProperty("explorer_active_group"),
+        get: () =>
+          localStorage.hasOwnProperty("explorer_active_group")
+            ? JSON.parse(localStorage.getItem("explorer_active_group"))
+            : undefined,
+        set: (value) =>
+          localStorage.setItem("explorer_active_group", JSON.stringify(value)),
+      }
+      const directoryNameFromUrl = (directoryUrl) => {
+        const slashLastIndex = directoryUrl.lastIndexOf(
+          "/",
+          // ignore last slash
+          directoryUrl.length - 2,
+        )
+        if (slashLastIndex === -1) return ""
+        return directoryUrl.slice(slashLastIndex + 1)
+      }
+      const urlToVisitFromRelativeUrl = (relativeUrl) => {
+        return `${window.origin}/${relativeUrl}`
+      }
+      const fileListElement = document
+        .querySelector(`[data-page="file-list"]`)
+        .cloneNode(true)
+      const directoryName = directoryNameFromUrl(rootDirectoryUrl)
+      const span = fileListElement.querySelector("#directory_relative_url")
+      span.title = rootDirectoryUrl
+      span.textContent = directoryName
+      const h4 = fileListElement.querySelector("h4")
+      const ul = fileListElement.querySelector("ul")
+      ul.innerHTML = files
+        .map(
+          (file) =>
+            `<li>
+        <a
+          class="execution-link"
+          data-relative-url=${file.relativeUrl}
+          href=${urlToVisitFromRelativeUrl(file.relativeUrl)}
+        >
+          ${file.relativeUrl}
+        </a>
+      </li>`,
+        )
+        .join("")
+      const groupFieldset = fileListElement.querySelector("#filter-group-set")
+      const groupNames = Object.keys(groups)
+      groupFieldset.innerHTML = groupNames
+        .map(
+          (key) => `<label data-contains-hidden-input class="item">
+        <input type="radio" name="filter-group" value="${key}"/>
+        <span>${key}</span>
+      </label>`,
+        )
+        .join("")
+      const groupFromLocalStorage = groupPreference.get()
+      const currentGroup =
+        groupFromLocalStorage && groupNames.includes(groupFromLocalStorage)
+          ? groupFromLocalStorage
+          : groupNames[0]
+      Array.from(groupFieldset.querySelectorAll("input")).forEach(
+        (inputRadio) => {
+          inputRadio.checked = inputRadio.value === currentGroup
+          inputRadio.onchange = () => {
+            if (inputRadio.checked) {
+              groupPreference.set(inputRadio.value)
+              enableGroup(inputRadio.value)
+            }
+          }
+        },
+      )
+      const enableGroup = (groupName) => {
+        const arrayOfElementToShow = []
+        const arrayOfElementToHide = []
+        files.forEach((file) => {
+          const fileLink = fileListElement.querySelector(
+            `a[data-relative-url="${file.relativeUrl}"]`,
+          )
+          const fileLi = fileLink.parentNode
+          if (file.meta[groupName]) {
+            arrayOfElementToShow.push(fileLi)
+          } else {
+            arrayOfElementToHide.push(fileLi)
+          }
+        })
+        arrayOfElementToShow.forEach((element) => {
+          element.removeAttribute("data-force-hide")
+        })
+        arrayOfElementToHide.forEach((element) => {
+          element.setAttribute("data-force-hide", "")
+        })
+        h4.innerHTML =
+          arrayOfElementToShow.length === 0
+            ? `No file found.
+      Config for this section: <pre>${JSON.stringify(
+        groups[groupName],
+        null,
+        "  ",
+      )}</pre>`
+            : `${arrayOfElementToShow.length} files found. Click on the one you want to execute`
+      }
+      enableGroup(currentGroup)
+      document.querySelector("main").appendChild(fileListElement)
+    </script>
+    <script>
+      // make menu scrollable
+      const getMenuWrapperSize = () => {
+        return document.querySelector(".menu-wrapper").getBoundingClientRect()
+          .width
+      }
+      const getMenuSize = () => {
+        return document.querySelector(".menu").getBoundingClientRect().width
+      }
+      const getMenuPosition = () => {
+        return document.querySelector(".menu-wrapper").scrollLeft
+      }
+      let menuWrapperSize = getMenuWrapperSize()
+      let menuSize = getMenuSize()
+      const menuVisibleSize = menuWrapperSize
+      let menuInvisibleSize = menuSize - menuVisibleSize
+      const scrollDuration = 300
+      const leftPaddle = document.querySelector(".left-paddle")
+      const rightPaddle = document.querySelector(".right-paddle")
+      const handleMenuScroll = () => {
+        menuInvisibleSize = menuSize - menuWrapperSize
+        const menuPosition = getMenuPosition()
+        const menuEndOffset = menuInvisibleSize
+        // show & hide the paddles, depending on scroll position
+        if (menuPosition <= 0 && menuEndOffset <= 0) {
+          // hide both paddles if the window is large enough to display all tabs
+          leftPaddle.classList.add("hidden")
+          rightPaddle.classList.add("hidden")
+        } else if (menuPosition <= 0) {
+          leftPaddle.classList.add("hidden")
+          rightPaddle.classList.remove("hidden")
+        } else if (menuPosition < Math.floor(menuEndOffset)) {
+          // show both paddles in the middle
+          leftPaddle.classList.remove("hidden")
+          rightPaddle.classList.remove("hidden")
+        } else if (menuPosition >= Math.floor(menuEndOffset)) {
+          leftPaddle.classList.remove("hidden")
+          rightPaddle.classList.add("hidden")
+        }
+      }
+      handleMenuScroll()
+      window.onresize = () => {
+        menuWrapperSize = getMenuWrapperSize()
+        menuSize = getMenuSize()
+        handleMenuScroll()
+      }
+      // finally, what happens when we are actually scrolling the menu
+      document.querySelector(".menu-wrapper").onscroll = () => {
+        handleMenuScroll()
+      }
+      const startJavaScriptAnimation = ({
+        duration = 300,
+        timingFunction = (t) => t,
+        onProgress = () => {},
+        onCancel = () => {},
+        onComplete = () => {},
+      }) => {
+        duration = parseInt(duration, 10)
+        const startMs = performance.now()
+        let currentRequestAnimationFrameId
+        let done = false
+        let rawProgress = 0
+        let progress = 0
+        const handler = () => {
+          currentRequestAnimationFrameId = null
+          const nowMs = performance.now()
+          rawProgress = Math.min((nowMs - startMs) / duration, 1)
+          progress = timingFunction(rawProgress)
+          done = rawProgress === 1
+          onProgress({
+            done,
+            rawProgress,
+            progress,
+          })
+          if (done) {
+            onComplete()
+          } else {
+            currentRequestAnimationFrameId =
+              window.requestAnimationFrame(handler)
+          }
+        }
+        handler()
+        const stop = () => {
+          if (currentRequestAnimationFrameId) {
+            window.cancelAnimationFrame(currentRequestAnimationFrameId)
+            currentRequestAnimationFrameId = null
+          }
+          if (!done) {
+            done = true
+            onCancel({
+              rawProgress,
+              progress,
+            })
+          }
+        }
+        return stop
+      }
+      rightPaddle.onclick = () => {
+        const scrollStart = document.querySelector(".menu-wrapper").scrollLeft
+        const scrollEnd = scrollStart + menuWrapperSize
+        startJavaScriptAnimation({
+          duration: scrollDuration,
+          onProgress: ({ progress }) => {
+            document.querySelector(".menu-wrapper").scrollLeft =
+              scrollStart + (scrollEnd - scrollStart) * progress
+          },
+        })
+      }
+      leftPaddle.onclick = () => {
+        const scrollStart = document.querySelector(".menu-wrapper").scrollLeft
+        const scrollEnd = scrollStart - menuWrapperSize
+        startJavaScriptAnimation({
+          duration: scrollDuration,
+          onProgress: ({ progress }) => {
+            document.querySelector(".menu-wrapper").scrollLeft =
+              scrollStart + (scrollEnd - scrollStart) * progress
+          },
+        })
+      }
+    </script>
+  </body>
+</html>

package/src/{internal → dev/plugins/explorer/client}/jsenv.png RENAMED Viewed

File without changes

package/src/dev/plugins/explorer/jsenv_plugin_explorer.js ADDED Viewed

@@ -0,0 +1,74 @@
+import { readFileSync } from "node:fs"
+import { urlToContentType } from "@jsenv/server"
+import { collectFiles, normalizeStructuredMetaMap } from "@jsenv/filesystem"
+import { DataUrl } from "@jsenv/utils/urls/data_url.js"
+export const jsenvPluginExplorer = ({ groups }) => {
+  const htmlClientFileUrl = new URL("./client/explorer.html", import.meta.url)
+  const faviconClientFileUrl = new URL("./client/jsenv.png", import.meta.url)
+  return {
+    name: "jsenv:explorer",
+    appliesDuring: {
+      dev: true,
+    },
+    serve: async (request, { rootDirectoryUrl }) => {
+      if (request.ressource !== "/") {
+        return null
+      }
+      const structuredMetaMapRelativeForExplorable = {}
+      Object.keys(groups).forEach((groupName) => {
+        const groupConfig = groups[groupName]
+        structuredMetaMapRelativeForExplorable[groupName] = {
+          "**/.jsenv/": false, // avoid visting .jsenv directory in jsenv itself
+          ...groupConfig,
+        }
+      })
+      const structuredMetaMapForExplorable = normalizeStructuredMetaMap(
+        structuredMetaMapRelativeForExplorable,
+        rootDirectoryUrl,
+      )
+      const matchingFileResultArray = await collectFiles({
+        directoryUrl: rootDirectoryUrl,
+        structuredMetaMap: structuredMetaMapForExplorable,
+        predicate: (meta) =>
+          Object.keys(meta).some((group) => Boolean(meta[group])),
+      })
+      const files = matchingFileResultArray.map(({ relativeUrl, meta }) => ({
+        relativeUrl,
+        meta,
+      }))
+      let html = String(readFileSync(new URL(htmlClientFileUrl)))
+      html = html.replace(
+        "FAVICON_HREF",
+        DataUrl.stringify({
+          contentType: urlToContentType(faviconClientFileUrl),
+          base64Flag: true,
+          data: readFileSync(new URL(faviconClientFileUrl)).toString("base64"),
+        }),
+      )
+      html = html.replace(
+        "SERVER_PARAMS",
+        JSON.stringify(
+          {
+            rootDirectoryUrl,
+            groups,
+            files,
+          },
+          null,
+          "  ",
+        ),
+      )
+      return {
+        status: 200,
+        headers: {
+          "cache-control": "no-store",
+          "content-type": "text/html",
+          "content-length": Buffer.byteLength(html),
+        },
+        body: html,
+      }
+    },
+  }
+}

package/src/{internal/dev_server/toolbar → dev/plugins/toolbar/client}/animation/toolbar_animation.js RENAMED Viewed

File without changes

package/src/{internal/dev_server/toolbar → dev/plugins/toolbar/client}/eventsource/eventsource.css RENAMED Viewed

@@ -7,7 +7,7 @@
   height: 40px;
 }
-#eventsource-indicator .event-source-livereload {
+#eventsource-indicator .event-source-autoreload {
   position: absolute;
   width: 32px;
   height: 32px;
@@ -16,7 +16,7 @@
   top: 0;
 }
-.event-source-livereload[data-variant="enabled"] {
+.event-source-autoreload[data-variant="enabled"] {
   color: green;
 }