@jsenv/core 27.0.0-alpha.13 → 27.0.0-alpha.16

package/main.js

@@ -16,8 +16,8 @@ export {
 } from "./src/execute/runtimes/browsers/webkit.js"
 export { nodeProcess } from "./src/execute/runtimes/node/node_process.js"
 // build
-export { preview } from "./src/preview/preview.js"
 export { build } from "./src/build/build.js"
+export { startBuildServer } from "./src/build/start_build_server.js"
 
 // advanced
 export { execute } from "./src/execute/execute.js"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "27.0.0-alpha.13",
+  "version": "27.0.0-alpha.16",
   "description": "Tool to develop, test and build js projects",
   "license": "MIT",
   "repository": {
@@ -65,9 +65,9 @@
     "@jsenv/log": "1.5.1",
     "@jsenv/logger": "4.0.1",
     "@jsenv/node-esm-resolution": "0.0.2",
-    "@jsenv/server": "12.6.0",
+    "@jsenv/server": "12.6.1",
     "@jsenv/uneval": "1.6.0",
-    "@jsenv/utils": "1.1.0",
+    "@jsenv/utils": "1.2.0",
     "construct-style-sheets-polyfill": "3.1.0",
     "cssnano": "5.1.7",
     "cssnano-preset-default": "5.2.7",
@@ -89,15 +89,14 @@
   "devDependencies": {
     "@babel/eslint-parser": "7.17.0",
     "@babel/plugin-syntax-import-assertions": "7.16.7",
-    "@jsenv/assert": "2.5.3",
+    "@jsenv/assert": "2.5.4",
     "@jsenv/eslint-config": "16.0.9",
-    "@jsenv/file-size-impact": "12.1.10",
-    "@jsenv/github-release-package": "1.3.5",
+    "@jsenv/file-size-impact": "12.1.11",
+    "@jsenv/github-release-package": "1.3.6",
     "@jsenv/https-local": "1.0.8",
     "@jsenv/importmap-node-module": "5.1.3",
-    "@jsenv/package-publish": "1.7.2",
     "@jsenv/package-workspace": "0.0.5",
-    "@jsenv/performance-impact": "2.2.9",
+    "@jsenv/performance-impact": "2.2.10",
     "@jsenv/pwa": "4.0.1",
     "eslint": "8.13.0",
     "eslint-plugin-html": "6.2.0",

package/src/build/build.js

@@ -66,7 +66,6 @@ export const build = async ({
   transpilation = {},
   bundling = true,
   minification = true,
-
   versioning = true,
   versioningMethod = "search_param", // "filename", "search_param"
   lineBreakNormalization = process.platform === "win32",
@@ -582,13 +581,27 @@ ${Object.keys(finalGraph.urlInfos).join("\n")}`,
         if (!urlInfo.data.isEntryPoint && urlInfo.dependents.size === 0) {
           return
         }
+
+        const urlContent =
+          urlInfo.type === "html"
+            ? stringifyHtmlAst(
+                parseHtmlString(urlInfo.content, {
+                  storeOriginalPositions: false,
+                }),
+                { removeOriginalPositionAttributes: true },
+              )
+            : urlInfo.content
         const versionGenerator = createVersionGenerator()
         versionGenerator.augmentWithContent({
-          content: urlInfo.content,
+          content: urlContent,
           contentType: urlInfo.contentType,
           lineBreakNormalization,
         })
         urlInfo.dependencies.forEach((dependencyUrl) => {
+          // this dependency is inline (data:) or remote (http://, https://)
+          if (!dependencyUrl.startsWith("file:")) {
+            return
+          }
           const dependencyUrlInfo = finalGraph.getUrlInfo(dependencyUrl)
           if (
             // this content is part of the file, no need to take into account twice
@@ -615,6 +628,7 @@ ${Object.keys(finalGraph.urlInfos).join("\n")}`,
           }
         })
         urlInfo.data.version = versionGenerator.generate()
+
         urlInfo.data.versionedUrl = injectVersionIntoBuildUrl({
           buildUrl: urlInfo.url,
           version: urlInfo.data.version,
@@ -717,18 +731,6 @@ ${Object.keys(finalGraph.urlInfos).join("\n")}`,
               }
               return versionedUrlInfo
             },
-            transformUrlContent: {
-              html: (urlInfo) => {
-                const htmlAst = parseHtmlString(urlInfo.content, {
-                  storeOriginalPositions: false,
-                })
-                return {
-                  content: stringifyHtmlAst(htmlAst, {
-                    removeOriginalPositionAttributes: true,
-                  }),
-                }
-              },
-            },
           },
         ],
       })
@@ -761,8 +763,6 @@ ${Object.keys(finalGraph.urlInfos).join("\n")}`,
       throw e
     }
     versioningTask.done()
-  } else {
-    // TODO: remove html attributes such as original-src-position
   }
 
   GRAPH.forEach(finalGraph, (urlInfo) => {
@@ -772,6 +772,14 @@ ${Object.keys(finalGraph.urlInfos).join("\n")}`,
     if (urlInfo.external) {
       return
     }
+    if (urlInfo.type === "html") {
+      const htmlAst = parseHtmlString(urlInfo.content, {
+        storeOriginalPositions: false,
+      })
+      urlInfo.content = stringifyHtmlAst(htmlAst, {
+        removeOriginalPositionAttributes: true,
+      })
+    }
     const version = urlInfo.data.version
     const useVersionedUrl = version && canUseVersionedUrl(urlInfo, finalGraph)
     const buildUrl = useVersionedUrl ? urlInfo.data.versionedUrl : urlInfo.url
@@ -795,7 +803,11 @@ ${Object.keys(finalGraph.urlInfos).join("\n")}`,
     // nothing uses this url anymore
     // - versioning update inline content
     // - file converted for import assertion of js_classic conversion
-    if (!urlInfo.data.isEntryPoint && urlInfo.dependents.size === 0) {
+    if (
+      !urlInfo.data.isEntryPoint &&
+      urlInfo.type !== "sourcemap" &&
+      urlInfo.dependents.size === 0
+    ) {
       cleanupActions.push(() => {
         delete finalGraph.urlInfos[urlInfo.url]
       })

package/src/build/start_build_server.js

@@ -0,0 +1,176 @@
+/*
+ * startBuildServer is mean to interact with the build files;
+ * files that will be deployed to production server(s).
+ * We want to be as close as possible from the production in order to:
+ * - run lighthouse
+ * - run an automated test tool such as cypress, playwright
+ * - see exactly how build file behaves (debug, measure perf, etc)
+ * For these reasons "startBuildServer" must be as close as possible from a static file server.
+ * It is not meant to provide a nice developper experience: this is the role "startDevServer".
+ *
+ * Conclusion:
+ * "startBuildServer" must be as close as possible from a static file server because
+ * we want to be in the user shoes and we should not alter build files.
+ */
+
+import {
+  jsenvAccessControlAllowedHeaders,
+  startServer,
+  pluginServerTiming,
+  pluginRequestWaitingCheck,
+  pluginCORS,
+  fetchFileSystem,
+} from "@jsenv/server"
+import { Abort, raceProcessTeardownEvents } from "@jsenv/abort"
+import { createLogger } from "@jsenv/logger"
+
+import { createTaskLog } from "@jsenv/utils/logs/task_log.js"
+import { watchFiles } from "@jsenv/utils/file_watcher/file_watcher.js"
+import { executeCommand } from "@jsenv/utils/command/command.js"
+
+export const startBuildServer = async ({
+  signal = new AbortController().signal,
+  handleSIGINT = true,
+  logLevel,
+  buildCommandLogLevel = "warn",
+  protocol,
+  http2,
+  certificate,
+  privateKey,
+  listenAnyIp,
+  ip,
+  port,
+
+  rootDirectoryUrl,
+  buildDirectoryUrl,
+  buildCommand,
+  watchedFilePatterns,
+  cooldownBetweenFileEvents,
+}) => {
+  const operation = Abort.startOperation()
+  operation.addAbortSignal(signal)
+  if (handleSIGINT) {
+    operation.addAbortSource((abort) => {
+      return raceProcessTeardownEvents(
+        {
+          SIGINT: true,
+        },
+        abort,
+      )
+    })
+  }
+  const logger = createLogger({ logLevel })
+
+  let buildPromise
+  let abortController
+  const runBuild = async () => {
+    const buildTask = createTaskLog(logger, `execute build command`)
+    abortController = new AbortController()
+    operation.addAbortCallback(() => {
+      abortController.abort()
+    })
+    buildPromise = executeCommand(buildCommand, {
+      cwd: rootDirectoryUrl,
+      logLevel: buildCommandLogLevel,
+      signal: abortController.signal,
+    })
+    try {
+      await buildPromise
+      buildTask.done()
+    } catch (e) {
+      if (e.code === "ABORT_ERR") {
+        buildTask.fail(`execute build command aborted`)
+      } else {
+        buildTask.fail()
+        throw e
+      }
+    }
+  }
+
+  const startServerTask = createTaskLog(logger, "start build server")
+  const server = await startServer({
+    signal,
+    stopOnExit: false,
+    stopOnSIGINT: false,
+    stopOnInternalError: false,
+    keepProcessAlive: true,
+    logLevel,
+    startLog: false,
+
+    protocol,
+    http2,
+    certificate,
+    privateKey,
+    listenAnyIp,
+    ip,
+    port,
+    plugins: {
+      ...pluginCORS({
+        accessControlAllowRequestOrigin: true,
+        accessControlAllowRequestMethod: true,
+        accessControlAllowRequestHeaders: true,
+        accessControlAllowedRequestHeaders: [
+          ...jsenvAccessControlAllowedHeaders,
+          "x-jsenv-execution-id",
+        ],
+        accessControlAllowCredentials: true,
+      }),
+      ...pluginServerTiming(),
+      ...pluginRequestWaitingCheck({
+        requestWaitingMs: 60 * 1000,
+      }),
+    },
+    sendErrorDetails: true,
+    requestToResponse: async (request) => {
+      await buildPromise
+      const urlIsVersioned = new URL(
+        request.ressource,
+        request.origin,
+      ).searchParams.has("v")
+
+      return fetchFileSystem(
+        new URL(request.ressource.slice(1), buildDirectoryUrl),
+        {
+          headers: request.headers,
+          cacheControl: urlIsVersioned
+            ? `private,max-age=${SECONDS_IN_30_DAYS},immutable`
+            : "private,max-age=0,must-revalidate",
+          etagEnabled: true,
+          compressionEnabled: !request.pathname.endsWith(".mp4"),
+          rootDirectoryUrl: buildDirectoryUrl,
+          canReadDirectory: true,
+        },
+      )
+    },
+  })
+  startServerTask.done()
+  logger.info(``)
+  Object.keys(server.origins).forEach((key) => {
+    logger.info(`- ${server.origins[key]}`)
+  })
+  logger.info(``)
+
+  const unregisterDirectoryLifecyle = watchFiles({
+    rootDirectoryUrl,
+    watchedFilePatterns,
+    cooldownBetweenFileEvents,
+    fileChangeCallback: ({ relativeUrl, event }) => {
+      abortController.abort()
+      // setTimeout is to ensure the abortController.abort() above
+      // is properly taken into account so that logs about abort comes first
+      // then logs about re-running the build happens
+      setTimeout(() => {
+        logger.info(`${relativeUrl} ${event} -> rebuild`)
+        runBuild()
+      })
+    },
+  })
+  operation.addAbortCallback(() => {
+    unregisterDirectoryLifecyle()
+  })
+  runBuild()
+
+  return server
+}
+
+const SECONDS_IN_30_DAYS = 60 * 60 * 24 * 30

package/src/dev/start_dev_server.js

@@ -7,7 +7,6 @@ import { createUrlGraph } from "@jsenv/core/src/omega/url_graph.js"
 import { createKitchen } from "@jsenv/core/src/omega/kitchen.js"
 import { startOmegaServer } from "@jsenv/core/src/omega/omega_server.js"
 
-import { jsenvPluginAutoreload } from "./plugins/autoreload/jsenv_plugin_autoreload.js"
 import { jsenvPluginExplorer } from "./plugins/explorer/jsenv_plugin_explorer.js"
 import { jsenvPluginToolbar } from "./plugins/toolbar/jsenv_plugin_toolbar.js"
 
@@ -29,16 +28,9 @@ export const startDevServer = async ({
   plugins = [],
   htmlSupervisor = true,
   injectedGlobals,
-
+  nodeEsmResolution,
+  fileSystemMagicResolution,
   autoreload = true,
-  autoreloadPatterns = {
-    "./**": true,
-    "./**/.*/": false, // any folder starting with a dot is ignored (includes .git for instance)
-    "./dist/": false,
-    "./**/node_modules/": false,
-  },
-  cooldownBetweenFileEvents = 0,
-
   explorerGroups = {
     source: {
       "./*.html": true,
@@ -65,19 +57,16 @@ export const startDevServer = async ({
     plugins: [
       ...plugins,
       ...getCorePlugins({
+        rootDirectoryUrl,
+        urlGraph,
+        scenario: "dev",
+
         htmlSupervisor,
         injectedGlobals,
+        nodeEsmResolution,
+        fileSystemMagicResolution,
+        autoreload,
       }),
-      ...(autoreload
-        ? [
-            jsenvPluginAutoreload({
-              rootDirectoryUrl,
-              urlGraph,
-              autoreloadPatterns,
-              cooldownBetweenFileEvents,
-            }),
-          ]
-        : []),
       jsenvPluginExplorer({
         groups: explorerGroups,
       }),

package/src/execute/execute.js

@@ -26,10 +26,13 @@ export const execute = async ({
   runtime,
   runtimeParams,
 
-  injectedGlobals,
-  plugins = [],
   scenario = "dev",
   sourcemaps = "inline",
+  plugins = [],
+  nodeEsmResolution,
+  fileSystemMagicResolution,
+  injectedGlobals,
+  transpilation,
 
   port,
   protocol,
@@ -72,7 +75,11 @@ export const execute = async ({
       plugins: [
         ...plugins,
         ...getCorePlugins({
+          scenario,
+          nodeEsmResolution,
+          fileSystemMagicResolution,
           injectedGlobals,
+          transpilation,
         }),
       ],
     })

package/src/omega/kitchen.js

@@ -38,9 +38,13 @@ export const createKitchen = ({
     test: "inline",
     build: "none",
   }[scenario],
-  // we don't need sources in sourcemap as long as the url in the
-  // sourcemap uses file:/// (chrome will understand and read from filesystem)
-  sourcemapsSources = false,
+  sourcemapsSources = {
+    // during dev/test, chrome is able to find the sourcemap sources
+    // as long as they use file:// protocol in the sourcemap files
+    dev: false,
+    test: false,
+    build: true,
+  }[scenario],
   runtimeCompat = defaultRuntimeCompat,
   writeOnFileSystem = true,
 }) => {

package/src/{dev/plugins/autoreload → plugins/autoreload/dev_sse}/client/event_source_client.js

@@ -1,4 +1,5 @@
-import { createEventSourceConnection } from "./event_source_connection.js"
+import { createEventSourceConnection } from "@jsenv/utils/event_source/event_source.js"
+import { urlHotMetas } from "../../../import_meta_hot/client/import_meta_hot.js"
 import {
   isAutoreloadEnabled,
   setAutoreloadPreference,
@@ -9,7 +10,6 @@ import {
   reloadDOMNodesUsingUrl,
   reloadJsImport,
 } from "./reload.js"
-import { urlHotMetas } from "./import_meta_hot.js"
 
 const reloadMessages = []
 const reloadMessagesSignal = { onchange: () => {} }

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

@@ -0,0 +1,41 @@
+import {
+  parseHtmlString,
+  stringifyHtmlAst,
+  injectScriptAsEarlyAsPossible,
+  createHtmlNode,
+} from "@jsenv/utils/html_ast/html_ast.js"
+
+export const jsenvPluginDevSSEClient = () => {
+  const eventSourceClientFileUrl = new URL(
+    "./client/event_source_client.js",
+    import.meta.url,
+  ).href
+
+  return {
+    name: "jsenv:dev_sse_client",
+    appliesDuring: { dev: true },
+    transformUrlContent: {
+      html: (htmlUrlInfo, context) => {
+        const htmlAst = parseHtmlString(htmlUrlInfo.content)
+        const [eventSourceClientReference] = context.referenceUtils.inject({
+          type: "script_src",
+          expectedType: "js_module",
+          specifier: eventSourceClientFileUrl,
+        })
+        injectScriptAsEarlyAsPossible(
+          htmlAst,
+          createHtmlNode({
+            "tagName": "script",
+            "type": "module",
+            "src": eventSourceClientReference.generatedSpecifier,
+            "injected-by": "jsenv:dev_sse_client",
+          }),
+        )
+        const htmlModified = stringifyHtmlAst(htmlAst)
+        return {
+          content: htmlModified,
+        }
+      },
+    },
+  }
+}