Import Maps

[marklundin]

First class support for Import Maps

As we move toward support for ESM Scripts https://github.com/playcanvas/engine/issues/4767, users should be able define import maps in esm scripts such as..

{
  "imports": {
    "@utils": "/scripts/utils",
    "firebase": "https://esm.run/firebase"
  }
}

This will allow the to use module specifiers in their project, which helps to structure projects

import { initializeApp } from 'firebase/app';
import { lerp } from '@utils';

Ideally users can create a import-map.json in the root of the asset registry which is used by the editor when parsing scripts, in the launcher when running and also during bundling and exporting. This would allow import maps to be edited both by hand and by an editor panel for installing modules from NPM.

Tasks

• [x] Add project settings for dependencies object
• [x] Inject Imports Maps into exported html pages
• [ ] Add UI for adding NPM packages eg "firebase": "https://esm.run/firebase" https://github.com/playcanvas/editor-ui/pull/254

[Maksims]

The import map for the Editor script should be generated automatically, and I don't think it should be exposed to users. This import map will contain records that follow the assets folder structure. An additional option could be the ability to set the script import name on the asset itself, which will add another import map record during generation.

Custom import maps - could be used per project, just like the "External Scripts" feature in the settings. With similar UX.

So that way there is little possibility for a human mistake (by editing a JSON), and there is still flexibility to define custom import names and/or external imports.

[marklundin]

Yeah there will likely be some UX around editing data, we may even have some UX for searching/installing through NPM