npm and browserify support

[kozie]

Any plans on making this installable via npm or perhaps bower?

Also, some better module (export) structure would allow the use of browserify and/or require-ing this framework.

I tried making an es6 class which extends the playground class, imported using babel (babelify) but it just doesn't work. Tho It detects NodeJS and tries require 'canvas'.

[rezoner]

Are you trying to use Playground with node.js or install through npm to use in browser?

[kozie]

I actually installed this repo by now using npm install rezoner/CanvasQuery' --save-dev.

I am writing my codebase in es6 using import/export. With the help of browserify and babelify for transpiling my code to es5 and putting all code in one js file to be included in an index.html.

I can't seem to import canvasquery/playground using an es6 import. Victor, which I can use by installing with npm and import using import Victor from 'Victor', does work. Browserify and babelify will import Victor's code and put it in the output js file.

EDIT Forgot to mention that I want to use it in the browser indeed but also want to make it part of my code. I do not want to import it using another script tag.

[dannyfritz]

https://github.com/rezoner/CanvasQuery/blob/master/canvasquery.js#L1979-1982 https://github.com/umdjs/umd/blob/master/commonjsStrictGlobal.js

[kozie]

I would also like to add the following from the documentation pages of Browserify. https://github.com/substack/node-browserify#usage (See --standalone).

It is used to make Victor.js a module and a global var and It seems quite easy to use/apply.

Can you please let us know if you're able to add these kinds of features? Otherwise, I can look into it and perhaps send a pull request.

Thanks in advance!

[rezoner]

Inspecting what bower, browserify, babelify does and how it relates to ES6 modules.

I guess this is the same problem that @mrdoob is hesitating to deal with https://github.com/mrdoob/three.js/issues/4776

TBH it looks like overhead that will be obsolete as soon as es6 modules get implemented in browser - and I can already tell that browserify doesn't go well with canvasquery because require('Canvas') is only needed for server side (nodejs) hence it shouldn't package it with browser version - but it does - because how can it tell which require is for which platform.

That leads me to assumption that I would have to manage two libraries - one to browserify for browsers, and the other one to work out of box with node.js.

Correct me if I am wrong.

[dannyfritz]

My recommendation is to use ES6 Modules with Browserify and Babelify with the --standalone option. This setup would allow AMD, CommonJS, and Window patterns of using the library to all work. You can provide a download to the JS file and an npm module and they'd both work as the user would expect.

I can fork and mess around with this a bit if you would like. I'm very familiar with babel, npm for front-end, and browserify already.

[madx]

+1 for ES6 modules, it's really the simplest way to do nowadays

[dannyfritz]

I thought about it a little more, I'd probably skip over ES6 modules and Babel so that Node can pick up on it. Just seems to complicate it the more and more I think about it.

If your goal is only to support CanvasQuery in browsers, but make it requireable in Node to later browserify, than ES6 modules with Babel would be fine.

But if you goal is to allow CanvasQuery to be run in Node without a browser, than Babel should probably be skipped in favor of CommonJS for the source code and have a Browsreify build for people not wanting to use Node. This would have something like a dist folder in the repo for people to download the JS file and npm install canvasquery -S for everyone else.

[rezoner]

Give me some time to deeply understand what these things do.

I am working hard on splitting CanvasQuery and Playground (so you can use any renderer not just cq) and what's happening in this thread is giving me a headache :)

Next

For simplicity sake - I will for now drop support for server-side canvas manipulations

Then - as far as I understand - to make thing compatible with browserify - all that has to be done is to add

module.exports = cq

And in playground i will have to require("cq") then also add modules.exports = playground?

ES6 Modules

Since it's just a sugar for constructor + prototype - I guess even if I don't use any transpiler you still should be able to use class MyApp extends playground?

[dannyfritz]

@rezoner I believe you are correct on both accounts.

Edit: Actually, seems you are reading about ES6 Classes and not ES6 Modules.

[kozie]

Your plan sounds satisfying :) and your assumption on the ES6 sugar sounds legit.

Thanks for considering the support!

[dannyfritz]

Here is my interpretation: https://github.com/dannyfritz/CanvasQuery/tree/browserify

[rezoner]

Thank you - I see many things that I would have troubles solving by myself.

Not yet sure but I think it won't be as much overhead as I thought since I am using build process anyway to concatenate the files - I can spit some require-ified versions.

Nevertheless.... I will get rid of it as soon as a standard native way of modules and requires emerges in browsers ;) Managing legacy approaches killed many libraries.

[yoannmoinet]

Just to clarify here, bower/npm support is really different from browserify/es6 modules support. As asked in the initial question.

And I would vote :+1: for the bower/npm support (only bower if you consider dropping server-side support).

It's really easy and fast to do, basically just add a bower.json file to your project and publish the package. So everyone using bower in their project will be able to bower install playground --save directly, and update accordingly when an update is available.

For the module part, I'm very happy with my requirejs shim for now.