import.meta.url Support

[evanplaice]

I have a Monaco Editor web component that needs URLs provided so it knows where to side-load the language-server-protocol service workers from

For context, this is an ESM -> ESM transform with the following command

esbuild --format=esm --bundle src/wc-monaco-editor.js --outfile=index.js

Here's the original source

const monacoDir = new URL('monaco/', import.meta.url)
self.MonacoEnvironment = {
  getWorkerUrl: function (moduleId, label) {
    if (label === 'json') {
      return `${monacoDir}json.worker.js`
    }
    if (label === 'css') {
      return `${monacoDir}css.worker.js`
    }
    if (label === 'html') {
      return `${monacoDir}html.worker.js`
    }
    if (label === 'typescript' || label === 'javascript') {
      return `${monacoDir}ts.worker.js`
    }
    return `${monacoDir}editor.worker.js`
  }
}

Which gets transformed to

const import_meta = {};
const monacoDir = new URL("monaco/", import_meta.url); // <-- import_meta.url isn't defined
self.MonacoEnvironment = {
  getWorkerUrl: function(moduleId, label) {
    if (label === "json") {
      return `${monacoDir}json.worker.js`;
    }
    if (label === "css") {
      return `${monacoDir}css.worker.js`;
    }
    if (label === "html") {
      return `${monacoDir}html.worker.js`;
    }
    if (label === "typescript" || label === "javascript") {
      return `${monacoDir}ts.worker.js`;
    }
    return `${monacoDir}editor.worker.js`;
  }
};

Note: RollupJS can bundle the same code without issue because it doesn't transform import.meta.url

---

BTW, tc39/proposal-import-meta is officially Stage 4

[evanw]

I was under the impression that import.meta was potentially for information from the bundler about the original source file, but it looks like I'm mistaken. Both Rollup and Parcel 2 appear to pass import.meta through unmodified. I will change esbuild to do that too.

[evanplaice]

Nope, import.meta.url is just a const pointing to the absolute path/url of the source it's being called from. If bundling relocates stuff, the onus is on the person doing the bundling to reconcile the differences (via copying or symlinking).

Webpack is is at an unfortunate disadvantage due to their heavy reliance on faux modules and magical kitchen sink builds.

Bundlers that more-or-less respect the structure of the original source can pass it through as-is.

[evanw]

This should be working now as of version 0.5.17.