mattdesl / budo

:clapper: a dev server for rapid prototyping
MIT License
2.17k stars 106 forks source link

glslify updates not live reloading #216

Open kevzettler opened 7 years ago

kevzettler commented 7 years ago

I have budo running with

"./node_modules/.bin/budo ./src/index.js:dist/bundle.js --live --open -d ./ -- -t [ babelify --presets [ es2015 react stage-0 ] --plugins glslify]",

I have glsl files included like:

      vert: glsl('../../shaders/aoMesh.vert'),
      frag: glsl('../../shaders/aoMesh.frag')

When I modify the files budo does see the changes and trigger a reload. I have manually kill budo and restart. Really breaks the whole workflow.

mattdesl commented 7 years ago

Ouch that sounds annoying!

It looks like you are specifying glslify as a plugin to Babel right now. Instead you should pass it separately, outside the Babel subarg, as a transform. budo ./src/index.js:dist/bundle.js --live --open -d ./ -- -t [ babelify --presets [ es2015 react stage-0 ] ] -t glslify You won’t need the ./node_modules stuff if you place the command in a local npm “start” script and call “npm run start”. Here’s an example from a past webgl project:

https://github.com/mattdesl/raylight/blob/5779f90abd7320f93f6434c16880091fdb8deddd/package.json#L83

https://github.com/mattdesl/raylight/blob/5779f90abd7320f93f6434c16880091fdb8deddd/package.json#L83 https://github.com/mattdesl/raylight/blob/5779f90abd7320f93f6434c16880091fdb8deddd/package.json#L83https://github.com/mattdesl/raylight/blob/5779f90abd7320f93f6434c16880091fdb8deddd/package.json#L83 Sent from my iPhone

On Aug 31, 2017, at 6:11 AM, Kev Zettler notifications@github.com wrote:

I have budo running with

"./node_modules/.bin/budo ./src/index.js:dist/bundle.js --live --open -d ./ -- -t [ babelify --presets [ es2015 react stage-0 ] --plugins glslify]", I have glsl files included like:

  vert: glsl('../../shaders/aoMesh.vert'),
  frag: glsl('../../shaders/aoMesh.frag')

When I modify the files budo does see the changes and trigger a reload. I have manually kill budo and restart. Really breaks the whole workflow.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

kevzettler commented 7 years ago

thanks, @mattdesl, unfortunately, moving glsify out into the transforms seems to break Babel.

/Users/kev/code/robotbones/engines/stackgl/regl-budo/src/index.js:4
import 'whatwg-fetch';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

Heres the command :

budo ./src/index.js:dist/bundle.js --live --open -d ./ -- -t [ babelify --presets [ es2015 react stage-0 ]] -t glsify
mattdesl commented 7 years ago

Ah unfortunately I think it’s a bug with glslify. You have to use require() for glslify and ‘path’ module for the source transform to work. Hopefully something we can fix in glslify though. :)

I also didn’t realize it could be used as a Babel plugin - maybe there is a way with Babel plugins to fire live reloads? Might be something to investigate.

Sent from my iPhone

On Aug 31, 2017, at 9:07 PM, Kev Zettler notifications@github.com wrote:

thanks, @mattdesl, unfortunately, moving glsify out into the transforms seems to break Babel.

/Users/kev/code/robotbones/engines/stackgl/regl-budo/src/index.js:4 import 'whatwg-fetch'; ^ ParseError: 'import' and 'export' may appear only with 'sourceType: module' budo ./src/index.js:dist/bundle.js --live --open -d ./ -- -t [ babelify --presets [ es2015 react stage-0 ]] -t glsify — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

kevzettler commented 7 years ago

I also didn’t realize it could be used as a Babel plugin - maybe there is a way with Babel plugins to fire live reloads? Might be something to investigate.

To accomplish this I am using https://github.com/stackgl/babel-plugin-glslify

Are there any other examples of budo and live reloading babel plugins? I can probably update accordingly