feat: add IIFE and ESM browser builds

[skirtles-code]

Closes #989.

This change would add two new files to the build output for @vue/devtools-api:

• dist/vue-devtools-api.esm-browser.js
• dist/vue-devtools-api.global.js

These are ESM and IIFE builds respectively, intended to be used directly in the browser without using a bundler, e.g. via a CDN.

Background

Pinia uses @vue/devtools-api. Specifically:

• Pinia 2 uses @vue/devtools-api version 6.
• Pinia 3 uses @vue/devtools-api version 7.

In both cases it is using the old v6 API call setupDevtoolsPlugin.

Pinia 2 bundles @vue/devtools-api into its IIFE build. But this changed in version 3 and it is now expected to be included separately. This is a problem because @vue/devtools-api doesn't currently provide a global/IIFE build:

• 3.0.1,3.0.2,3.0.3 - devtoolsApi is not defined pinia#2914

This is the motivation behind adding an IIFE build for @vue/devtools-api.

Pinia also provides pinia.esm-browser.js. This is intended to be used directly in a browser using an import map. In this build @vue/devtools-api is kept external.

In theory this can use the existing ESM build of @vue/devtools-api, but that's more difficult than it sounds because of all the other dependencies that need to be included. To get it to work you need something like this:

{
  "vue": "https://play.vuejs.org/vue.runtime.esm-browser.js",
  "@vue/devtools-api": "https://unpkg.com/@vue/devtools-api@8/dist/index.js",
  "@vue/devtools-kit": "https://unpkg.com/@vue/devtools-kit@8/dist/index.js",
  "@vue/devtools-shared": "https://unpkg.com/@vue/devtools-shared@8/dist/index.js",
  "birpc": "https://unpkg.com/birpc@4/dist/index.mjs",
  "hookable": "https://unpkg.com/hookable@6/dist/index.mjs",
  "perfect-debounce": "https://unpkg.com/perfect-debounce@2/dist/index.mjs",
  "pinia": "https://unpkg.com/pinia@3/dist/pinia.esm-browser.js"
}

• Playground

This does work, but it needs 6 entries to get @vue/devtools-api to work, and it's tied to the specific dependencies that happen to exist for that particular version.

By contrast, @vue/devtools-api version 6 included everything in index.js, so only one file was required to use it with an import map.

Of course, Pinia is not the only library using @vue/devtools-api. Hopefully other libraries will benefit from these extra builds too. Several libraries, including Vue Router, are currently using version 6 and hopefully these extra builds will make it easier to migrate to version 8.

Names

I've made various decisions regarding naming that are worth noting:

• For the global variable, I've called it VueDevToolsApi. Note the capital T for Tools, which seems to be the convention that's being used elsewhere in the project. Also note that this does not match what's expected by Pinia, which is using devtoolsApi. Pinia will need updating to match whatever we use here, though it is trivial to create an alias via var devtoolsApi = VueDevToolsApi, which is what I used to test these changes.
• For the filenames, I've followed the conventions used by Vue, beginning with vue-devtools-api, followed by the build type. I've named the IIFE build global, rather than the default iife. Some other parts of the Vue ecosystem (including Pinia) use the name iife instead.

Alternatives

These two builds are independent, though the changes required are similar. If needs be I could split this into two PRs, allowing for one to be merged without the other.

An alternative to adding a separate ESM browser build would be to replace the existing ESM build.

Testing

I've only tested these builds with a simple Vue/Pinia application and the Chrome browser extension. That did seem to work correctly, with data from Pinia visible and editable from the extension.

Some aspects won't be fully testable until these changes are deployed to CDNs (e.g. the unpkg and jsdelivr entries in package.json).

Even though these changes only apply to @vue/devtools-api version 8, the resulting builds are usable with Pinia 3. The breaking changes between version 7 and version 8 shouldn't impact these browser builds.

[netlify]

✅ Deploy Preview for vue-devtools-docs canceled.

Name	Link
🔨 Latest commit	80a8bfe
🔍 Latest deploy log	https://app.netlify.com/projects/vue-devtools-docs/deploys/695e8249f8a17000088c3868