@jsenv/core 26.0.1 → 27.0.0-alpha.2

package/src/internal/dev_server/event_source_client/file_changes.js

@@ -1,82 +0,0 @@
-/* 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

@@ -1,13 +0,0 @@
-/* eslint-env browser */
-
-export const isLivereloadEnabled = () => {
-  const value = window.localStorage.getItem("livereload")
-  if (value === "0") {
-    return false
-  }
-  return true
-}
-
-export const setLivereloadPreference = (value) => {
-  window.localStorage.setItem("livereload", value ? "1" : "0")
-}

package/src/internal/dev_server/exploring/exploring.css

@@ -1,237 +0,0 @@
-@import "../toolbar/focus/focus.css";
-
-/* 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 {
-  /* background-color: #204143;
-  padding: 0.5em 0.7em;
-  border-radius: 0.1em; */
-  color: #e7f2f3;
-}
-
-/* article > section {
-} */
-
-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;
-}

package/src/internal/dev_server/exploring/exploring.html

@@ -1,79 +0,0 @@
-<!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="../../jsenv.png" />
-    <link rel="stylesheet" type="text/css" href="./exploring.css" />
-  </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 type="module" src="./exploring.js"></script>
-  </body>
-</html>

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

@@ -1,243 +0,0 @@
-import { fetchUrl } from "../toolbar/util/fetching.js"
-import { createPreference } from "../toolbar/util/preferences.js"
-import { startJavaScriptAnimation } from "../toolbar/util/animation.js"
-import { fetchExploringJson } from "./fetch_exploring_json.js"
-
-const fetchJSON = async (url, options) => {
-  const response = await fetchUrl(url, options)
-  const json = await response.json()
-  return json
-}
-
-const groupPreference = createPreference("group")
-
-const run = async () => {
-  const { projectDirectoryUrl, explorableConfig, jsenvDirectoryRelativeUrl } =
-    await fetchExploringJson()
-
-  const files = await fetchJSON(`/.jsenv/explorables.json`, {
-    method: "GET",
-  })
-
-  const compileServerOrigin = document.location.origin
-  const jsenvDirectoryServerUrl = String(
-    new URL(jsenvDirectoryRelativeUrl, compileServerOrigin),
-  )
-  const documentUrl = document.location.href
-  let compileId
-
-  const jsenvDirectoryIndex = documentUrl.indexOf(jsenvDirectoryServerUrl)
-  if (jsenvDirectoryIndex === 0) {
-    const afterJsenvDirectory = documentUrl.slice(
-      jsenvDirectoryServerUrl.length,
-    )
-    compileId = afterJsenvDirectory.split("/")[0]
-  } else {
-    compileId = null
-  }
-
-  const renderHtml = () => {
-    // const mainHtmlFileRelativeUrl = "index.html"
-    // const mainFileLink = document.querySelector("#main_file_link")
-    // const mainFileUrl = urlToVisitFromRelativeUrl(mainHtmlFileRelativeUrl)
-    // mainFileLink.href = mainFileUrl
-    // mainFileLink.textContent = `${mainHtmlFileRelativeUrl}`
-    // const mainFileIframe = document.querySelector(`#main_file_iframe`)
-    // mainFileIframe.src = mainFileUrl
-
-    const fileListElement = document
-      .querySelector(`[data-page="file-list"]`)
-      .cloneNode(true)
-    const directoryName = directoryUrlToDirectoryName(projectDirectoryUrl)
-    const span = fileListElement.querySelector("#directory_relative_url")
-    span.title = projectDirectoryUrl
-    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(explorableConfig)
-    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 currentGroup = groupPreference.has()
-      ? groupPreference.get()
-      : 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(
-                explorableConfig[groupName],
-                null,
-                "  ",
-              )}</pre>`
-          : `${arrayOfElementToShow.length} files found. Click on the one you want to execute`
-    }
-    enableGroup(currentGroup)
-
-    document.querySelector("main").appendChild(fileListElement)
-    makeMenuScrollable()
-  }
-
-  const urlToVisitFromRelativeUrl = (relativeUrl) => {
-    if (compileId) {
-      return `${compileServerOrigin}/${jsenvDirectoryRelativeUrl}${compileId}/${relativeUrl}`
-    }
-    return `${compileServerOrigin}/${relativeUrl}`
-  }
-
-  const makeMenuScrollable = () => {
-    const getMenuWrapperSize = () => {
-      return document.querySelector(".menu-wrapper").getBoundingClientRect()
-        .width
-    }
-    let menuWrapperSize = getMenuWrapperSize()
-
-    const getMenuSize = () => {
-      return document.querySelector(".menu").getBoundingClientRect().width
-    }
-    let menuSize = getMenuSize()
-
-    const menuVisibleSize = menuWrapperSize
-    let menuInvisibleSize = menuSize - menuVisibleSize
-
-    const getMenuPosition = () => {
-      return document.querySelector(".menu-wrapper").scrollLeft
-    }
-
-    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()
-    }
-
-    // scroll to left
-    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
-        },
-      })
-    }
-
-    // scroll to right
-    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
-        },
-      })
-    }
-  }
-
-  const directoryUrlToDirectoryName = (directoryUrl) => {
-    const slashLastIndex = directoryUrl.lastIndexOf(
-      "/",
-      // ignore last slash
-      directoryUrl.length - 2,
-    )
-    if (slashLastIndex === -1) return ""
-
-    return directoryUrl.slice(slashLastIndex + 1)
-  }
-
-  renderHtml()
-}
-
-run()

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

@@ -1,19 +0,0 @@
-import { fetchJson } from "../../browser_utils/fetch_json.js"
-
-export const fetchExploringJson = async ({ signal } = {}) => {
-  try {
-    const exploringInfo = await fetchJson("/.jsenv/exploring.json", {
-      signal,
-    })
-    return exploringInfo
-  } catch (e) {
-    if (signal && signal.aborted && e.name === "AbortError") {
-      throw e
-    }
-    throw new Error(
-      `Cannot communicate with exploring server due to a network error
---- error stack ---
-${e.stack}`,
-    )
-  }
-}

package/src/internal/dev_server/toolbar/compilation/compilation.css

@@ -1,23 +0,0 @@
-#file_info_svg {
-  width: 20px;
-  height: 20px;
-  margin: 10px;
-  color: #cecece;
-}
-
-#file_info ul {
-  margin: 0;
-  margin-bottom: 0.7em;
-  padding-left: 1em;
-}
-
-#file_info ul li {
-  text-align: left;
-}
-
-.browser_support_text[data-warning],
-.files_compilation_text[data-warning] {
-  color: #cb5909;
-  margin-bottom: 5px;
-  display: block;
-}