ES6 Module Release

[Adam Savard]

Hi!

I'm looking for a little bit of info on how pixi filters can be integrated into an app that doesn't use the global PIXI var, but also isn't an npm workflow.

Basically, I'm using pixi 6.2.2 and a self-hosted pixi.min.mjs file. My first thought was to try ES6 imports for the provided release file (so, import {GlowFilter} from './libs/pixi-filters.js'), but while it seems you can do that in Node JS, it doesn't seem to be possible with the browser-based pixi ESM.

So I came up with this dirty-feeling hack to get filters applied to objects:

import * as PIXI from './libs/pixi.min.mjs';
window.PIXI = PIXI; //workaround for filters
const getFilter = function(filterName){
    return window.PIXI.filters[filterName];
}
export{getFilter}

Since filters are only applied after the pixi-filers.js file is loaded, I can call getFilter(name) and have it return the proper filter.

While this works, I can't help but feel I'm missing something here. I'd prefer to not set up a whole browserify workflow in an app that otherwise doesn't need it.

Am I missing something in the docs, or is this what you'd have to do to get things working with filters without a browserify/webpack/etc workflow?

[Sang Yoo Kim]

Same here...

[Matt Karl]

I'll work on adding browser modules 👍

[Matt Karl]

Many of the filters require internal dependencies (e.g. import { Filter } from '@pixi/core') and because browser modules don't use/resolve package names, and I'm not sure how to handle these in the output. I was thinking of using an external url such as https://unpkg.com/browse/pixi.js/dist/browser/pixi.min.mjs in place of @pixi/core, but I would love some feedback.

Also, I will likely only support pixi-filters package with mjs, supporting for individual packages is much more complicated because there are some shared dependencies.

[Adam Savard]

I know it's been a while, but I'll comment on this now. Time seems to get away from me sometimes, so I apologize!

I know it's not an amazing solution, but could we go with something like a dynamic import of Pixi? Instead of a hard-coded solution, passing in either the Pixi object/namespace or string of where to look for it may be a little more generic. That does require a little more setup on the part of whoever's using it, but it also means that if you self-host Pixi, you can use that self-hosted version.

Something like:

Import filters from 'pixi-filters';
filters.setup('/path/to/pixi.mjs'); //this would set up the imports and initialize the filters

Sorry for the pseudo code, on mobile at the moment!