shaders 0.0.1 → 2.0.0-alpha.1

package/dist/svelte/components/Vibrance.svelte

@@ -0,0 +1,202 @@
+<script lang="ts">
+    import { getContext, setContext, onMount, onDestroy } from 'svelte';
+    import {
+        createUniformsMap,
+        type UniformsMap,
+        type BlendMode,
+        type NodeMetadata,
+        type PropConfig,
+        type MaskConfig
+    } from 'shaders-core';
+
+    // @ts-ignore - this import is replaced at build time
+    import { componentDefinition, type ComponentProps } from 'shaders-core/vibrance';
+
+    /**
+     * Define component props including blend mode, opacity, and masking
+     */
+    interface ExtendedComponentProps extends Partial<ComponentProps> {
+        blendMode?: BlendMode;
+        opacity?: number;
+        id?: string;
+        maskSource?: string;
+        maskType?: string;
+    }
+
+    // Define the component props and their default values from the shader definition
+    const componentDefaults = {
+        blendMode: 'normal' as BlendMode,
+        opacity: 1.0,
+        ...Object.entries(componentDefinition.props).reduce(
+            (acc, [key, config]) => {
+                acc[key] = (config as unknown as PropConfig<typeof config>).default;
+                return acc;
+            },
+            {} as Record<string, any>
+        )
+    };
+
+    // Declare props using Svelte 5's syntax with defaults
+    const props = $props<ExtendedComponentProps>();
+
+    // Apply defaults manually since Svelte 5 doesn't have withDefaults equivalent
+    const blendMode = props.blendMode ?? componentDefaults.blendMode;
+    const opacity = props.opacity ?? componentDefaults.opacity;
+    const id = props.id;
+    const maskSource = props.maskSource;
+    const maskType = props.maskType;
+
+    /**
+     * FIRST: Get the parent ID from context BEFORE setting our own context
+     */
+    const parentId = getContext<string>('ombreParentId');
+    if (parentId === undefined) {
+        throw new Error('Shader components must be used inside an <Shader> component or another shader component');
+    }
+
+    /**
+     * Use the provided ID or generate a unique identifier for this component instance
+     */
+    const instanceId = id || `${componentDefinition.name.toLowerCase()}_${Math.random().toString(36).substring(7)}`;
+
+    /**
+     * THEN: Provide our unique identifier to child components
+     */
+    setContext('ombreParentId', instanceId);
+
+    /**
+     * Creates a non-reactive object containing only props that differ from defaults
+     * This optimization prevents unnecessary GPU uniform updates for unchanged values
+     * Special props like blendMode and opacity are handled separately
+     */
+    const shaderReadyProps = $derived.by(() => {
+        let baseProps = { ...componentDefaults };
+        
+        // Only include props that differ from defaults (excluding special props)
+        for (const key in props) {
+            if (key !== 'blendMode' && key !== 'opacity' && key !== 'id' && key !== 'maskSource' && key !== 'maskType') {
+                const propValue = (props as any)[key];
+                const defaultValue = (componentDefaults as any)[key];
+                if (propValue !== undefined && propValue !== defaultValue) {
+                    (baseProps as any)[key] = propValue;
+                }
+            }
+        }
+        return baseProps;
+    });
+
+    /**
+     * Creates the GPU uniform values map using only the changed props
+     */
+    const uniforms: UniformsMap = createUniformsMap(componentDefinition, shaderReadyProps, instanceId);
+
+    /**
+     * Get the node registration function from parent context
+     */
+    const parentRegister = getContext<(id: string, fragmentNodeFunc: any, parentId: string | null, metadata: NodeMetadata | null, uniforms: UniformsMap | null) => void>('ombreNodeRegister');
+    if (parentRegister === undefined) {
+        throw new Error('Shader components must be used inside an <Shader> component or another shader component');
+    }
+
+    /**
+     * Get the uniform update function from parent context
+     */
+    const parentUniformUpdate = getContext<(nodeId: string, uniformName: string, value: any) => void>('ombreUniformUpdate');
+    if (parentUniformUpdate === undefined) {
+        throw new Error('Shader components require ombreUniformUpdate from parent');
+    }
+
+    /**
+     * Get the metadata update function from parent context
+     */
+    const parentMetadataUpdate = getContext<(nodeId: string, metadata: NodeMetadata) => void>('ombreMetadataUpdate');
+    if (parentMetadataUpdate === undefined) {
+        throw new Error('Shader components require ombreMetadataUpdate from parent');
+    }
+
+    // Flag to track when component is registered
+    let isRegistered = $state(false);
+
+    // Setup uniform watchers with registration guard
+    Object.entries(uniforms).forEach(([propName, { uniform, transform }]) => {
+        $effect(() => {
+            // Only run after component is registered
+            if (!isRegistered) return;
+            
+            if (uniform && uniform.value !== undefined) {
+                const newValue = (props as any)[propName];
+                if (newValue !== undefined) {
+                    const transformedValue = transform ? transform(newValue) : newValue;
+                    parentUniformUpdate(instanceId, propName, transformedValue);
+                }
+            }
+        });
+    });
+
+    // Watch blend mode, opacity, and masking changes
+    $effect(() => {
+        // Only run after component is registered
+        if (!isRegistered) return;
+        
+        const metadata: NodeMetadata = {
+            blendMode,
+            opacity,
+            id,
+            mask: maskSource ? {
+                source: maskSource,
+                type: maskType || 'alpha'
+            } : undefined,
+            renderOrder: 0
+        };
+        parentMetadataUpdate(instanceId, metadata);
+    });
+
+    // Register this component after mount to ensure parent is ready
+    onMount(() => {
+        // Debug and safety check before registration
+        console.log('componentDefinition:', componentDefinition);
+        console.log('fragmentNode type:', typeof componentDefinition?.fragmentNode);
+        console.log('fragmentNode:', componentDefinition?.fragmentNode);
+
+        // Register this component with safety check
+        if (componentDefinition && typeof componentDefinition.fragmentNode === 'function') {
+            console.log(`Registering ${componentDefinition.name} with ID: ${instanceId}, parent: ${parentId}`);
+            
+            parentRegister(
+                instanceId,
+                componentDefinition.fragmentNode,
+                parentId,
+                {
+                    blendMode,
+                    opacity,
+                    id,
+                    mask: maskSource ? {
+                        source: maskSource,
+                        type: maskType || 'alpha'
+                    } as MaskConfig : undefined,
+                    renderOrder: 0
+                },
+                uniforms
+            );
+
+            console.log(`${componentDefinition.name} registered successfully`);
+
+            // Set flag to enable effects after successful registration
+            isRegistered = true;
+        } else {
+            console.error('componentDefinition.fragmentNode is not a function:', {
+                componentDefinition,
+                fragmentNode: componentDefinition?.fragmentNode,
+                type: typeof componentDefinition?.fragmentNode
+            });
+        }
+    });
+
+    // Clean up node from registry when component is unmounted
+    onDestroy(() => {
+        isRegistered = false;
+        parentRegister(instanceId, null, null, null, null);
+    });
+</script>
+
+<slot></slot>

