shaders 2.0.658 → 2.0.659

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (96) hide show
  1. package/dist/react/components/Ascii.d.ts +1 -0
  2. package/dist/react/components/Ascii.d.ts.map +1 -1
  3. package/dist/react/components/Checkerboard.d.ts +1 -0
  4. package/dist/react/components/Checkerboard.d.ts.map +1 -1
  5. package/dist/react/components/Circle.d.ts +1 -0
  6. package/dist/react/components/Circle.d.ts.map +1 -1
  7. package/dist/react/components/DotGrid.d.ts +1 -0
  8. package/dist/react/components/DotGrid.d.ts.map +1 -1
  9. package/dist/react/components/GlassTiles.d.ts +1 -0
  10. package/dist/react/components/GlassTiles.d.ts.map +1 -1
  11. package/dist/react/components/Grayscale.d.ts +1 -0
  12. package/dist/react/components/Grayscale.d.ts.map +1 -1
  13. package/dist/react/components/Grid.d.ts +1 -0
  14. package/dist/react/components/Grid.d.ts.map +1 -1
  15. package/dist/react/components/GridDistortion.d.ts +1 -0
  16. package/dist/react/components/GridDistortion.d.ts.map +1 -1
  17. package/dist/react/components/HueShift.d.ts +1 -0
  18. package/dist/react/components/HueShift.d.ts.map +1 -1
  19. package/dist/react/components/ImageTexture.d.ts +1 -0
  20. package/dist/react/components/ImageTexture.d.ts.map +1 -1
  21. package/dist/react/components/Invert.d.ts +1 -0
  22. package/dist/react/components/Invert.d.ts.map +1 -1
  23. package/dist/react/components/LinearGradient.d.ts +1 -0
  24. package/dist/react/components/LinearGradient.d.ts.map +1 -1
  25. package/dist/react/components/Liquify.d.ts +1 -0
  26. package/dist/react/components/Liquify.d.ts.map +1 -1
  27. package/dist/react/components/Pixelate.d.ts +1 -0
  28. package/dist/react/components/Pixelate.d.ts.map +1 -1
  29. package/dist/react/components/Posterize.d.ts +1 -0
  30. package/dist/react/components/Posterize.d.ts.map +1 -1
  31. package/dist/react/components/RadialGradient.d.ts +1 -0
  32. package/dist/react/components/RadialGradient.d.ts.map +1 -1
  33. package/dist/react/components/Saturation.d.ts +1 -0
  34. package/dist/react/components/Saturation.d.ts.map +1 -1
  35. package/dist/react/components/SolidColor.d.ts +1 -0
  36. package/dist/react/components/SolidColor.d.ts.map +1 -1
  37. package/dist/react/components/Spiral.d.ts +1 -0
  38. package/dist/react/components/Spiral.d.ts.map +1 -1
  39. package/dist/react/components/Swirl.d.ts +1 -0
  40. package/dist/react/components/Swirl.d.ts.map +1 -1
  41. package/dist/react/components/Twirl.d.ts +1 -0
  42. package/dist/react/components/Twirl.d.ts.map +1 -1
  43. package/dist/react/components/Vibrance.d.ts +1 -0
  44. package/dist/react/components/Vibrance.d.ts.map +1 -1
  45. package/dist/react/engine/Shader.d.ts.map +1 -1
  46. package/dist/react/index.cjs +47 -47
  47. package/dist/react/index.cjs.map +1 -1
  48. package/dist/react/index.d.ts +0 -2
  49. package/dist/react/index.d.ts.map +1 -1
  50. package/dist/react/index.js +7123 -7353
  51. package/dist/react/index.js.map +1 -1
  52. package/dist/react/utils/generatePresetCode.d.ts.map +1 -1
  53. package/dist/svelte/engine/Shader.svelte +81 -16
  54. package/dist/svelte/index.d.ts +0 -2
  55. package/dist/svelte/index.js +0 -2
  56. package/dist/svelte/utils/generatePresetCode.js +0 -2
  57. package/dist/vue/components/Ascii.vue.d.ts.map +1 -1
  58. package/dist/vue/components/Checkerboard.vue.d.ts.map +1 -1
  59. package/dist/vue/components/Circle.vue.d.ts.map +1 -1
  60. package/dist/vue/components/DotGrid.vue.d.ts.map +1 -1
  61. package/dist/vue/components/GlassTiles.vue.d.ts.map +1 -1
  62. package/dist/vue/components/Grayscale.vue.d.ts.map +1 -1
  63. package/dist/vue/components/Grid.vue.d.ts.map +1 -1
  64. package/dist/vue/components/GridDistortion.vue.d.ts.map +1 -1
  65. package/dist/vue/components/HueShift.vue.d.ts.map +1 -1
  66. package/dist/vue/components/ImageTexture.vue.d.ts.map +1 -1
  67. package/dist/vue/components/Invert.vue.d.ts.map +1 -1
  68. package/dist/vue/components/LinearGradient.vue.d.ts.map +1 -1
  69. package/dist/vue/components/Liquify.vue.d.ts.map +1 -1
  70. package/dist/vue/components/Pixelate.vue.d.ts.map +1 -1
  71. package/dist/vue/components/Posterize.vue.d.ts.map +1 -1
  72. package/dist/vue/components/RadialGradient.vue.d.ts.map +1 -1
  73. package/dist/vue/components/Saturation.vue.d.ts.map +1 -1
  74. package/dist/vue/components/SolidColor.vue.d.ts.map +1 -1
  75. package/dist/vue/components/Spiral.vue.d.ts.map +1 -1
  76. package/dist/vue/components/Swirl.vue.d.ts.map +1 -1
  77. package/dist/vue/components/Twirl.vue.d.ts.map +1 -1
  78. package/dist/vue/components/Vibrance.vue.d.ts.map +1 -1
  79. package/dist/vue/engine/Shader.vue.d.ts.map +1 -1
  80. package/dist/vue/index.d.ts +0 -2
  81. package/dist/vue/index.d.ts.map +1 -1
  82. package/dist/vue/index.js +38 -38
  83. package/dist/vue/utils/generatePresetCode.d.ts.map +1 -1
  84. package/package.json +1 -1
  85. package/dist/react/components/FilmGrain.d.ts +0 -28
  86. package/dist/react/components/FilmGrain.d.ts.map +0 -1
  87. package/dist/react/components/Ripple.d.ts +0 -28
  88. package/dist/react/components/Ripple.d.ts.map +0 -1
  89. package/dist/svelte/components/FilmGrain.svelte +0 -209
  90. package/dist/svelte/components/FilmGrain.svelte.d.ts +0 -17
  91. package/dist/svelte/components/Ripple.svelte +0 -209
  92. package/dist/svelte/components/Ripple.svelte.d.ts +0 -17
  93. package/dist/vue/components/FilmGrain.vue.d.ts +0 -52
  94. package/dist/vue/components/FilmGrain.vue.d.ts.map +0 -1
  95. package/dist/vue/components/Ripple.vue.d.ts +0 -52
  96. package/dist/vue/components/Ripple.vue.d.ts.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"generatePresetCode.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AAqBD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CA8B/D;AAGD,eAAO,MAAM,mBAAmB,UA0B/B,CAAA"}
