@jsenv/core 27.0.0-alpha.9 → 27.0.0-alpha.92

package/src/plugins/autoreload/dev_sse/jsenv_plugin_dev_sse_server.js

@@ -0,0 +1,204 @@
+import { urlToRelativeUrl } from "@jsenv/urls"
+import { createCallbackList } from "@jsenv/abort"
+
+import { createSSEService } from "@jsenv/core/src/helpers/event_source/sse_service.js"
+
+export const jsenvPluginDevSSEServer = ({
+  rootDirectoryUrl,
+  urlGraph,
+  clientFileChangeCallbackList,
+  clientFilesPruneCallbackList,
+}) => {
+  const serverEventCallbackList = createCallbackList()
+  const sseService = createSSEService({ serverEventCallbackList })
+
+  const notifyDeclined = ({ cause, reason, declinedBy }) => {
+    serverEventCallbackList.notify({
+      type: "reload",
+      data: JSON.stringify({
+        cause,
+        type: "full",
+        typeReason: reason,
+        declinedBy,
+      }),
+    })
+  }
+  const notifyAccepted = ({ cause, reason, instructions }) => {
+    serverEventCallbackList.notify({
+      type: "reload",
+      data: JSON.stringify({
+        cause,
+        type: "hot",
+        typeReason: reason,
+        hotInstructions: instructions,
+      }),
+    })
+  }
+  const propagateUpdate = (firstUrlInfo) => {
+    const urlInfos = urlGraph.urlInfos
+    const iterate = (urlInfo, trace) => {
+      if (urlInfo.data.hotAcceptSelf) {
+        return {
+          accepted: true,
+          reason:
+            urlInfo === firstUrlInfo
+              ? `file accepts hot reload`
+              : `a dependent file accepts hot reload`,
+          instructions: [
+            {
+              type: urlInfo.type,
+              boundary: urlToRelativeUrl(urlInfo.url, rootDirectoryUrl),
+              acceptedBy: urlToRelativeUrl(urlInfo.url, rootDirectoryUrl),
+            },
+          ],
+        }
+      }
+      const { dependents } = urlInfo
+      const instructions = []
+      for (const dependentUrl of dependents) {
+        const dependentUrlInfo = urlInfos[dependentUrl]
+        if (dependentUrlInfo.data.hotDecline) {
+          return {
+            declined: true,
+            reason: `a dependent file declines hot reload`,
+            declinedBy: dependentUrl,
+          }
+        }
+        const { hotAcceptDependencies = [] } = dependentUrlInfo.data
+        if (hotAcceptDependencies.includes(urlInfo.url)) {
+          instructions.push({
+            type: dependentUrlInfo.type,
+            boundary: urlToRelativeUrl(dependentUrl, rootDirectoryUrl),
+            acceptedBy: urlToRelativeUrl(urlInfo.url, rootDirectoryUrl),
+          })
+          continue
+        }
+        if (trace.includes(dependentUrl)) {
+          return {
+            declined: true,
+            reason: "circular dependency",
+            declinedBy: urlToRelativeUrl(dependentUrl, rootDirectoryUrl),
+          }
+        }
+        const dependentPropagationResult = iterate(dependentUrlInfo, [
+          ...trace,
+          dependentUrl,
+        ])
+        if (dependentPropagationResult.accepted) {
+          instructions.push(...dependentPropagationResult.instructions)
+          continue
+        }
+        if (
+          // declined explicitely by an other file, it must decline the whole update
+          dependentPropagationResult.declinedBy
+        ) {
+          return dependentPropagationResult
+        }
+        // declined by absence of boundary, we can keep searching
+        continue
+      }
+      if (instructions.length === 0) {
+        return {
+          declined: true,
+          reason: `there is no file accepting hot reload while propagating update`,
+        }
+      }
+      return {
+        accepted: true,
+        reason: `${instructions.length} dependent file(s) accepts hot reload`,
+        instructions,
+      }
+    }
+    const trace = []
+    return iterate(firstUrlInfo, trace)
+  }
+  clientFileChangeCallbackList.push(({ url, event }) => {
+    const urlInfo = urlGraph.getUrlInfo(url)
+    // file not part of dependency graph
+    if (!urlInfo) {
+      return
+    }
+    const relativeUrl = urlToRelativeUrl(url, rootDirectoryUrl)
+    const hotUpdate = propagateUpdate(urlInfo)
+    if (hotUpdate.declined) {
+      notifyDeclined({
+        cause: `${relativeUrl} ${event}`,
+        reason: hotUpdate.reason,
+        declinedBy: hotUpdate.declinedBy,
+      })
+    } else {
+      notifyAccepted({
+        cause: `${relativeUrl} ${event}`,
+        reason: hotUpdate.reason,
+        instructions: hotUpdate.instructions,
+      })
+    }
+  })
+  clientFilesPruneCallbackList.push(({ prunedUrlInfos, firstUrlInfo }) => {
+    const mainHotUpdate = propagateUpdate(firstUrlInfo)
+    const cause = `following files are no longer referenced: ${prunedUrlInfos.map(
+      (prunedUrlInfo) => urlToRelativeUrl(prunedUrlInfo.url, rootDirectoryUrl),
+    )}`
+    // now check if we can hot update the main ressource
+    // then if we can hot update all dependencies
+    if (mainHotUpdate.declined) {
+      notifyDeclined({
+        cause,
+        reason: mainHotUpdate.reason,
+        declinedBy: mainHotUpdate.declinedBy,
+      })
+      return
+    }
+    // main can hot update
+    let i = 0
+    const instructions = []
+    while (i < prunedUrlInfos.length) {
+      const prunedUrlInfo = prunedUrlInfos[i++]
+      if (prunedUrlInfo.data.hotDecline) {
+        notifyDeclined({
+          cause,
+          reason: `a pruned file declines hot reload`,
+          declinedBy: urlToRelativeUrl(prunedUrlInfo.url, rootDirectoryUrl),
+        })
+        return
+      }
+      instructions.push({
+        type: "prune",
+        boundary: urlToRelativeUrl(prunedUrlInfo.url, rootDirectoryUrl),
+        acceptedBy: urlToRelativeUrl(firstUrlInfo.url, rootDirectoryUrl),
+      })
+    }
+    notifyAccepted({
+      cause,
+      reason: mainHotUpdate.reason,
+      instructions,
+    })
+  })
+
+  return {
+    name: "jsenv:sse_server",
+    appliesDuring: { dev: true },
+    serve: (request) => {
+      if (request.ressource === "/__graph__") {
+        const graphJson = JSON.stringify(urlGraph.toJSON(rootDirectoryUrl))
+        return {
+          status: 200,
+          headers: {
+            "content-type": "application/json",
+            "content-length": Buffer.byteLength(graphJson),
+          },
+          body: graphJson,
+        }
+      }
+      const { accept } = request.headers
+      if (accept && accept.includes("text/event-stream")) {
+        const room = sseService.getOrCreateSSERoom(request)
+        return room.join(request)
+      }
+      return null
+    },
+    destroy: () => {
+      sseService.destroy()
+    },
+  }
+}

