canvas-sketch

canvas-sketch copied to clipboard

I'm currently experimenting with the idea of refactoring canvas-sketch and its CLI tools to use Parcel instead of Browserify under the hood. I'm happy to hear any thoughts about this.

Enhancements that will be part of this refactor:

• A more powerful bundler that can handle ES6, CSS, importing PNG assets, and other features that aren't supported right now.
• An elegant API for using canvas-sketch programmatically, whether as a pure bundler or as a development server.
• Much easier to build an Electron-based wrapper on top of canvas-sketch
• True hot module replacement (this will have a different UX/flow than the current --hot flag, but will be more robust)
• Faster builds and reloads

It will be a major breaking change.

Does this mean it would be able to handle import ... syntax? I suppose if I have a current repository of sketches that works with the current CLI, this upgrade would be a breaking change to those? For me personally, all those enhancements would definitely be worth it.

@mattdesl Thanks for your work and writing on canvas-sketch! I am wondering if it would be possible to consider built-in support for TypeScript as part of this transition?

@Greyvy Yes this will be a breaking change. In my own repo of sketches I use canvas-sketch-cli locally, so that each commit is locked to a specific version of canvas sketch CLI:

# in your repo, install the tool locally
npm install canvas-sketch-cli --save-dev

# run with 'npx' to make sure you get the local CLI
npx canvas-sketch sketches/foo.js

This way I can go back to a commit, delete node_modules and npm install again and I will be on the same version of the CLI that was used along with the sketches in that commit.

Yes it would be able to handle import syntax, although I will probably stick with require() in the docs for parity with Node.js (Parcel supports that too).

@ogrodnek Yup TypeScript will work as Parcel supports that out of the box. FWIW you can already use TypeScript with canvas-sketch as in this gist, but you may need to update your dependencies on canvas-sketch and canvas-sketch-cli for it to work:

https://gist.github.com/mattdesl/1e9ab019534838e8c870ae06371be469

@mattdesl awesome, that sounds perfect, thanks 🙏

So Im a little confused... Is it possible with the current canvas-sketch-cli to use es6 import/export syntax to include modules? And if so, how do i do it? I would like to include threejs jsm packages instead of appending them all manually to the global THREE variable... if i try that it tells me ParseError: 'import' and 'export' may appear only with 'sourceType: module'

It could be worthwhile experimenting with https://www.snowpack.dev/ as another alternative.

Yeah, would be great to have some better ES6/TS support 👍