Skip to content

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

Open
mkhatib wants to merge 1 commit intoonnovisser:masterfrom
mkhatib:master
Open

Support calling expression for macros to allow glslify(path) evaluation#1
mkhatib wants to merge 1 commit intoonnovisser:masterfrom
mkhatib:master

Conversation

@mkhatib
Copy link
Copy Markdown

@mkhatib mkhatib commented Apr 12, 2021

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
Copy link
Copy Markdown
Owner

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.

Comment thread lib/processGlslTag.js
t.isCallExpression(path.node) &&
t.isStringLiteral(path.node.arguments[0])
) {
const filename = resolve(
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd like to support resolving node_modules as well. Can you update this to use glsl-resolve ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants