Comments (14)
Are you trying to use Playground with node.js or install through npm to use in browser?
from canvasquery.
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.
from canvasquery.
https://github.com/rezoner/CanvasQuery/blob/master/canvasquery.js#L1979-1982
https://github.com/umdjs/umd/blob/master/commonjsStrictGlobal.js
from canvasquery.
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!
from canvasquery.
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 mrdoob/three.js#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.
from canvasquery.
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.
from canvasquery.
+1 for ES6 modules, it's really the simplest way to do nowadays
from canvasquery.
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.
from canvasquery.
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
?
from canvasquery.
@rezoner I believe you are correct on both accounts.
Edit: Actually, seems you are reading about ES6 Classes and not ES6 Modules.
from canvasquery.
Your plan sounds satisfying :) and your assumption on the ES6 sugar sounds legit.
Thanks for considering the support!
from canvasquery.
Here is my interpretation: https://github.com/dannyfritz/CanvasQuery/tree/browserify
from canvasquery.
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.
from canvasquery.
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 👍 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.
from canvasquery.
Related Issues (20)
- Are colors broken right now? HOT 2
- Demos or tutorials? HOT 1
- Version 0.9.1 HOT 1
- drawSprite missing HOT 1
- text size HOT 1
- Logitech Universal Reciever is incorrectly recognised as a gamepad HOT 1
- Old browsers compatibility requestAnimationFrame HOT 2
- preventContextMenu not working HOT 1
- Sprites in Playground HOT 15
- Align HOT 8
- drawAtlasFrame() does not use x,y HOT 1
- Touchend is unreliable in multitouch HOT 4
- Integrating Playground with THREE.js
- Plugins in Playground HOT 1
- Mouselock Movement-Delta unprecise and IExplorer incompatible
- playground.Keyboard.prototype.keypress Event is an empty Function. HOT 7
- swapping color palettes
- cq.loadImages can not to use!
- Flip Sprite HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from canvasquery.