package/src/plugins/autoreload/jsenv_plugin_autoreload.js

@@ -0,0 +1,25 @@
+import { jsenvPluginHmr } from "./jsenv_plugin_hmr.js"
+import { jsenvPluginDevSSEClient } from "./dev_sse/jsenv_plugin_dev_sse_client.js"
+import { jsenvPluginDevSSEServer } from "./dev_sse/jsenv_plugin_dev_sse_server.js"
+
+export const jsenvPluginAutoreload = ({
+  rootDirectoryUrl,
+  urlGraph,
+  scenario,
+  clientFileChangeCallbackList,
+  clientFilesPruneCallbackList,
+}) => {
+  if (scenario === "build") {
+    return []
+  }
+  return [
+    jsenvPluginHmr(),
+    jsenvPluginDevSSEClient(),
+    jsenvPluginDevSSEServer({
+      rootDirectoryUrl,
+      urlGraph,
+      clientFileChangeCallbackList,
+      clientFilesPruneCallbackList,
+    }),
+  ]
+}

package/src/plugins/autoreload/jsenv_plugin_hmr.js

@@ -0,0 +1,35 @@
+export const jsenvPluginHmr = () => {
+  return {
+    name: "jsenv:hmr",
+    appliesDuring: { dev: true },
+    redirectUrl: (reference) => {
+      const urlObject = new URL(reference.url)
+      if (!urlObject.searchParams.has("hmr")) {
+        reference.data.hmr = false
+        return null
+      }
+      reference.data.hmr = true
+      // "hmr" search param goal is to mark url as enabling hmr:
+      // this goal is achieved when we reach this part of the code
+      // We get rid of this params so that urlGraph and other parts of the code
+      // recognize the url (it is not considered as a different url)
+      urlObject.searchParams.delete("hmr")
+      urlObject.searchParams.delete("v")
+      return urlObject.href
+    },
+    transformUrlSearchParams: (reference, context) => {
+      const parentUrlInfo = context.urlGraph.getUrlInfo(reference.parentUrl)
+      if (!parentUrlInfo || !parentUrlInfo.data.hmr) {
+        return null
+      }
+      const urlInfo = context.urlGraph.getUrlInfo(reference.url)
+      if (!urlInfo.modifiedTimestamp) {
+        return null
+      }
+      return {
+        hmr: "",
+        v: urlInfo.modifiedTimestamp,
+      }
+    },
+  }
+}

package/src/plugins/bundling/css/bundle_css.js

