Build refactoring #95

ShukantPal · 2020-08-14T02:25:12Z

Synopsis 📃

This change will modernize pixi-tilemap's codebase to be up-to-date with the latest PixiJS standards 😃! I've done the following changes:

types.d.ts: This declares @pixi/<packages> modules and whatever classes pixi-tilemaps takes from those packages. This is necessary b/c only pixi.js has typings, but we import classes from @pixi/* packages.
import/export: The ES6 import/export syntax makes things modular & allows us to build to UMD & ESM bundles.
api-extractor: Automated declaration file generation!
rollup: This allows us to generate the proper CJS, ESM, UMD, UMD minified bundles.
namespace pixi_tilemap: Removed that namespace from each file. index.ts wraps all the exported classes at one place instead.

…rrect packages

ShukantPal · 2020-08-14T02:33:20Z

@ivanpopelyshev You should consider removing one of the package-lock.json or yarn.lock shrink-wrap files (or migrate to pnpm - I'll help you there).

blurymind · 2020-08-14T18:15:51Z

the umd build doesnt seem to work and looking at the code I am not sure if its wrapped at all.
I get an error: Exception was: ReferenceError: _pixi_display is not defined

You can test it at this branch with gdevelop if you like. Just swap mine out for yours.
4ian/GDevelop#1901

it comes up as undefined when gdevelop loads it. Mine gets a bit further - its not undefined, but fails further down.

A successfully loading example of a umd pixi library in gdevelop is pixi-multistyle-text, which is used by the bbcode extension

ShukantPal · 2020-08-14T18:20:52Z

@blurymind The UMD build is wrapped:

https://github.com/SukantPal/pixi-tilemap/blob/74e19e538982ec0a549242d9e22629ea24e2456e/dist/pixi-tilemap.umd.js#L12

I think I know what the problem is. The UMD build of @pixi/display, for example, is wrapped in _pixi_display. But the UMD build of pixi.js is wrapped in PIXI & doesn't expose _pixi_display.

ShukantPal · 2020-08-14T18:22:43Z

@blurymind Can you try again?

blurymind · 2020-08-14T18:23:02Z

yes sure, thanks for helping me :)

blurymind · 2020-08-14T18:25:20Z

It gets a bit further now. The library is imported by gdevelop, but the moment I try to use it I get

Uncaught TypeError: PIXI.tilemap.CompositeRectTileLayer is not a constructor
    at new RenderedTileMapInstance (D:\DEV\GD\GDevelop\newIDE\app\resources\GDJS\Runtime\Extensions\TileMap\JsExtension.js:364)
    at Object.createNewInstanceRenderer (ObjectsRenderingService.js:62)
    at LayerRenderer.getRendererOfInstance (LayerRenderer.js:118)
    at InitialInstanceJSFunctor.LayerRenderer.instancesRenderer.invoke (LayerRenderer.js:51)
    at 8152 (libGD.js?cache-buster=5.0.0-beta98-e240a7c80d1abab373f93f826c8ca5fa39b63774:51)
    at _emscripten_asm_const_iii (libGD.js?cache-buster=5.0.0-beta98-e240a7c80d1abab373f93f826c8ca5fa39b63774:51)
    at Array._B (libGD.js?cache-buster=5.0.0-beta98-e240a7c80d1abab373f93f826c8ca5fa39b63774:25)
    at Array.ib (libGD.js?cache-buster=5.0.0-beta98-e240a7c80d1abab373f93f826c8ca5fa39b63774:25)
    at hF (libGD.js?cache-buster=5.0.0-beta98-e240a7c80d1abab373f93f826c8ca5fa39b63774:25)
    at As (libGD.js?cache-buster=5.0.0-beta98-e240a7c80d1abab373f93f826c8ca5fa39b63774:25)
    at InitialInstancesContainer.IterateOverInstancesWithZOrdering.InitialInstancesContainer.IterateOverInstancesWithZOrdering [as iterateOverInstancesWithZOrdering] (libGD.js?cache-buster=5.0.0-beta98-e240a7c80d1abab373f93f826c8ca5fa39b63774:51)
    at LayerRenderer.render (LayerRenderer.js:204)
    at InstancesRenderer.render (index.js:117)
    at InstancesEditor._renderScene (index.js:728)

ShukantPal · 2020-08-14T18:26:31Z

@blurymind I forgot to assign PIXI.tilemap to _pixi_tilemap. One sec.

ShukantPal · 2020-08-14T18:27:41Z

Okay, try again :)

blurymind · 2020-08-14T18:31:49Z

This change seems to have regressed it. I get this now when trying to load the module
ReferenceError: _pixi_tilemap is not defined
If you look at the documentation of how to use the library, we expect to find it at PIXI.tilemap
Is that something that needs to change?

ShukantPal · 2020-08-14T18:33:45Z

Ugh. I thought the name was _pixi_tilemap, but it should've been pixi_tilemap. I pushed a fix for this. Sorry for these silly mistakes.

blurymind · 2020-08-14T18:34:43Z

will this address the previous issue which is
PIXI.tilemap.CompositeRectTileLayer is not a constructor

I need to debug this a bit more

ShukantPal · 2020-08-14T18:36:22Z

https://github.com/SukantPal/pixi-tilemap/blob/695b63aab09152017d39df508f96438bb6e20327/dist/pixi-tilemap.umd.js#L953

It should be there. Can you console.log(PIXI.tilemap)?

blurymind · 2020-08-14T18:39:52Z

Ah interesting, now its loading fine, but I am getting a different error when trying to use it

Container.ts:428 Uncaught TypeError: Cannot read property 'transform' of null
    at t.Container.updateTransform (Container.ts:428)
    at t.Container.getLocalBounds (Container.ts:506)
    at t.get (Container.ts:669)
    at RenderedTileMapInstance.getDefaultWidth (D:\DEV\GD\GDevelop\newIDE\app\resources\GDJS\Runtime\Extensions\TileMap\JsExtension.js:494)
    at LayerRenderer.getInstanceWidth (LayerRenderer.js:92)
    at LayerRenderer._isInstanceVisible (LayerRenderer.js:178)
    at InitialInstanceJSFunctor.LayerRenderer.instancesRenderer.invoke (LayerRenderer.js:59)
    at 8152 (libGD.js?cache-buster=5.0.0-beta98-e240a7c80d1abab373f93f826c8ca5fa39b63774:51)
    at _emscripten_asm_const_iii (libGD.js?cache-buster=5.0.0-beta98-e240a7c80d1abab373f93f826c8ca5fa39b63774:51)
    at Array._B (libGD.js?cache-buster=5.0.0-beta98-e240a7c80d1abab373f93f826c8ca5fa39b63774:25)
    at Array.ib (libGD.js?cache-buster=5.0.0-beta98-e240a7c80d1abab373f93f826c8ca5fa39b63774:25)
    at hF (libGD.js?cache-buster=5.0.0-beta98-e240a7c80d1abab373f93f826c8ca5fa39b63774:25)
    at As (libGD.js?cache-buster=5.0.0-beta98-e240a7c80d1abab373f93f826c8ca5fa39b63774:25)
    at InitialInstancesContainer.IterateOverInstancesWithZOrdering.InitialInstancesContainer.IterateOverInstancesWithZOrdering [as iterateOverInstancesWithZOrdering] (libGD.js?cache-buster=5.0.0-beta98-e240a7c80d1abab373f93f826c8ca5fa39b63774:51)
    at LayerRenderer.render (LayerRenderer.js:204)
    at InstancesRenderer.render (index.js:117)
    at InstancesEditor._renderScene (index.js:728)

blurymind · 2020-08-14T18:42:30Z

I confirm i can log PIXI.tilemap, but some of the items in it come up with type errors

is this perhaps due to strict mode?

ivanpopelyshev · 2020-08-14T18:46:33Z

That's function-related stuff, its supposed to be like that

ShukantPal · 2020-08-14T18:46:40Z

@blurymind Can you give me a test script using pixi-tilemap so I can debug this today evening?

blurymind · 2020-08-14T18:49:26Z

@blurymind Can you give me a test script using pixi-tilemap so I can debug this today evening?

All I have at the moment is the PR branch getting it to work in gdevelop with an example json fileto use
4ian/GDevelop#1901

This used to work with a normal module, but after gdevelop was ported to pixi5 we are now required to use umd modules.

My pr adds a new tilemap game object which should work in the IDE, but doesnt yet work when you playtest the game.
It is also possible there is an error somewhere in my extension, so I am looking into that as a potential issue too

I wonder if we can test this on something simpler - like a minimal example project

blurymind · 2020-08-14T18:54:27Z

I believe the problem is still in pixi-tilemap because the error I getwhen trying to use it is

Container.ts:428 Uncaught TypeError: Cannot read property 'transform' of null
    at RectTileLayer.Container.updateTransform

Btw I was getting the exact same problem on my port to a umd module, which is the other pr here

ShukantPal · 2020-08-14T18:56:08Z

@blurymind I would open a separate issue for that - with a minimal reproduction. @ivanpopelyshev would be the guy looking at that 😅

blurymind · 2020-08-14T18:56:53Z

Do we have any proof that pixi-tilemap works as a umd module in anything? :)

ShukantPal · 2020-08-14T18:56:53Z

Since the codebase is cleaner now, I might be able to help you too there.

ShukantPal · 2020-08-14T18:58:02Z

Up until now, there was no UMD module - so no. The error you're talking about is a runtime error - not something related to the UMD build (as far as I can see).

blurymind · 2020-08-14T19:03:23Z

I have a feeling that this is something that comes from its umd nature or pixi5, but its hard to tell.
Btw you might be able to get a better testing ground by using it in this example project
https://github.com/Alan01252/pixi-tilemap-tutorial

granted you need to swap the pixi library there with the new umd one + upgrade pixi4 there to 5

blurymind · 2020-08-14T19:34:07Z

I made this as a testing ground
https://github.com/blurymind/pixi-tilemap-tutorial/tree/pixi-umd
feel free to fork and play. The module loads, but fails to work

It is also possible that some of the code still needs changing to work with pixi5

blurymind · 2020-08-14T19:40:05Z

I updated my demo project now to better test against pixi-tilemap as it is in dist on master for pixi 5.

The compiled version of the umd module does not work, the vanila version works fine.
You can comment one out and try with the other in the index.html to see.

To test on localhost you can use
npx http-server .

I am either not using your umd right, or it definitely does not work
https://github.com/blurymind/pixi-tilemap-tutorial/tree/pixi-umd

Uncaught TypeError: Cannot read property 'generateSampleSrc' of undefined
    at generateFragmentSrc (pixi-tilemap.umd.js:701)
    at new RectTileShader (pixi-tilemap.umd.js:745)
    at new TileRenderer (pixi-tilemap.umd.js:780)
    at r.initPlugins (pixi.min.js:1)
    at new r (pixi.min.js:1)
    at Function.create (pixi.min.js:1)
    at Ur (pixi.min.js:1)
    at new t (pixi.min.js:1)
    at (index):20

blurymind · 2020-08-19T10:58:17Z

Have you managed to do some testing with the project I provided? Is there anything else I can do to help this PR? It's something we need to get pixi-tilemap working again in gdevelop and blocks my PR there atm

I'm sorry I dont have quite as much experience with rollup. Perhaps we can try manually editing the resulting file to get it to work somehow?

ShukantPal · 2020-08-19T12:39:05Z

I have not yet, sorry. I’ve been working 8-9 hrs/day, 7 days/week for some time. Things to finish before closing a contract. I might get time this weekend. Maybe @ivan can give a better guarantee.

…

Sent from my iPhone On Aug 19, 2020, at 6:58 AM, Todor Imreorov <[email protected]> wrote: Have you managed to do some testing with the project I provided? Is there anything else I can do to help this PR? It's something we need to get pixi-tilemap working again in gdevelop and blocks my PR there atm — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#95 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AFLJDB77V64X6JAUO4FL7OTSBOV5PANCNFSM4P7BLDPQ>.

ivanpopelyshev · 2020-08-19T12:43:24Z

I can accept other PR for now, if you are not sure about this one.

ShukantPal · 2020-08-19T13:32:43Z

@ivan Both PRs give the same result. Mine just has more things than the UMD build.

…

Sent from my iPhone On Aug 19, 2020, at 8:43 AM, Ivan Popelyshev <[email protected]> wrote: I can accept other PR for now, if you are not sure about this one. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#95 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AFLJDB4QWEWFQVBBSDNJJADSBPCHXANCNFSM4P7BLDPQ>.

ShukantPal · 2020-08-19T13:33:23Z

I think you could merge it, but don’t publish the package. We can fix the UMD.build stuff this weekend.

…

Sent from my iPhone On Aug 19, 2020, at 8:43 AM, Ivan Popelyshev <[email protected]> wrote: I can accept other PR for now, if you are not sure about this one. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#95 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AFLJDB4QWEWFQVBBSDNJJADSBPCHXANCNFSM4P7BLDPQ>.

ShukantPal · 2020-08-20T02:15:50Z

@blurymind I made a fix, can you recheck?

blurymind · 2020-08-20T08:41:59Z

Thank you, I will give this a try after work :)

blurymind · 2020-08-20T17:08:10Z

@SukantPal that fixes it! The UMD build works in the example minimal project now!

ivanpopelyshev · 2020-08-20T17:11:18Z

ok, gonna re-publish it soon

blurymind · 2020-08-20T17:30:50Z

ah wait, there is something wrong with this

blurymind · 2020-08-20T17:34:29Z

sorry this might be a gdevelop related issue. It still fails in gdevelop unfortunately. I am trying to find out if its due to the module or gdevelop itself

ivanpopelyshev · 2020-08-20T17:34:31Z

Hell, whats wrong?

ShukantPal · 2020-08-20T17:49:11Z

😆

blurymind · 2020-08-20T23:39:45Z

seems not like a real UMD module, it will work without issue in the browser, but I see no "require" at all that would make it compatible with "CommonJS" and so it's possibly not loaded properly in Electron.

…

On Thu, 20 Aug 2020, 18:49 Sukant Pal, ***@***.***> wrote: 😆 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#95 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABRRWVI3GWEY64PFOGKWGNDSBVO2NANCNFSM4P7BLDPQ> .

ShukantPal · 2020-08-20T23:48:56Z

Ah, I’ll see what’s going. You can file an issue so we can continue this thread there.

Sent from my iPhone On Aug 20, 2020, at 7:39 PM, Todor Imreorov <[email protected]> wrote: seems not like a real UMD module, it will work without issue in the browser, but I see no "require" at all that would make it compatible with "CommonJS" and so it's possibly not loaded properly in Electron.

On Thu, 20 Aug 2020, 18:49 Sukant Pal, ***@***.***> wrote: 😆 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#95 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABRRWVI3GWEY64PFOGKWGNDSBVO2NANCNFSM4P7BLDPQ> .

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#95 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AFLJDBYLVC2T7IZCUP2MAQTSBWX45ANCNFSM4P7BLDPQ>.

ShukantPal · 2020-08-20T23:49:09Z

Ah, I’ll see what’s going on. You can file an issue so we can continue this thread there.

Sent from my iPhone On Aug 20, 2020, at 7:39 PM, Todor Imreorov <[email protected]> wrote: seems not like a real UMD module, it will work without issue in the browser, but I see no "require" at all that would make it compatible with "CommonJS" and so it's possibly not loaded properly in Electron.

On Thu, 20 Aug 2020, 18:49 Sukant Pal, ***@***.***> wrote: 😆 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#95 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABRRWVI3GWEY64PFOGKWGNDSBVO2NANCNFSM4P7BLDPQ> .

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#95 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AFLJDBYLVC2T7IZCUP2MAQTSBWX45ANCNFSM4P7BLDPQ>.

blurymind · 2020-08-21T08:53:21Z

@SukantPal opened a new ticket here
#97

blurymind · 2020-08-21T16:32:36Z

Florian left a very helpful comment at the issue I linked. Perhaps it can help you with the followup PR?
I can help with testing the fix in electron

ShukantPal · 2020-08-23T00:58:13Z

I’ve published the @pixi-build-tools/rollup-configurator package. @ivan and I are going to move official PixiJS plugins to use that rollup configuration instead - it outputs UMD instead of IIFE bundles.

…

Sent from my iPad On Aug 21, 2020, at 12:32 PM, Todor Imreorov <[email protected]> wrote: Florian left a very helpful comment at the issue I linked. Perhaps it can help you with the followup PR? I can help with testing the fix in electron — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#95 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AFLJDBYSXATJ6AUJCPIIME3SB2OTFANCNFSM4P7BLDPQ>.

ShukantPal added 2 commits August 13, 2020 22:21

Move to rollup, add api-extractor. Use import/export & import from co…

3c9b03d

…rrect packages

Update yarn.lock

cce11fc

Update scripts & eslint-disable in banner

2fae8f3

ShukantPal mentioned this pull request Aug 14, 2020

Umd build #94

Closed

Turn off non-fatal warnings in api-extractor

74e19e5

blurymind mentioned this pull request Aug 14, 2020

Support for Tilemaps objects (tilesets and Tiled files) 4ian/GDevelop#503

Closed

Fix UMD build dependencies

7e2b62e

PIXI.tilemap

868e26d

_pixi_tilemap -> pixi_tilemap

695b63a

Fix issues with "this" object in generateSampleSrc

4d395e6

blurymind mentioned this pull request Aug 20, 2020

Tiled pixi tilemap rendering 4ian/GDevelop#1901

Closed

21 tasks

ivanpopelyshev merged commit 4c9dbdb into pixijs-userland:master Aug 20, 2020

ShukantPal mentioned this pull request Mar 6, 2021

Solve module compatibility issues, clean up project. #105

Closed

Build refactoring #95

Build refactoring #95

Conversation

ShukantPal commented Aug 14, 2020 • edited Loading

Synopsis 📃

ShukantPal commented Aug 14, 2020

blurymind commented Aug 14, 2020 • edited Loading

ShukantPal commented Aug 14, 2020

ShukantPal commented Aug 14, 2020

blurymind commented Aug 14, 2020

blurymind commented Aug 14, 2020 • edited Loading

ShukantPal commented Aug 14, 2020

ShukantPal commented Aug 14, 2020

blurymind commented Aug 14, 2020 • edited Loading

ShukantPal commented Aug 14, 2020

blurymind commented Aug 14, 2020

ShukantPal commented Aug 14, 2020

blurymind commented Aug 14, 2020 • edited Loading

blurymind commented Aug 14, 2020

ivanpopelyshev commented Aug 14, 2020

ShukantPal commented Aug 14, 2020

blurymind commented Aug 14, 2020 • edited Loading

blurymind commented Aug 14, 2020 • edited Loading

ShukantPal commented Aug 14, 2020

blurymind commented Aug 14, 2020

ShukantPal commented Aug 14, 2020

ShukantPal commented Aug 14, 2020 • edited Loading

blurymind commented Aug 14, 2020 • edited Loading

blurymind commented Aug 14, 2020

blurymind commented Aug 14, 2020 • edited Loading

blurymind commented Aug 19, 2020 • edited Loading

ShukantPal commented Aug 19, 2020 via email

ivanpopelyshev commented Aug 19, 2020

ShukantPal commented Aug 19, 2020 via email

ShukantPal commented Aug 19, 2020 via email

ShukantPal commented Aug 20, 2020

blurymind commented Aug 20, 2020

blurymind commented Aug 20, 2020

ivanpopelyshev commented Aug 20, 2020

blurymind commented Aug 20, 2020

blurymind commented Aug 20, 2020

ivanpopelyshev commented Aug 20, 2020

ShukantPal commented Aug 20, 2020

blurymind commented Aug 20, 2020 via email

ShukantPal commented Aug 20, 2020 via email

ShukantPal commented Aug 20, 2020 via email

blurymind commented Aug 21, 2020

blurymind commented Aug 21, 2020

ShukantPal commented Aug 23, 2020 via email

ShukantPal commented Aug 14, 2020 •

edited

Loading

blurymind commented Aug 14, 2020 •

edited

Loading

blurymind commented Aug 14, 2020 •

edited

Loading

blurymind commented Aug 14, 2020 •

edited

Loading

blurymind commented Aug 14, 2020 •

edited

Loading

blurymind commented Aug 14, 2020 •

edited

Loading

blurymind commented Aug 14, 2020 •

edited

Loading

ShukantPal commented Aug 14, 2020 •

edited

Loading

blurymind commented Aug 14, 2020 •

edited

Loading

blurymind commented Aug 14, 2020 •

edited

Loading

blurymind commented Aug 19, 2020 •

edited

Loading