svelte-ag 1.0.14 → 1.0.16

package/dist/app.css

@@ -12,9 +12,9 @@
 
 /*   --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Ubuntu', sans-serif; */
 
-html {
+/* html {
   scrollbar-gutter: stable;
-}
+} */
 
 /* Below is for shadcn */
 
@@ -185,21 +185,3 @@ html {
     }
   }
 }
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-  h1 {
-    @apply text-2xl font-bold;
-  }
-  h2 {
-    @apply text-xl font-bold;
-  }
-  h3 {
-    @apply text-lg font-bold;
-  }
-}

package/dist/lib/components/gradient/Gradient.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { WebGlShader } from 'svader';
+  import { WebGlShader } from '../shader/index.js';
   import type { Vec2, Vec4 } from '../../utils/glsl.js';
   import fragment from './gradient.frag?raw';
   import { cn } from '../../utils';

package/dist/lib/components/shader/BaseShader.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">
+  import { onDestroy, onMount } from 'svelte';
+  import type { Snippet } from 'svelte';
+
+  import { pixelScale, clamp } from './utils.js';
+  import { intersectionObserver } from './intersectionObserver.js';
+  import { devicePixelResizeObserver, type DevicePixelResizeEvent } from './devicePixelResizeObserver.js';
+
+  type Props = {
+    width?: string;
+    height?: string;
+    canRender: boolean;
+    maxSize: number;
+    render: () => void | Promise<void>;
+    rerenderEveryFrame: boolean;
+    forceAnimation: boolean;
+    offsetFromBottom?: boolean;
+    updateCanvasSize?: (canvasWidth: number, canvasHeight: number) => void | Promise<void>;
+    updateContainerSize: (containerWidth: number, containerHeight: number) => void | Promise<void>;
+    updateOffset: (offsetX: number, offsetY: number) => void | Promise<void>;
+    updateScale: (scale: number) => void | Promise<void>;
+    updateTime: (time: number) => void | Promise<void>;
+    canvasElement: HTMLCanvasElement | null;
+    requestRender: () => void;
+    children?: Snippet;
+  };
+
+  let {
+    width,
+    height,
+    canRender,
+    maxSize,
+    render,
+    rerenderEveryFrame,
+    forceAnimation,
+    offsetFromBottom = false,
+    updateCanvasSize = () => {},
+    updateContainerSize,
+    updateOffset,
+    updateScale,
+    updateTime,
+    canvasElement = $bindable(),
+    requestRender = $bindable(),
+    children
+  }: Props = $props();
+
+  function prefersReducedMotion() {
+    if (typeof window === 'undefined') return false;
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  }
+
+  const shouldRerenderEveryFrame = $derived(forceAnimation || !prefersReducedMotion() ? rerenderEveryFrame : false);
+
+  let mountTime = 0;
+  onMount(() => {
+    mountTime = performance.now() / 1000;
+  });
+
+  let containerElement = $state<HTMLElement | null>(null);
+
+  let requestHandle: number | null = null;
+  const renderCallbacks: Array<() => void> = [];
+
+  requestRender = () => {
+    if (!canRender) return;
+    if (requestHandle !== null) return;
+
+    requestHandle = requestAnimationFrame(() => {
+      renderCallbacks.forEach((callback) => callback());
+      renderCallbacks.length = 0;
+
+      if (shouldRerenderEveryFrame) updateTime(performance.now() / 1000 - mountTime);
+
+      render();
+
+      requestHandle = null;
+
+      if (shouldRerenderEveryFrame) requestRender();
+    });
+  };
+
+  function cancelRender() {
+    if (requestHandle !== null) {
+      cancelAnimationFrame(requestHandle);
+      requestHandle = null;
+    }
+  }
+
+  function updateCanvasSizeInner(event: DevicePixelResizeEvent) {
+    if (!canvasElement) return;
+    const nextCanvasElement = canvasElement;
+
+    // Resizing must happen right before the next render pass.
+    renderCallbacks.push(() => {
+      const canvasWidth = event.detail.width;
+      const canvasHeight = event.detail.height;
+
+      nextCanvasElement.width = canvasWidth;
+      nextCanvasElement.height = canvasHeight;
+
+      updateCanvasSize(canvasWidth, canvasHeight);
+    });
+
+    requestRender();
+  }
+
+  function updateContainerSizeInner(event: DevicePixelResizeEvent) {
+    const canvasWidth = event.detail.width;
+    const canvasHeight = event.detail.height;
+
+    updateContainerSize(canvasWidth, canvasHeight);
+  }
+
+  let offsetX = $state(0);
+  let offsetY = $state(0);
+
+  $effect(() => {
+    updateOffset(offsetX, offsetY);
+  });
+
+  $effect(() => {
+    updateScale($pixelScale);
+  });
+
+  function updateCanvasCutout() {
+    if (!containerElement || !canvasElement) return;
+
+    const containerRect = containerElement.getBoundingClientRect();
+
+    const windowSizeX = window.innerWidth;
+    const canvasSizeX = canvasElement.offsetWidth;
+    const containerSizeX = containerElement.offsetWidth;
+    const containerOvershootX = -containerRect.left;
+    offsetX =
+      clamp(0, containerOvershootX - (canvasSizeX - windowSizeX) / 2, containerSizeX - canvasSizeX) * $pixelScale;
+
+    const windowSizeY = window.innerHeight;
+    const canvasSizeY = canvasElement.offsetHeight;
+    const containerSizeY = containerElement.offsetHeight;
+    const containerOvershootY = offsetFromBottom
+      ? containerRect.top + containerSizeY - windowSizeY
+      : -containerRect.top;
+    offsetY =
+      clamp(0, containerOvershootY - (canvasSizeY - windowSizeY) / 2, containerSizeY - canvasSizeY) * $pixelScale;
+  }
+
+  onDestroy(cancelRender);
+</script>
+
+{#if canRender}
+  <div
+    bind:this={containerElement}
+    use:devicePixelResizeObserver
+    ondevicepixelresize={updateContainerSizeInner}
+    use:intersectionObserver
+    onintersectionchanged={updateCanvasCutout}
+    style:--width={width}
+    style:--height={height}
+  >
+    <canvas
+      bind:this={canvasElement}
+      use:devicePixelResizeObserver
+      ondevicepixelresize={updateCanvasSizeInner}
+      use:intersectionObserver={{ rootMargin: '100px' }}
+      onintersectionchanged={updateCanvasCutout}
+      class:offset-from-bottom={offsetFromBottom}
+      style:--max-size="{maxSize / $pixelScale}px"
+      style:--offset-x="{offsetX / $pixelScale}px"
+      style:--offset-y="{offsetY / $pixelScale}px"
+    >
+      {@render children?.()}
+    </canvas>
+  </div>
+{:else}
+  {@render children?.()}
+{/if}
+
+<style>
+  div {
+    position: relative;
+    width: var(--width, 100%);
+    height: var(--height, 100%);
+  }
+
+  canvas {
+    /* Fix bottom spacing */
+    display: block;
+
+    width: 100%;
+    height: 100%;
+    max-width: var(--max-size);
+    max-height: var(--max-size);
+
+    position: absolute;
+    left: var(--offset-x);
+
+    top: var(--offset-y);
+  }
+
+  canvas.offset-from-bottom {
+    top: unset;
+    bottom: var(--offset-y);
+  }
+</style>

package/dist/lib/components/shader/BaseShader.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    width?: string;
+    height?: string;
+    canRender: boolean;
+    maxSize: number;
+    render: () => void | Promise<void>;
+    rerenderEveryFrame: boolean;
+    forceAnimation: boolean;
+    offsetFromBottom?: boolean;
+    updateCanvasSize?: (canvasWidth: number, canvasHeight: number) => void | Promise<void>;
+    updateContainerSize: (containerWidth: number, containerHeight: number) => void | Promise<void>;
+    updateOffset: (offsetX: number, offsetY: number) => void | Promise<void>;
+    updateScale: (scale: number) => void | Promise<void>;
+    updateTime: (time: number) => void | Promise<void>;
+    canvasElement: HTMLCanvasElement | null;
+    requestRender: () => void;
+    children?: Snippet;
+};
+declare const BaseShader: import("svelte").Component<Props, {}, "canvasElement" | "requestRender">;
+type BaseShader = ReturnType<typeof BaseShader>;
+export default BaseShader;
+//# sourceMappingURL=BaseShader.svelte.d.ts.map

