Adding use client directive

Author: StephenHaney

CHANGELOG.md

@@ -1,4 +1,13 @@
-# @paper-design/shaders-react
+# Paper Shaders
+
+## Version 0.0.45
+
+### General
+
+- Added `'use client'` to React bundle for better RSC "out of the box" experience.
+- Improved RSC and SSR handling
+- Reduced bundle size by removing unused texture
+
 ## Version 0.0.44
 
 ### General
@@ -13,46 +22,53 @@
 ### Existing Shader Improvements
 
 - **Antialiasing** improved across multiple shaders:
-    - *Waves, Warp, Swirl, Spiral, SimplexNoise, PulsingBorder, LiquidMetal, GrainGradient*
+
+  - _Waves, Warp, Swirl, Spiral, SimplexNoise, PulsingBorder, LiquidMetal, GrainGradient_
 
 - **Voronoi**
-    - Fixed glow color behavior: glow is now fully hidden when `glow = 0`
+
+  - Fixed glow color behavior: glow is now fully hidden when `glow = 0`
 
 - **Swirl**
-    - Improved color distribution
-    - Renamed `noisePower` to `noise`
-    - Normalized `noiseFrequency`
+
+  - Improved color distribution
+  - Renamed `noisePower` to `noise`
+  - Normalized `noiseFrequency`
 
 - **Spiral**
-    - Enhanced algorithm for `lineWidth`, `strokeTaper`, `strokeCap`, `noise`, and `distortion`
-    - Swapped `colorBack` and `colorFront`
-    - Renamed `noisePower` to `noise`
-    - Normalized `noiseFrequency`
+
+  - Enhanced algorithm for `lineWidth`, `strokeTaper`, `strokeCap`, `noise`, and `distortion`
+  - Swapped `colorBack` and `colorFront`
+  - Renamed `noisePower` to `noise`
+  - Normalized `noiseFrequency`
 
 - **PulsingBorder**
-    - Normalized `thickness`, `intensity`, `spotSize`, and `smokeSize`
-    - Renamed `spotsPerColor` to `spots`
-    - `intensity` now affects only the shape, not color mixing
-    - Added new `bloom` parameter to control color mixing and blending
-    - Reduced maximum number of spots, but individual spots stay visible longer
-    - Improved inner corner masking
-    - Performance optimizations
-    - Pulsing signal is now slower and simpler, (a composition of two sine waves instead of a pre-computed
-      speech-mimicking
-      data)
+
+  - Normalized `thickness`, `intensity`, `spotSize`, and `smokeSize`
+  - Renamed `spotsPerColor` to `spots`
+  - `intensity` now affects only the shape, not color mixing
+  - Added new `bloom` parameter to control color mixing and blending
+  - Reduced maximum number of spots, but individual spots stay visible longer
+  - Improved inner corner masking
+  - Performance optimizations
+  - Pulsing signal is now slower and simpler, (a composition of two sine waves instead of a pre-computed
+    speech-mimicking
+    data)
 
 - **MeshGradient**
-    - Minor performance improvements
+
+  - Minor performance improvements
 
 - **ColorPanels**
-    - Added new `edges` parameter
+
+  - Added new `edges` parameter
 
 - **Default Presets** updated for the following shaders:
-    - *Spiral, SimplexNoise, PulsingBorder, NeuroNoise, GrainGradient, DotGrid, Dithering*
+  - _Spiral, SimplexNoise, PulsingBorder, NeuroNoise, GrainGradient, DotGrid, Dithering_
 
 ---
 
 ### New Shaders
 
 - Added `StaticMeshGradient` component
-- Added `StaticRadialGradient` component
+- Added `StaticRadialGradient` component

packages/shaders-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paper-design/shaders-react",
-  "version": "0.0.44",
+  "version": "0.0.45",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,

packages/shaders-react/src/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 export { ShaderMount } from './shader-mount.js';
 export type { ShaderMountProps, ShaderComponentProps } from './shader-mount.js';
 

packages/shaders-react/src/shader-mount.tsx

@@ -9,9 +9,14 @@ import {
 } from '@paper-design/shaders';
 import { useMergeRefs } from './use-merge-refs.js';
 