@@ -0,0 +1,140 @@
+/*
+ * Each @import found in css is replaced by the file content
+ * - There is no need to worry about urls (such as background-image: url())
+ *   because they are absolute (file://*) and will be made relative again by jsenv build
+ * - The sourcemap are not generated but ideally they should be
+ *   It can be quite challenging, see "bundle_sourcemap.js"
+ */
+
+import { createMagicSource } from "@jsenv/sourcemap"
+import { applyPostCss, postCssPluginUrlVisitor } from "@jsenv/ast"
+
+import { sortByDependencies } from "@jsenv/core/src/omega/url_graph/sort_by_dependencies.js"
+
+// Do not use until https://github.com/parcel-bundler/parcel-css/issues/181
+export const bundleCss = async ({ cssUrlInfos, context }) => {
+  const bundledCssUrlInfos = {}
+  const cssBundleInfos = await performCssBundling({
+    cssEntryUrlInfos: cssUrlInfos,
+    context,
+  })
+  cssUrlInfos.forEach((cssUrlInfo) => {
+    bundledCssUrlInfos[cssUrlInfo.url] = {
+      data: {
+        generatedBy: "parcel",
+      },
+      contentType: "text/css",
+      content: cssBundleInfos[cssUrlInfo.url].bundleContent,
+    }
+  })
+  return bundledCssUrlInfos
+}
+
+const performCssBundling = async ({ cssEntryUrlInfos, context }) => {
+  const cssBundleInfos = await loadCssUrls({
+    cssEntryUrlInfos,
+    context,
+  })
+  const cssUrlsSorted = sortByDependencies(cssBundleInfos)
+  cssUrlsSorted.forEach((cssUrl) => {
+    const cssBundleInfo = cssBundleInfos[cssUrl]
+    const magicSource = createMagicSource(cssBundleInfo.content)
+    cssBundleInfo.cssUrls.forEach((cssUrl) => {
+      if (cssUrl.type === "@import") {
+        magicSource.replace({
+          start: cssUrl.atRuleStart,
+          end: cssUrl.atRuleEnd,
+          replacement: cssBundleInfos[cssUrl.url].bundleContent,
+        })
+      }
+    })
+    const { content } = magicSource.toContentAndSourcemap()
+    cssBundleInfo.bundleContent = content.trim()
+  })
+  return cssBundleInfos
+}
+
+const parseCssUrls = async ({ css, url }) => {
+  const cssUrls = []
+  await applyPostCss({
+    sourcemaps: false,
+    plugins: [
+      postCssPluginUrlVisitor({
+        urlVisitor: ({
+          type,
+          specifier,
+          specifierStart,
+          specifierEnd,
+          atRuleStart,
+          atRuleEnd,
+        }) => {
+          cssUrls.push({
+            type,
+            url: new URL(specifier, url).href,
+            specifierStart,
+            specifierEnd,
+            atRuleStart,
+            atRuleEnd,
+          })
+        },
+      }),
+    ],
+    url,
+    content: css,
+  })
+
+  return cssUrls
+}
+
+const loadCssUrls = async ({ cssEntryUrlInfos, context }) => {
+  const cssBundleInfos = {}
+  const promises = []
+  const promiseMap = new Map()
+
+  const load = (cssUrlInfo) => {
+    const promiseFromData = promiseMap.get(cssUrlInfo.url)
+    if (promiseFromData) return promiseFromData
+    const promise = _load(cssUrlInfo)
+    promises.push(promise)
+    promiseMap.set(cssUrlInfo.url, promise)
+    return promise
+  }
+
+  const _load = async (cssUrlInfo) => {
+    const cssUrls = await parseCssUrls({
+      css: cssUrlInfo.content,
+      url: cssUrlInfo.url,
+    })
+    const cssBundleInfo = {
+      content: cssUrlInfo.content,
+      cssUrls,
+      dependencies: [],
+    }
+    cssBundleInfos[cssUrlInfo.url] = cssBundleInfo
+    cssUrls.forEach((cssUrl) => {
+      if (cssUrl.type === "@import") {
+        cssBundleInfo.dependencies.push(cssUrl.url)
+        const importedCssUrlInfo = context.urlGraph.getUrlInfo(cssUrl.url)
+        load(importedCssUrlInfo)
+      }
+    })
+  }
+
+  cssEntryUrlInfos.forEach((cssEntryUrlInfo) => {
+    load(cssEntryUrlInfo)
+  })
+
+  const waitAll = async () => {
+    if (promises.length === 0) {
+      return
+    }
+    const promisesToWait = promises.slice()
+    promises.length = 0
+    await Promise.all(promisesToWait)
+    await waitAll()
+  }
+  await waitAll()
+  promiseMap.clear()
+
+  return cssBundleInfos
+}

package/src/plugins/bundling/js_classic_workers/bundle_js_classic_workers.js

@@ -0,0 +1,13 @@
+/*
+ * TODO:
+ * for each js_classic where subtype is a worker
+ * take the url info and find importScripts calls
+ * and replace them with the corresponding url info file content
+ * we'll ikely need to save the importScripts node location to be able to do that
+ */
+
+// import { createMagicSource } from "@jsenv/utils/sourcemap/magic_source.js"
+
+export const bundleJsClassicWorkers = () => {
+  return {}
+}