package/dist/lib/components/shader/BaseShader.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseShader.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/shader/BaseShader.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOpC,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACnC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvF,mBAAmB,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/F,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzE,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrD,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACnD,aAAa,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACxC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAkJJ,QAAA,MAAM,UAAU,0EAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/lib/components/shader/WebGlShader.svelte

@@ -0,0 +1,259 @@
+<script module lang="ts">
+  export type { BuiltinValue, BuiltinParameter, NonBuiltinParameter, WebGlParameter as Parameter } from './types.js';
+</script>
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import type { Snippet } from 'svelte';
+
+  import BaseShader from './BaseShader.svelte';
+  import type { BuiltinParameter, WebGlParameter as Parameter } from './types.js';
+  import { isBuiltinValue } from './types.js';
+
+  type Props = {
+    width?: string;
+    height?: string;
+    code: string | Promise<string>;
+    parameters?: readonly Parameter[];
+    forceAnimation?: boolean;
+    children?: Snippet;
+  };
+
+  let {
+    width = undefined,
+    height = undefined,
+    code,
+    parameters = [],
+    forceAnimation = false,
+    children
+  }: Props = $props();
+
+  const rerenderEveryFrame = $derived(parameters.some((parameter) => parameter.value === 'time'));
+
+  const maxTextureSize = 4096;
+
+  let requestRender = $state<() => void>(() => {});
+  let canvasElement = $state<HTMLCanvasElement | null>(null);
+
+  let canRender = $state(typeof WebGL2RenderingContext !== 'undefined');
+
+  type Config = {
+    gl: WebGL2RenderingContext;
+    shaderProgram: WebGLProgram;
+  };
+
+  const configPromise = new Promise<Config>((resolve) =>
+    onMount(async () => {
+      try {
+        if (!canRender) return;
+
+        if (canvasElement === null) return;
+        const gl = canvasElement.getContext('webgl2');
+        if (gl === null) throw new Error('Failed to get WebGL2 context.');
+        const shaderProgram = gl.createProgram();
+        if (shaderProgram === null) throw new Error('Failed to create WebGL shader program.');
+
+        const loadShader = (source: string, type: number) => {
+          const shader = gl.createShader(type);
+          if (shader === null) throw new Error('Failed to create texture.');
+          gl.shaderSource(shader, source);
+          gl.compileShader(shader);
+
+          if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
+            throw new Error(`An error occurred compiling the shaders: ${gl.getShaderInfoLog(shader)}`);
+
+          gl.attachShader(shaderProgram, shader);
+        };
+
+        // Simple identity function
+        const vertexShaderSource = `#version 300 es
+          in vec4 pos;
+          void main() {
+              gl_Position = pos;
+          }
+        `;
+        loadShader(vertexShaderSource, gl.VERTEX_SHADER);
+        loadShader(await code, gl.FRAGMENT_SHADER);
+
+        gl.linkProgram(shaderProgram);
+        gl.useProgram(shaderProgram);
+
+        // Create a rectangle covering the canvas
+        const vertexAttributePosition = gl.getAttribLocation(shaderProgram, 'pos');
+        const positionBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+        const positions = [1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, -1.0];
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
+        const numComponents = 2;
+        const type = gl.FLOAT;
+        const normalize = false;
+        const stride = 0;
+        const offset = 0;
+        gl.vertexAttribPointer(vertexAttributePosition, numComponents, type, normalize, stride, offset);
+        gl.enableVertexAttribArray(vertexAttributePosition);
+
+        resolve({ gl, shaderProgram });
+      } catch (error) {
+        console.warn(error);
+        canRender = false;
+      }
+    })
+  );
+
+  async function render() {
+    const { gl } = await configPromise;
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+  }
+
+  async function updateCanvasSize(canvasWidth: number, canvasHeight: number) {
+    const { gl } = await configPromise;
+    gl.viewport(0, 0, canvasWidth, canvasHeight);
+  }
+
+  async function updateContainerSize(containerWidth: number, containerHeight: number) {
+    const { gl, shaderProgram } = await configPromise;
+
+    const resolutionParam = parameters.find(
+      (parameter): parameter is BuiltinParameter => parameter.value === 'resolution'
+    );
+    if (resolutionParam !== undefined) {
+      const uniformPosition = gl.getUniformLocation(shaderProgram, resolutionParam.name);
+      gl.uniform2fv(uniformPosition, [containerWidth, containerHeight]);
+
+      // If the resolution is not passed to the shader, rerendering cannot change the output.
+      requestRender();
+    }
+  }
+
+  async function updateOffset(offsetX: number, offsetY: number) {
+    const { gl, shaderProgram } = await configPromise;
+
+    const offsetParam = parameters.find((parameter): parameter is BuiltinParameter => parameter.value === 'offset');
+    if (offsetParam !== undefined) {
+      const uniformPosition = gl.getUniformLocation(shaderProgram, offsetParam.name);
+      gl.uniform2fv(uniformPosition, [offsetX, offsetY]);
+
+      // If the offset is not passed to the shader, rerendering cannot change the output.
+      requestRender();
+    }
+  }
+
+  async function updateScale(scale: number) {
+    const { gl, shaderProgram } = await configPromise;
+
+    const scaleParam = parameters.find((parameter): parameter is BuiltinParameter => parameter.value === 'scale');
+    if (scaleParam !== undefined) {
+      const uniformPosition = gl.getUniformLocation(shaderProgram, scaleParam.name);
+      gl.uniform1f(uniformPosition, scale);
+
+      // If the scale is not passed to the shader, rerendering cannot change the output.
+      requestRender();
+    }
+  }
+
+  async function updateTime(time: number) {
+    const { gl, shaderProgram } = await configPromise;
+
+    const timeParam = parameters.find((parameter): parameter is BuiltinParameter => parameter.value === 'time');
+    if (timeParam !== undefined) {
+      const uniformPosition = gl.getUniformLocation(shaderProgram, timeParam.name);
+      gl.uniform1f(uniformPosition, time);
+    }
+  }
+
+  function isBuiltinParameter(parameter: Parameter): parameter is BuiltinParameter {
+    const shouldBeBuiltin = typeof parameter.value === 'string';
+    if (!shouldBeBuiltin) return false;
+
+    if (isBuiltinValue(parameter.value)) return true;
+
+    throw new Error(`Unknown built-in value: ${parameter.value}`);
+  }
+
+  async function updateParameters(nextParameters: readonly Parameter[]) {
+    const { gl, shaderProgram } = await configPromise;
+
+    for (const parameter of nextParameters) {
+      if (parameter.value === undefined) throw new Error('One or more parameters had an undefined value field.');
+
+      if (!isBuiltinParameter(parameter)) {
+        const uniformPosition = gl.getUniformLocation(shaderProgram, parameter.name);
+        switch (parameter.type) {
+          case 'float':
+            gl.uniform1f(uniformPosition, parameter.value);
+            break;
+          case 'vec2':
+            gl.uniform2fv(uniformPosition, parameter.value);
+            break;
+          case 'vec3':
+            gl.uniform3fv(uniformPosition, parameter.value);
+            break;
+          case 'vec4':
+            gl.uniform4fv(uniformPosition, parameter.value);
+            break;
+          case 'int':
+            gl.uniform1i(uniformPosition, parameter.value);
+            break;
+          case 'ivec2':
+            gl.uniform2iv(uniformPosition, parameter.value);
+            break;
+          case 'ivec3':
+            gl.uniform3iv(uniformPosition, parameter.value);
+            break;
+          case 'ivec4':
+            gl.uniform4iv(uniformPosition, parameter.value);
+            break;
+          case 'uint':
+            gl.uniform1ui(uniformPosition, parameter.value);
+            break;
+          case 'uvec2':
+            gl.uniform2uiv(uniformPosition, parameter.value);
+            break;
+          case 'uvec3':
+            gl.uniform3uiv(uniformPosition, parameter.value);
+            break;
+          case 'uvec4':
+            gl.uniform4uiv(uniformPosition, parameter.value);
+            break;
+          case 'mat2':
+            gl.uniformMatrix2fv(uniformPosition, false, parameter.value);
+            break;
+          case 'mat3':
+            gl.uniformMatrix3fv(uniformPosition, false, parameter.value);
+            break;
+          case 'mat4':
+            gl.uniformMatrix4fv(uniformPosition, false, parameter.value);
+            break;
+          default:
+            throw new Error(`Unknown parameter type: ${(parameter as { type: string }).type}`);
+        }
+      }
+    }
+
+    requestRender();
+  }
+
+  $effect(() => {
+    updateParameters(parameters);
+  });
+</script>
+
+<BaseShader
+  {width}
+  {height}
+  {canRender}
+  maxSize={maxTextureSize}
+  offsetFromBottom
+  {rerenderEveryFrame}
+  {forceAnimation}
+  {render}
+  {updateCanvasSize}
+  {updateContainerSize}
+  {updateOffset}
+  {updateScale}
+  {updateTime}
+  bind:canvasElement
+  bind:requestRender
+>
+  {@render children?.()}
+</BaseShader>

package/dist/lib/components/shader/WebGlShader.svelte.d.ts

@@ -0,0 +1,15 @@
+export type { BuiltinValue, BuiltinParameter, NonBuiltinParameter, WebGlParameter as Parameter } from './types.js';
+import type { Snippet } from 'svelte';
+import type { WebGlParameter as Parameter } from './types.js';
+type Props = {
+    width?: string;
+    height?: string;
+    code: string | Promise<string>;
+    parameters?: readonly Parameter[];
+    forceAnimation?: boolean;
+    children?: Snippet;
+};
+declare const WebGlShader: import("svelte").Component<Props, {}, "">;
+type WebGlShader = ReturnType<typeof WebGlShader>;
+export default WebGlShader;
+//# sourceMappingURL=WebGlShader.svelte.d.ts.map

package/dist/lib/components/shader/WebGlShader.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebGlShader.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/shader/WebGlShader.svelte.ts"],"names":[],"mappings":"AAGE,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,cAAc,IAAI,SAAS,EAAE,MAAM,YAAY,CAAC;AAIrH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,OAAO,KAAK,EAAoB,cAAc,IAAI,SAAS,EAAE,MAAM,YAAY,CAAC;AAI9E,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IAC/B,UAAU,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;IAClC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA8OJ,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}