1
+ {"version":3,"file":"generatePresetCode.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AAqBD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CA8B/D;AAGD,eAAO,MAAM,mBAAmB,UAwB/B,CAAA"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "shaders",
3
3
  "private": false,
4
- "version": "2.0.658",
4
+ "version": "2.0.659",
5
5
  "description": "Declarative shader components",
6
6
  "author": "Simon Le Marchant<https://github.com/marchantweb>",
7
7
  "homepage": "https://shaders.com/",
@@ -1,28 +0,0 @@
1
- import { default as React } from 'react';
2
- import { BlendMode } from 'shaders-core';
3
- import { ComponentProps } from 'shaders-core/filmGrain';
4
-
5
- export type { ComponentProps };
6
- /**
7
- * Base props that all shader components have
8
- */
9
- interface BaseShaderProps {
10
- children?: React.ReactNode;
11
- blendMode?: BlendMode;
12
- opacity?: number;
13
- id?: string;
14
- maskSource?: string;
15
- maskType?: string;
16
- ref?: React.Ref<any>;
17
- }
18
- /**
19
- * Component-specific props that merge base props with shader-specific props
20
- * Note: ComponentProps are made optional since they have defaults from the shader definition
21
- */
22
- type ShaderComponentProps = BaseShaderProps & Partial<ComponentProps>;
23
- /**
24
- * The main React wrapper component for Shader shader nodes
25
- */
26
- export declare const OmbreComponent: React.FC<ShaderComponentProps>;
27
- export default OmbreComponent;
28
- //# sourceMappingURL=FilmGrain.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"FilmGrain.d.ts","sourceRoot":"","sources":["../../src/components/FilmGrain.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,EAGH,KAAK,SAAS,EAIjB,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAGlF,YAAY,EAAE,cAAc,EAAE,CAAC;AAI/B;;GAEG;AACH,UAAU,eAAe;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACxB;AAED;;;GAGG;AACH,KAAK,oBAAoB,GAAG,eAAe,GAAG,OAAO,CAAC,cAAc,CAAC,CAAC;AAwCtE;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA8IzD,CAAC;AAEF,eAAe,cAAc,CAAC"}
@@ -1,28 +0,0 @@
1
- import { default as React } from 'react';
2
- import { BlendMode } from 'shaders-core';
3
- import { ComponentProps } from 'shaders-core/ripple';
4
-
5
- export type { ComponentProps };
6
- /**
7
- * Base props that all shader components have
8
- */
9
- interface BaseShaderProps {
10
- children?: React.ReactNode;
11
- blendMode?: BlendMode;
12
- opacity?: number;
13
- id?: string;
14
- maskSource?: string;
15
- maskType?: string;
16
- ref?: React.Ref<any>;
17
- }
18
- /**
19
- * Component-specific props that merge base props with shader-specific props
20
- * Note: ComponentProps are made optional since they have defaults from the shader definition
21
- */
22
- type ShaderComponentProps = BaseShaderProps & Partial<ComponentProps>;
23
- /**
24
- * The main React wrapper component for Shader shader nodes
25
- */
26
- export declare const OmbreComponent: React.FC<ShaderComponentProps>;
27
- export default OmbreComponent;
28
- //# sourceMappingURL=Ripple.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Ripple.d.ts","sourceRoot":"","sources":["../../src/components/Ripple.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,EAGH,KAAK,SAAS,EAIjB,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAG/E,YAAY,EAAE,cAAc,EAAE,CAAC;AAI/B;;GAEG;AACH,UAAU,eAAe;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACxB;AAED;;;GAGG;AACH,KAAK,oBAAoB,GAAG,eAAe,GAAG,OAAO,CAAC,cAAc,CAAC,CAAC;AAwCtE;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA8IzD,CAAC;AAEF,eAAe,cAAc,CAAC"}
@@ -1,209 +0,0 @@
1
- <script lang="ts">
2
- import { getContext, setContext, onMount, onDestroy } from 'svelte';
3
- import {
4
- createUniformsMap,
5
- type UniformsMap,
6
- type BlendMode,
7
- type NodeMetadata,
8
- type PropConfig,
9
- type MaskConfig
10
- } from 'shaders-core';
11
-
12
- // @ts-ignore - this import is replaced at build time
13
- import { componentDefinition, type ComponentProps } from 'shaders-core/filmGrain';
14
-
15
- /**
16
- * Define component props including blend mode, opacity, and masking
17
- */
18
- interface ExtendedComponentProps extends Partial<ComponentProps> {
19
- blendMode?: BlendMode;
20
- opacity?: number;
21
- id?: string;
22
- maskSource?: string;
23
- maskType?: string;
24
- renderOrder?: number;
25
- children?: import('svelte').Snippet;
26
- }
27
-
28
- // Define the component props and their default values from the shader definition
29
- const componentDefaults = {
30
- blendMode: 'normal' as BlendMode,
31
- renderOrder: 0,
32
- // opacity intentionally has no default - handled by renderer
33
- ...Object.entries(componentDefinition.props).reduce(
34
- (acc, [key, config]) => {
35
- acc[key] = (config as unknown as PropConfig<typeof config>).default;
36
- return acc;
37
- },
38
- {} as Record<string, any>
39
- )
40
- };
41
-
42
- // Declare props using Svelte 5's syntax
43
- const props: ExtendedComponentProps = $props();
44
-
45
- // Apply defaults manually since Svelte 5 doesn't have withDefaults equivalent
46
- const blendMode = props.blendMode ?? componentDefaults.blendMode;
47
- const opacity = props.opacity; // No default - handled by renderer
48
- const id = props.id;
49
- const maskSource = props.maskSource;
50
- const maskType = props.maskType;
51
- const renderOrder = props.renderOrder ?? componentDefaults.renderOrder;
52
- const { children } = props;
53
-
54
- /**
55
- * FIRST: Get the parent ID from context BEFORE setting our own context
56
- */
57
- const parentId = getContext<string>('shaderParentId');
58
- if (parentId === undefined) {
59
- throw new Error('Shader components must be used inside an <Shader> component or another shader component');
60
- }
61
-
62
- /**
63
- * Use the provided ID or generate a unique identifier for this component instance
64
- */
65
- const instanceId = id || `${componentDefinition.name.toLowerCase()}_${Math.random().toString(36).substring(7)}`;
66
-
67
- /**
68
- * THEN: Provide our unique identifier to child components
69
- */
70
- setContext('shaderParentId', instanceId);
71
-
72
- /**
73
- * Creates a non-reactive object containing only props that differ from defaults
74
- * This optimization prevents unnecessary GPU uniform updates for unchanged values
75
- * Special props like blendMode and opacity are handled separately
76
- */
77
- const shaderReadyProps = $derived.by(() => {
78
- let baseProps = { ...componentDefaults };
79
-
80
- // Only include props that differ from defaults (excluding special props)
81
- for (const key in props) {
82
- if (key !== 'blendMode' && key !== 'opacity' && key !== 'id' && key !== 'maskSource' && key !== 'maskType' && key !== 'renderOrder') {
83
- const propValue = (props as any)[key];
84
- const defaultValue = (componentDefaults as any)[key];
85
- if (propValue !== undefined && propValue !== defaultValue) {
86
- (baseProps as any)[key] = propValue;
87
- }
88
- }
89
- }
90
- return baseProps;
91
- });
92
-
93
- /**
94
- * Creates the GPU uniform values map using only the changed props
95
- * Note: Intentionally captures initial value - props are immutable after initialization
96
- */
97
- // svelte-ignore state_referenced_locally
98
- const uniforms: UniformsMap = createUniformsMap(componentDefinition, shaderReadyProps, instanceId);
99
-
100
- /**
101
- * Get the node registration function from parent context
102
- */
103
- const parentRegister = getContext<(id: string, fragmentNodeFunc: any, parentId: string | null, metadata: NodeMetadata | null, uniforms: UniformsMap | null) => void>('shaderNodeRegister');
104
- if (parentRegister === undefined) {
105
- throw new Error('Shader components must be used inside an <Shader> component or another shader component');
106
- }
107
-
108
- /**
109
- * Get the uniform update function from parent context
110
- */
111
- const parentUniformUpdate = getContext<(nodeId: string, uniformName: string, value: any) => void>('shaderUniformUpdate');
112
- if (parentUniformUpdate === undefined) {
113
- throw new Error('Shader components require shaderUniformUpdate from parent');
114
- }
115
-
116
- /**
117
- * Get the metadata update function from parent context
118
- */
119
- const parentMetadataUpdate = getContext<(nodeId: string, metadata: NodeMetadata) => void>('shaderMetadataUpdate');
120
- if (parentMetadataUpdate === undefined) {
121
- throw new Error('Shader components require shaderMetadataUpdate from parent');
122
- }
123
-
124
- // Flag to track when component is registered
125
- let isRegistered = $state(false);
126
-
127
- // Setup uniform watchers with registration guard
128
- Object.entries(uniforms).forEach(([propName, { uniform, transform }]) => {
129
- $effect(() => {
130
- // Only run after component is registered
131
- if (!isRegistered) return;
132
-
133
- if (uniform && uniform.value !== undefined) {
134
- const newValue = (props as any)[propName];
135
- if (newValue !== undefined) {
136
- const transformedValue = transform ? transform(newValue) : newValue;
137
- parentUniformUpdate(instanceId, propName, transformedValue);
138
- }
139
- }
140
- });
141
- });
142
-
143
- // Watch blend mode, opacity, and masking changes
144
- $effect(() => {
145
- // Only run after component is registered
146
- if (!isRegistered) return;
147
-
148
- const metadata: NodeMetadata = {
149
- blendMode,
150
- opacity,
151
- id,
152
- mask: maskSource ? {
153
- source: maskSource,
154
- type: (maskType || 'alpha') as MaskConfig['type']
155
- } : undefined,
156
- renderOrder
157
- };
158
- parentMetadataUpdate(instanceId, metadata);
159
- });
160
-
161
- // Register this component after mount to ensure parent is ready
162
- onMount(() => {
163
- // Debug and safety check before registration
164
- console.log('componentDefinition:', componentDefinition);
165
- console.log('fragmentNode type:', typeof componentDefinition?.fragmentNode);
166
- console.log('fragmentNode:', componentDefinition?.fragmentNode);
167
-
168
- // Register this component with safety check
169
- if (componentDefinition && typeof componentDefinition.fragmentNode === 'function') {
170
- console.log(`Registering ${componentDefinition.name} with ID: ${instanceId}, parent: ${parentId}`);
171
-
172
- parentRegister(
173
- instanceId,
174
- componentDefinition.fragmentNode,
175
- parentId,
176
- {
177
- blendMode,
178
- opacity,
179
- id,
180
- mask: maskSource ? {
181
- source: maskSource,
182
- type: (maskType || 'alpha') as MaskConfig['type']
183
- } as MaskConfig : undefined,
184
- renderOrder
185
- },
186
- uniforms
187
- );
188
-
189
- console.log(`${componentDefinition.name} registered successfully`);
190
-
191
- // Set flag to enable effects after successful registration
192
- isRegistered = true;
193
- } else {
194
- console.error('componentDefinition.fragmentNode is not a function:', {
195
- componentDefinition,
196
- fragmentNode: componentDefinition?.fragmentNode,
197
- type: typeof componentDefinition?.fragmentNode
198
- });
199
- }
200
- });
201
-
202
- // Clean up node from registry when component is unmounted
203
- onDestroy(() => {
204
- isRegistered = false;
205
- parentRegister(instanceId, null, null, null, null);
206
- });
207
- </script>
208
-
209
- {@render children?.()}
@@ -1,17 +0,0 @@
1
- import { type BlendMode } from 'shaders-core';
2
- import { type ComponentProps } from 'shaders-core/filmGrain';
3
- /**
4
- * Define component props including blend mode, opacity, and masking
5
- */
6
- interface ExtendedComponentProps extends Partial<ComponentProps> {
7
- blendMode?: BlendMode;
8
- opacity?: number;
9
- id?: string;
10
- maskSource?: string;
11
- maskType?: string;
12
- renderOrder?: number;
13
- children?: import('svelte').Snippet;
14
- }
15
- declare const FilmGrain: import("svelte").Component<ExtendedComponentProps, {}, "">;
16
- type FilmGrain = ReturnType<typeof FilmGrain>;
17
- export default FilmGrain;
@@ -1,209 +0,0 @@
1
- <script lang="ts">
2
- import { getContext, setContext, onMount, onDestroy } from 'svelte';
3
- import {
4
- createUniformsMap,
5
- type UniformsMap,
6
- type BlendMode,
7
- type NodeMetadata,
8
- type PropConfig,
9
- type MaskConfig
10
- } from 'shaders-core';
11
-
12
- // @ts-ignore - this import is replaced at build time
13
- import { componentDefinition, type ComponentProps } from 'shaders-core/ripple';
14
-
15
- /**
16
- * Define component props including blend mode, opacity, and masking
17
- */
18
- interface ExtendedComponentProps extends Partial<ComponentProps> {
19
- blendMode?: BlendMode;
20
- opacity?: number;
21
- id?: string;
22
- maskSource?: string;
23
- maskType?: string;
24
- renderOrder?: number;
25
- children?: import('svelte').Snippet;
26
- }
27
-
28
- // Define the component props and their default values from the shader definition
29
- const componentDefaults = {
30
- blendMode: 'normal' as BlendMode,
31
- renderOrder: 0,
32
- // opacity intentionally has no default - handled by renderer
33
- ...Object.entries(componentDefinition.props).reduce(
34
- (acc, [key, config]) => {
35
- acc[key] = (config as unknown as PropConfig<typeof config>).default;
36
- return acc;
37
- },
38
- {} as Record<string, any>
39
- )
40
- };
41
-
42
- // Declare props using Svelte 5's syntax
43
- const props: ExtendedComponentProps = $props();
44
-
45
- // Apply defaults manually since Svelte 5 doesn't have withDefaults equivalent
46
- const blendMode = props.blendMode ?? componentDefaults.blendMode;
47
- const opacity = props.opacity; // No default - handled by renderer
48
- const id = props.id;
49
- const maskSource = props.maskSource;
50
- const maskType = props.maskType;
51
- const renderOrder = props.renderOrder ?? componentDefaults.renderOrder;
52
- const { children } = props;
53
-
54
- /**
55
- * FIRST: Get the parent ID from context BEFORE setting our own context
56
- */
57
- const parentId = getContext<string>('shaderParentId');
58
- if (parentId === undefined) {
59
- throw new Error('Shader components must be used inside an <Shader> component or another shader component');
60
- }
61
-
62
- /**
63
- * Use the provided ID or generate a unique identifier for this component instance
64
- */
65
- const instanceId = id || `${componentDefinition.name.toLowerCase()}_${Math.random().toString(36).substring(7)}`;
66
-
67
- /**
68
- * THEN: Provide our unique identifier to child components
69
- */
70
- setContext('shaderParentId', instanceId);
71
-
72
- /**
73
- * Creates a non-reactive object containing only props that differ from defaults
74
- * This optimization prevents unnecessary GPU uniform updates for unchanged values
75
- * Special props like blendMode and opacity are handled separately
76
- */
77
- const shaderReadyProps = $derived.by(() => {
78
- let baseProps = { ...componentDefaults };
79
-
80
- // Only include props that differ from defaults (excluding special props)
81
- for (const key in props) {
82
- if (key !== 'blendMode' && key !== 'opacity' && key !== 'id' && key !== 'maskSource' && key !== 'maskType' && key !== 'renderOrder') {
83
- const propValue = (props as any)[key];
84
- const defaultValue = (componentDefaults as any)[key];
85
- if (propValue !== undefined && propValue !== defaultValue) {
86
- (baseProps as any)[key] = propValue;
87
- }
88
- }
89
- }
90
- return baseProps;
91
- });
92
-
93
- /**
94
- * Creates the GPU uniform values map using only the changed props
95
- * Note: Intentionally captures initial value - props are immutable after initialization
96
- */
97
- // svelte-ignore state_referenced_locally
98
- const uniforms: UniformsMap = createUniformsMap(componentDefinition, shaderReadyProps, instanceId);
99
-
100
- /**
101
- * Get the node registration function from parent context
102
- */
103
- const parentRegister = getContext<(id: string, fragmentNodeFunc: any, parentId: string | null, metadata: NodeMetadata | null, uniforms: UniformsMap | null) => void>('shaderNodeRegister');
104
- if (parentRegister === undefined) {
105
- throw new Error('Shader components must be used inside an <Shader> component or another shader component');
106
- }
107
-
108
- /**
109
- * Get the uniform update function from parent context
110
- */
111
- const parentUniformUpdate = getContext<(nodeId: string, uniformName: string, value: any) => void>('shaderUniformUpdate');
112
- if (parentUniformUpdate === undefined) {
113
- throw new Error('Shader components require shaderUniformUpdate from parent');
114
- }
115
-
116
- /**
117
- * Get the metadata update function from parent context
118
- */
119
- const parentMetadataUpdate = getContext<(nodeId: string, metadata: NodeMetadata) => void>('shaderMetadataUpdate');
120
- if (parentMetadataUpdate === undefined) {
121
- throw new Error('Shader components require shaderMetadataUpdate from parent');
122
- }
123
-
124
- // Flag to track when component is registered
125
- let isRegistered = $state(false);
126
-
127
- // Setup uniform watchers with registration guard
128
- Object.entries(uniforms).forEach(([propName, { uniform, transform }]) => {
129
- $effect(() => {
130
- // Only run after component is registered
131
- if (!isRegistered) return;
132
-
133
- if (uniform && uniform.value !== undefined) {
134
- const newValue = (props as any)[propName];
135
- if (newValue !== undefined) {
136
- const transformedValue = transform ? transform(newValue) : newValue;
137
- parentUniformUpdate(instanceId, propName, transformedValue);
138
- }
139
- }
140
- });
141
- });
142
-
143
- // Watch blend mode, opacity, and masking changes
144
- $effect(() => {
145
- // Only run after component is registered
146
- if (!isRegistered) return;
147
-
148
- const metadata: NodeMetadata = {
149
- blendMode,
150
- opacity,
151
- id,
152
- mask: maskSource ? {
153
- source: maskSource,
154
- type: (maskType || 'alpha') as MaskConfig['type']
155
- } : undefined,
156
- renderOrder
157
- };
158
- parentMetadataUpdate(instanceId, metadata);
159
- });
160
-
161
- // Register this component after mount to ensure parent is ready
162
- onMount(() => {
163
- // Debug and safety check before registration
164
- console.log('componentDefinition:', componentDefinition);
165
- console.log('fragmentNode type:', typeof componentDefinition?.fragmentNode);
166
- console.log('fragmentNode:', componentDefinition?.fragmentNode);
167
-
168
- // Register this component with safety check
169
- if (componentDefinition && typeof componentDefinition.fragmentNode === 'function') {
170
- console.log(`Registering ${componentDefinition.name} with ID: ${instanceId}, parent: ${parentId}`);
171
-
172
- parentRegister(
173
- instanceId,
174
- componentDefinition.fragmentNode,
175
- parentId,
176
- {
177
- blendMode,
178
- opacity,
179
- id,
180
- mask: maskSource ? {
181
- source: maskSource,
182
- type: (maskType || 'alpha') as MaskConfig['type']
183
- } as MaskConfig : undefined,
184
- renderOrder
185
- },
186
- uniforms
187
- );
188
-
189
- console.log(`${componentDefinition.name} registered successfully`);
190
-
191
- // Set flag to enable effects after successful registration
192
- isRegistered = true;
193
- } else {
194
- console.error('componentDefinition.fragmentNode is not a function:', {
195
- componentDefinition,
196
- fragmentNode: componentDefinition?.fragmentNode,
197
- type: typeof componentDefinition?.fragmentNode
198
- });
199
- }
200
- });
201
-
202
- // Clean up node from registry when component is unmounted
203
- onDestroy(() => {
204
- isRegistered = false;
205
- parentRegister(instanceId, null, null, null, null);
206
- });
207
- </script>
208
-
209
- {@render children?.()}
@@ -1,17 +0,0 @@
1
- import { type BlendMode } from 'shaders-core';
2
- import { type ComponentProps } from 'shaders-core/ripple';
3
- /**
4
- * Define component props including blend mode, opacity, and masking
5
- */
6
- interface ExtendedComponentProps extends Partial<ComponentProps> {
7
- blendMode?: BlendMode;
8
- opacity?: number;
9
- id?: string;
10
- maskSource?: string;
11
- maskType?: string;
12
- renderOrder?: number;
13
- children?: import('svelte').Snippet;
14
- }
15
- declare const Ripple: import("svelte").Component<ExtendedComponentProps, {}, "">;
16
- type Ripple = ReturnType<typeof Ripple>;
17
- export default Ripple;
@@ -1,52 +0,0 @@
1
- import { BlendMode } from 'shaders-core';
2
- import { ComponentProps } from 'shaders-core/filmGrain';
3
-
4
- /**
5
- * Define component props including blend mode, opacity, and masking
6
- */
7
- interface ExtendedComponentProps extends Partial<ComponentProps> {
8
- blendMode?: BlendMode;
9
- opacity?: number;
10
- id?: string;
11
- maskSource?: string;
12
- maskType?: string;
13
- renderOrder?: number;
14
- }
15
- declare function __VLS_template(): {
16
- default?(_: {}): any;
17
- };
18
- declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ExtendedComponentProps>, {
19
- blendMode: string;
20
- renderOrder: number;
21
- }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ExtendedComponentProps>, {
22
- blendMode: string;
23
- renderOrder: number;
24
- }>>> & Readonly<{}>, {
25
- blendMode: BlendMode;
26
- renderOrder: number;
27
- }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
28
- declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
29
- export default _default;
30
- type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
31
- type __VLS_TypePropsToRuntimeProps<T> = {
32
- [K in keyof T]-?: {} extends Pick<T, K> ? {
33
- type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
34
- } : {
35
- type: import('vue').PropType<T[K]>;
36
- required: true;
37
- };
38
- };
39
- type __VLS_WithDefaults<P, D> = {
40
- [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
41
- default: D[K];
42
- }> : P[K];
43
- };
44
- type __VLS_Prettify<T> = {
45
- [K in keyof T]: T[K];
46
- } & {};
47
- type __VLS_WithTemplateSlots<T, S> = T & {
48
- new (): {
49
- $slots: S;
50
- };
51
- };
52
- //# sourceMappingURL=FilmGrain.vue.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"FilmGrain.vue.d.ts","sourceRoot":"","sources":["../../src/components/FilmGrain.vue"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,SAAS,EAIf,MAAM,cAAc,CAAA;AAGrB,OAAO,EAAsB,KAAK,cAAc,EAAC,MAAM,wBAAwB,CAAA;AAI/E;;GAEG;AACH,UAAU,sBAAuB,SAAQ,OAAO,CAAC,cAAc,CAAC;IAC9D,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA2KD,iBAAS,cAAc;qBA0BM,GAAG;EAG/B;AAQD,QAAA,MAAM,eAAe;;;;;;;eAtNP,SAAS;iBAKP,MAAM;4EAuNpB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AACxD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
@@ -1,52 +0,0 @@
1
- import { BlendMode } from 'shaders-core';
2
- import { ComponentProps } from 'shaders-core/ripple';
3
-
4
- /**
5
- * Define component props including blend mode, opacity, and masking
6
- */
7
- interface ExtendedComponentProps extends Partial<ComponentProps> {
8
- blendMode?: BlendMode;
9
- opacity?: number;
10
- id?: string;
11
- maskSource?: string;
12
- maskType?: string;
13
- renderOrder?: number;
14
- }
15
- declare function __VLS_template(): {
16
- default?(_: {}): any;
17
- };
18
- declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ExtendedComponentProps>, {
19
- blendMode: string;
20
- renderOrder: number;
21
- }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ExtendedComponentProps>, {
22
- blendMode: string;
23
- renderOrder: number;
24
- }>>> & Readonly<{}>, {
25
- blendMode: BlendMode;
26
- renderOrder: number;
27
- }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
28
- declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
29
- export default _default;
30
- type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
31
- type __VLS_TypePropsToRuntimeProps<T> = {
32
- [K in keyof T]-?: {} extends Pick<T, K> ? {
33
- type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
34
- } : {
35
- type: import('vue').PropType<T[K]>;
36
- required: true;
37
- };
38
- };
39
- type __VLS_WithDefaults<P, D> = {
40
- [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
41
- default: D[K];
42
- }> : P[K];
43
- };
44
- type __VLS_Prettify<T> = {
45
- [K in keyof T]: T[K];
46
- } & {};
47
- type __VLS_WithTemplateSlots<T, S> = T & {
48
- new (): {
49
- $slots: S;
50
- };
51
- };
52
- //# sourceMappingURL=Ripple.vue.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Ripple.vue.d.ts","sourceRoot":"","sources":["../../src/components/Ripple.vue"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,SAAS,EAIf,MAAM,cAAc,CAAA;AAGrB,OAAO,EAAsB,KAAK,cAAc,EAAC,MAAM,qBAAqB,CAAA;AAI5E;;GAEG;AACH,UAAU,sBAAuB,SAAQ,OAAO,CAAC,cAAc,CAAC;IAC9D,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA2KD,iBAAS,cAAc;qBA0BM,GAAG;EAG/B;AAQD,QAAA,MAAM,eAAe;;;;;;;eAtNP,SAAS;iBAKP,MAAM;4EAuNpB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AACxD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}