@bigmistqke/view.gl 0.1.6 → 0.1.8

package/test/tag.test.ts

@@ -1,4 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { toID } from '../src'
 import { attribute, compile, glsl, interleave, uniform } from '../src/tag'
 import type { GL } from '../src/types'
 import { createMockGL } from './mocks/webgl'
@@ -628,13 +629,15 @@ void main() { gl_FragColor = vec4(0.5); }`
 
     compile(gl, glsl``, fragment)
 
-    // Check that shaderSource was called with symbol aliases in template
+    const colorAlias = toID(color_symbol)
+
+    // Check that shaderSource was called with exact symbol alias
     const fragmentShaderSource = (gl.shaderSource as any).mock.calls.find(
-      (call: any[]) => call[1].includes('vec3') && call[1].includes('VIEW_GL_ALIAS_')
+      (call: any[]) => call[1].includes(`vec3 ${colorAlias}`)
     )?.[1]
 
-    expect(fragmentShaderSource).toMatch(/vec3 VIEW_GL_ALIAS_\d+ = vec3/)
-    expect(fragmentShaderSource).toMatch(/vec4\(VIEW_GL_ALIAS_\d+, 1\.0\)/)
+    expect(fragmentShaderSource).toContain(`vec3 ${colorAlias} = vec3(1.0, 0.0, 0.0);`)
+    expect(fragmentShaderSource).toContain(`gl_FragColor = vec4(${colorAlias}, 1.0);`)
   })
 })
 
@@ -914,84 +917,6 @@ describe('glsl composition', () => {
   })
 })
 
-describe('compile with symbols', () => {
-  let gl: GL
-  let mockProgram: WebGLProgram
-
-  beforeEach(() => {
-    gl = createMockGL()
-    mockProgram = gl.createProgram()!
-
-    // Mock shader creation and compilation
-    gl.createShader = vi.fn(type => ({ type } as WebGLShader))
-    gl.shaderSource = vi.fn()
-    gl.compileShader = vi.fn()
-    gl.getShaderParameter = vi.fn(() => true)
-    gl.attachShader = vi.fn()
-    gl.linkProgram = vi.fn()
-    gl.getProgramParameter = vi.fn(() => true)
-    gl.createProgram = vi.fn(() => mockProgram)
-  })
-
-  it('should compile shaders with symbol keys', () => {
-    const u_time_symbol = Symbol('u_time')
-    const a_position_symbol = Symbol('a_position')
-
-    const vertex = glsl`
-      ${attribute.vec2(a_position_symbol)}
-      ${uniform.float(u_time_symbol)}
-      
-      void main() {
-        gl_Position = vec4(${a_position_symbol}, 0.0, 1.0);
-      }`
-
-    const fragment = glsl`
-      precision mediump float;
-      
-      ${uniform.float(u_time_symbol)}
-      
-      void main() {
-        gl_FragColor = vec4(${u_time_symbol}, 0.0, 0.0, 1.0);
-      }`
-
-    const { program, schema } = compile(gl, vertex, fragment)
-
-    expect(program).toBe(mockProgram)
-    expect(schema.uniforms[u_time_symbol]).toEqual({ kind: 'float' })
-    expect(schema.attributes[a_position_symbol]).toEqual({ kind: 'vec2' })
-  })
-
-  it('should merge symbols from vertex and fragment shaders', () => {
-    const u_shared_symbol = Symbol('u_shared')
-    const u_vertex_only = Symbol('u_vertex_only')
-    const u_fragment_only = Symbol('u_fragment_only')
-
-    const vertex = glsl`
-      ${uniform.float(u_shared_symbol)}
-      ${uniform.vec2(u_vertex_only)}
-      
-      void main() {
-        gl_Position = vec4(${u_vertex_only}, ${u_shared_symbol}, 1.0);
-      }`
-
-    const fragment = glsl`
-      precision mediump float;
-      
-      ${uniform.float(u_shared_symbol)}
-      ${uniform.vec3(u_fragment_only)}
-      
-      void main() {
-        gl_FragColor = vec4(${u_fragment_only}, ${u_shared_symbol});
-      }`
-
-    const { schema } = compile(gl, vertex, fragment)
-
-    expect(schema.uniforms[u_shared_symbol]).toEqual({ kind: 'float' })
-    expect(schema.uniforms[u_vertex_only]).toEqual({ kind: 'vec2' })
-    expect(schema.uniforms[u_fragment_only]).toEqual({ kind: 'vec3' })
-  })
-})
-
 describe('glsl array interpolation', () => {
   let gl: GL
 
@@ -1505,4 +1430,642 @@ describe('compile', () => {
     expect(gl.linkProgram).toHaveBeenCalled()
     expect(gl.getProgramParameter).toHaveBeenCalled()
   })
+
+  it('should compile shaders with symbol keys', () => {
+    const u_time_symbol = Symbol('u_time')
+    const a_position_symbol = Symbol('a_position')
+
+    const vertex = glsl`
+      ${attribute.vec2(a_position_symbol)}
+      ${uniform.float(u_time_symbol)}
+      
+      void main() {
+        gl_Position = vec4(${a_position_symbol}, 0.0, 1.0);
+      }`
+
+    const fragment = glsl`
+      precision mediump float;
+      
+      ${uniform.float(u_time_symbol)}
+      
+      void main() {
+        gl_FragColor = vec4(${u_time_symbol}, 0.0, 0.0, 1.0);
+      }`
+
+    const { program, schema } = compile(gl, vertex, fragment)
+
+    expect(program).toBe(mockProgram)
+    expect(schema.uniforms[u_time_symbol]).toEqual({ kind: 'float' })
+    expect(schema.attributes[a_position_symbol]).toEqual({ kind: 'vec2' })
+  })
+
+  it('should merge symbols from vertex and fragment shaders', () => {
+    const u_shared_symbol = Symbol('u_shared')
+    const u_vertex_only = Symbol('u_vertex_only')
+    const u_fragment_only = Symbol('u_fragment_only')
+
+    const vertex = glsl`
+      ${uniform.float(u_shared_symbol)}
+      ${uniform.vec2(u_vertex_only)}
+      
+      void main() {
+        gl_Position = vec4(${u_vertex_only}, ${u_shared_symbol}, 1.0);
+      }`
+
+    const fragment = glsl`
+      precision mediump float;
+      
+      ${uniform.float(u_shared_symbol)}
+      ${uniform.vec3(u_fragment_only)}
+      
+      void main() {
+        gl_FragColor = vec4(${u_fragment_only}, ${u_shared_symbol});
+      }`
+
+    const { schema } = compile(gl, vertex, fragment)
+
+    expect(schema.uniforms[u_shared_symbol]).toEqual({ kind: 'float' })
+    expect(schema.uniforms[u_vertex_only]).toEqual({ kind: 'vec2' })
+    expect(schema.uniforms[u_fragment_only]).toEqual({ kind: 'vec3' })
+  })
+
+  it('should return compiled vertex and fragment shader strings', () => {
+    const vertex = glsl`
+      ${attribute.vec2('a_position')}
+      ${uniform.mat4('u_mvpMatrix')}
+      
+      void main() {
+        gl_Position = u_mvpMatrix * vec4(a_position, 0.0, 1.0);
+      }
+    `
+
+    const fragment = glsl`
+      precision mediump float;
+      ${uniform.vec4('u_color')}
+      
+      void main() {
+        gl_FragColor = u_color;
+      }
+    `
+
+    const result = compile(gl, vertex, fragment)
+
+    // Check vertex shader string
+    expect(result.vertex).toContain('attribute vec2 a_position;')
+    expect(result.vertex).toContain('uniform mat4 u_mvpMatrix;')
+    expect(result.vertex).toContain('gl_Position = u_mvpMatrix * vec4(a_position, 0.0, 1.0);')
+
+    // Check fragment shader string
+    expect(result.fragment).toContain('precision mediump float;')
+    expect(result.fragment).toContain('uniform vec4 u_color;')
+    expect(result.fragment).toContain('gl_FragColor = u_color;')
+  })
+
+  it('should return WebGL2 shader strings with proper syntax', () => {
+    const vertex = glsl`#version 300 es
+      ${attribute.vec3('a_position')}
+      ${attribute.vec3('a_normal')}
+      out vec3 v_normal;
+      
+      void main() {
+        v_normal = a_normal;
+        gl_Position = vec4(a_position, 1.0);
+      }
+    `
+
+    const fragment = glsl`#version 300 es
+      precision mediump float;
+      ${uniform.vec3('u_lightDir')}
+      in vec3 v_normal;
+      out vec4 fragColor;
+      
+      void main() {
+        float light = dot(v_normal, u_lightDir);
+        fragColor = vec4(vec3(light), 1.0);
+      }
+    `
+
+    const result = compile(gl, vertex, fragment)
+
+    // Check vertex uses 'in' for attributes in WebGL2
+    expect(result.vertex).toContain('in vec3 a_position;')
+    expect(result.vertex).toContain('in vec3 a_normal;')
+    expect(result.vertex).toContain('out vec3 v_normal;')
+
+    // Check fragment shader WebGL2 syntax
+    expect(result.fragment).toContain('#version 300 es')
+    expect(result.fragment).toContain('in vec3 v_normal;')
+    expect(result.fragment).toContain('out vec4 fragColor;')
+  })
+
+  it('should return shader strings with resolved symbols', () => {
+    const u_time_symbol = Symbol('u_time')
+    const a_pos_symbol = Symbol('a_position')
+
+    const vertex = glsl`
+      ${attribute.vec3(a_pos_symbol)}
+      ${uniform.float(u_time_symbol)}
+      
+      void main() {
+        gl_Position = vec4(${a_pos_symbol}, ${u_time_symbol});
+      }
+    `
+
+    const fragment = glsl`
+      precision mediump float;
+      ${uniform.float(u_time_symbol)}
+      
+      void main() {
+        gl_FragColor = vec4(${u_time_symbol});
+      }
+    `
+
+    const result = compile(gl, vertex, fragment)
+
+    // Get exact symbol aliases
+    const posAlias = toID(a_pos_symbol)
+    const timeAlias = toID(u_time_symbol)
+
+    // Check vertex shader contains expected exact strings
+    expect(result.vertex).toContain(`attribute vec3 ${posAlias};`)
+    expect(result.vertex).toContain(`uniform float ${timeAlias};`)
+    expect(result.vertex).toContain(`gl_Position = vec4(${posAlias}, ${timeAlias});`)
+
+    // Check fragment shader contains expected exact strings
+    expect(result.fragment).toContain(`uniform float ${timeAlias};`)
+    expect(result.fragment).toContain(`gl_FragColor = vec4(${timeAlias});`)
+    expect(result.fragment).toContain('precision mediump float;')
+  })
+
+  it('should return shader strings with interleaved attributes', () => {
+    const vertex = glsl`
+      ${interleave('vertexData', [
+        attribute.vec3('a_position'),
+        attribute.vec2('a_uv'),
+        attribute.vec3('a_normal')
+      ])}
+      
+      void main() {
+        gl_Position = vec4(a_position + a_normal, 0.0, 1.0);
+      }
+    `
+
+    const fragment = glsl`
+      precision mediump float;
+      
+      void main() {
+        gl_FragColor = vec4(1.0);
+      }
+    `
+
+    const result = compile(gl, vertex, fragment)
+
+    // Check all interleaved attributes are expanded in vertex shader
+    expect(result.vertex).toContain('attribute vec3 a_position;')
+    expect(result.vertex).toContain('attribute vec2 a_uv;')
+    expect(result.vertex).toContain('attribute vec3 a_normal;')
+    expect(result.vertex).toContain('gl_Position = vec4(a_position + a_normal, 0.0, 1.0);')
+
+    // Fragment shader should be returned as-is
+    expect(result.fragment).toContain('precision mediump float;')
+    expect(result.fragment).toContain('gl_FragColor = vec4(1.0);')
+  })
+
+  it('should return shader strings with composed GLSL fragments', () => {
+    const sharedUniforms = glsl`
+      ${uniform.float('u_time')}
+      ${uniform.vec2('u_resolution')}
+    `
+
+    const utils = glsl`
+      float rand(vec2 co) {
+        return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);
+      }
+    `
+
+    const vertex = glsl`
+      ${sharedUniforms}
+      ${attribute.vec2('a_position')}
+      
+      void main() {
+        gl_Position = vec4(a_position * u_resolution, 0.0, 1.0);
+      }
+    `
+
+    const fragment = glsl`
+      precision mediump float;
+      ${sharedUniforms}
+      ${utils}
+      
+      void main() {
+        float r = rand(gl_FragCoord.xy * u_time);
+        gl_FragColor = vec4(r);
+      }
+    `
+
+    const result = compile(gl, vertex, fragment)
+
+    // Check vertex shader includes composed uniforms
+    expect(result.vertex).toContain('uniform float u_time;')
+    expect(result.vertex).toContain('uniform vec2 u_resolution;')
+    expect(result.vertex).toContain('attribute vec2 a_position;')
+
+    // Check fragment shader includes both uniforms and utils
+    expect(result.fragment).toContain('uniform float u_time;')
+    expect(result.fragment).toContain('uniform vec2 u_resolution;')
+    expect(result.fragment).toContain('float rand(vec2 co)')
+    expect(result.fragment).toContain('return fract(sin(dot(co.xy')
+  })
+
+  it('should return shader strings with array interpolations', () => {
+    const vertex = glsl`
+      ${[
+        uniform.mat4('u_model'),
+        uniform.mat4('u_view'),
+        uniform.mat4('u_projection')
+      ]}
+      ${[attribute.vec3('a_position'), attribute.vec3('a_normal')]}
+      
+      void main() {
+        gl_Position = u_projection * u_view * u_model * vec4(a_position, 1.0);
+      }
+    `
+
+    const fragment = glsl`
+      precision mediump float;
+      ${[uniform.vec3('u_color'), uniform.float('u_alpha')]}
+      
+      void main() {
+        gl_FragColor = vec4(u_color, u_alpha);
+      }
+    `
+
+    const result = compile(gl, vertex, fragment)
+
+    // Check vertex shader has all uniforms and attributes from arrays
+    expect(result.vertex).toContain('uniform mat4 u_model;')
+    expect(result.vertex).toContain('uniform mat4 u_view;')
+    expect(result.vertex).toContain('uniform mat4 u_projection;')
+    expect(result.vertex).toContain('attribute vec3 a_position;')
+    expect(result.vertex).toContain('attribute vec3 a_normal;')
+
+    // Check fragment shader
+    expect(result.fragment).toContain('uniform vec3 u_color;')
+    expect(result.fragment).toContain('uniform float u_alpha;')
+  })
+})
+
+describe('compile.toString', () => {
+  it('should convert glsl tag to shader string', () => {
+    const shader = glsl`
+      ${uniform.float('u_time')}
+      ${attribute.vec2('a_position')}
+      
+      void main() {
+        gl_Position = vec4(a_position, 0.0, 1.0);
+      }`
+
+    const result = compile.toString(shader)
+
+    expect(result).toContain('uniform float u_time;')
+    expect(result).toContain('attribute vec2 a_position;')
+    expect(result).toContain('void main() {')
+    expect(result).toContain('gl_Position = vec4(a_position, 0.0, 1.0);')
+  })
+
+  it('should handle WebGL2 syntax', () => {
+    const shader = glsl`#version 300 es
+      ${uniform.float('u_time')}
+      ${attribute.vec3('a_position')}
+      
+      void main() {
+        gl_Position = vec4(a_position, 1.0);
+      }`
+
+    const result = compile.toString(shader)
+
+    expect(result).toContain('#version 300 es')
+    expect(result).toContain('uniform float u_time;')
+    expect(result).toContain('in vec3 a_position;')
+  })
+
+  it('should handle arrays', () => {
+    const shader = glsl`
+      ${uniform.vec3('u_palette', { size: 5 })}
+      
+      void main() {
+        gl_FragColor = vec4(u_palette[0], 1.0);
+      }`
+
+    const result = compile.toString(shader)
+
+    expect(result).toContain('uniform vec3 u_palette[5];')
+  })
+
+  it('should handle symbols', () => {
+    const u_time_symbol = Symbol('u_time')
+    const shader = glsl`
+      ${uniform.float(u_time_symbol)}
+      
+      void main() {
+        gl_FragColor = vec4(${u_time_symbol});
+      }`
+
+    const result = compile.toString(shader)
+    const timeAlias = toID(u_time_symbol)
+
+    expect(result).toContain(`uniform float ${timeAlias};`)
+    expect(result).toContain(`gl_FragColor = vec4(${timeAlias});`)
+  })
+
+  it('should handle interleaved attributes', () => {
+    const shader = glsl`
+      ${interleave('vertexData', [
+        attribute.vec2('a_position'),
+        attribute.vec4('a_color')
+      ])}
+      
+      void main() {
+        gl_Position = vec4(a_position, 0.0, 1.0);
+      }`
+
+    const result = compile.toString(shader)
+
+    expect(result).toContain('attribute vec2 a_position;')
+    expect(result).toContain('attribute vec4 a_color;')
+  })
+
+  it('should handle nested glsl tags', () => {
+    const uniforms = glsl`${uniform.float('u_time')}`
+    const shader = glsl`
+      ${uniforms}
+      ${attribute.vec2('a_position')}
+      
+      void main() {
+        gl_Position = vec4(a_position, u_time, 0.0, 1.0);
+      }`
+
+    const result = compile.toString(shader)
+
+    expect(result).toContain('uniform float u_time;')
+    expect(result).toContain('attribute vec2 a_position;')
+  })
+
+  it('should handle arrays of resources', () => {
+    const shader = glsl`
+      ${[uniform.float('u_time'), uniform.vec2('u_resolution')]}
+      
+      void main() {
+        gl_Position = vec4(u_resolution * u_time, 0.0, 1.0);
+      }`
+
+    const result = compile.toString(shader)
+
+    expect(result).toContain('uniform float u_time;')
+    expect(result).toContain('uniform vec2 u_resolution;')
+  })
+
+  it('should handle string interpolations', () => {
+    const maxLights = 4
+    const shader = glsl`
+      #define MAX_LIGHTS ${maxLights}
+      ${uniform.float('u_time')}
+      
+      void main() {
+        gl_Position = vec4(1.0);
+      }`
+
+    const result = compile.toString(shader)
+
+    expect(result).toContain('#define MAX_LIGHTS 4')
+    expect(result).toContain('uniform float u_time;')
+  })
+})
+
+describe('compile.toSchema', () => {
+  it('should extract schema from glsl tag', () => {
+    const shader = glsl`
+      ${uniform.float('u_time')}
+      ${uniform.vec3('u_color')}
+      ${attribute.vec2('a_position')}
+      
+      void main() {
+        gl_Position = vec4(a_position, 0.0, 1.0);
+      }`
+
+    const schema = compile.toSchema(shader)
+
+    expect(schema).toEqual({
+      uniforms: {
+        u_time: { kind: 'float' },
+        u_color: { kind: 'vec3' }
+      },
+      attributes: {
+        a_position: { kind: 'vec2' }
+      },
+      interleavedAttributes: {}
+    })
+  })
+
+  it('should handle arrays', () => {
+    const shader = glsl`
+      ${uniform.vec3('u_palette', { size: 5 })}
+      ${uniform.mat4('u_matrices', { size: 10 })}
+      
+      void main() {}`
+
+    const schema = compile.toSchema(shader)
+
+    expect(schema).toEqual({
+      uniforms: {
+        u_palette: { kind: 'vec3', size: 5 },
+        u_matrices: { kind: 'mat4', size: 10 }
+      },
+      attributes: {},
+      interleavedAttributes: {}
+    })
+  })
+
+  it('should handle symbols', () => {
+    const u_time_symbol = Symbol('u_time')
+    const a_pos_symbol = Symbol('a_position')
+    
+    const shader = glsl`
+      ${uniform.float(u_time_symbol)}
+      ${attribute.vec3(a_pos_symbol)}
+      
+      void main() {}`
+
+    const schema = compile.toSchema(shader)
+
+    expect(schema).toEqual({
+      uniforms: {
+        [u_time_symbol]: { kind: 'float' }
+      },
+      attributes: {
+        [a_pos_symbol]: { kind: 'vec3' }
+      },
+      interleavedAttributes: {}
+    })
+  })
+
+  it('should handle interleaved attributes', () => {
+    const shader = glsl`
+      ${interleave('vertexData', [
+        attribute.vec2('a_position'),
+        attribute.vec4('a_color')
+      ])}
+      ${interleave('instanceData', [
+        attribute.vec3('a_instancePos'),
+        attribute.float('a_instanceScale')
+      ], { instanced: true })}
+      
+      void main() {}`
+
+    const schema = compile.toSchema(shader)
+
+    expect(schema).toEqual({
+      uniforms: {},
+      attributes: {},
+      interleavedAttributes: {
+        vertexData: {
+          layout: [
+            { key: 'a_position', kind: 'vec2' },
+            { key: 'a_color', kind: 'vec4' }
+          ],
+          instanced: false
+        },
+        instanceData: {
+          layout: [
+            { key: 'a_instancePos', kind: 'vec3' },
+            { key: 'a_instanceScale', kind: 'float' }
+          ],
+          instanced: true
+        }
+      }
+    })
+  })
+
+  it('should handle nested glsl tags', () => {
+    const uniforms = glsl`
+      ${uniform.float('u_time')}
+      ${uniform.vec2('u_resolution')}
+    `
+    
+    const lighting = glsl`
+      ${uniform.vec3('u_lightPos')}
+      ${uniform.vec3('u_lightColor')}
+    `
+    
+    const shader = glsl`
+      ${uniforms}
+      ${lighting}
+      ${attribute.vec3('a_position')}
+      
+      void main() {}`
+
+    const schema = compile.toSchema(shader)
+
+    expect(schema).toEqual({
+      uniforms: {
+        u_time: { kind: 'float' },
+        u_resolution: { kind: 'vec2' },
+        u_lightPos: { kind: 'vec3' },
+        u_lightColor: { kind: 'vec3' }
+      },
+      attributes: {
+        a_position: { kind: 'vec3' }
+      },
+      interleavedAttributes: {}
+    })
+  })
+
+  it('should handle arrays of resources', () => {
+    const shader = glsl`
+      ${[
+        uniform.float('u_time'),
+        uniform.vec2('u_resolution'),
+        attribute.vec3('a_position')
+      ]}
+      ${[
+        interleave('data', [
+          attribute.vec2('a_uv')
+        ])
+      ]}
+      
+      void main() {}`
+
+    const schema = compile.toSchema(shader)
+
+    expect(schema).toEqual({
+      uniforms: {
+        u_time: { kind: 'float' },
+        u_resolution: { kind: 'vec2' }
+      },
+      attributes: {
+        a_position: { kind: 'vec3' }
+      },
+      interleavedAttributes: {
+        data: {
+          layout: [
+            { key: 'a_uv', kind: 'vec2' }
+          ],
+          instanced: false
+        }
+      }
+    })
+  })
+
+  it('should ignore non-resource interpolations', () => {
+    const shader = glsl`
+      ${'// Comment'}
+      ${42}
+      ${uniform.float('u_time')}
+      ${'precision highp float;'}
+      
+      void main() {}`
+
+    const schema = compile.toSchema(shader)
+
+    expect(schema).toEqual({
+      uniforms: {
+        u_time: { kind: 'float' }
+      },
+      attributes: {},
+      interleavedAttributes: {}
+    })
+  })
+
+  it('should handle empty glsl tag', () => {
+    const shader = glsl`void main() {}`
+
+    const schema = compile.toSchema(shader)
+
+    expect(schema).toEqual({
+      uniforms: {},
+      attributes: {},
+      interleavedAttributes: {}
+    })
+  })
+
+  it('should handle instanced attributes', () => {
+    const shader = glsl`
+      ${attribute.vec3('a_position')}
+      ${attribute.vec4('a_color', { instanced: true })}
+      ${attribute.mat4('a_instanceMatrix', { instanced: true })}
+      
+      void main() {}`
+
+    const schema = compile.toSchema(shader)
+
+    expect(schema).toEqual({
+      uniforms: {},
+      attributes: {
+        a_position: { kind: 'vec3' },
+        a_color: { kind: 'vec4', instanced: true },
+        a_instanceMatrix: { kind: 'mat4', instanced: true }
+      },
+      interleavedAttributes: {}
+    })
+  })
 })