How to use pixi.js modules/libraries with typescript using npm?

[daintycode]

First of all

Is it called "module" or "library" if it extends pixi.js' functionality?

How to use them with Typescript?

I'm not totally new to typescript but aren't pro w/ it at all.
I added pixi.js and the typings via npm (and successfully use npm-modules and their @types in typescript for the server of this project)

But when it comes to pixi.js modules things get weird, it's not enough to add them via npm and adding

import * as Stuff from 'pixi-module'

which makes sense, because afaik they extend the PIXI namespaces. So I tried adding this reference thing

/// <reference path="../node_modules/pixi-module/stuff.d.ts">

but even that did only work half-way. Hard to explain but it was like adding the Apples to PIXI, but not the AppleTree, if I may explain it this way. Even with `require('pixi-module')`

Even stranger: VSCode finds the module and even suggests it when writing an import statement. But after auto-completing it, it tells me the module is not found. (The webpack run tells me so, too.)

Tried it with @ivan.popelyshev pixi-projection, failed half-way and tried it again with pixi-particles. None of them did work as expected in the end.

Wat?

To conclude this: How to add modules after `npm install pixi-module` in my Typescript code, where I did `import * as PIXI from 'pixi.js'`

Thanks <3

[ivan.popelyshev]

///<reference types="pixi.js"/>
///<reference types="pixi-display"/>

That's what you can use without ES6 import/export.

For modularity: https://github.com/pixijs/pixi-spine/blob/master/test/checkpack.ts It doesn't even have those two lines.

If you take pixi-spine, and run "yarn checkpack like here: https://github.com/pixijs/pixi-spine/blob/master/package.json#L33 , you'll see that it works with different packers.

Thanks to @cursedcoder who made that architecture.

[daintycode]

Thank you, now I learned how to import this stuff right. Just corrected my import pixi thing to the reference-stuff.

Now I'm trying this with pixi-particles (sorry for my ignorance and ignoring pixi-spine completely here) and I can reference it, it's found and webpack doesn't complain BUT `PIXI.particles.Emitter` is not defined..

[ivan.popelyshev]

Is it runtime or compile time error? According to https://github.com/pixijs/pixi-particles/blob/master/index.d.ts it doesnt have global exports. You can fix it that way it looks like https://github.com/pixijs/pixi-spine/blob/master/bin/pixi-spine.d.ts , and use <reference paths> onto modified file instead.

[daintycode]

It's a writing-time error.;D

Nah, happens compile-time.

Oh I see it now, the particles module declares the `particle` namespace without "injecting" it into the PIXI namespace, am I getting this right?
Because spine does so, obviously.

[ivan.popelyshev]

But spine does not export it as a module, so its different. I dont know how to import particles in current state of plugin, may be you just get "import ... as particles" and use that as a namespace.

I don't use ES6 imports/exports at all so I really dont know. I gave you workaround, for better variants you can ask cursedcoder in our slack (want an invite?), or, im sure, you can do it yourself because now you have complete info on the issue.

I can rewrite pixi-particles on TS with our system later  Also, you can ask @bigtimebuddy

[daintycode]

DUDE I got it.

It felt dirty to change stuff in the node_modules, so I tried adding it via `///<reference path="../node_modules/pixi-particles/ambient.d.ts" />` and `require('pixi-particles')`.

I see that the problems with importing and using them with TS are module-specific. But with your help I understood this whole namespace/module/types-importing non-sense a bit more.

Yeah, I'm looking forward to some consistency and maybe a general way to use modules with TS, VSCode and all that stuff. The ES6 way and the oldschool way.

[ivan.popelyshev]

Nice  Yep, that's why I delegated this thing to @cursedcoder (at guthub) and he's also trying to make multi-module project with pixi plugins that works with import/export AND ts namespaces so there are no internal import/exports, just concat and namespace merging.

node.js and ES6 have many problems, and they just multiply them by refusing to adopt already working concepts from java and other langs. Instead its much simpler but for features that are really needed its much harder than in developed languages. I would be happy if architecture from Maven gets adopted somehow.