onnovisser / babel-plugin-glsl

Process GLSL code with Glslify
MIT License
30 stars 2 forks source link

Support calling expression for macros to allow glslify(path) evaluation #1

Open mkhatib opened 3 years ago

mkhatib commented 3 years ago

This allows evaluating external files rather than template literals.

import glsl from 'babel-plugin-glsl/macro';
const vertexShader = glsl("../shaders/custom/myshader.vert");

I am not 100% sure this is the most accurate way to implement call expression but it works. I am happy to make edits with some guidance.

For example, I'd love for this to also watch the file path and automatically update the evaluation to allow hot module reload behavior when I update a .glsl file - but I am not sure yet how to achieve that (first time playing with babel plugins and macros).

Also I've seen the pattern where people use macro.require("") pattern - I still don't know how to do that. But wanted to get something working for a project I am working on.

For those who wants to use this right now, I've published a package on @mkhatib/babel-plugin-glsl@1.1.0 that uses this change.

onnovisser commented 3 years ago

Hi @mkhatib Thanks for the PR. I like the idea and am happy to add this.

Could you add a test for when a file is not found? I'd like to make sure that it includes the filename in the error thrown.

It looks like it's not yet working when importing glsl from glslify. It should only need adding a CallExpression handler to /index.js, similar to the TaggedTemplateExpression that's already there.

Watching for changes in the included file would be great, but as far as I know there's no way to do that from within a Babel plugin. That more the domain of a bundler. See: Babel cache problem

Thanks and let me know if you have any questions.