[Suggestion] Export the package as module

[yordan-kanchelov]

It would be really easy and convenient if this is exported as npm package and to be able to import it in a project via the esnext import statement for example

[Mwni]

The newest version is compatible with nodejs.
By that I mean it's possible to import it as a module
const TextInput = require('./PIXI.TextInput')
Is that sufficient for it to work with esnext imports?

[buryo]

Can u add more documentation about how to download and and use this please? I have no idea how to use this, struggling more than an hour now :/

(I'm using React)

[Mwni]

It's simply meant to be included in the html page. Grab the PIXI.TextInput.min.js from the dist folder and include it via a script a tag.
But I'm afraid you can't simply do that with react, it all gets compiled down and the html ist being generated for you, right?

[buryo]

That's true, I already tried that =)

[Mwni]

How are you including pixi.js?

[buryo]

Downloaded with NPM and including like:
import * as PIXI from 'pixi.js';

[yordan-kanchelov]

@Mwni My thought was to include it as npm package so you could be able to let's say

npm install pixi-text-input

and then include it like that

import { TextInput } from "pixi-text-input" ( or something like that )

Here is an example for a published project like that - https://github.com/jkanchelov/pixi-console
and here is an example project where it could be easily consumed https://github.com/jkanchelov/flappy-bird-pixijs

[ivanpopelyshev]

@Mwni if you want invite to pixijs slack, send an email to [email protected] , i'll send an invite.

There are people who can help with those kind of things.

[Mwni]

Okay first attempt of a npm package is online.
npm install pixi-text-input
then
const TextInput = require('pixi-text-input')
or
import 'pixi-text-input' as TextInput (not sure though)

Does it work? Can't test it inside node due to node not being a browser and don't have the browserify environment either.

[buryo]

I think the npm package is okay but now we need to know how to use it I'm getting the following error:

I did:

• npm install pixi-text-input
• import TextInput from 'pixi-text-input';

Getting the error:
Attempted import error: 'TextInput' is not exported from 'pixi.js' (imported as 'PIXI').

[ivanpopelyshev]

Lets meet in the middle. Its obviously that plugin creators who dont use React/Webpack and that stuff cnat get you everything. If we put something in npm and import kinda works - that's enough.

Import the module after you import pixi.js. Do not import classes.

Use PIXI.TextInput.

[buryo]

I already tried almost everything Ivan, I think it doesn't inherit PIXI

[yordan-kanchelov]

@buryo can you try and then confirm if let's say this package works for you https://github.com/jkanchelov/pixi-fps

[buryo]

@jkanchelov Works like a charm! =)
https://i.imgur.com/e3y7M25.png

[yordan-kanchelov]

Later today or tomorrow I will push the things you need to make it work and will go with pull request and if @Mwni approves it and publish the package you won't have problems afterward

[buryo]

@jkanchelov Thanks for the effort hero

[yordan-kanchelov]

#8

[Kurt-Montanaro]

Any luck with people using this in a typescript project?

[ivanpopelyshev]

@Kurt-Montanaro its not big, you can make typings for it.

[yordan-kanchelov]

@Kurt-Montanaro i am using it from my fork but it’s still in a very ugly and early phase

[jjhesk]

lets work on the npm module. someone already made it: https://github.com/jkanchelov/PIXI.TextInput

[jjhesk]

no luck. i have got

having:

import TextInput from "pixi-text-input"

"Uncaught TypeError: pixi_text_input__WEBPACK_IMPORTED_MODULE_1___default.a is not a constructor"

[yordan-kanchelov]

@jjhesk I could publish it in its current state, but currently, I don't have time to improve it

[jjhesk]

yes, try my new PR i took 2 hours to made it done. https://github.com/ONode/pixi-textinput
usage:
import Textput from "pixi-textinput"

[connorjclark]

This package is a good example on how to support a Node and a drop-in browser target:
https://github.com/davidfig/pixi-viewport

Note the two types of file in dist/, and how module: in package.json points to a es.js file that exports its members (instead of polluting the PIXI namespace).

[karamvirs]

There is no module export in TextInput.js file.
So just requiring it should work.
PIXI.TextInput = require('pixi-text-input')
But then I get another error:
"Cannot read property 'call' of undefined" in the _proto.render() function in PIXI.TextInput.js line 185.
On further troubleshooting I found that PIXI 4 is a dependency in package.json file of this module and the Container.js file in this dependecy (node_modules\pixi-text-input\node_modules\pixi.js\lib\core\display\Container.js) doesnt have a render() function. Only renderWebGL() and renderCanvas().
Deleting the node_module folder in the 'pixi-text-input' and using pixi 5 fixed the issue for me.

Has anyone else faced this issue?
I think it only works with PIXI 5.
If thats the case can you please update the dependecy in the npm package to PIXI 5?

[HusakYurii]

I have the same error, I am using pixi V5 (5.2.1). I installed "pixi-text-input" (now it is 1.0.4) feature, and created an instance of that and added to the stage, afterwards I run into that error related to rendering things. I think it is because now rendere was moved out of Display object?

[ivanpopelyshev]

it wasnt , its still there. Also all objects are Containers, displayobject is base abstraction , not being used directly.

[HusakYurii]

It's clear, thanks! So, the question to the author then, will it be fixed? Because it is such a great feature!

[Mwni]

ok, will patch in a few hours. have to add something else anyways.

[Mwni]

@HusakYurii please check if 1.0.5 is working for you now.

[HusakYurii]

@Mwni Good morning! Sorry for the delay!
Thank you a lot, it works (no more render issues thrown) !

I am building my bundle with pixi customize so, I added a few workarounds for my case, but in general it works !!!

[muhammadhaseebsohail]

i am still facing the same issue, can you guys let me know the exact version which cause no issue?

[HusakYurii]

@muhammadhaseebsohail I used PIXI.js v5.2.1 . The project was packed up using webpack