-/** React Shader Mount can also accept strings as uniform values, which will assumed to be URLs and loaded as images */
+/**
+ * React Shader Mount can also accept strings as uniform values, which will assumed to be URLs and loaded as images
+ *
+ * We accept undefined as a convenience for server rendering, when some things may be undefined
+ * We just skip setting the uniform if it's undefined. This allows the shader mount to still take up space during server rendering
+ */
 interface ShaderMountUniformsReact {
-  [key: string]: string | boolean | number | number[] | number[][] | HTMLImageElement;
+  [key: string]: string | boolean | number | number[] | number[][] | HTMLImageElement | undefined;
 }
 
 export interface ShaderMountProps extends Omit<React.ComponentProps<'div'>, 'color' | 'ref'>, ShaderMotionParams {

packages/shaders-react/src/shaders/grain-gradient.tsx

@@ -159,8 +159,6 @@ export const GrainGradient: React.FC<GrainGradientProps> = memo(function GrainGr
   worldHeight = defaultPreset.params.worldHeight,
   ...props
 }: GrainGradientProps) {
-  const noiseTexture = typeof window !== 'undefined' && { u_noiseTexture: getShaderNoiseTexture() };
-
   const uniforms = {
     // Own uniforms
     u_colorBack: getShaderColorFromString(colorBack),
@@ -170,7 +168,7 @@ export const GrainGradient: React.FC<GrainGradientProps> = memo(function GrainGr
     u_intensity: intensity,
     u_noise: noise,
     u_shape: GrainGradientShapes[shape],
-    ...noiseTexture,
+    u_noiseTexture: getShaderNoiseTexture(),
 
     // Sizing uniforms
     u_fit: ShaderFitOptions[fit],

packages/shaders-react/src/shaders/pulsing-border.tsx

@@ -140,7 +140,6 @@ export const PulsingBorder: React.FC<PulsingBorderProps> = memo(function Pulsing
   worldHeight = defaultPreset.params.worldHeight,
   ...props
 }: PulsingBorderProps) {
-  const noiseTexture = typeof window !== 'undefined' && { u_noiseTexture: getShaderNoiseTexture(0) };
   const uniforms = {
     // Own uniforms
     u_colorBack: getShaderColorFromString(colorBack),
@@ -156,7 +155,7 @@ export const PulsingBorder: React.FC<PulsingBorderProps> = memo(function Pulsing
     u_pulse: pulse,
     u_smoke: smoke,
     u_smokeSize: smokeSize,
-    ...noiseTexture,
+    u_noiseTexture: getShaderNoiseTexture(),
 
     // Sizing uniforms
     u_fit: ShaderFitOptions[fit],

packages/shaders-react/src/shaders/smoke-ring.tsx

@@ -107,8 +107,6 @@ export const SmokeRing: React.FC<SmokeRingProps> = memo(function SmokeRingImpl({
   worldHeight = defaultPreset.params.worldHeight,
   ...props
 }: SmokeRingProps) {
-  const noiseTexture = typeof window !== 'undefined' && { u_noiseTexture: getShaderNoiseTexture() };
-
   const uniforms = {
     // Own uniforms
     u_colorBack: getShaderColorFromString(colorBack),
@@ -119,7 +117,7 @@ export const SmokeRing: React.FC<SmokeRingProps> = memo(function SmokeRingImpl({
     u_radius: radius,
     u_innerShape: innerShape,
     u_noiseIterations: noiseIterations,
-    ...noiseTexture,
+    u_noiseTexture: getShaderNoiseTexture(),
 
     // Sizing uniforms
     u_fit: ShaderFitOptions[fit],

packages/shaders-react/src/shaders/voronoi.tsx

@@ -109,8 +109,6 @@ export const Voronoi: React.FC<VoronoiProps> = memo(function VoronoiImpl({
   worldHeight = defaultPreset.params.worldHeight,
   ...props
 }: VoronoiProps) {
-  const noiseTexture = typeof window !== 'undefined' && { u_noiseTexture: getShaderNoiseTexture() };
-
   const uniforms = {
     // Own uniforms
     u_colors: colors.map(getShaderColorFromString),
@@ -121,7 +119,7 @@ export const Voronoi: React.FC<VoronoiProps> = memo(function VoronoiImpl({
     u_distortion: distortion,
     u_gap: gap,
     u_glow: glow,
-    ...noiseTexture,
+    u_noiseTexture: getShaderNoiseTexture(),
 
     // Sizing uniforms
     u_fit: ShaderFitOptions[fit],

packages/shaders/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paper-design/shaders",
-  "version": "0.0.40",
+  "version": "0.0.45",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,