package/dist/svelte/components/Vibrance.svelte.d.ts

@@ -0,0 +1,39 @@
+import { type BlendMode } from 'shaders-core';
+import { type ComponentProps } from 'shaders-core/vibrance';
+/**
+ * Define component props including blend mode, opacity, and masking
+ */
+interface ExtendedComponentProps extends Partial<ComponentProps> {
+    blendMode?: BlendMode;
+    opacity?: number;
+    id?: string;
+    maskSource?: string;
+    maskType?: string;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Vibrance: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<ExtendedComponentProps, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, "">;
+type Vibrance = InstanceType<typeof Vibrance>;
+export default Vibrance;

package/dist/svelte/engine/Shader.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+  import { setContext, onMount, onDestroy } from 'svelte';
+  import { shaderRenderer } from 'shaders-core';
+  import { vec4 } from 'three/tsl';
+  import type { UniformsMap, BlendMode, NodeMetadata } from 'shaders-core';
+
+  interface Props {
+    hideNotice?: boolean;
+    [key: string]: any;
+  }
+
+  const { hideNotice = false, ...rest }: Props = $props();
+
+  // DOM reference to the canvas
+  let canvasRef: HTMLCanvasElement;
+
+  // Unique ID for this root component
+  const rootId = 'ombre-root-' + Math.random().toString(36).substring(7);
+
+  // Get renderer instance
+  let rendererInstance = shaderRenderer();
+
+  // Set context for child components - provide parent ID
+  setContext('ombreParentId', rootId);
+
+  // Provide node registration function for child components
+  setContext('ombreNodeRegister', (id: string, fragmentNodeFunc: any, parentId: string | null, metadata: any, uniforms: any = null) => {
+    rendererInstance.registerNode(id, fragmentNodeFunc, parentId, metadata, uniforms);
+  });
+
+  // Provide optimized uniform update function
+  setContext('ombreUniformUpdate', (nodeId: string, uniformName: string, value: any) => {
+    rendererInstance.updateUniformValue(nodeId, uniformName, value);
+  });
+
+  // Provide optimized metadata update function
+  setContext('ombreMetadataUpdate', (nodeId: string, metadata: any) => {
+    rendererInstance.updateNodeMetadata(nodeId, metadata);
+  });
+
+  // Initialize renderer
+  onMount(async () => {
+    console.log('Shader onMount - canvasRef:', canvasRef);
+    if (canvasRef) {
+      console.log('Registering root node with ID:', rootId);
+      
+      // Register the root node with metadata
+      rendererInstance.registerNode(
+        rootId,
+        ({ childNode }) => childNode || vec4(0, 0, 0, 0), // Root node that passes through children
+        null, // No parent (this is the root)
+        null, // No metadata to pass
+        {}
+      );
+
+      console.log('Initializing renderer...');
+      
+      // Initialize the renderer
+      await rendererInstance.initialize({
+        canvas: canvasRef,
+      });
+
+      console.log('Renderer initialized successfully');
+
+      // Show license warning if not hidden by prop
+      if (!hideNotice) {
+        rendererInstance.showLicenseWarning();
+      }
+    } else {
+      console.error('Canvas ref is null in Shader onMount');
+    }
+  });
+
+  // Cleanup on component destroy
+  onDestroy(() => {
+    rendererInstance.cleanup();
+  });
+
+  // Canvas styles - match Vue implementation exactly
+  const canvasStyles = $derived({
+    ...(!rest.class ? {
+      width: '1200px',
+      height: '800px'
+    } : {}),
+    ...(typeof rest.style === 'object' ? rest.style : {})
+  });
+
+  const styleString = $derived(Object.entries(canvasStyles)
+    .map(([key, value]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value}`)
+    .join('; '));
+</script>
+
+<div {...rest}>
+  <canvas
+    data-renderer="ombre"
+    bind:this={canvasRef}
+    style={styleString}
+    {...rest}
+  ></canvas>
+  <slot></slot>
+</div>

package/dist/svelte/engine/Shader.svelte.d.ts

@@ -0,0 +1,31 @@
+interface Props {
+    hideNotice?: boolean;
+    [key: string]: any;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Shader: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, "">;
+type Shader = InstanceType<typeof Shader>;
+export default Shader;

package/dist/svelte/engine/component.template.svelte

@@ -0,0 +1,202 @@
+<script lang="ts">
+    import { getContext, setContext, onMount, onDestroy } from 'svelte';
+    import {
+        createUniformsMap,
+        type UniformsMap,
+        type BlendMode,
+        type NodeMetadata,
+        type PropConfig,
+        type MaskConfig
+    } from 'shaders-core';
+
+    // @ts-ignore - this import is replaced at build time
+    import { componentDefinition, type ComponentProps } from 'shaders-core/__SHADER_NAME__';
+
+    /**
+     * Define component props including blend mode, opacity, and masking
+     */
+    interface ExtendedComponentProps extends Partial<ComponentProps> {
+        blendMode?: BlendMode;
+        opacity?: number;
+        id?: string;
+        maskSource?: string;
+        maskType?: string;
+    }
+
+    // Define the component props and their default values from the shader definition
+    const componentDefaults = {
+        blendMode: 'normal' as BlendMode,
+        opacity: 1.0,
+        ...Object.entries(componentDefinition.props).reduce(
+            (acc, [key, config]) => {
+                acc[key] = (config as unknown as PropConfig<typeof config>).default;
+                return acc;
+            },
+            {} as Record<string, any>
+        )
+    };
+
+    // Declare props using Svelte 5's syntax with defaults
+    const props = $props<ExtendedComponentProps>();
+
+    // Apply defaults manually since Svelte 5 doesn't have withDefaults equivalent
+    const blendMode = props.blendMode ?? componentDefaults.blendMode;
+    const opacity = props.opacity ?? componentDefaults.opacity;
+    const id = props.id;
+    const maskSource = props.maskSource;
+    const maskType = props.maskType;
+
+    /**
+     * FIRST: Get the parent ID from context BEFORE setting our own context
+     */
+    const parentId = getContext<string>('ombreParentId');
+    if (parentId === undefined) {
+        throw new Error('Shader components must be used inside an <Shader> component or another shader component');
+    }
+
+    /**
+     * Use the provided ID or generate a unique identifier for this component instance
+     */
+    const instanceId = id || `${componentDefinition.name.toLowerCase()}_${Math.random().toString(36).substring(7)}`;
+
+    /**
+     * THEN: Provide our unique identifier to child components
+     */
+    setContext('ombreParentId', instanceId);
+
+    /**
+     * Creates a non-reactive object containing only props that differ from defaults
+     * This optimization prevents unnecessary GPU uniform updates for unchanged values
+     * Special props like blendMode and opacity are handled separately
+     */
+    const shaderReadyProps = $derived.by(() => {
+        let baseProps = { ...componentDefaults };
+        
+        // Only include props that differ from defaults (excluding special props)
+        for (const key in props) {
+            if (key !== 'blendMode' && key !== 'opacity' && key !== 'id' && key !== 'maskSource' && key !== 'maskType') {
+                const propValue = (props as any)[key];
+                const defaultValue = (componentDefaults as any)[key];
+                if (propValue !== undefined && propValue !== defaultValue) {
+                    (baseProps as any)[key] = propValue;
+                }
+            }
+        }
+        return baseProps;
+    });
+
+    /**
+     * Creates the GPU uniform values map using only the changed props
+     */
+    const uniforms: UniformsMap = createUniformsMap(componentDefinition, shaderReadyProps, instanceId);
+
+    /**
+     * Get the node registration function from parent context
+     */
+    const parentRegister = getContext<(id: string, fragmentNodeFunc: any, parentId: string | null, metadata: NodeMetadata | null, uniforms: UniformsMap | null) => void>('ombreNodeRegister');
+    if (parentRegister === undefined) {
+        throw new Error('Shader components must be used inside an <Shader> component or another shader component');
+    }
+
+    /**
+     * Get the uniform update function from parent context
+     */
+    const parentUniformUpdate = getContext<(nodeId: string, uniformName: string, value: any) => void>('ombreUniformUpdate');
+    if (parentUniformUpdate === undefined) {
+        throw new Error('Shader components require ombreUniformUpdate from parent');
+    }
+
+    /**
+     * Get the metadata update function from parent context
+     */
+    const parentMetadataUpdate = getContext<(nodeId: string, metadata: NodeMetadata) => void>('ombreMetadataUpdate');
+    if (parentMetadataUpdate === undefined) {
+        throw new Error('Shader components require ombreMetadataUpdate from parent');
+    }
+
+    // Flag to track when component is registered
+    let isRegistered = $state(false);
+
+    // Setup uniform watchers with registration guard
+    Object.entries(uniforms).forEach(([propName, { uniform, transform }]) => {
+        $effect(() => {
+            // Only run after component is registered
+            if (!isRegistered) return;
+            
+            if (uniform && uniform.value !== undefined) {
+                const newValue = (props as any)[propName];
+                if (newValue !== undefined) {
+                    const transformedValue = transform ? transform(newValue) : newValue;
+                    parentUniformUpdate(instanceId, propName, transformedValue);
+                }
+            }
+        });
+    });
+
+    // Watch blend mode, opacity, and masking changes
+    $effect(() => {
+        // Only run after component is registered
+        if (!isRegistered) return;
+        
+        const metadata: NodeMetadata = {
+            blendMode,
+            opacity,
+            id,
+            mask: maskSource ? {
+                source: maskSource,
+                type: maskType || 'alpha'
+            } : undefined,
+            renderOrder: 0
+        };
+        parentMetadataUpdate(instanceId, metadata);
+    });
+
+    // Register this component after mount to ensure parent is ready
+    onMount(() => {
+        // Debug and safety check before registration
+        console.log('componentDefinition:', componentDefinition);
+        console.log('fragmentNode type:', typeof componentDefinition?.fragmentNode);
+        console.log('fragmentNode:', componentDefinition?.fragmentNode);
+
+        // Register this component with safety check
+        if (componentDefinition && typeof componentDefinition.fragmentNode === 'function') {
+            console.log(`Registering ${componentDefinition.name} with ID: ${instanceId}, parent: ${parentId}`);
+            
+            parentRegister(
+                instanceId,
+                componentDefinition.fragmentNode,
+                parentId,
+                {
+                    blendMode,
+                    opacity,
+                    id,
+                    mask: maskSource ? {
+                        source: maskSource,
+                        type: maskType || 'alpha'
+                    } as MaskConfig : undefined,
+                    renderOrder: 0
+                },
+                uniforms
+            );
+
+            console.log(`${componentDefinition.name} registered successfully`);
+
+            // Set flag to enable effects after successful registration
+            isRegistered = true;
+        } else {
+            console.error('componentDefinition.fragmentNode is not a function:', {
+                componentDefinition,
+                fragmentNode: componentDefinition?.fragmentNode,
+                type: typeof componentDefinition?.fragmentNode
+            });
+        }
+    });
+
+    // Clean up node from registry when component is unmounted
+    onDestroy(() => {
+        isRegistered = false;
+        parentRegister(instanceId, null, null, null, null);
+    });
+</script>
+
+<slot></slot>

package/dist/svelte/engine/component.template.svelte.d.ts

@@ -0,0 +1,39 @@
+import { type BlendMode } from 'shaders-core';
+import { type ComponentProps } from 'shaders-core/__SHADER_NAME__';
+/**
+ * Define component props including blend mode, opacity, and masking
+ */
+interface ExtendedComponentProps extends Partial<ComponentProps> {
+    blendMode?: BlendMode;
+    opacity?: number;
+    id?: string;
+    maskSource?: string;
+    maskType?: string;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Component: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<ExtendedComponentProps, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, "">;
+type Component = InstanceType<typeof Component>;
+export default Component;

package/dist/svelte/index.d.ts

@@ -0,0 +1,12 @@
+export { default as Circle } from './components/Circle.svelte';
+export { default as GlassTiles } from './components/GlassTiles.svelte';
+export { default as Grayscale } from './components/Grayscale.svelte';
+export { default as HueShift } from './components/HueShift.svelte';
+export { default as Invert } from './components/Invert.svelte';
+export { default as LinearGradient } from './components/LinearGradient.svelte';
+export { default as Posterize } from './components/Posterize.svelte';
+export { default as Saturation } from './components/Saturation.svelte';
+export { default as SolidColor } from './components/SolidColor.svelte';
+export { default as Twirl } from './components/Twirl.svelte';
+export { default as Vibrance } from './components/Vibrance.svelte';
+export { default as Shader } from './engine/Shader.svelte';

package/dist/svelte/index.js

@@ -0,0 +1,12 @@
+export { default as Circle } from './components/Circle.svelte';
+export { default as GlassTiles } from './components/GlassTiles.svelte';
+export { default as Grayscale } from './components/Grayscale.svelte';
+export { default as HueShift } from './components/HueShift.svelte';
+export { default as Invert } from './components/Invert.svelte';
+export { default as LinearGradient } from './components/LinearGradient.svelte';
+export { default as Posterize } from './components/Posterize.svelte';
+export { default as Saturation } from './components/Saturation.svelte';
+export { default as SolidColor } from './components/SolidColor.svelte';
+export { default as Twirl } from './components/Twirl.svelte';
+export { default as Vibrance } from './components/Vibrance.svelte';
+export { default as Shader } from './engine/Shader.svelte';