Update loaded class

Moved loaded class to core and apply to container after init

Author: svey-xyz

src/core/shader.ts

@@ -14,15 +14,17 @@ export class Shader extends domHandler {
 	private shaderProgram: WebGLProgram;
 	private vertexBuffer: WebGLBuffer;
 	private uniforms: Array<UniformValue> | undefined
+	private loadedClass: string = 'loaded'
 
 	constructor(container: HTMLCanvasElement, args: ShaderArgs) {
 		super(container);
 		this.gl = container.getContext('webgl') as WebGLRenderingContext;
 		this.shaderProgram = this.initializeShader(args.vertShader, args.fragShader);
 		this.vertexBuffer = this.initBuffers();
-		this.uniforms = args.uniforms
-		// Initialize custom logic if provided
-		args.hooks?.forEach((hook) => {
+
+		if (args.uniforms) this.uniforms = args.uniforms
+		if (args.loadedClass) this.loadedClass = args.loadedClass
+		if (args.hooks) args.hooks.forEach((hook) => {
 			this.addHook(hook.methodName, hook.hook)
 		})
 	}
@@ -37,6 +39,7 @@ export class Shader extends domHandler {
 		this.uniforms?.forEach((uniform) => {
 			this.setUniform(uniform)
 		})
+		this.container.classList.add(this.loadedClass)
 	}
 
 	public addHook(methodName: MethodName, hook: ShaderHook): void {

src/react/index.tsx

@@ -6,12 +6,10 @@ import { ShaderArgs } from "../types";
 
 export const SimpleShaderCanvas = ({
 	args,
-	className,
-	loadedClass = 'loaded'
+	className
 }: {
 	args: ShaderArgs,
-	className?: string,
-	loadedClass?: string
+	className?: string
 }) => {
 
 	const ref = useRef<HTMLCanvasElement>(null);
@@ -28,7 +26,7 @@ export const SimpleShaderCanvas = ({
 	return (
 		<canvas
 			ref={ref}
-			className={`${className} ${loadedClass}`}
+			className={`${className}`}
 			style={{ width: '100%' }}
 		/>
 	)

src/types/index.d.ts

@@ -13,6 +13,8 @@ declare namespace simpleShaderComponent {
 		fragShader?: string,
 		uniforms?: Array<UniformValue>,
 		hooks?: Array<{ methodName: MethodName, hook: ShaderHook }>
+		/** Default 'loaded' */
+		loadedClass?: string
 	}
 
 	type UniformValue = {