possible api tweak for v1

[halvves]

While I love the simplicity of the current api, it runs into issues with certain formats of code.

If someone writes something like if (a<c), the usage of either innerHTML or textContent breaks down. There is no way (that I know of) to prevent the <c being parsed as a new node.

I have a few potential solutions...

The traditional <script type="x-shader/x-fragment" />:

<script id="my-shader" type="x-shader/x-fragment">
  ...SHADERCODE
</script>
<shader-doodle src="#my-shader"></shader-doodle>

This solution would create two attributes: raw and src. src could receive a url or an id selector, and raw would take a plain string (primarily for usage in js/react/vue).

A custom script tag <script is="shader-doodle-main" />:

<shader-doodle>
  <script is="shader-doodle-main">
    ...SHADERCODE
  </script>
</shader-doodle>

This would open up shader-doodle for more modular components for adding additional passes/uniforms/etc...
you could add more processing/channels like

<shader-doodle>
  <script is="shader-doodle-main">
    ...SHADERCODE
  </script>
  <script is="shader-doodle-pass" order="0">
    ...MORE
  </script>
  <script is="shader-doodle-pass" order="1">
    ...MORE
  </script>
  <shader-doodle-uniform val="..." type="..." name="..."></shader-doodle-uniform>
  <shader-doodle-texture src="..." type="..." name="..."></shader-doodle-texture>
</shader-doodle>

Or something along that line.

I would love to get opinions/thoughts.

[patriciogonzalezvivo]

Mmm... yes it's not ideal to mix so many languages. In https://github.com/patriciogonzalezvivo/glslCanvas is possible to load source through JS as text strings which don't bring up this kind of issues.

Here more examples https://github.com/patriciogonzalezvivo/glslCanvas#reloading-shaders-from-js

[halvves]

going to close for now, as right now we are moving forward with the more traditional <script type="x-shader/x-fragment" />, but can/will open back up if anyone ever comes across this issue and has more thoughts.