@jsenv/core 22.4.0 → 23.0.0

package/helpers/new_stylesheet/new_stylesheet.js

@@ -0,0 +1,411 @@
+/* eslint-disable */
+// copy paste to help finding the file (npm and node modules would make it complex)
+// to keep in sync with https://github.com/calebdwilliams/construct-style-sheets
+;(function () {
+  "use strict"
+
+  if (typeof document === "undefined" || "adoptedStyleSheets" in document) {
+    return
+  }
+
+  var hasShadyCss = "ShadyCSS" in window && !ShadyCSS.nativeShadow
+  var bootstrapper = document.implementation.createHTMLDocument("")
+  var closedShadowRootRegistry = new WeakMap()
+  var _DOMException = typeof DOMException === "object" ? Error : DOMException
+  var defineProperty = Object.defineProperty
+  var forEach = Array.prototype.forEach
+
+  var hasBrokenRules = (function () {
+    var style = bootstrapper.createElement("style")
+    style.textContent = '.x{content:"y"}'
+    bootstrapper.body.appendChild(style)
+    return style.sheet.cssRules[0].style.content !== '"y"'
+  })()
+  var brokenRulePatterns = [/content:\s*["']/gm]
+  function fixBrokenRules(content) {
+    return brokenRulePatterns.reduce(function (acc, pattern) {
+      return acc.replace(pattern, "$&%%%")
+    }, content)
+  }
+  var placeholderPatterns = [/(content:\s*["'])%%%/gm]
+  var getCssText = hasBrokenRules
+    ? function (rule) {
+        return placeholderPatterns.reduce(function (acc, pattern) {
+          return acc.replace(pattern, "$1")
+        }, rule.cssText)
+      }
+    : function (rule) {
+        return rule.cssText
+      }
+
+  var importPattern = /@import.+?;?$/gm
+  function rejectImports(contents) {
+    var _contents = contents.replace(importPattern, "")
+    if (_contents !== contents) {
+      console.warn(
+        "@import rules are not allowed here. See https://github.com/WICG/construct-stylesheets/issues/119#issuecomment-588352418",
+      )
+    }
+    return _contents.trim()
+  }
+  function clearRules(sheet) {
+    for (var i = 0; i < sheet.cssRules.length; i++) {
+      sheet.deleteRule(0)
+    }
+  }
+  function insertAllRules(from, to) {
+    forEach.call(from.cssRules, function (rule, i) {
+      to.insertRule(getCssText(rule), i)
+    })
+  }
+  function isElementConnected(element) {
+    return "isConnected" in element
+      ? element.isConnected
+      : document.contains(element)
+  }
+  function unique(arr) {
+    return arr.filter(function (value, index) {
+      return arr.indexOf(value) === index
+    })
+  }
+  function diff(arr1, arr2) {
+    return arr1.filter(function (value) {
+      return arr2.indexOf(value) === -1
+    })
+  }
+  function removeNode(node) {
+    node.parentNode.removeChild(node)
+  }
+  function getShadowRoot(element) {
+    return element.shadowRoot || closedShadowRootRegistry.get(element)
+  }
+
+  var cssStyleSheetMethods = [
+    "addRule",
+    "deleteRule",
+    "insertRule",
+    "removeRule",
+  ]
+  var NonConstructedStyleSheet = CSSStyleSheet
+  var nonConstructedProto = NonConstructedStyleSheet.prototype
+  nonConstructedProto.replace = function () {
+    return Promise.reject(
+      new _DOMException(
+        "Can't call replace on non-constructed CSSStyleSheets.",
+      ),
+    )
+  }
+  nonConstructedProto.replaceSync = function () {
+    throw new _DOMException(
+      "Failed to execute 'replaceSync' on 'CSSStyleSheet': Can't call replaceSync on non-constructed CSSStyleSheets.",
+    )
+  }
+  function isCSSStyleSheetInstance(instance) {
+    return typeof instance === "object"
+      ? proto$1.isPrototypeOf(instance) ||
+          nonConstructedProto.isPrototypeOf(instance)
+      : false
+  }
+  function isNonConstructedStyleSheetInstance(instance) {
+    return typeof instance === "object"
+      ? nonConstructedProto.isPrototypeOf(instance)
+      : false
+  }
+  var $basicStyleSheet = new WeakMap()
+  var $locations = new WeakMap()
+  var $adoptersByLocation = new WeakMap()
+  function addAdopterLocation(sheet, location) {
+    var adopter = document.createElement("style")
+    $adoptersByLocation.get(sheet).set(location, adopter)
+    $locations.get(sheet).push(location)
+    return adopter
+  }
+  function getAdopterByLocation(sheet, location) {
+    return $adoptersByLocation.get(sheet).get(location)
+  }
+  function removeAdopterLocation(sheet, location) {
+    $adoptersByLocation.get(sheet).delete(location)
+    $locations.set(
+      sheet,
+      $locations.get(sheet).filter(function (_location) {
+        return _location !== location
+      }),
+    )
+  }
+  function restyleAdopter(sheet, adopter) {
+    requestAnimationFrame(function () {
+      clearRules(adopter.sheet)
+      insertAllRules($basicStyleSheet.get(sheet), adopter.sheet)
+    })
+  }
+  function checkInvocationCorrectness(self) {
+    if (!$basicStyleSheet.has(self)) {
+      throw new TypeError("Illegal invocation")
+    }
+  }
+  function ConstructedStyleSheet() {
+    var self = this
+    var style = document.createElement("style")
+    bootstrapper.body.appendChild(style)
+    $basicStyleSheet.set(self, style.sheet)
+    $locations.set(self, [])
+    $adoptersByLocation.set(self, new WeakMap())
+  }
+  var proto$1 = ConstructedStyleSheet.prototype
+  proto$1.replace = function replace(contents) {
+    try {
+      this.replaceSync(contents)
+      return Promise.resolve(this)
+    } catch (e) {
+      return Promise.reject(e)
+    }
+  }
+  proto$1.replaceSync = function replaceSync(contents) {
+    checkInvocationCorrectness(this)
+    if (typeof contents === "string") {
+      var self_1 = this
+      var style = $basicStyleSheet.get(self_1).ownerNode
+      style.textContent = hasBrokenRules
+        ? fixBrokenRules(rejectImports(contents))
+        : rejectImports(contents)
+      $basicStyleSheet.set(self_1, style.sheet)
+      $locations.get(self_1).forEach(function (location) {
+        if (location.isConnected()) {
+          restyleAdopter(self_1, getAdopterByLocation(self_1, location))
+        }
+      })
+    }
+  }
+  defineProperty(proto$1, "cssRules", {
+    configurable: true,
+    enumerable: true,
+    get: function cssRules() {
+      checkInvocationCorrectness(this)
+      return $basicStyleSheet.get(this).cssRules
+    },
+  })
+  cssStyleSheetMethods.forEach(function (method) {
+    proto$1[method] = function () {
+      var self = this
+      checkInvocationCorrectness(self)
+      var args = arguments
+      $locations.get(self).forEach(function (location) {
+        if (location.isConnected()) {
+          var sheet = getAdopterByLocation(self, location).sheet
+          sheet[method].apply(sheet, args)
+        }
+      })
+      if (hasBrokenRules) {
+        if (method === "insertRule") {
+          args[0] = fixBrokenRules(args[0])
+        }
+        if (method === "addRule") {
+          args[1] = fixBrokenRules(args[1])
+        }
+      }
+      var basic = $basicStyleSheet.get(self)
+      return basic[method].apply(basic, args)
+    }
+  })
+  defineProperty(ConstructedStyleSheet, Symbol.hasInstance, {
+    configurable: true,
+    value: isCSSStyleSheetInstance,
+  })
+
+  var defaultObserverOptions = {
+    childList: true,
+    subtree: true,
+  }
+  var locations = new WeakMap()
+  function getAssociatedLocation(element) {
+    var location = locations.get(element)
+    if (!location) {
+      location = new Location(element)
+      locations.set(element, location)
+    }
+    return location
+  }
+  function attachAdoptedStyleSheetProperty(constructor) {
+    defineProperty(constructor.prototype, "adoptedStyleSheets", {
+      configurable: true,
+      enumerable: true,
+      get: function () {
+        return getAssociatedLocation(this).sheets
+      },
+      set: function (sheets) {
+        getAssociatedLocation(this).update(sheets)
+      },
+    })
+  }
+  function traverseWebComponents(node, callback) {
+    var iter = document.createNodeIterator(
+      node,
+      NodeFilter.SHOW_ELEMENT,
+      function (foundNode) {
+        return getShadowRoot(foundNode)
+          ? NodeFilter.FILTER_ACCEPT
+          : NodeFilter.FILTER_REJECT
+      },
+      null,
+      false,
+    )
+    for (var next = void 0; (next = iter.nextNode()); ) {
+      callback(getShadowRoot(next))
+    }
+  }
+  var $element = new WeakMap()
+  var $uniqueSheets = new WeakMap()
+  var $observer = new WeakMap()
+  function isExistingAdopter(self, element) {
+    return (
+      element instanceof HTMLStyleElement &&
+      $uniqueSheets.get(self).some(function (sheet) {
+        return getAdopterByLocation(sheet, self)
+      })
+    )
+  }
+  function getAdopterContainer(self) {
+    var element = $element.get(self)
+    return element instanceof Document ? element.body : element
+  }
+  function adopt(self) {
+    var styleList = document.createDocumentFragment()
+    var sheets = $uniqueSheets.get(self)
+    var observer = $observer.get(self)
+    var container = getAdopterContainer(self)
+    observer.disconnect()
+    sheets.forEach(function (sheet) {
+      styleList.appendChild(
+        getAdopterByLocation(sheet, self) || addAdopterLocation(sheet, self),
+      )
+    })
+    container.insertBefore(styleList, null)
+    observer.observe(container, defaultObserverOptions)
+    sheets.forEach(function (sheet) {
+      restyleAdopter(sheet, getAdopterByLocation(sheet, self))
+    })
+  }
+  function Location(element) {
+    var self = this
+    self.sheets = []
+    $element.set(self, element)
+    $uniqueSheets.set(self, [])
+    $observer.set(
+      self,
+      new MutationObserver(function (mutations, observer) {
+        if (!document) {
+          observer.disconnect()
+          return
+        }
+        mutations.forEach(function (mutation) {
+          if (!hasShadyCss) {
+            forEach.call(mutation.addedNodes, function (node) {
+              if (!(node instanceof Element)) {
+                return
+              }
+              traverseWebComponents(node, function (root) {
+                getAssociatedLocation(root).connect()
+              })
+            })
+          }
+          forEach.call(mutation.removedNodes, function (node) {
+            if (!(node instanceof Element)) {
+              return
+            }
+            if (isExistingAdopter(self, node)) {
+              adopt(self)
+            }
+            if (!hasShadyCss) {
+              traverseWebComponents(node, function (root) {
+                getAssociatedLocation(root).disconnect()
+              })
+            }
+          })
+        })
+      }),
+    )
+  }
+  Location.prototype = {
+    isConnected: function () {
+      var element = $element.get(this)
+      return element instanceof Document
+        ? element.readyState !== "loading"
+        : isElementConnected(element.host)
+    },
+    connect: function () {
+      var container = getAdopterContainer(this)
+      $observer.get(this).observe(container, defaultObserverOptions)
+      if ($uniqueSheets.get(this).length > 0) {
+        adopt(this)
+      }
+      traverseWebComponents(container, function (root) {
+        getAssociatedLocation(root).connect()
+      })
+    },
+    disconnect: function () {
+      $observer.get(this).disconnect()
+    },
+    update: function (sheets) {
+      var self = this
+      var locationType =
+        $element.get(self) === document ? "Document" : "ShadowRoot"
+      if (!Array.isArray(sheets)) {
+        throw new TypeError(
+          "Failed to set the 'adoptedStyleSheets' property on " +
+            locationType +
+            ": Iterator getter is not callable.",
+        )
+      }
+      if (!sheets.every(isCSSStyleSheetInstance)) {
+        throw new TypeError(
+          "Failed to set the 'adoptedStyleSheets' property on " +
+            locationType +
+            ": Failed to convert value to 'CSSStyleSheet'",
+        )
+      }
+      if (sheets.some(isNonConstructedStyleSheetInstance)) {
+        throw new TypeError(
+          "Failed to set the 'adoptedStyleSheets' property on " +
+            locationType +
+            ": Can't adopt non-constructed stylesheets",
+        )
+      }
+      self.sheets = sheets
+      var oldUniqueSheets = $uniqueSheets.get(self)
+      var uniqueSheets = unique(sheets)
+      var removedSheets = diff(oldUniqueSheets, uniqueSheets)
+      removedSheets.forEach(function (sheet) {
+        removeNode(getAdopterByLocation(sheet, self))
+        removeAdopterLocation(sheet, self)
+      })
+      $uniqueSheets.set(self, uniqueSheets)
+      if (self.isConnected() && uniqueSheets.length > 0) {
+        adopt(self)
+      }
+    },
+  }
+
+  window.CSSStyleSheet = ConstructedStyleSheet
+  attachAdoptedStyleSheetProperty(Document)
+  if ("ShadowRoot" in window) {
+    attachAdoptedStyleSheetProperty(ShadowRoot)
+    var proto = Element.prototype
+    var attach_1 = proto.attachShadow
+    proto.attachShadow = function attachShadow(init) {
+      var root = attach_1.call(this, init)
+      if (init.mode === "closed") {
+        closedShadowRootRegistry.set(this, root)
+      }
+      return root
+    }
+  }
+  var documentLocation = getAssociatedLocation(document)
+  if (documentLocation.isConnected()) {
+    documentLocation.connect()
+  } else {
+    document.addEventListener(
+      "DOMContentLoaded",
+      documentLocation.connect.bind(documentLocation),
+    )
+  }
+})()

package/main.js

@@ -1,6 +1,7 @@
 /* eslint-disable import/max-dependencies */
 export { buildProject } from "./src/buildProject.js"
 export { commonJsToJavaScriptModule } from "./src/commonJsToJavaScriptModule.js"
+export { jsonToJavaScriptModule } from "./src/jsonToJavaScriptModule.js"
 export { textToJavaScriptModule } from "./src/textToJavaScriptModule.js"
 export { execute } from "./src/execute.js"
 export { executeTestPlan } from "./src/executeTestPlan.js"
@@ -9,13 +10,13 @@ export { jsenvCoverageConfig } from "./src/jsenvCoverageConfig.js"
 export { jsenvExplorableConfig } from "./src/jsenvExplorableConfig.js"
 export { jsenvServiceWorkerFinalizer } from "./src/jsenvServiceWorkerFinalizer.js"
 export {
-  launchChromium,
-  launchChromiumTab,
-  launchFirefox,
-  launchFirefoxTab,
-  launchWebkit,
-  launchWebkitTab,
+  chromiumRuntime,
+  chromiumTabRuntime,
+  firefoxRuntime,
+  firefoxTabRuntime,
+  webkitRuntime,
+  webkitTabRuntime,
 } from "./src/launchBrowser.js"
-export { launchNode } from "./src/launchNode.js"
+export { nodeRuntime } from "./src/launchNode.js"
 export { requireUsingChildProcess } from "./src/requireUsingChildProcess.js"
 export { startExploring } from "./src/startExploring.js"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "22.4.0",
+  "version": "23.0.0",
   "description": "Tool to develop, test and build js projects",
   "license": "MIT",
   "repository": {
@@ -11,8 +11,7 @@
     "node": ">=14.9.0"
   },
   "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org"
+    "access": "public"
   },
   "type": "module",
   "exports": {
@@ -29,7 +28,7 @@
     "/main.js"
   ],
   "scripts": {
-    "eslint-check": "node ./node_modules/eslint/bin/eslint.js . --ext=.js,.mjs,.html",
+    "eslint-check": "node ./node_modules/eslint/bin/eslint.js . --ext=.js,.mjs,.cjs,.html",
     "generate-importmap": "node ./script/importmap/generate_importmap.js",
     "build": "node ./script/build/build.js",
     "dist": "npm run build",
@@ -53,12 +52,13 @@
     "postpublish": "node ./script/publish/restore_postinstall.mjs"
   },
   "dependencies": {
-    "@babel/core": "7.15.5",
+    "@babel/core": "7.15.8",
     "@babel/helper-module-imports": "7.15.4",
     "@babel/helpers": "7.15.4",
-    "@babel/parser": "7.15.7",
+    "@babel/parser": "7.15.8",
     "@babel/plugin-proposal-dynamic-import": "7.14.5",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
+    "@babel/plugin-syntax-import-assertions": "7.14.5",
     "@babel/plugin-syntax-import-meta": "7.10.4",
     "@babel/plugin-syntax-numeric-separator": "7.10.4",
     "@babel/plugin-transform-modules-systemjs": "7.15.4",
@@ -74,8 +74,10 @@
     "@rollup/plugin-json": "4.1.0",
     "@rollup/plugin-node-resolve": "13.0.5",
     "@rollup/plugin-replace": "3.0.0",
+    "acorn-import-assertions": "1.8.0",
     "ansi-to-html": "0.7.2",
     "bytes": "3.1.0",
+    "construct-style-sheets-polyfill": "3.0.4",
     "cjs-module-lexer": "1.2.2",
     "cssnano": "5.0.8",
     "cssnano-preset-default": "5.1.4",
@@ -85,13 +87,14 @@
     "humanize-duration": "3.27.0",
     "is-unicode-supported": "1.1.0",
     "is-valid-identifier": "2.0.2",
-    "istanbul-lib-coverage": "3.0.1",
-    "istanbul-lib-instrument": "5.0.2",
+    "istanbul-lib-coverage": "3.0.2",
+    "istanbul-lib-instrument": "5.0.3",
     "istanbul-lib-report": "3.0.0",
-    "istanbul-reports": "3.0.2",
+    "istanbul-reports": "3.0.5",
     "magic-string": "0.25.7",
+    "node-fetch": "3.0.0",
     "parse5": "6.0.1",
-    "playwright": "1.15.1",
+    "playwright": "1.15.2",
     "postcss": "8.3.9",
     "postcss-value-parser": "4.1.0",
     "regenerator-runtime": "0.13.9",
@@ -107,23 +110,23 @@
     "terser": "5.9.0",
     "tree-kill": "1.2.2",
     "v8-to-istanbul": "8.1.0",
-    "vm2": "3.9.3",
+    "vm2": "3.9.4",
     "wrap-ansi": "8.0.1"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "7.15.7",
+    "@babel/eslint-parser": "7.15.8",
     "@babel/plugin-syntax-jsx": "7.14.5",
     "@babel/plugin-transform-block-scoping": "7.15.3",
     "@babel/plugin-transform-react-jsx": "7.14.9",
-    "@babel/plugin-transform-typescript": "7.15.4",
-    "@babel/preset-env": "7.15.6",
+    "@babel/plugin-transform-typescript": "7.15.8",
+    "@babel/preset-env": "7.15.8",
     "@jsenv/assert": "2.3.1",
     "@jsenv/babel-preset": "./packages/jsenv-babel-preset",
     "@jsenv/codecov-upload": "3.5.0",
-    "@jsenv/eslint-config": "16.0.6",
+    "@jsenv/eslint-config": "16.0.8",
     "@jsenv/github-release-package": "1.2.3",
     "@jsenv/importmap-eslint-resolver": "5.1.2",
-    "@jsenv/importmap-node-module": "2.3.1",
+    "@jsenv/importmap-node-module": "2.4.1",
     "@jsenv/package-publish": "1.6.2",
     "@jsenv/performance-impact": "1.7.0",
     "@jsenv/prettier-check-project": "5.6.1",
@@ -131,13 +134,14 @@
     "babel-plugin-transform-async-to-promises": "0.8.15",
     "eslint": "7.32.0",
     "eslint-plugin-html": "6.2.0",
-    "eslint-plugin-import": "2.24.2",
+    "eslint-plugin-import": "2.25.2",
     "eslint-plugin-react": "7.26.1",
     "node-notifier": "10.0.0",
-    "preact": "10.5.14",
+    "preact": "10.5.15",
     "prettier": "2.4.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "redux": "4.1.1"
+    "redux": "4.1.1",
+    "rollup-plugin-import-assert": "1.1.1"
   }
 }

package/readme.md

@@ -14,7 +14,7 @@ Jsenv integrates naturally with standard html, css and js. It can be configured
   - Dispensable by default: as long as your code use only standards, jsenv can be removed and code still runs.
   - Compiles when mandatory: if code can be executed without compilation, source files are used.
 - Test files and regular files have more in common. They are easier to understand and debug.
-- Developer experience: things where carefully crafted to get explicit and coherent apis.
+- Great developer experience with explicit and coherent apis
 
 ## Web standards used by jsenv
 
@@ -25,6 +25,7 @@ Each standard listed in this section is potentially supported natively by the br
 - top level await
 - import.meta.url
 - dynamic imports
+- import assertions
 
 # Test runner overview
 
@@ -71,8 +72,8 @@ npm install --save-dev @jsenv/core
 ```js
 import {
   executeTestPlan,
-  launchChromiumTab,
-  launchFirefoxTab,
+  chromiumRuntimeTab,
+  firefoxRuntimeTab,
 } from "@jsenv/core"
 
 executeTestPlan({
@@ -80,10 +81,10 @@ executeTestPlan({
   testPlan: {
     "./animals.test.html": {
       chromium: {
-        launch: launchChromiumTab,
+        runtime: chromiumRuntimeTab,
       },
       firefox: {
-        launch: launchFirefoxTab,
+        runtime: firefoxRuntimeTab,
       },
     },
   },
@@ -332,7 +333,9 @@ Jsenv configuration is done in [jsenv.config.mjs](https://github.com/jsenv/jsenv
 
 ## jsenv.config.mjs
 
-Jsenv codebase usually puts configuration in a top level [jsenv.config.mjs](./jsenv.config.mjs) file.
+Jsenv codebase usually puts configuration in a top level file named `jsenv.config.mjs`.
+
+It's recommended to use the following `jsenv.config.mjs`
 
 ```js
 /*

package/src/buildProject.js

@@ -39,6 +39,7 @@ export const buildProject = async ({
   globalName,
   globals = {},
   babelPluginMap,
+  customCompilers,
   runtimeSupport = format === "global" ||
   format === "systemjs" ||
   format === "esmodule"
@@ -101,8 +102,6 @@ export const buildProject = async ({
   // when asking them to the compile server
   // (to fix that sourcemap could be inlined)
   filesystemCache = true,
-
-  ...rest
 }) => {
   const jsenvBuildFunction = async ({ jsenvCancellationToken }) => {
     cancellationToken = composeCancellationToken(
@@ -168,6 +167,8 @@ export const buildProject = async ({
       env,
       babelPluginMap,
       transformTopLevelAwait,
+      customCompilers,
+      runtimeSupport,
 
       compileServerCanReadFromFileSystem: filesystemCache,
       compileServerCanWriteOnFilesystem: filesystemCache,
@@ -175,11 +176,6 @@ export const buildProject = async ({
       // here we don't need to inline importmap
       // nor to inject jsenv script
       transformHtmlSourceFiles: false,
-
-      runtimeSupport,
-
-      // override with potential custom options
-      ...rest,
     })
 
     const { outDirectoryRelativeUrl, origin: compileServerOrigin } =