@paper-design/shaders-react 0.0.11 → 0.0.12

package/dist/index.js

@@ -1,2 +1,2 @@
-import{useEffect as a,useRef as f}from"react";import{ShaderMount as m}from"@paper-design/shaders";import{jsx as d}from"react/jsx-runtime";var s=({ref:e,fragmentShader:u,style:l,uniforms:t={},webGlContextAttributes:i,animated:n=!0})=>{let o=e??f(null),r=f(null);return a(()=>(o.current&&(r.current=new m(o.current,u,t,i,n)),()=>{r.current&&r.current.dispose()}),[u,i]),a(()=>{r.current&&r.current.setUniforms(t)},[t]),a(()=>{r.current&&(n?r.current.startAnimating():r.current.stopAnimating())},[n]),d("canvas",{ref:o,style:l})};import{grainCloudsFragmentShader as p}from"@paper-design/shaders";import{jsx as S}from"react/jsx-runtime";var c=e=>S(s,{...e,fragmentShader:p});import{getShaderColorFromString as F}from"@paper-design/shaders";export{c as GrainClouds,s as ShaderMount,F as getShaderColorFromString};
+import{useEffect as a,useRef as l}from"react";import{ShaderMount as f}from"@paper-design/shaders";import{jsx as d}from"react/jsx-runtime";var i=({ref:r,fragmentShader:n,style:c,uniforms:o={},webGlContextAttributes:s,animated:t=!0})=>{let u=r??l(null),e=l(null);return a(()=>(u.current&&(e.current=new f(u.current,n,o,s,t)),()=>{e.current&&e.current.dispose()}),[n,s]),a(()=>{e.current&&e.current.setUniforms(o)},[o]),a(()=>{e.current&&(t?e.current.startAnimating():e.current.stopAnimating())},[t]),d("canvas",{ref:u,style:c})};import{useMemo as S}from"react";import{getShaderColorFromString as m,grainCloudsFragmentShader as g}from"@paper-design/shaders";import{jsx as C}from"react/jsx-runtime";var h=r=>{let n=S(()=>({u_color1:m(r.color1),u_color2:m(r.color2),u_noiseScale:r.noiseScale,u_noiseSpeed:r.noiseSpeed,u_grainAmount:r.grainAmount}),[r.color1,r.color2,r.noiseScale,r.noiseSpeed,r.grainAmount]);return C(i,{...r,fragmentShader:g,uniforms:n})};import{}from"@paper-design/shaders";import{getShaderColorFromString as H}from"@paper-design/shaders";export{h as GrainClouds,i as ShaderMount,H as getShaderColorFromString};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/shader-mount.tsx", "../src/shaders/grain-clouds.tsx", "../src/index.ts"],
-  "sourcesContent": ["import React, { useEffect, useRef } from 'react';\nimport { ShaderMount as ShaderMountVanilla } from '@paper-design/shaders';\n\nexport interface ShaderMountProps {\n  ref?: React.RefObject<HTMLCanvasElement>;\n  fragmentShader: string;\n  style?: React.CSSProperties;\n  uniforms?: Record<string, number | number[]>;\n  webGlContextAttributes?: WebGLContextAttributes;\n  animated?: boolean;\n}\n\nexport const ShaderMount: React.FC<ShaderMountProps> = ({\n  ref,\n  fragmentShader,\n  style,\n  uniforms = {},\n  webGlContextAttributes,\n  animated = true,\n}) => {\n  const canvasRef = ref ?? useRef<HTMLCanvasElement>(null);\n  const shaderMountRef = useRef<ShaderMountVanilla | null>(null);\n\n  useEffect(() => {\n    if (canvasRef.current) {\n      shaderMountRef.current = new ShaderMountVanilla(\n        canvasRef.current,\n        fragmentShader,\n        uniforms,\n        webGlContextAttributes,\n        animated\n      );\n    }\n\n    return () => {\n      if (shaderMountRef.current) {\n        shaderMountRef.current.dispose();\n      }\n    };\n  }, [fragmentShader, webGlContextAttributes]);\n\n  useEffect(() => {\n    if (shaderMountRef.current) {\n      shaderMountRef.current.setUniforms(uniforms);\n    }\n  }, [uniforms]);\n\n  useEffect(() => {\n    if (shaderMountRef.current) {\n      if (animated) {\n        shaderMountRef.current.startAnimating();\n      } else {\n        shaderMountRef.current.stopAnimating();\n      }\n    }\n  }, [animated]);\n\n  return <canvas ref={canvasRef} style={style} />;\n};\n", "import { ShaderMount, type ShaderMountProps } from '../shader-mount';\nimport {\n  grainCloudsFragmentShader,\n  GrainCloudsUniforms,\n} from '@paper-design/shaders';\n\ntype GrainCloudsProps = Omit<ShaderMountProps, 'fragmentShader'> & {\n  uniforms: GrainCloudsUniforms;\n};\n\nexport const GrainClouds = (props: GrainCloudsProps): JSX.Element => {\n  return <ShaderMount {...props} fragmentShader={grainCloudsFragmentShader} />;\n};\n", "// ----- ShaderMount ----- //\nexport { ShaderMount } from './shader-mount';\n\n// ----- Fragment shaders ----- //\nexport { GrainClouds } from './shaders/grain-clouds';\nexport { type GrainCloudsUniforms } from '@paper-design/shaders';\n\n// ----- Uniform conversion utils ----- //\nexport { getShaderColorFromString } from '@paper-design/shaders';\n"],
-  "mappings": "AAAA,OAAgB,aAAAA,EAAW,UAAAC,MAAc,QACzC,OAAS,eAAeC,MAA0B,wBAwDzC,cAAAC,MAAA,oBA7CF,IAAMC,EAA0C,CAAC,CACtD,IAAAC,EACA,eAAAC,EACA,MAAAC,EACA,SAAAC,EAAW,CAAC,EACZ,uBAAAC,EACA,SAAAC,EAAW,EACb,IAAM,CACJ,IAAMC,EAAYN,GAAOJ,EAA0B,IAAI,EACjDW,EAAiBX,EAAkC,IAAI,EAE7D,OAAAD,EAAU,KACJW,EAAU,UACZC,EAAe,QAAU,IAAIV,EAC3BS,EAAU,QACVL,EACAE,EACAC,EACAC,CACF,GAGK,IAAM,CACPE,EAAe,SACjBA,EAAe,QAAQ,QAAQ,CAEnC,GACC,CAACN,EAAgBG,CAAsB,CAAC,EAE3CT,EAAU,IAAM,CACVY,EAAe,SACjBA,EAAe,QAAQ,YAAYJ,CAAQ,CAE/C,EAAG,CAACA,CAAQ,CAAC,EAEbR,EAAU,IAAM,CACVY,EAAe,UACbF,EACFE,EAAe,QAAQ,eAAe,EAEtCA,EAAe,QAAQ,cAAc,EAG3C,EAAG,CAACF,CAAQ,CAAC,EAENP,EAAC,UAAO,IAAKQ,EAAW,MAAOJ,EAAO,CAC/C,ECzDA,OACE,6BAAAM,MAEK,wBAOE,cAAAC,MAAA,oBADF,IAAMC,EAAeC,GACnBF,EAACG,EAAA,CAAa,GAAGD,EAAO,eAAgBH,EAA2B,ECH5E,OAAS,4BAAAK,MAAgC",
-  "names": ["useEffect", "useRef", "ShaderMountVanilla", "jsx", "ShaderMount", "ref", "fragmentShader", "style", "uniforms", "webGlContextAttributes", "animated", "canvasRef", "shaderMountRef", "grainCloudsFragmentShader", "jsx", "GrainClouds", "props", "ShaderMount", "getShaderColorFromString"]
+  "sourcesContent": ["import React, { useEffect, useRef } from 'react';\nimport { ShaderMount as ShaderMountVanilla } from '@paper-design/shaders';\n\nexport interface ShaderMountProps {\n  ref?: React.RefObject<HTMLCanvasElement>;\n  fragmentShader: string;\n  style?: React.CSSProperties;\n  uniforms?: Record<string, number | number[]>;\n  webGlContextAttributes?: WebGLContextAttributes;\n  animated?: boolean;\n}\n\nexport const ShaderMount: React.FC<ShaderMountProps> = ({\n  ref,\n  fragmentShader,\n  style,\n  uniforms = {},\n  webGlContextAttributes,\n  animated = true,\n}) => {\n  const canvasRef = ref ?? useRef<HTMLCanvasElement>(null);\n  const shaderMountRef = useRef<ShaderMountVanilla | null>(null);\n\n  useEffect(() => {\n    if (canvasRef.current) {\n      shaderMountRef.current = new ShaderMountVanilla(\n        canvasRef.current,\n        fragmentShader,\n        uniforms,\n        webGlContextAttributes,\n        animated\n      );\n    }\n\n    return () => {\n      if (shaderMountRef.current) {\n        shaderMountRef.current.dispose();\n      }\n    };\n  }, [fragmentShader, webGlContextAttributes]);\n\n  useEffect(() => {\n    if (shaderMountRef.current) {\n      shaderMountRef.current.setUniforms(uniforms);\n    }\n  }, [uniforms]);\n\n  useEffect(() => {\n    if (shaderMountRef.current) {\n      if (animated) {\n        shaderMountRef.current.startAnimating();\n      } else {\n        shaderMountRef.current.stopAnimating();\n      }\n    }\n  }, [animated]);\n\n  return <canvas ref={canvasRef} style={style} />;\n};\n", "import { useMemo } from 'react';\nimport { ShaderMount, type ShaderMountProps } from '../shader-mount';\nimport {\n  getShaderColorFromString,\n  grainCloudsFragmentShader,\n  type GrainCloudsUniforms,\n} from '@paper-design/shaders';\n\ntype GrainCloudsProps = Omit<ShaderMountProps, 'fragmentShader'> & {\n  color1: string;\n  color2: string;\n  noiseScale: number;\n  noiseSpeed: number;\n  grainAmount: number;\n};\n\nexport const GrainClouds = (props: GrainCloudsProps): JSX.Element => {\n  const uniforms: GrainCloudsUniforms = useMemo(() => {\n    return {\n      u_color1: getShaderColorFromString(props.color1),\n      u_color2: getShaderColorFromString(props.color2),\n      u_noiseScale: props.noiseScale,\n      u_noiseSpeed: props.noiseSpeed,\n      u_grainAmount: props.grainAmount,\n    };\n  }, [\n    props.color1,\n    props.color2,\n    props.noiseScale,\n    props.noiseSpeed,\n    props.grainAmount,\n  ]);\n\n  return (\n    <ShaderMount\n      {...props}\n      fragmentShader={grainCloudsFragmentShader}\n      uniforms={uniforms}\n    />\n  );\n};\n", "// ----- ShaderMount ----- //\nexport { ShaderMount } from './shader-mount';\n\n// ----- Fragment shaders ----- //\nexport { GrainClouds } from './shaders/grain-clouds';\nexport { type GrainCloudsUniforms } from '@paper-design/shaders';\n\n// ----- Uniform conversion utils ----- //\nexport { getShaderColorFromString } from '@paper-design/shaders';\n"],
+  "mappings": "AAAA,OAAgB,aAAAA,EAAW,UAAAC,MAAc,QACzC,OAAS,eAAeC,MAA0B,wBAwDzC,cAAAC,MAAA,oBA7CF,IAAMC,EAA0C,CAAC,CACtD,IAAAC,EACA,eAAAC,EACA,MAAAC,EACA,SAAAC,EAAW,CAAC,EACZ,uBAAAC,EACA,SAAAC,EAAW,EACb,IAAM,CACJ,IAAMC,EAAYN,GAAOJ,EAA0B,IAAI,EACjDW,EAAiBX,EAAkC,IAAI,EAE7D,OAAAD,EAAU,KACJW,EAAU,UACZC,EAAe,QAAU,IAAIV,EAC3BS,EAAU,QACVL,EACAE,EACAC,EACAC,CACF,GAGK,IAAM,CACPE,EAAe,SACjBA,EAAe,QAAQ,QAAQ,CAEnC,GACC,CAACN,EAAgBG,CAAsB,CAAC,EAE3CT,EAAU,IAAM,CACVY,EAAe,SACjBA,EAAe,QAAQ,YAAYJ,CAAQ,CAE/C,EAAG,CAACA,CAAQ,CAAC,EAEbR,EAAU,IAAM,CACVY,EAAe,UACbF,EACFE,EAAe,QAAQ,eAAe,EAEtCA,EAAe,QAAQ,cAAc,EAG3C,EAAG,CAACF,CAAQ,CAAC,EAENP,EAAC,UAAO,IAAKQ,EAAW,MAAOJ,EAAO,CAC/C,EC1DA,OAAS,WAAAM,MAAe,QAExB,OACE,4BAAAC,EACA,6BAAAC,MAEK,wBA4BH,cAAAC,MAAA,oBAlBG,IAAMC,EAAeC,GAAyC,CACnE,IAAMC,EAAgCC,EAAQ,KACrC,CACL,SAAUN,EAAyBI,EAAM,MAAM,EAC/C,SAAUJ,EAAyBI,EAAM,MAAM,EAC/C,aAAcA,EAAM,WACpB,aAAcA,EAAM,WACpB,cAAeA,EAAM,WACvB,GACC,CACDA,EAAM,OACNA,EAAM,OACNA,EAAM,WACNA,EAAM,WACNA,EAAM,WACR,CAAC,EAED,OACEF,EAACK,EAAA,CACE,GAAGH,EACJ,eAAgBH,EAChB,SAAUI,EACZ,CAEJ,ECnCA,YAAyC,wBAGzC,OAAS,4BAAAG,MAAgC",
+  "names": ["useEffect", "useRef", "ShaderMountVanilla", "jsx", "ShaderMount", "ref", "fragmentShader", "style", "uniforms", "webGlContextAttributes", "animated", "canvasRef", "shaderMountRef", "useMemo", "getShaderColorFromString", "grainCloudsFragmentShader", "jsx", "GrainClouds", "props", "uniforms", "useMemo", "ShaderMount", "getShaderColorFromString"]
 }

package/dist/shaders/grain-clouds.d.ts

@@ -1,7 +1,10 @@
 import { type ShaderMountProps } from '../shader-mount';
-import { GrainCloudsUniforms } from '@paper-design/shaders';
 type GrainCloudsProps = Omit<ShaderMountProps, 'fragmentShader'> & {
-    uniforms: GrainCloudsUniforms;
+    color1: string;
+    color2: string;
+    noiseScale: number;
+    noiseSpeed: number;
+    grainAmount: number;
 };
 export declare const GrainClouds: (props: GrainCloudsProps) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paper-design/shaders-react",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -22,10 +22,8 @@
     "type-check": "tsc --project tsconfig.json"
   },
   "dependencies": {
-    "@paper-design/shaders": "0.0.11"
-  },
-  "peerDependencies": {
-    "react": "^17 || ^18 || ^19"
+    "@paper-design/shaders": "0.0.12",
+    "react": ">=18"
   },
   "devDependencies": {
     "@types/react": "^18.3.11"