ES6 class definition & module support

See original GitHub issue

This ticket list all the related tasks required to migrate to es6 and using a module approach. Until fully stable, the current build process will however keep transpiling everything to es5 and generate a es5 umd module. Ultimately the goal is to generate two different build :

melonjs.js legacy es5 build for legacy browsers/devices (to be decided yet at which level we keep some backward compatibility with regard to the current Jay inheritance mechanism vs a standard es5 here)
melons-module.js a es6 module based version for modern browser/devices (use es6 inheritance mechanism)

Migration phases :

ES6 class semantic : to replace the current Jay inheritance mechanism (see also #685) :
- me.Object
- me.Ellipse : -> me.Object
- me.Pointer (used by me.input) : -> me.Object
- me.Rect : -> me.Polygon
- me.Polygon : -> me.Object
- me.Line : -> me.Polygon
- me.Renderable : -> me.Object
- me.Camera2d : -> me.Renderable
- me.Sprite : -> me.Renderable
- me.ColorLayer : -> me.Renderable
- me.ImageLayer : -> me.Renderable
- me.GUI : -> me.Renderable
- me.Body : -> me.Rect
- me.Entity (deprecated in version 9.0) : -> me.Renderable
- me.Text : -> me.Renderable
- me.BitmapText : -> me.Renderable
- me.BitmapTextData (only used by me.BitmapText) : -> me.Renderable
- me.Container : -> me.Renderable
- me.Stage : -> me.Renderable
~~ES6 module export : to allow generating a es6 bundle:
- Class definition
  - me.Object
  - me.Renderable
  - me.Sprite
  - me.ColorLayer
  - me.ImageLayer
  - me.GUI
  - me.Entity (deprecated in version 9.0)
  - me.Text
  - me.BitmapText
  - me.BitmapTextData (only used by me.BitmapText)
  - me.Container
  - me.Stage
  - me.Vector2d
  - me.Vector3d
  - me.ObservableVector2d
  - me.ObservableVector3d
  - me.Matrix2d
  - me.Matrix3d
  - me.Camera2d
  - me.TMX(xxxx)
  - me.ParticleContainer (only used by me.ParticleEmmiter)
  - me.ParticleEmmiter
  - me.Particle
  - me.Body
  - me.Quadtree
  - me.Ellipse
  - me.Pointer (used by me.input)
  - me.Rect
  - me.Polygon
  - me.Line
  - me.Tween
  - me.Color
  - me.Renderer
  - me.Rendere.Texture
  - TextureCache (private)
  - me.CanvasRenderer
  - me.WebGLRenderer
  - me.GLShader
  - me.WebGLCompositor
- built-in utility class (changes to es6 will be backward compatible)
  - me
  - me.audio
  - me.event
  - me.input
  - me.levelDirector (-> me.level)
  - me.loader
  - me.Math
  - me.collision
  - me.plugin
  - me.state
  - me.agent (-> me.utils.agent)
  - me.device
  - me.pool
  - me.save
  - me.timer
  - me.utils.*
  - me.video
  - me.game
  - ~~me.sys~~ (remove/deprecated)
ES6 module support : with potential option to build tailored version of melonJS with only selected modules -> structure and build process in place, rest will be done gradually while converting the above class definition to es6
deprecated API : include this automatically in the build process only once (after) the transpiling to es5
[#678] window.fetch : might not be that widely supported, but a polyfill can easily be added, see https://github.com/github/fetch
~Babylon~ Rollup Bubble : to automatically transpile and generate an ES5 build.

I will close all the ticket referenced in this one, just to avoid having the same topic covered in different places.

Feel free to comments here under !

Issue Analytics

State:
Created 6 years ago
Reactions:5
Comments:13 (9 by maintainers)

Top GitHub Comments

3reactions

SnareChopscommented, May 26, 2018

@obiot How can I help move this along? I would really like to use your game engine over Phaser due to the simplicity this provides, but non es6 and non npm available makes it extremely difficult to use with typescript. I have a large amount of time I could commit to moving this project along, and only need a quick pointer to get started (ie. “Can you start converting these files” / “This is the next goal ____ start here”)

3reactions

itsjavicommented, Feb 23, 2018

Oh I am really looking forward for v6 I am currently doing nasty things in order to use Melon with Webpack and Babel as you can see: https://github.com/pokettomonstaa/NewBark

Thank you for taking care of this!

Top Results From Across the Web

Classes and Modules | Advanced JavaScript

Classes and Modules were added to ES6. Classes were introduced as a way to expand on prototype-based inheritance by adding some object oriented...

JavaScript modules - MDN Web Docs

This guide gives you all you need to get started with JavaScript module syntax.

ES6 - Classes - Tutorialspoint

ES6 supports the concept of Inheritance. Inheritance is the ability of a program to create new entities from an existing entity - here...

16. Modules - Exploring JS

Their support for cyclic dependencies is better than CommonJS's. The ES6 module standard has two parts: Declarative syntax (for importing and exporting) ...

ES6 Modules and How to Use Import and Export in JavaScript

The ES2015 (ES6) edition of the JavaScript standard gives us native support for modules with the import and export syntax.