@paper-design/shaders-react - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

dist/index.js

@@ -1,2 +0,2 @@
-import{useEffect as p,useRef as b}from"react";var x=class{canvas;gl;program=null;uniformLocations={};fragmentShader;rafId=null;lastFrameTime=0;totalAnimationTime=0;isAnimated;providedUniforms;hasBeenDisposed=!1;resolutionChanged=!0;constructor(e,t,r={},i,n=!0){this.canvas=e,this.fragmentShader=t,this.providedUniforms=r,this.isAnimated=n;let s=e.getContext("webgl",i);if(!s)throw new Error("WebGL not supported");this.gl=s,this.initWebGL(),this.setupResizeObserver(),this.isAnimated?this.startAnimating():this.render(performance.now())}initWebGL=()=>{let e=R(this.gl,_,this.fragmentShader);e&&(this.program=e,this.setupPositionAttribute(),this.setupUniforms())};setupPositionAttribute=()=>{let e=this.gl.getAttribLocation(this.program,"a_position"),t=this.gl.createBuffer();this.gl.bindBuffer(this.gl.ARRAY_BUFFER,t);let r=[-1,-1,1,-1,-1,1,-1,1,1,-1,1,1];this.gl.bufferData(this.gl.ARRAY_BUFFER,new Float32Array(r),this.gl.STATIC_DRAW),this.gl.enableVertexAttribArray(e),this.gl.vertexAttribPointer(e,2,this.gl.FLOAT,!1,0,0)};setupUniforms=()=>{this.uniformLocations={u_time:this.gl.getUniformLocation(this.program,"u_time"),u_resolution:this.gl.getUniformLocation(this.program,"u_resolution"),...Object.fromEntries(Object.keys(this.providedUniforms).map(e=>[e,this.gl.getUniformLocation(this.program,e)]))}};resizeObserver=null;setupResizeObserver=()=>{this.resizeObserver=new ResizeObserver(()=>this.handleResize()),this.resizeObserver.observe(this.canvas),this.handleResize()};handleResize=()=>{let e=this.canvas.clientWidth,t=this.canvas.clientHeight;(this.canvas.width!==e||this.canvas.height!==t)&&(this.canvas.width=e,this.canvas.height=t,this.resolutionChanged=!0,this.gl.viewport(0,0,this.gl.canvas.width,this.gl.canvas.height),this.render(performance.now()))};render=e=>{if(this.hasBeenDisposed)return;let t=e-this.lastFrameTime;this.lastFrameTime=e,this.isAnimated&&(this.totalAnimationTime+=t),this.gl.useProgram(this.program),this.gl.uniform1f(this.uniformLocations.u_time,this.totalAnimationTime*.001),this.resolutionChanged&&(this.gl.uniform2f(this.uniformLocations.u_resolution,this.gl.canvas.width,this.gl.canvas.height),this.resolutionChanged=!1),this.gl.drawArrays(this.gl.TRIANGLES,0,6),this.isAnimated?this.requestRender():this.rafId=null};requestRender=()=>{this.rafId!==null&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame(this.render)};updateProvidedUniforms=()=>{this.gl.useProgram(this.program),Object.entries(this.providedUniforms).forEach(([e,t])=>{let r=this.uniformLocations[e];if(r)if(Array.isArray(t))switch(t.length){case 2:this.gl.uniform2fv(r,t);break;case 3:this.gl.uniform3fv(r,t);break;case 4:this.gl.uniform4fv(r,t);break;default:t.length===9?this.gl.uniformMatrix3fv(r,!1,t):t.length===16?this.gl.uniformMatrix4fv(r,!1,t):console.warn(`Unsupported uniform array length: ${t.length}`)}else typeof t=="number"?this.gl.uniform1f(r,t):typeof t=="boolean"?this.gl.uniform1i(r,t?1:0):console.warn(`Unsupported uniform type for ${e}: ${typeof t}`)})};startAnimating=()=>{this.isAnimated=!0,this.lastFrameTime=performance.now(),this.rafId=requestAnimationFrame(this.render)};stopAnimating=()=>{this.isAnimated=!1,this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null)};setUniforms=e=>{this.providedUniforms={...this.providedUniforms,...e},this.updateProvidedUniforms(),this.render(performance.now())};dispose=()=>{this.hasBeenDisposed=!0,this.stopAnimating(),this.gl&&this.program&&(this.gl.deleteProgram(this.program),this.program=null,this.gl.bindBuffer(this.gl.ARRAY_BUFFER,null),this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER,null),this.gl.bindRenderbuffer(this.gl.RENDERBUFFER,null),this.gl.bindFramebuffer(this.gl.FRAMEBUFFER,null),this.gl.getError()),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.uniformLocations={}}},_=`
+import{useEffect as p,useRef as b}from"react";var A=class{canvas;gl;program=null;uniformLocations={};fragmentShader;rafId=null;lastFrameTime=0;totalAnimationTime=0;isAnimated;providedUniforms;hasBeenDisposed=!1;resolutionChanged=!0;constructor(e,t,r={},i,n=!0){this.canvas=e,this.fragmentShader=t,this.providedUniforms=r,this.isAnimated=n;let s=e.getContext("webgl",i);if(!s)throw new Error("WebGL not supported");this.gl=s,this.initWebGL(),this.setupResizeObserver(),this.isAnimated?this.startAnimating():this.render(performance.now())}initWebGL=()=>{let e=R(this.gl,_,this.fragmentShader);e&&(this.program=e,this.setupPositionAttribute(),this.setupUniforms())};setupPositionAttribute=()=>{let e=this.gl.getAttribLocation(this.program,"a_position"),t=this.gl.createBuffer();this.gl.bindBuffer(this.gl.ARRAY_BUFFER,t);let r=[-1,-1,1,-1,-1,1,-1,1,1,-1,1,1];this.gl.bufferData(this.gl.ARRAY_BUFFER,new Float32Array(r),this.gl.STATIC_DRAW),this.gl.enableVertexAttribArray(e),this.gl.vertexAttribPointer(e,2,this.gl.FLOAT,!1,0,0)};setupUniforms=()=>{this.uniformLocations={u_time:this.gl.getUniformLocation(this.program,"u_time"),u_resolution:this.gl.getUniformLocation(this.program,"u_resolution"),...Object.fromEntries(Object.keys(this.providedUniforms).map(e=>[e,this.gl.getUniformLocation(this.program,e)]))}};resizeObserver=null;setupResizeObserver=()=>{this.resizeObserver=new ResizeObserver(()=>this.handleResize()),this.resizeObserver.observe(this.canvas),this.handleResize()};handleResize=()=>{let e=this.canvas.clientWidth,t=this.canvas.clientHeight;(this.canvas.width!==e||this.canvas.height!==t)&&(this.canvas.width=e,this.canvas.height=t,this.resolutionChanged=!0,this.gl.viewport(0,0,this.gl.canvas.width,this.gl.canvas.height),this.render(performance.now()))};render=e=>{if(this.hasBeenDisposed)return;let t=e-this.lastFrameTime;this.lastFrameTime=e,this.isAnimated&&(this.totalAnimationTime+=t),this.gl.useProgram(this.program),this.gl.uniform1f(this.uniformLocations.u_time,this.totalAnimationTime*.001),this.resolutionChanged&&(this.gl.uniform2f(this.uniformLocations.u_resolution,this.gl.canvas.width,this.gl.canvas.height),this.resolutionChanged=!1),this.gl.drawArrays(this.gl.TRIANGLES,0,6),this.isAnimated?this.requestRender():this.rafId=null};requestRender=()=>{this.rafId!==null&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame(this.render)};updateProvidedUniforms=()=>{this.gl.useProgram(this.program),Object.entries(this.providedUniforms).forEach(([e,t])=>{let r=this.uniformLocations[e];if(r)if(Array.isArray(t))switch(t.length){case 2:this.gl.uniform2fv(r,t);break;case 3:this.gl.uniform3fv(r,t);break;case 4:this.gl.uniform4fv(r,t);break;default:t.length===9?this.gl.uniformMatrix3fv(r,!1,t):t.length===16?this.gl.uniformMatrix4fv(r,!1,t):console.warn(`Unsupported uniform array length: ${t.length}`)}else typeof t=="number"?this.gl.uniform1f(r,t):typeof t=="boolean"?this.gl.uniform1i(r,t?1:0):console.warn(`Unsupported uniform type for ${e}: ${typeof t}`)})};startAnimating=()=>{this.isAnimated=!0,this.lastFrameTime=performance.now(),this.rafId=requestAnimationFrame(this.render)};stopAnimating=()=>{this.isAnimated=!1,this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null)};setUniforms=e=>{this.providedUniforms={...this.providedUniforms,...e},this.updateProvidedUniforms(),this.render(performance.now())};dispose=()=>{this.hasBeenDisposed=!0,this.stopAnimating(),this.gl&&this.program&&(this.gl.deleteProgram(this.program),this.program=null,this.gl.bindBuffer(this.gl.ARRAY_BUFFER,null),this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER,null),this.gl.bindRenderbuffer(this.gl.RENDERBUFFER,null),this.gl.bindFramebuffer(this.gl.FRAMEBUFFER,null),this.gl.getError()),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.uniformLocations={}}},_=`
   attribute vec4 a_position;
