@paper-design/shaders-react 0.0.5 → 0.0.6

package/dist/index.d.ts

@@ -1,5 +1,40 @@
-export { ShaderMount } from './shader-mount';
-export { GrainClouds } from './shaders/grain-clouds';
-export { type GrainCloudsUniforms } from '@paper-design/shaders';
-export { getShaderColorFromString } from '@paper-design/shaders';
-//# sourceMappingURL=index.d.ts.map
+// Generated by dts-bundle-generator v9.5.1
+
+import React$1 from 'react';
+
+export interface ShaderMountProps {
+	ref?: React$1.RefObject<HTMLCanvasElement>;
+	fragmentShader: string;
+	style?: React$1.CSSProperties;
+	uniforms?: Record<string, number | number[]>;
+	webGlContextAttributes?: WebGLContextAttributes;
+	animated?: boolean;
+}
+export declare const ShaderMount: React$1.FC<ShaderMountProps>;
+/**  Convert color string from HSL, RGB, or hex to 0-to-1-range-RGB array */
+export declare function getShaderColorFromString(colorString: string): [
+	number,
+	number,
+	number
+];
+export type GrainCloudsUniforms = {
+	color1: [
+		number,
+		number,
+		number
+	];
+	color2: [
+		number,
+		number,
+		number
+	];
+	noiseScale: number;
+	noiseSpeed: number;
+	grainAmount: number;
+};
+export type GrainCloudsProps = Omit<ShaderMountProps, "fragmentShader"> & {
+	uniforms: GrainCloudsUniforms;
+};
+export declare const GrainClouds: (props: GrainCloudsProps) => JSX.Element;
+
+export {};

package/dist/index.js

@@ -1,2 +1,2 @@
-import{useEffect as a,useRef as f}from"react";import{ShaderMount as d}from"@paper-design/shaders";import{jsx as m}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 d(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]),m("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 E}from"@paper-design/shaders";export{c as GrainClouds,s as ShaderMount,E as getShaderColorFromString};
+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};
 //# 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  type GrainCloudsUniforms,\n} from '@paper-design/shaders';\n\ntype GrainCloudsProps = Omit<ShaderMountProps, 'fragmentShader'> & {\n  uniforms: GrainCloudsUniforms;\n};\n\nexport const GrainClouds = (props: GrainCloudsProps) => {\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"],
+  "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"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paper-design/shaders-react",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -16,12 +16,10 @@
     "type-check": "tsc --project tsconfig.json"
   },
   "dependencies": {
-    "@paper-design/shaders": "0.0.1",
+    "@paper-design/shaders": "0.0.5",
     "react": "^18.3.1"
   },
   "devDependencies": {
-    "@types/react": "^18.3.11",
-    "esbuild": "^0.24.0",
-    "typescript": "5.5.4"
+    "@types/react": "^18.3.11"
   }
 }

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAGjE,OAAO,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/shader-mount.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-export interface ShaderMountProps {
-    ref?: React.RefObject<HTMLCanvasElement>;
-    fragmentShader: string;
-    style?: React.CSSProperties;
-    uniforms?: Record<string, number | number[]>;
-    webGlContextAttributes?: WebGLContextAttributes;
-    animated?: boolean;
-}
-export declare const ShaderMount: React.FC<ShaderMountProps>;
-//# sourceMappingURL=shader-mount.d.ts.map

package/dist/shader-mount.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"shader-mount.d.ts","sourceRoot":"","sources":["../src/shader-mount.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,MAAM,WAAW,gBAAgB;IAC/B,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IACzC,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;IAC7C,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8ClD,CAAC"}

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

@@ -1,8 +0,0 @@
-import { type ShaderMountProps } from '../shader-mount';
-import { type GrainCloudsUniforms } from '@paper-design/shaders';
-type GrainCloudsProps = Omit<ShaderMountProps, 'fragmentShader'> & {
-    uniforms: GrainCloudsUniforms;
-};
-export declare const GrainClouds: (props: GrainCloudsProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=grain-clouds.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"grain-clouds.d.ts","sourceRoot":"","sources":["../../src/shaders/grain-clouds.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACrE,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,uBAAuB,CAAC;AAE/B,KAAK,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,GAAG;IACjE,QAAQ,EAAE,mBAAmB,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,WAAW,UAAW,gBAAgB,4CAElD,CAAC"}