[Feature request] GLSL code formatting feature

[cx20]

I like to look at the twigl code on Twitter. However, much of that code is obfuscated to keep it short. How about a formatting feature to make the obfuscated code easier to read?

I think js-beautify can be used to format the code. https://github.com/beautify-web/js-beautify

The following is an implementation image.

before:

after:

I think js-beautify can be called as follows.

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.13.13/beautify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.13.13/beautify-css.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.13.13/beautify-html.js"></script>

beautify.addEventListener('click', () => {
    const opts = {
        indent_size: 4
    };
    editor.setValue(js_beautify(editor.getValue(), opts));
}, false);

[doxas]

wow! this is a good idea. However, would you mind if I change the position and design of the bracket icons by myself?

[cx20]

Yes. I'll leave it to you to decide how to implement it.

[cx20]

BTW, I found one problem with JS Beautifier. In the case of #define, when Beautifier is executed, unexpected line breaks may occur.

before)

#define X(s,l)d=s*sqrt(h);if(h>0.&&d>m&&sin(atan(d,P.y)+P.x*3.+t*l*4.)>.9)m=d;

after)

#define X(s, l) d = s * sqrt(h);
if (h > 0. && d > m && sin(atan(d, P.y) + P.x * 3. + t * l * 4.) > .9) m = d;

Unfortunately, I don't know how to solve this. I hope someone can help us.

[doxas]

That possibility occurred to me right away. So I haven't started on this issue, imagining that I would probably have to make the parser myself.

When I get some time, I might give it a shot!

[cx20]

I haven't tried it, but the following GLSL parser may be helpful. https://github.com/stackgl/glsl-parser

[trusktr]

Here's one: http://evanw.github.io/glslx/

It can both format/prettify, and minify. Might be useful for writing expanded code, then hitting minify to see if it fits in a tweet, then undoing and continuing editing, etc.

[doxas]

This could certainly be useful.

[cx20]

BTW, In the future, AI may help make code easier to read. https://twitter.com/rianflo/status/1618386347810779136