organizing imports

[wooseok123]

Description

How about adding a index.ts which includes all plugin files so that the import lines look clean?

As-Is

/* example */
import RoundRectangle from 'phaser3-rex-plugins/plugins/roundrectangle.js';
import YoutubePlayer from 'phaser3-rex-plugins/plugins/youtubeplayer.js';
import ContainerLite from 'phaser3-rex-plugins/plugins/containerlite';
import {TextEdit, Edit} from 'phaser3-rex-plugins/plugins/textedit.js';

To-Be

/* example */
import {RoundRectangle,  YoutubePlayer, ContainerLite, TextEdit, Edit } from 'phaser3-rex-plugins/plugins';

To look like this, i think we need to remove all the d.ts file of each component and make a intergrated index.ts. Also have to change export default to export

needs to be done

/* index.ts  -> phaser3-rex-plugins/plugins */
export * from './gameobjects/shape/roundrectangle/RoundRectangle';
export * from './gameobjects/dom/youtubeplayer/YoutubePlayer';
export * from './gameobjects/container/containerlite/ContainerLite';
export * from './behaviors/textedit/TextEdit';
export * from './behaviors/textedit/Edit';

/* before : export default RoundRectangle */
export RoundRectangle;

declare namespace RoundRectangle {
   ...
}

declare class RoundRectangle extends Phaser.GameObjects.Shape {
    ...
}

If it looks good, i'm willing to make a contribution.

BTW, thank you for making this cool lib 👍

[rexrainbow]

An index.d.ts for importing classes like import {RoundRectangle, YoutubePlayer, ContainerLite, TextEdit, Edit } from 'phaser3-rex-plugins/plugins'; is a good idea. I will try to write a script to generate that index.d.ts, which will import these classes from className.d.ts file. Can't remove all these className.d.ts files because of backward-compatible.

[wooseok123]

An index.d.ts for importing classes like import {RoundRectangle, YoutubePlayer, ContainerLite, TextEdit, Edit } from 'phaser3-rex-plugins/plugins'; is a good idea. I will try to write a script to generate that index.d.ts, which will import these classes from className.d.ts file. Can't remove all these className.d.ts files because of backward-compatible.

Thank you!! If there's anything i can help you with, i'd gladly work with you

[rexrainbow]

I try to create a script to generate index.js file. And find some duplication import name issues, i.e. they will have name conflict if put them into a single index.js file)

Sorry I don't have time to resolve/rename them. So I will pending this task currently.

Duplicate Board
     ./board/board/Board.js
     ./board/board/LogicBoard.js
Duplicate BracketParser
     ./logic/bracketparser/bracketparser/BracketParser.js
     ./logic/bracketparser/bracketparser2/BracketParser.js
Duplicate Preload
     ./firebase/preload/Preload
     ./firebase/preload/Preload.js
Duplicate GlowFilterPostFxPipeline
     ./shaders/glowfilter2/GlowFilterPostFxPipeline.js
     ./shaders/glowfilter/GlowFilterPostFxPipeline.js
Duplicate Hexagon
     ./board/grid/hexagon/Hexagon.js
     ./geom/hexagon/Hexagon.js
Duplicate LoaderCallback
     ./loader/awaitloader/AwaitLoaderCallback.js
     ./loader/imageuri/ImageURILoaderCallback.js
Duplicate Files
     ./firebase/firestore/files/Files
     ./storage/localforage/files/Files.js
Duplicate DataManager
     ./data/buff/DataManager.js
     ./storage/localstorage/data/DataManager.js
Duplicate MoveTo
     ./board/moveto/MoveTo.js
     ./behaviors/moveto/MoveTo.js
Duplicate NinePatch
     ./gameobjects/rendertexture/ninepatch/NinePatch.js
     ./gameobjects/blitter/ninepatch/NinePatch.js
Duplicate ObjectFactory
     ./firebase/ObjectFactory.js
     ./parse/ObjectFactory.js
Duplicate Preload
     ./firebase/preload/Preload.js
     ./parse/utils/preload/Preload.js
Duplicate PageLoaderFactory
     ./firebase/firestore/pageloader/Factory.js
     ./parse/pageloader/Factory.js
Duplicate ItemTableFactory
     ./firebase/database/itemtable/Factory.js
     ./parse/itemtable/Factory.js
Duplicate LeaderBoardFactory
     ./firebase/firestore/leaderboard/Factory.js
     ./parse/leaderboard/Factory.js
Duplicate DataManager
     ./storage/localstorage/data/DataManager.js
     ./data/restorabledata/DataManager.js
Duplicate Rotate
     ./input/gestures/rotate/Rotate.js
     ./behaviors/rotate/Rotate.js
Duplicate LoaderCallback
     ./loader/imageuri/ImageURILoaderCallback.js
     ./loader/scripttag/ScriptTagLoaderCallback.js
Duplicate Recorder
     ./logic/runcommands/arcadetcrp/Recorder.js
     ./logic/runcommands/tcrp/Recorder.js
Duplicate Player
     ./logic/runcommands/arcadetcrp/Player.js
     ./logic/runcommands/tcrp/Player.js
Duplicate ToggleSwitch
     ./gameobjects/shape/toggleswitch/ToggleSwitch.js
     ./gameobjects/shape/toggleswitch/ToggleSwitchShape.js
Duplicate LoaderCallback
     ./loader/scripttag/ScriptTagLoaderCallback.js
     ./loader/webfontloader/WebFontLoaderCallback.js
Duplicate Achievements
     ./logic/achievements/csvachievements/Achievements.js
     ./logic/achievements/ymlachievements/Achievements.js
Duplicate ConditionsTable
     ./logic/conditionstable/csvconditiontable/ConditionsTable.js
     ./logic/conditionstable/ymlconditiontable/ConditionsTable.js

[wooseok123]

Thank you for your hard work 👍

I've also checked the error and as you mentioned, it seems that there are files with the same class names despite being in different modules.

However, in addition to just organizing imports, ensuring unique class names across modules seems necessary?

[rexrainbow]

In a single exporting file, unique class name is necessary. However, my plugins are not grouping together, i.e. they are standalone modules usually.

There has another package named rexui, which has a single exporting file (Classes, plugin), they will have unique class names by design.

[rexrainbow]

From the first post

import RoundRectangle from 'phaser3-rex-plugins/plugins/roundrectangle.js';
import YoutubePlayer from 'phaser3-rex-plugins/plugins/youtubeplayer.js';
import ContainerLite from 'phaser3-rex-plugins/plugins/containerlite';
import {TextEdit, Edit} from 'phaser3-rex-plugins/plugins/textedit.js';

It seems that most of classes can be found in ui-components.js, except YoutubePlayer.

[wooseok123]

There has another package named rexui, which has a single exporting file (Classes, plugin), they will have unique class names by design.

Oh, RexUI is exactly what i wanted. Like this example

import { ScrollablePanel, FixWidthSizer, Label, RoundRectangle } from 'phaser3-rex-plugins/templates/ui/ui-components.js';

But as you mentioned, RoundRectangle, TextEdit, Container are both member of Plugin and RexUI. And what i understand is that RexUI is used as integrated Packaged and Plugin is used as a singleton of each file.

Making two integrated modules (rexUI, plugins) might looks redundant and confusing (duplicated import ex. RoundRectangle from plugin and rexUI). But it does look tidy if we make plugins a module rather than just leaving it as is.

Maybe need couple of guides to the developers about using rexUI and plugin.

[rexrainbow]

plugins folder does not have clear objectives, but rexui folder has, it focus on collection of ui. I don't have plan to restructure plugins folder recently, sorry. For documentation, it is another story...

[wooseok123]

plugins folder does not have clear objectives, but rexui folder has, it focus on collection of ui. I don't have plan to restructure plugins folder recently, sorry. For documentation, it is another story...

Sure! I understand what you meant. Take your time!