@@ -6,3 +6,3 @@ void main() {
   }
-`;function A(e,t,r){let i=e.createShader(t);return i?(e.shaderSource(i,r),e.compileShader(i),e.getShaderParameter(i,e.COMPILE_STATUS)?i:(console.error("An error occurred compiling the shaders: "+e.getShaderInfoLog(i)),e.deleteShader(i),null)):null}function R(e,t,r){let i=A(e,e.VERTEX_SHADER,t),n=A(e,e.FRAGMENT_SHADER,r);if(!i||!n)return null;let s=e.createProgram();return s?(e.attachShader(s,i),e.attachShader(s,n),e.linkProgram(s),e.getProgramParameter(s,e.LINK_STATUS)?(e.detachShader(s,i),e.detachShader(s,n),e.deleteShader(i),e.deleteShader(n),s):(console.error("Unable to initialize the shader program: "+e.getProgramInfoLog(s)),e.deleteProgram(s),e.deleteShader(i),e.deleteShader(n),null)):null}function y(e){let t,r,i;if(e.startsWith("#"))[t,r,i]=F(e);else if(e.startsWith("rgb"))[t,r,i]=C(e);else if(e.startsWith("hsl"))[t,r,i]=E(U(e));else return console.error("Unsupported color format"),[0,0,0];return[t,r,i]}function F(e){let t=parseInt(e.slice(1),16),r=(t>>16&255)/255,i=(t>>8&255)/255,n=(t&255)/255;return[r,i,n]}function C(e){let t=e.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);return t?[parseInt(t[1]??"0")/255,parseInt(t[2]??"0")/255,parseInt(t[3]??"0")/255]:[0,0,0]}function U(e){let t=e.match(/^hsl\s*\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*\)$/i);return t?[parseInt(t[1]??"0"),parseInt(t[2]??"0"),parseInt(t[3]??"0")]:[0,0,0]}function E(e){let[t,r,i]=e,n=t/360,s=r/100,a=i/100,o,c,m;if(r===0)o=c=m=a;else{let d=(h,g,l)=>(l<0&&(l+=1),l>1&&(l-=1),l<.16666666666666666?h+(g-h)*6*l:l<.5?g:l<.6666666666666666?h+(g-h)*(.6666666666666666-l)*6:h),u=a<.5?a*(1+s):a+s-a*s,f=2*a-u;o=d(f,u,n+1/3),c=d(f,u,n),m=d(f,u,n-1/3)}return[o,c,m]}var S=`
+`;function x(e,t,r){let i=e.createShader(t);return i?(e.shaderSource(i,r),e.compileShader(i),e.getShaderParameter(i,e.COMPILE_STATUS)?i:(console.error("An error occurred compiling the shaders: "+e.getShaderInfoLog(i)),e.deleteShader(i),null)):null}function R(e,t,r){let i=x(e,e.VERTEX_SHADER,t),n=x(e,e.FRAGMENT_SHADER,r);if(!i||!n)return null;let s=e.createProgram();return s?(e.attachShader(s,i),e.attachShader(s,n),e.linkProgram(s),e.getProgramParameter(s,e.LINK_STATUS)?(e.detachShader(s,i),e.detachShader(s,n),e.deleteShader(i),e.deleteShader(n),s):(console.error("Unable to initialize the shader program: "+e.getProgramInfoLog(s)),e.deleteProgram(s),e.deleteShader(i),e.deleteShader(n),null)):null}function y(e){let t,r,i;if(e.startsWith("#"))[t,r,i]=F(e);else if(e.startsWith("rgb"))[t,r,i]=C(e);else if(e.startsWith("hsl"))[t,r,i]=E(U(e));else return console.error("Unsupported color format"),[0,0,0];return[t,r,i]}function F(e){let t=parseInt(e.slice(1),16),r=(t>>16&255)/255,i=(t>>8&255)/255,n=(t&255)/255;return[r,i,n]}function C(e){let t=e.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);return t?[parseInt(t[1]??"0")/255,parseInt(t[2]??"0")/255,parseInt(t[3]??"0")/255]:[0,0,0]}function U(e){let t=e.match(/^hsl\s*\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*\)$/i);return t?[parseInt(t[1]??"0"),parseInt(t[2]??"0"),parseInt(t[3]??"0")]:[0,0,0]}function E(e){let[t,r,i]=e,n=t/360,s=r/100,a=i/100,o,c,m;if(r===0)o=c=m=a;else{let d=(h,g,l)=>(l<0&&(l+=1),l>1&&(l-=1),l<.16666666666666666?h+(g-h)*6*l:l<.5?g:l<.6666666666666666?h+(g-h)*(.6666666666666666-l)*6:h),u=a<.5?a*(1+s):a+s-a*s,f=2*a-u;o=d(f,u,n+1/3),c=d(f,u,n),m=d(f,u,n-1/3)}return[o,c,m]}var S=`
   precision highp float;
