@jsenv/plugin-supervisor 1.1.0 → 1.2.0

package/dist/jsenv_plugin_supervisor.js

@@ -0,0 +1,1185 @@
+import { createRequire } from "node:module";
+import { fileURLToPath } from "node:url";
+import { applyBabelPlugins, parseHtmlString, visitHtmlNodes, analyzeScriptNode, getHtmlNodeAttribute, getHtmlNodeText, injectHtmlNodeAsEarlyAsPossible, createHtmlNode, stringifyHtmlAst, getHtmlNodePosition, setHtmlNodeText, setHtmlNodeAttributes } from "@jsenv/ast";
+
+const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+const intToChar = new Uint8Array(64); // 64 possible chars.
+const charToInt = new Uint8Array(128); // z is 122 in ASCII
+for (let i = 0; i < chars.length; i++) {
+  const c = chars.charCodeAt(i);
+  intToChar[i] = c;
+  charToInt[c] = i;
+}
+
+const require = createRequire(import.meta.url);
+// consider using https://github.com/7rulnik/source-map-js
+
+const requireSourcemap = () => {
+  const namespace = require("source-map-js");
+  return namespace;
+};
+
+/*
+ * https://github.com/mozilla/source-map#sourcemapgenerator
+ */
+
+requireSourcemap();
+
+// https://github.com/mozilla/source-map#sourcemapconsumerprototypeoriginalpositionforgeneratedposition
+const getOriginalPosition = ({
+  sourcemap,
+  line,
+  column,
+  bias
+}) => {
+  const {
+    SourceMapConsumer
+  } = requireSourcemap();
+  const sourceMapConsumer = new SourceMapConsumer(sourcemap);
+  const originalPosition = sourceMapConsumer.originalPositionFor({
+    line,
+    column,
+    bias
+  });
+  return originalPosition;
+};
+
+const urlToScheme = url => {
+  const urlString = String(url);
+  const colonIndex = urlString.indexOf(":");
+  if (colonIndex === -1) {
+    return "";
+  }
+  const scheme = urlString.slice(0, colonIndex);
+  return scheme;
+};
+
+const urlToResource = url => {
+  const scheme = urlToScheme(url);
+  if (scheme === "file") {
+    const urlAsStringWithoutFileProtocol = String(url).slice("file://".length);
+    return urlAsStringWithoutFileProtocol;
+  }
+  if (scheme === "https" || scheme === "http") {
+    // remove origin
+    const afterProtocol = String(url).slice(scheme.length + "://".length);
+    const pathnameSlashIndex = afterProtocol.indexOf("/", "://".length);
+    const urlAsStringWithoutOrigin = afterProtocol.slice(pathnameSlashIndex);
+    return urlAsStringWithoutOrigin;
+  }
+  const urlAsStringWithoutProtocol = String(url).slice(scheme.length + 1);
+  return urlAsStringWithoutProtocol;
+};
+
+const urlToPathname = url => {
+  const resource = urlToResource(url);
+  const pathname = resourceToPathname(resource);
+  return pathname;
+};
+const resourceToPathname = resource => {
+  const searchSeparatorIndex = resource.indexOf("?");
+  if (searchSeparatorIndex > -1) {
+    return resource.slice(0, searchSeparatorIndex);
+  }
+  const hashIndex = resource.indexOf("#");
+  if (hashIndex > -1) {
+    return resource.slice(0, hashIndex);
+  }
+  return resource;
+};
+
+const urlToFilename = url => {
+  const pathname = urlToPathname(url);
+  const pathnameBeforeLastSlash = pathname.endsWith("/") ? pathname.slice(0, -1) : pathname;
+  const slashLastIndex = pathnameBeforeLastSlash.lastIndexOf("/");
+  const filename = slashLastIndex === -1 ? pathnameBeforeLastSlash : pathnameBeforeLastSlash.slice(slashLastIndex + 1);
+  return filename;
+};
+
+const generateInlineContentUrl = ({
+  url,
+  extension,
+  basename,
+  line,
+  column,
+  lineEnd,
+  columnEnd
+}) => {
+  let generatedName = "";
+  if (basename !== undefined) {
+    generatedName += basename;
+  }
+  if (line !== undefined && column !== undefined) {
+    generatedName = "L".concat(line, "C").concat(column);
+    if (lineEnd !== undefined && columnEnd !== undefined) {
+      generatedName += "-L".concat(lineEnd, "C").concat(columnEnd);
+    }
+  }
+  const filenameRaw = urlToFilename(url);
+  const filename = "".concat(filenameRaw, "@").concat(generatedName).concat(extension);
+  // ideally we should keep query params from url
+  // maybe we could use a custom scheme like "inline:"
+  const inlineContentUrl = new URL(filename, url).href;
+  return inlineContentUrl;
+};
+
+// consider switching to https://babeljs.io/docs/en/babel-code-frame
+// https://github.com/postcss/postcss/blob/fd30d3df5abc0954a0ec642a3cdc644ab2aacf9c/lib/css-syntax-error.js#L43
+// https://github.com/postcss/postcss/blob/fd30d3df5abc0954a0ec642a3cdc644ab2aacf9c/lib/terminal-highlight.js#L50
+// https://github.com/babel/babel/blob/eea156b2cb8deecfcf82d52aa1b71ba4995c7d68/packages/babel-code-frame/src/index.js#L1
+
+const stringifyUrlSite = ({
+  url,
+  line,
+  column,
+  content
+}, {
+  showCodeFrame = true,
+  numberOfSurroundingLinesToShow,
+  lineMaxLength,
+  color
+} = {}) => {
+  let string = url;
+  if (typeof line === "number") {
+    string += ":".concat(line);
+    if (typeof column === "number") {
+      string += ":".concat(column);
+    }
+  }
+  if (!showCodeFrame || typeof line !== "number" || !content) {
+    return string;
+  }
+  const sourceLoc = showSourceLocation({
+    content,
+    line,
+    column,
+    numberOfSurroundingLinesToShow,
+    lineMaxLength,
+    color
+  });
+  return "".concat(string, "\n").concat(sourceLoc);
+};
+const showSourceLocation = ({
+  content,
+  line,
+  column,
+  numberOfSurroundingLinesToShow = 1,
+  lineMaxLength = 120
+} = {}) => {
+  let mark = string => string;
+  let aside = string => string;
+  // if (color) {
+  //   mark = (string) => ANSI.color(string, ANSI.RED)
+  //   aside = (string) => ANSI.color(string, ANSI.GREY)
+  // }
+
+  const lines = content.split(/\r?\n/);
+  if (line === 0) line = 1;
+  let lineRange = {
+    start: line - 1,
+    end: line
+  };
+  lineRange = moveLineRangeUp(lineRange, numberOfSurroundingLinesToShow);
+  lineRange = moveLineRangeDown(lineRange, numberOfSurroundingLinesToShow);
+  lineRange = lineRangeWithinLines(lineRange, lines);
+  const linesToShow = lines.slice(lineRange.start, lineRange.end);
+  const endLineNumber = lineRange.end;
+  const lineNumberMaxWidth = String(endLineNumber).length;
+  if (column === 0) column = 1;
+  const columnRange = {};
+  if (column === undefined) {
+    columnRange.start = 0;
+    columnRange.end = lineMaxLength;
+  } else if (column > lineMaxLength) {
+    columnRange.start = column - Math.floor(lineMaxLength / 2);
+    columnRange.end = column + Math.ceil(lineMaxLength / 2);
+  } else {
+    columnRange.start = 0;
+    columnRange.end = lineMaxLength;
+  }
+  return linesToShow.map((lineSource, index) => {
+    const lineNumber = lineRange.start + index + 1;
+    const isMainLine = lineNumber === line;
+    const lineSourceTruncated = applyColumnRange(columnRange, lineSource);
+    const lineNumberWidth = String(lineNumber).length;
+    // ensure if line moves from 7,8,9 to 10 the display is still great
+    const lineNumberRightSpacing = " ".repeat(lineNumberMaxWidth - lineNumberWidth);
+    const asideSource = "".concat(lineNumber).concat(lineNumberRightSpacing, " |");
+    const lineFormatted = "".concat(aside(asideSource), " ").concat(lineSourceTruncated);
+    if (isMainLine) {
+      if (column === undefined) {
+        return "".concat(mark(">"), " ").concat(lineFormatted);
+      }
+      const spacing = stringToSpaces("".concat(asideSource, " ").concat(lineSourceTruncated.slice(0, column - columnRange.start - 1)));
+      return "".concat(mark(">"), " ").concat(lineFormatted, "\n  ").concat(spacing).concat(mark("^"));
+    }
+    return "  ".concat(lineFormatted);
+  }).join("\n");
+};
+const applyColumnRange = ({
+  start,
+  end
+}, line) => {
+  if (typeof start !== "number") {
+    throw new TypeError("start must be a number, received ".concat(start));
+  }
+  if (typeof end !== "number") {
+    throw new TypeError("end must be a number, received ".concat(end));
+  }
+  if (end < start) {
+    throw new Error("end must be greater than start, but ".concat(end, " is smaller than ").concat(start));
+  }
+  const prefix = "…";
+  const suffix = "…";
+  const lastIndex = line.length;
+  if (line.length === 0) {
+    // don't show any ellipsis if the line is empty
+    // because it's not truncated in that case
+    return "";
+  }
+  const startTruncated = start > 0;
+  const endTruncated = lastIndex > end;
+  let from = startTruncated ? start + prefix.length : start;
+  let to = endTruncated ? end - suffix.length : end;
+  if (to > lastIndex) to = lastIndex;
+  if (start >= lastIndex || from === to) {
+    return "";
+  }
+  let result = "";
+  while (from < to) {
+    result += line[from];
+    from++;
+  }
+  if (result.length === 0) {
+    return "";
+  }
+  if (startTruncated && endTruncated) {
+    return "".concat(prefix).concat(result).concat(suffix);
+  }
+  if (startTruncated) {
+    return "".concat(prefix).concat(result);
+  }
+  if (endTruncated) {
+    return "".concat(result).concat(suffix);
+  }
+  return result;
+};
+const stringToSpaces = string => string.replace(/[^\t]/g, " ");
+
+// const getLineRangeLength = ({ start, end }) => end - start
+
+const moveLineRangeUp = ({
+  start,
+  end
+}, number) => {
+  return {
+    start: start - number,
+    end
+  };
+};
+const moveLineRangeDown = ({
+  start,
+  end
+}, number) => {
+  return {
+    start,
+    end: end + number
+  };
+};
+const lineRangeWithinLines = ({
+  start,
+  end
+}, lines) => {
+  return {
+    start: start < 0 ? 0 : start,
+    end: end > lines.length ? lines.length : end
+  };
+};
+
+const getCommonPathname = (pathname, otherPathname) => {
+  if (pathname === otherPathname) {
+    return pathname;
+  }
+  let commonPart = "";
+  let commonPathname = "";
+  let i = 0;
+  const length = pathname.length;
+  const otherLength = otherPathname.length;
+  while (i < length) {
+    const char = pathname.charAt(i);
+    const otherChar = otherPathname.charAt(i);
+    i++;
+    if (char === otherChar) {
+      if (char === "/") {
+        commonPart += "/";
+        commonPathname += commonPart;
+        commonPart = "";
+      } else {
+        commonPart += char;
+      }
+    } else {
+      if (char === "/" && i - 1 === otherLength) {
+        commonPart += "/";
+        commonPathname += commonPart;
+      }
+      return commonPathname;
+    }
+  }
+  if (length === otherLength) {
+    commonPathname += commonPart;
+  } else if (otherPathname.charAt(i) === "/") {
+    commonPathname += commonPart;
+  }
+  return commonPathname;
+};
+
+const urlToRelativeUrl = (url, baseUrl) => {
+  const urlObject = new URL(url);
+  const baseUrlObject = new URL(baseUrl);
+  if (urlObject.protocol !== baseUrlObject.protocol) {
+    const urlAsString = String(url);
+    return urlAsString;
+  }
+  if (urlObject.username !== baseUrlObject.username || urlObject.password !== baseUrlObject.password || urlObject.host !== baseUrlObject.host) {
+    const afterUrlScheme = String(url).slice(urlObject.protocol.length);
+    return afterUrlScheme;
+  }
+  const {
+    pathname,
+    hash,
+    search
+  } = urlObject;
+  if (pathname === "/") {
+    const baseUrlResourceWithoutLeadingSlash = baseUrlObject.pathname.slice(1);
+    return baseUrlResourceWithoutLeadingSlash;
+  }
+  const basePathname = baseUrlObject.pathname;
+  const commonPathname = getCommonPathname(pathname, basePathname);
+  if (!commonPathname) {
+    const urlAsString = String(url);
+    return urlAsString;
+  }
+  const specificPathname = pathname.slice(commonPathname.length);
+  const baseSpecificPathname = basePathname.slice(commonPathname.length);
+  if (baseSpecificPathname.includes("/")) {
+    const baseSpecificParentPathname = pathnameToParentPathname(baseSpecificPathname);
+    const relativeDirectoriesNotation = baseSpecificParentPathname.replace(/.*?\//g, "../");
+    const relativeUrl = "".concat(relativeDirectoriesNotation).concat(specificPathname).concat(search).concat(hash);
+    return relativeUrl;
+  }
+  const relativeUrl = "".concat(specificPathname).concat(search).concat(hash);
+  return relativeUrl;
+};
+const pathnameToParentPathname = pathname => {
+  const slashLastIndex = pathname.lastIndexOf("/");
+  if (slashLastIndex === -1) {
+    return "/";
+  }
+  return pathname.slice(0, slashLastIndex + 1);
+};
+
+const generateSourcemapDataUrl = sourcemap => {
+  const asBase64 = Buffer.from(JSON.stringify(sourcemap)).toString("base64");
+  return "data:application/json;charset=utf-8;base64,".concat(asBase64);
+};
+
+const SOURCEMAP = {
+  enabledOnContentType: contentType => {
+    return ["text/javascript", "text/css"].includes(contentType);
+  },
+  readComment: ({
+    contentType,
+    content
+  }) => {
+    const read = {
+      "text/javascript": parseJavaScriptSourcemapComment,
+      "text/css": parseCssSourcemapComment
+    }[contentType];
+    return read ? read(content) : null;
+  },
+  writeComment: ({
+    contentType,
+    content,
+    specifier
+  }) => {
+    const write = {
+      "text/javascript": setJavaScriptSourceMappingUrl,
+      "text/css": setCssSourceMappingUrl
+    }[contentType];
+    return write ? write(content, specifier) : content;
+  }
+};
+const parseJavaScriptSourcemapComment = javaScriptSource => {
+  let sourceMappingUrl;
+  replaceSourceMappingUrl(javaScriptSource, javascriptSourceMappingUrlCommentRegexp, value => {
+    sourceMappingUrl = value;
+  });
+  if (!sourceMappingUrl) {
+    return null;
+  }
+  return {
+    type: "sourcemap_comment",
+    subtype: "js",
+    // we assume it's on last line
+    line: javaScriptSource.split(/\r?\n/).length,
+    // ${"//#"} is to avoid static analysis to think there is a sourceMappingUrl for this file
+    column: "//#".concat(" sourceMappingURL=").length + 1,
+    specifier: sourceMappingUrl
+  };
+};
+const setJavaScriptSourceMappingUrl = (javaScriptSource, sourceMappingFileUrl) => {
+  let replaced;
+  const sourceAfterReplace = replaceSourceMappingUrl(javaScriptSource, javascriptSourceMappingUrlCommentRegexp, () => {
+    replaced = true;
+    return sourceMappingFileUrl ? writeJavaScriptSourceMappingURL(sourceMappingFileUrl) : "";
+  });
+  if (replaced) {
+    return sourceAfterReplace;
+  }
+  return sourceMappingFileUrl ? "".concat(javaScriptSource, "\n").concat(writeJavaScriptSourceMappingURL(sourceMappingFileUrl), "\n") : javaScriptSource;
+};
+const parseCssSourcemapComment = cssSource => {
+  let sourceMappingUrl;
+  replaceSourceMappingUrl(cssSource, cssSourceMappingUrlCommentRegExp, value => {
+    sourceMappingUrl = value;
+  });
+  if (!sourceMappingUrl) {
+    return null;
+  }
+  return {
+    type: "sourcemap_comment",
+    subtype: "css",
+    // we assume it's on last line
+    line: cssSource.split(/\r?\n/).length - 1,
+    // ${"//*#"} is to avoid static analysis to think there is a sourceMappingUrl for this file
+    column: "//*#".concat(" sourceMappingURL=").length + 1,
+    specifier: sourceMappingUrl
+  };
+};
+const setCssSourceMappingUrl = (cssSource, sourceMappingFileUrl) => {
+  let replaced;
+  const sourceAfterReplace = replaceSourceMappingUrl(cssSource, cssSourceMappingUrlCommentRegExp, () => {
+    replaced = true;
+    return sourceMappingFileUrl ? writeCssSourceMappingUrl(sourceMappingFileUrl) : "";
+  });
+  if (replaced) {
+    return sourceAfterReplace;
+  }
+  return sourceMappingFileUrl ? "".concat(cssSource, "\n").concat(writeCssSourceMappingUrl(sourceMappingFileUrl), "\n") : cssSource;
+};
+const javascriptSourceMappingUrlCommentRegexp = /\/\/ ?# ?sourceMappingURL=([^\s'"]+)/g;
+const cssSourceMappingUrlCommentRegExp = /\/\*# ?sourceMappingURL=([^\s'"]+) \*\//g;
+
+// ${"//#"} is to avoid a parser thinking there is a sourceMappingUrl for this file
+const writeJavaScriptSourceMappingURL = value => "//#".concat(" sourceMappingURL=", value);
+const writeCssSourceMappingUrl = value => "/*# sourceMappingURL=".concat(value, " */");
+const replaceSourceMappingUrl = (source, regexp, callback) => {
+  let lastSourceMappingUrl;
+  let matchSourceMappingUrl;
+  while (matchSourceMappingUrl = regexp.exec(source)) {
+    lastSourceMappingUrl = matchSourceMappingUrl;
+  }
+  if (lastSourceMappingUrl) {
+    const index = lastSourceMappingUrl.index;
+    const before = source.slice(0, index);
+    const after = source.slice(index);
+    const mappedAfter = after.replace(regexp, (match, firstGroup) => {
+      return callback(firstGroup);
+    });
+    return "".concat(before).concat(mappedAfter);
+  }
+  return source;
+};
+
+/*
+ * ```js
+ * console.log(42)
+ * ```
+ * becomes
+ * ```js
+ * window.__supervisor__.jsClassicStart('main.html@L10-L13.js')
+ * try {
+ *   console.log(42)
+ *   window.__supervisor__.jsClassicEnd('main.html@L10-L13.js')
+ * } catch(e) {
+ *   window.__supervisor__.jsClassicError('main.html@L10-L13.js', e)
+ * }
+ * ```
+ *
+ * ```js
+ * import value from "./file.js"
+ * console.log(value)
+ * ```
+ * becomes
+ * ```js
+ * window.__supervisor__.jsModuleStart('main.html@L10-L13.js')
+ * try {
+ *   const value = await import("./file.js")
+ *   console.log(value)
+ *   window.__supervisor__.jsModuleEnd('main.html@L10-L13.js')
+ * } catch(e) {
+ *   window.__supervisor__.jsModuleError('main.html@L10-L13.js', e)
+ * }
+ * ```
+ *
+ * -> TO KEEP IN MIND:
+ * Static import can throw errors like
+ * The requested module '/js_module_export_not_found/foo.js' does not provide an export named 'answerr'
+ * While dynamic import will work just fine
+ * and create a variable named "undefined"
+ */
+
+const injectSupervisorIntoJs = async ({
+  webServer,
+  content,
+  url,
+  type,
+  inlineSrc
+}) => {
+  const babelPluginJsSupervisor = type === "js_module" ? babelPluginJsModuleSupervisor : babelPluginJsClassicSupervisor;
+  const result = await applyBabelPlugins({
+    babelPlugins: [[babelPluginJsSupervisor, {
+      inlineSrc
+    }]],
+    input: content,
+    inputIsJsModule: type === "js_module",
+    inputUrl: url
+  });
+  let code = result.code;
+  let map = result.map;
+  const sourcemapDataUrl = generateSourcemapDataUrl(map);
+  code = SOURCEMAP.writeComment({
+    contentType: "text/javascript",
+    content: code,
+    specifier: sourcemapDataUrl
+  });
+  code = "".concat(code, "\n//# sourceURL=").concat(urlToRelativeUrl(url, webServer.rootDirectoryUrl));
+  return code;
+};
+const babelPluginJsModuleSupervisor = babel => {
+  const t = babel.types;
+  return {
+    name: "js-module-supervisor",
+    visitor: {
+      Program: (programPath, state) => {
+        const {
+          inlineSrc
+        } = state.opts;
+        if (state.file.metadata.jsExecutionInstrumented) return;
+        state.file.metadata.jsExecutionInstrumented = true;
+        const urlNode = t.stringLiteral(inlineSrc);
+        const startCallNode = createSupervisionCall({
+          t,
+          urlNode,
+          methodName: "jsModuleStart"
+        });
+        const endCallNode = createSupervisionCall({
+          t,
+          urlNode,
+          methodName: "jsModuleEnd"
+        });
+        const errorCallNode = createSupervisionCall({
+          t,
+          urlNode,
+          methodName: "jsModuleError",
+          args: [t.identifier("e")]
+        });
+        const bodyPath = programPath.get("body");
+        const importNodes = [];
+        const topLevelNodes = [];
+        for (const topLevelNodePath of bodyPath) {
+          const topLevelNode = topLevelNodePath.node;
+          if (t.isImportDeclaration(topLevelNode)) {
+            importNodes.push(topLevelNode);
+          } else {
+            topLevelNodes.push(topLevelNode);
+          }
+        }
+
+        // replace all import nodes with dynamic imports
+        const dynamicImports = [];
+        importNodes.forEach(importNode => {
+          const dynamicImportConversion = convertStaticImportIntoDynamicImport(importNode, t);
+          if (Array.isArray(dynamicImportConversion)) {
+            dynamicImports.push(...dynamicImportConversion);
+          } else {
+            dynamicImports.push(dynamicImportConversion);
+          }
+        });
+        const tryCatchNode = t.tryStatement(t.blockStatement([...dynamicImports, ...topLevelNodes, endCallNode]), t.catchClause(t.identifier("e"), t.blockStatement([errorCallNode])));
+        programPath.replaceWith(t.program([startCallNode, tryCatchNode]));
+      }
+    }
+  };
+};
+const convertStaticImportIntoDynamicImport = (staticImportNode, t) => {
+  const awaitExpression = t.awaitExpression(t.callExpression(t.import(), [t.stringLiteral(staticImportNode.source.value)]));
+
+  // import "./file.js" -> await import("./file.js")
+  if (staticImportNode.specifiers.length === 0) {
+    return t.expressionStatement(awaitExpression);
+  }
+  if (staticImportNode.specifiers.length === 1) {
+    const [firstSpecifier] = staticImportNode.specifiers;
+    if (firstSpecifier.type === "ImportNamespaceSpecifier") {
+      return t.variableDeclaration("const", [t.variableDeclarator(t.identifier(firstSpecifier.local.name), awaitExpression)]);
+    }
+  }
+  if (staticImportNode.specifiers.length === 2) {
+    const [first, second] = staticImportNode.specifiers;
+    if (first.type === "ImportDefaultSpecifier" && second.type === "ImportNamespaceSpecifier") {
+      const namespaceDeclaration = t.variableDeclaration("const", [t.variableDeclarator(t.identifier(second.local.name), awaitExpression)]);
+      const defaultDeclaration = t.variableDeclaration("const", [t.variableDeclarator(t.identifier(first.local.name), t.memberExpression(t.identifier(second.local.name), t.identifier("default")))]);
+      return [namespaceDeclaration, defaultDeclaration];
+    }
+  }
+
+  // import { name } from "./file.js" -> const { name } = await import("./file.js")
+  // import toto, { name } from "./file.js" -> const { name, default as toto } = await import("./file.js")
+  const objectPattern = t.objectPattern(staticImportNode.specifiers.map(specifier => {
+    if (specifier.type === "ImportDefaultSpecifier") {
+      return t.objectProperty(t.identifier("default"), t.identifier(specifier.local.name), false,
+      // computed
+      false // shorthand
+      );
+    }
+    // if (specifier.type === "ImportNamespaceSpecifier") {
+    //   return t.restElement(t.identifier(specifier.local.name))
+    // }
+    const isRenamed = specifier.imported.name !== specifier.local.name;
+    if (isRenamed) {
+      return t.objectProperty(t.identifier(specifier.imported.name), t.identifier(specifier.local.name), false,
+      // computed
+      false // shorthand
+      );
+    }
+    // shorthand must be true
+    return t.objectProperty(t.identifier(specifier.local.name), t.identifier(specifier.local.name), false,
+    // computed
+    true // shorthand
+    );
+  }));
+
+  const variableDeclarator = t.variableDeclarator(objectPattern, awaitExpression);
+  const variableDeclaration = t.variableDeclaration("const", [variableDeclarator]);
+  return variableDeclaration;
+};
+const babelPluginJsClassicSupervisor = babel => {
+  const t = babel.types;
+  return {
+    name: "js-classic-supervisor",
+    visitor: {
+      Program: (programPath, state) => {
+        const {
+          inlineSrc
+        } = state.opts;
+        if (state.file.metadata.jsExecutionInstrumented) return;
+        state.file.metadata.jsExecutionInstrumented = true;
+        const urlNode = t.stringLiteral(inlineSrc);
+        const startCallNode = createSupervisionCall({
+          t,
+          urlNode,
+          methodName: "jsClassicStart"
+        });
+        const endCallNode = createSupervisionCall({
+          t,
+          urlNode,
+          methodName: "jsClassicEnd"
+        });
+        const errorCallNode = createSupervisionCall({
+          t,
+          urlNode,
+          methodName: "jsClassicError",
+          args: [t.identifier("e")]
+        });
+        const topLevelNodes = programPath.node.body;
+        const tryCatchNode = t.tryStatement(t.blockStatement([...topLevelNodes, endCallNode]), t.catchClause(t.identifier("e"), t.blockStatement([errorCallNode])));
+        programPath.replaceWith(t.program([startCallNode, tryCatchNode]));
+      }
+    }
+  };
+};
+const createSupervisionCall = ({
+  t,
+  methodName,
+  urlNode,
+  args = []
+}) => {
+  return t.expressionStatement(t.callExpression(t.memberExpression(t.memberExpression(t.identifier("window"), t.identifier("__supervisor__")), t.identifier(methodName)), [urlNode, ...args]), [], null);
+};
+
+/*
+ * Jsenv needs to track js execution in order to:
+ * 1. report errors
+ * 2. wait for all js execution inside an HTML page before killing the browser
+ *
+ * A naive approach would rely on "load" events on window but:
+ * scenario                                    | covered by window "load"
+ * ------------------------------------------- | -------------------------
+ * js referenced by <script src>               | yes
+ * js inlined into <script>                    | yes
+ * js referenced by <script type="module" src> | partially (not for import and top level await)
+ * js inlined into <script type="module">      | not at all
+ * Same for "error" event on window who is not enough
+ *
+ * <script src="file.js">
+ * becomes
+ * <script>
+ *   window.__supervisor__.superviseScript('file.js')
+ * </script>
+ *
+ * <script>
+ *    console.log(42)
+ * </script>
+ * becomes
+ * <script inlined-from-src="main.html@L10-C5.js">
+ *   window.__supervisor.__superviseScript("main.html@L10-C5.js")
+ * </script>
+ *
+ * <script type="module" src="module.js"></script>
+ * becomes
+ * <script type="module">
+ *   window.__supervisor__.superviseScriptTypeModule('module.js')
+ * </script>
+ *
+ * <script type="module">
+ *   console.log(42)
+ * </script>
+ * becomes
+ * <script type="module" inlined-from-src="main.html@L10-C5.js">
+ *   window.__supervisor__.superviseScriptTypeModule('main.html@L10-C5.js')
+ * </script>
+ *
+ * Why Inline scripts are converted to files dynamically?
+ * -> No changes required on js source code, it's only the HTML that is modified
+ *   - Also allow to catch syntax errors and export missing
+ */
+
+const supervisorFileUrl = new URL("./js/supervisor.js", import.meta.url).href;
+const injectSupervisorIntoHTML = async ({
+  content,
+  url
+}, {
+  supervisorScriptSrc = supervisorFileUrl,
+  supervisorOptions,
+  webServer,
+  onInlineScript = () => {},
+  generateInlineScriptSrc = ({
+    inlineScriptUrl
+  }) => urlToRelativeUrl(inlineScriptUrl, webServer.rootDirectoryUrl),
+  inlineAsRemote
+}) => {
+  const htmlAst = parseHtmlString(content);
+  const mutations = [];
+  const actions = [];
+  const scriptInfos = [];
+  // 1. Find inline and remote scripts
+  {
+    const handleInlineScript = (scriptNode, {
+      type,
+      extension,
+      textContent
+    }) => {
+      const {
+        line,
+        column,
+        lineEnd,
+        columnEnd,
+        isOriginal
+      } = getHtmlNodePosition(scriptNode, {
+        preferOriginal: true
+      });
+      const inlineScriptUrl = generateInlineContentUrl({
+        url,
+        extension: extension || ".js",
+        line,
+        column,
+        lineEnd,
+        columnEnd
+      });
+      const inlineScriptSrc = generateInlineScriptSrc({
+        type,
+        textContent,
+        inlineScriptUrl,
+        isOriginal,
+        line,
+        column
+      });
+      onInlineScript({
+        type,
+        textContent,
+        url: inlineScriptUrl,
+        isOriginal,
+        line,
+        column,
+        src: inlineScriptSrc
+      });
+      if (inlineAsRemote) {
+        // prefere la version src
+        scriptInfos.push({
+          type,
+          src: inlineScriptSrc
+        });
+        const remoteJsSupervised = generateCodeToSuperviseScriptWithSrc({
+          type,
+          src: inlineScriptSrc
+        });
+        mutations.push(() => {
+          setHtmlNodeText(scriptNode, remoteJsSupervised, {
+            indentation: "auto"
+          });
+          setHtmlNodeAttributes(scriptNode, {
+            "jsenv-cooked-by": "jsenv:supervisor",
+            "src": undefined,
+            "inlined-from-src": inlineScriptSrc
+          });
+        });
+      } else {
+        scriptInfos.push({
+          type,
+          src: inlineScriptSrc,
+          isInline: true
+        });
+        actions.push(async () => {
+          try {
+            const inlineJsSupervised = await injectSupervisorIntoJs({
+              webServer,
+              content: textContent,
+              url: inlineScriptUrl,
+              type,
+              inlineSrc: inlineScriptSrc
+            });
+            mutations.push(() => {
+              setHtmlNodeText(scriptNode, inlineJsSupervised, {
+                indentation: "auto"
+              });
+              setHtmlNodeAttributes(scriptNode, {
+                "jsenv-cooked-by": "jsenv:supervisor"
+              });
+            });
+          } catch (e) {
+            if (e.code === "PARSE_ERROR") {
+              // mutations.push(() => {
+              //   setHtmlNodeAttributes(scriptNode, {
+              //     "jsenv-cooked-by": "jsenv:supervisor",
+              //   })
+              // })
+              // on touche a rien
+              return;
+            }
+            throw e;
+          }
+        });
+      }
+    };
+    const handleScriptWithSrc = (scriptNode, {
+      type,
+      src
+    }) => {
+      scriptInfos.push({
+        type,
+        src
+      });
+      const remoteJsSupervised = generateCodeToSuperviseScriptWithSrc({
+        type,
+        src
+      });
+      mutations.push(() => {
+        setHtmlNodeText(scriptNode, remoteJsSupervised, {
+          indentation: "auto"
+        });
+        setHtmlNodeAttributes(scriptNode, {
+          "jsenv-cooked-by": "jsenv:supervisor",
+          "src": undefined,
+          "inlined-from-src": src
+        });
+      });
+    };
+    visitHtmlNodes(htmlAst, {
+      script: scriptNode => {
+        const {
+          type,
+          extension
+        } = analyzeScriptNode(scriptNode);
+        if (type !== "js_classic" && type !== "js_module") {
+          return;
+        }
+        if (getHtmlNodeAttribute(scriptNode, "jsenv-injected-by")) {
+          return;
+        }
+        const noSupervisor = getHtmlNodeAttribute(scriptNode, "no-supervisor");
+        if (noSupervisor !== undefined) {
+          return;
+        }
+        const scriptNodeText = getHtmlNodeText(scriptNode);
+        if (scriptNodeText) {
+          handleInlineScript(scriptNode, {
+            type,
+            extension,
+            textContent: scriptNodeText
+          });
+          return;
+        }
+        const src = getHtmlNodeAttribute(scriptNode, "src");
+        if (src) {
+          const urlObject = new URL(src, "http://example.com/");
+          if (urlObject.searchParams.has("inline")) {
+            return;
+          }
+          handleScriptWithSrc(scriptNode, {
+            type,
+            src
+          });
+          return;
+        }
+      }
+    });
+  }
+  // 2. Inject supervisor js file + setup call
+  {
+    const setupParamsSource = stringifyParams({
+      ...supervisorOptions,
+      serverIsJsenvDevServer: webServer.isJsenvDevServer,
+      rootDirectoryUrl: webServer.rootDirectoryUrl,
+      scriptInfos
+    }, "  ");
+    injectHtmlNodeAsEarlyAsPossible(htmlAst, createHtmlNode({
+      tagName: "script",
+      textContent: "window.__supervisor__.setup({".concat(setupParamsSource, "})")
+    }), "jsenv:supervisor");
+    injectHtmlNodeAsEarlyAsPossible(htmlAst, createHtmlNode({
+      tagName: "script",
+      src: supervisorScriptSrc
+    }), "jsenv:supervisor");
+  }
+  // 3. Perform actions (transforming inline script content) and html mutations
+  if (actions.length > 0) {
+    await Promise.all(actions.map(action => action()));
+  }
+  mutations.forEach(mutation => mutation());
+  const htmlModified = stringifyHtmlAst(htmlAst);
+  return {
+    content: htmlModified
+  };
+};
+const stringifyParams = (params, prefix = "") => {
+  const source = JSON.stringify(params, null, prefix);
+  if (prefix.length) {
+    // remove leading "{\n"
+    // remove leading prefix
+    // remove trailing "\n}"
+    return source.slice(2 + prefix.length, -2);
+  }
+  // remove leading "{"
+  // remove trailing "}"
+  return source.slice(1, -1);
+};
+const generateCodeToSuperviseScriptWithSrc = ({
+  type,
+  src
+}) => {
+  const srcEncoded = JSON.stringify(src);
+  if (type === "js_module") {
+    return "window.__supervisor__.superviseScriptTypeModule(".concat(srcEncoded, ", (url) => import(url));");
+  }
+  return "window.__supervisor__.superviseScript(".concat(srcEncoded, ");");
+};
+
+/*
+ * This plugin provides a way for jsenv to supervisor js execution:
+ * - Know how many js are executed, when they are done, collect errors, etc...
+ */
+
+const jsenvPluginSupervisor = ({
+  logs = false,
+  measurePerf = false,
+  errorOverlay = true,
+  openInEditor = true,
+  errorBaseUrl
+}) => {
+  return {
+    name: "jsenv:supervisor",
+    appliesDuring: "dev",
+    serve: async serveInfo => {
+      if (serveInfo.request.pathname.startsWith("/__get_code_frame__/")) {
+        const {
+          pathname,
+          searchParams
+        } = new URL(serveInfo.request.url);
+        let urlWithLineAndColumn = pathname.slice("/__get_code_frame__/".length);
+        urlWithLineAndColumn = decodeURIComponent(urlWithLineAndColumn);
+        const match = urlWithLineAndColumn.match(/:([0-9]+):([0-9]+)$/);
+        if (!match) {
+          return {
+            status: 400,
+            body: "Missing line and column in url"
+          };
+        }
+        const file = urlWithLineAndColumn.slice(0, match.index);
+        let line = parseInt(match[1]);
+        let column = parseInt(match[2]);
+        const urlInfo = serveInfo.kitchen.graph.getUrlInfo(file);
+        if (!urlInfo) {
+          return {
+            status: 204,
+            headers: {
+              "cache-control": "no-store"
+            }
+          };
+        }
+        const remap = searchParams.has("remap");
+        if (remap) {
+          const sourcemap = urlInfo.sourcemap;
+          if (sourcemap) {
+            const original = getOriginalPosition({
+              sourcemap,
+              url: file,
+              line,
+              column
+            });
+            if (original.line !== null) {
+              line = original.line;
+              if (original.column !== null) {
+                column = original.column;
+              }
+            }
+          }
+        }
+        const codeFrame = stringifyUrlSite({
+          url: file,
+          line,
+          column,
+          content: urlInfo.originalContent
+        });
+        return {
+          status: 200,
+          headers: {
+            "cache-control": "no-store",
+            "content-type": "text/plain",
+            "content-length": Buffer.byteLength(codeFrame)
+          },
+          body: codeFrame
+        };
+      }
+      if (serveInfo.request.pathname.startsWith("/__get_error_cause__/")) {
+        let file = serveInfo.request.pathname.slice("/__get_error_cause__/".length);
+        file = decodeURIComponent(file);
+        if (!file) {
+          return {
+            status: 400,
+            body: "Missing file in url"
+          };
+        }
+        const getErrorCauseInfo = () => {
+          const urlInfo = serveInfo.kitchen.graph.getUrlInfo(file);
+          if (!urlInfo) {
+            return null;
+          }
+          const {
+            error
+          } = urlInfo;
+          if (error) {
+            return error;
+          }
+          // search in direct dependencies (404 or 500)
+          for (const referenceToOther of urlInfo.referenceToOthersSet) {
+            const referencedUrlInfo = referenceToOther.urlInfo;
+            if (referencedUrlInfo.error) {
+              return referencedUrlInfo.error;
+            }
+          }
+          return null;
+        };
+        const causeInfo = getErrorCauseInfo();
+        const body = JSON.stringify(causeInfo ? {
+          code: causeInfo.code,
+          message: causeInfo.message,
+          reason: causeInfo.reason,
+          stack: errorBaseUrl ? "stack mocked for snapshot" : causeInfo.stack,
+          codeFrame: causeInfo.traceMessage
+        } : null, null, "  ");
+        return {
+          status: 200,
+          headers: {
+            "cache-control": "no-store",
+            "content-type": "application/json",
+            "content-length": Buffer.byteLength(body)
+          },
+          body
+        };
+      }
+      if (serveInfo.request.pathname.startsWith("/__open_in_editor__/")) {
+        let file = serveInfo.request.pathname.slice("/__open_in_editor__/".length);
+        file = decodeURIComponent(file);
+        if (!file) {
+          return {
+            status: 400,
+            body: "Missing file in url"
+          };
+        }
+        const require = createRequire(import.meta.url);
+        const launch = require("launch-editor");
+        launch(fileURLToPath(file), () => {
+          // ignore error for now
+        });
+        return {
+          status: 200,
+          headers: {
+            "cache-control": "no-store"
+          }
+        };
+      }
+      return null;
+    },
+    transformUrlContent: {
+      html: htmlUrlInfo => {
+        const supervisorFileReference = htmlUrlInfo.dependencies.inject({
+          type: "script",
+          expectedType: "js_classic",
+          specifier: supervisorFileUrl
+        });
+        return injectSupervisorIntoHTML({
+          content: htmlUrlInfo.content,
+          url: htmlUrlInfo.url
+        }, {
+          supervisorScriptSrc: supervisorFileReference.generatedSpecifier,
+          supervisorOptions: {
+            errorBaseUrl,
+            logs,
+            measurePerf,
+            errorOverlay,
+            openInEditor
+          },
+          webServer: {
+            rootDirectoryUrl: htmlUrlInfo.context.rootDirectoryUrl,
+            isJsenvDevServer: true
+          },
+          inlineAsRemote: true,
+          generateInlineScriptSrc: ({
+            type,
+            textContent,
+            inlineScriptUrl,
+            isOriginal,
+            line,
+            column
+          }) => {
+            const inlineScriptReference = htmlUrlInfo.dependencies.foundInline({
+              type: "script",
+              subtype: "inline",
+              expectedType: type,
+              isOriginalPosition: isOriginal,
+              specifierLine: line - 1,
+              specifierColumn: column,
+              specifier: inlineScriptUrl,
+              contentType: "text/javascript",
+              content: textContent
+            });
+            return inlineScriptReference.generatedSpecifier;
+          }
+        });
+      }
+    }
+  };
+};
+
+export { injectSupervisorIntoHTML, jsenvPluginSupervisor, supervisorFileUrl };