Compiler: Inline GLSL with apostrophes produces invalid JS

Created on 12 Apr 2019 · 1Comment · Source: elm/compiler

Quick Summary:
First of all, thanks for the inline GLSL support in Elm, it's a great feature :thumbsup:

Inline GLSL with apostrophes breaks JS compilation output. See original downstream bug in https://github.com/elm-explorations/webgl/issues/8

SSCCE

fragmentShader : Shader {} Uniforms { vcoord : Vec2 }
fragmentShader =
    [glsl|
        uniform sampler2D texture;
        varying vec2 vcoord;

        // This ain't gonna work now

        void main () {
          gl_FragColor = texture2D(texture, vcoord);
        }
    |]

Parsing the JS later in the build process results in:

Unexpected token (12271:97)
You may need an appropriate loader to handle this file type.
| };
| var author$project$GL$fragmentShader = {
>       src: '\n        uniform sampler2D texture;\n        varying vec2 vcoord;\n\n        // This ain't gonna compile now\n\n        void main () {\n          gl_FragColor = texture2D(texture, vcoord);\n        }\n    ',
|       attributes: {},
|       uniforms: {texture: 'texture'}
 @ ./src/index.js 4:0-37 132:8-11

Note the src of the author$project$GL$fragmentShader object is delimited by ', but the inline comment's ' is not escaped here thus breaking the JS (causing Webpack to then fail).