Typescript support

[ecosky]

I attempted to incorporate this module into a typescript project, but hit some barriers that prevented me from completing the task. I was able to get it to build successfully with the addition of a small file "shadertoy-react.d.ts" with the following contents:

declare module 'shadertoy-react'
{
    // tslint:disable-next-line:no-empty-interface
    export default class ShadertoyReact { props; render; context; setState; forceUpdate; state; refs }
}

however when attempting to run the code I would get runtime errors that so far I have been unable to resolve, primarily because the page would include shadertoy-react.min.js despite my best efforts to include unminified code. I am pretty new to react and typescript, so it might be a simple problem however I have been completely stumped by this. Here's a partial callstack for the error I get:

Uncaught TypeError TypeError: Failed to execute 'shaderSource' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLShader'.
    at <anonymous> (d:\dev\projects\BBGWebsite\bbg\node_modules\shadertoy-react\lib\shadertoy-react.min.js:1:1)
    at <anonymous> (d:\dev\projects\BBGWebsite\bbg\node_modules\shadertoy-react\lib\shadertoy-react.min.js:1:1)
    at <anonymous> (d:\dev\projects\BBGWebsite\bbg\node_modules\shadertoy-react\lib\shadertoy-react.min.js:1:1)
    at invokeLayoutEffectMountInDEV (d:\dev\projects\BBGWebsite\bbg\node_modules\react-dom\cjs\react-dom.development.js:25133:1)
    at invokeEffectsInDev (d:\dev\projects\BBGWebsite\bbg\node_modules\react-dom\cjs\react-dom.development.js:27351:1)
    at commitDoubleInvokeEffectsInDEV (d:\dev\projects\BBGWebsite\bbg\node_modules\react-dom\cjs\react-dom.development.js:27327:1)

I've spent a lot of time trying to get Visual Studio to use the unminified version but I'm stuck.

It would be really helpful if this module supported two features:

• Typescript support, just in case my approach is wrong.
• An explanation of how to enable the non-minified version for debugging.

Thanks! shadertoy-react.d.zip

[jrysana]

Hey @ecosky, I've created a fork of the project at react-shaders written in Typescript.

However, it seems like the bug you ran into later in your post is actually #42 which is related to React strict mode. I plan to fix this as well (if possible) in react-shaders, but haven't tried yet.

Our workaround for this issue with shadertoy-react and react-shaders has been to render a separate React tree containing the ShadertoyReact component in a React root without strict mode and mount it to a DOM node via our main React app in a useEffect hook.

[Simoneth]

Please stop using that little useless crap thing call it Typescript!