mjs build?

[eg3r]

First let me say nice work with this project, I use and like it a lot!

In a recent project of mine I started using the pixi.js mjs build for the browser, it allows me to slimline my own build process. Are there any plans to add the same for viewport?

[davidfig]

I hadn't given it much thought. I don't understand how/why pixi uses the .mjs files. I thought they would compile to use import/export statements? Looking through them at https://github.com/pixijs/pixijs/releases, they look like normal compressed js files.

[eg3r]

The goal was/is to remove the need of bundlers using esm. So basically with the mjs "bundle" you can right away in the browser include pixi js using something like "import { Application } from './pixi.mjs'". Right now for Viewport you need to bundle it with something like rollup.

By the looks of it they bundled all the required imports/polyfills into one mjs-file (as esm build).

Lets assume you have the mjs file hosted along your application and want to use Viewport the same way in the browser and host viewport.js (esm build) yourself. It will call "import { Point, Rectangle } from '@pixi/math';" ( https://github.com/davidfig/pixi-viewport/blob/master/dist/esm/viewport.es.js#L12 ), that will of course fail.

Maybe I'm missing something and it is already possible, if so I would love to know the way.

[davidfig]

How does the browser handle node_module imports? For example, how would viewport find pixi's definitions? (Personally, I'd also love to find a way to natively run js files without rollup or esbuild.) That seems to be the blocker to importing it without build tools. pixi-viewport uses similar build tools to pixi.js, so there should be a way to add the .mjs build. But I'm wondering what it's for and if it's worth adding.

[eg3r]

There are two ways:

1. import path relative to the file (or rather must have the same name I guess: more here )
2. import-maps (supported by some browsers already)

I was able to make it work on latest chrome with import maps, so to answer my own question from previous post: there is a way.

<script type="importmap">
  {
    "imports": {
       "pixi.mjs":  "../path/to/pixi.mjs",
       "@pixi/math": "../path/to/pixi.mjs",
       "@pixi/display":  "../path/to/pixi.mjs",
       "@pixi/ticker":  "../path/to/pixi.mjs",
       "penner":  "../path/to/penner.js"
    }
  }
</script>

The only problem was penner.js import statement ( https://github.com/davidfig/pixi-viewport/blob/master/dist/esm/viewport.es.js#L13 ) I had to change it. I'm not sure how chrome actually handles it (if multiple instances of the same mjs are held in memory etc). Also it seems to be a very tricky solution in general.

[davidfig]

I'm planning on removing penner in the future (on the list). So can you import viewport.js the same way, or do you need a separate .mjs export?

[eg3r]

Ideally in the future there would be a viewport bundle using pixi.mjs (and no penner) so I could support more browsers (currently only chromium based browsers support import maps).

But right now I can also just adjust the esm bundle myself (replacing the import statements of the esm version with pixi.mjs and import penner directly into the file).

[davidfig]

Ok. When I next build the package. I'll add an mjs export and hopefully remove penner.