eweitz / ideogram

Chromosome visualization for the web
https://eweitz.github.io/ideogram
Other
287 stars 72 forks source link

ES6 (ES2015) export #70

Closed awatson1978 closed 7 years ago

awatson1978 commented 7 years ago

Eric! Awesome work! Thank you so much for publishing this.

Have you given any thought to exporting the Ideogram object as an es2015 module? I just managed to get it loaded up into a Meteor/React app, and it works wonderfully. Kudos! The one caveat is that I needed to glob all the contents of ideogram.js into a custom .jsx file with an es2015 export statement. That's going to cause my implementation to drift out of sync with yours.

eweitz commented 7 years ago

Hello Abigail! Thanks for your interest.

Have you given any thought to exporting the Ideogram object as an es2015 module?

Not yet, but that seems worthwhile. I am on the cusp of wrapping up some enhancements to ploidy support; after that, I will work on exporting Ideogram as an ES2015 module.

awatson1978 commented 7 years ago

Oh, that would be great. From what I can gather, the biggest change would be in pointing the package.json main field to an index.js instead of gulpfile.js.

// package.json
{
  "main": "lib/index.js"
}

It's pretty common pattern to have the index file then include and export the various files in the package.

// index.js
'use strict';
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Ideogram = undefined;
var _Ideogram = require('./Ideogram');
exports.Ideogram = _Ideogram.default;

At 3,000+ lines, it might be worth spliting up ideogram.js into:

// directory
lib/Chromosome.js
lib/Layout.js
lib/Ploidy.js
lib/Ideogram.js

And then just export the object. There's a few different patterns for this that are detected differently by different build pipelines... Meteor, Webpack, etc. Not sure I have a definitive answer. Just copying the pattern from Material UI.

// Ideogram.js
var Ideogram = {}
exports.default = Ideogram;
eweitz commented 7 years ago

Thanks, that's helpful guidance.

eweitz commented 7 years ago

I've been working on this in eweitz:es6-export. While developing support for the new standard module syntax, I have also been updating Ideogram to use ES6 / ES2015 class syntax, and generally improving internal documentation and code styling. It's a significant internal migration for Ideogram.

The work is roughly 75% done. I've got the new exporting and class syntax working locally for most examples, but several examples still have errors and the test suite still needs to be migrated.

It is difficult to estimate when it will be complete, as the personal time I have to develop Ideogram has been limited over the past month or so and will likely become even scarcer for at least the next few months. That said, I will continue to focus on this issue in what time I do have available for Ideogram.

eweitz commented 7 years ago

@awatson1978, Ideogram is now exported as an ES2015 module.

Installation: npm install ideogram

Import: import Ideogram from 'ideogram';

You can still also load Ideogram directly from a script tag, as seen in the examples.