@@ -80,3 +80,3 @@ uniform vec2 u_resolution;
   }
-`;import{jsx as w}from"react/jsx-runtime";var v=({ref:e,fragmentShader:t,style:r,uniforms:i={},webGlContextAttributes:n,animated:s=!0})=>{let a=e??b(null),o=b(null);return p(()=>(a.current&&(o.current=new x(a.current,t,i,n,s)),()=>{o.current&&o.current.dispose()}),[t,n]),p(()=>{o.current&&o.current.setUniforms(i)},[i]),p(()=>{o.current&&(s?o.current.startAnimating():o.current.stopAnimating())},[s]),w("canvas",{ref:a,style:r})};import{jsx as I}from"react/jsx-runtime";var L=()=>I(v,{fragmentShader:S});export{L as GrainClouds,v as ShaderMount,y as getShaderColorFromString};
+`;import{jsx as w}from"react/jsx-runtime";var v=({ref:e,fragmentShader:t,style:r,uniforms:i={},webGlContextAttributes:n,animated:s=!0})=>{let a=e??b(null),o=b(null);return p(()=>(a.current&&(o.current=new A(a.current,t,i,n,s)),()=>{o.current&&o.current.dispose()}),[t,n]),p(()=>{o.current&&o.current.setUniforms(i)},[i]),p(()=>{o.current&&(s?o.current.startAnimating():o.current.stopAnimating())},[s]),w("canvas",{ref:a,style:r})};import{jsx as I}from"react/jsx-runtime";var L=e=>I(v,{...e,fragmentShader:S});export{L as GrainClouds,v as ShaderMount,y as getShaderColorFromString};
 //# sourceMappingURL=index.js.map

dist/shader-mount.d.ts

 import React from 'react';
-interface ShaderMountProps {
+export interface ShaderMountProps {
     ref?: React.RefObject<HTMLCanvasElement>;
@@ -11,2 +11,1 @@ fragmentShader: string;
 export declare const ShaderMount: React.FC<ShaderMountProps>;
-export {};

dist/shaders/grain-clouds.d.ts

@@ -1,1 +0,2 @@
-export declare const GrainClouds: () => import("react/jsx-runtime").JSX.Element;
+import { type ShaderMountProps } from '../shader-mount';
+export declare const GrainClouds: (props: Omit<ShaderMountProps, "fragmentShader">) => import("react/jsx-runtime").JSX.Element;

package.json

 {
   "name": "@paper-design/shaders-react",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "license": "MIT",
@@ -5,0 +5,0 @@ "type": "module",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

36196

increased by0.61%

No dependency changes