glre 0.31.0 → 0.33.0

package/src/index.ts

@@ -5,6 +5,7 @@ import { webgpu } from './webgpu'
 import { is } from './utils/helpers'
 import type { EventState } from 'reev'
 import type { GL } from './types'
+import { float, fract, int, iResolution, position, vec4, vertexIndex } from './node'
 export * from './node'
 export * from './types'
 export * from './utils/helpers'
@@ -30,6 +31,19 @@ export const isWebGPUSupported = () => {
 
 let iTime = performance.now()
 
+const defaultFragment = () => vec4(fract(position.xy.div(iResolution)), 0, 1)
+const defaultVertex = () =>
+        vec4(
+                float(int(vertexIndex).mod(int(2)))
+                        .mul(4)
+                        .sub(1),
+                float(int(vertexIndex).div(int(2)))
+                        .mul(4)
+                        .sub(1),
+                0,
+                1
+        )
+
 export const createGL = (props?: Partial<GL>) => {
         const gl = event<Partial<GL>>({
                 isNative: false,
@@ -46,14 +60,14 @@ export const createGL = (props?: Partial<GL>) => {
         gl.queue = createQueue()
         gl.frame = createFrame()
 
-        gl.attribute = durable((k, v, i) => gl.queue(() => gl._attribute?.(k, v, i)))
-        gl.texture = durable((k, v) => gl.queue(() => gl._texture?.(k, v)))
-        gl.uniform = durable((k, v, i) => gl.queue(() => gl._uniform?.(k, v, i)))
+        gl.attribute = durable((k, v, i) => gl.queue(() => gl._attribute?.(k, v, i)), gl)
+        gl.uniform = durable((k, v, i) => gl.queue(() => gl._uniform?.(k, v, i)), gl)
+        gl.texture = durable((k, v) => gl.queue(() => gl._texture?.(k, v)), gl)
         gl.uniform({ iResolution: gl.size, iMouse: [0, 0], iTime })
 
         gl('mount', async () => {
-                gl.vs = gl.vs || gl.vert || gl.vertex
-                gl.fs = gl.fs || gl.frag || gl.fragment
+                gl.vs = gl.vs || gl.vert || gl.vertex || defaultVertex()
+                gl.fs = gl.fs || gl.frag || gl.fragment || defaultFragment()
                 if (!isWebGPUSupported()) gl.isWebGL = true
                 if (gl.isWebGL) {
                         gl((await webgl(gl)) as GL)

package/src/node/code.ts

@@ -1,11 +1,26 @@
 import { is } from '../utils/helpers'
 import { infer } from './infer'
-import { getBluiltin, getOperator, generateDefine, formatConversions, joins } from './utils'
-import type { NodeConfig, X } from './types'
+import {
+        parseArray,
+        parseAttribHead,
+        parseConstantHead,
+        parseDeclare,
+        parseDefine,
+        parseIf,
+        parseStruct,
+        parseStructHead,
+        parseSwitch,
+        parseTexture,
+        parseVaryingHead,
+        parseUniformHead,
+} from './parse'
+import { getBluiltin, getOperator, formatConversions, safeEventCall, getEventFun, initNodeContext } from './utils'
+import type { NodeContext, NodeProxy, X } from './types'
 
-export const code = (target: X, c?: NodeConfig | null): string => {
+export const code = (target: X, c?: NodeContext | null): string => {
         if (!c) c = {}
-        if (!c.headers) c.headers = new Map()
+        initNodeContext(c)
+        if (is.arr(target)) return parseArray(target, c)
         if (is.str(target)) return target
         if (is.num(target)) {
                 const ret = `${target}`
@@ -13,103 +28,90 @@ export const code = (target: X, c?: NodeConfig | null): string => {
                 return ret + '.0'
         }
         if (is.bol(target)) return target ? 'true' : 'false'
-        if (!target) return '' // ignore if no target
+        if (!target) return ''
         const { type, props } = target
-        const { id = '', children = [] } = props
-        const [x, y, z] = children
-        /**
-         * headers
-         */
-        let head = ''
-        if (type === 'attribute') {
-                if (c.headers.has(id)) return id
-                head = `${infer(target, c)} ${id}`
-        }
-        if (type === 'uniform') {
-                if (c.headers.has(id)) return id
-                if (!c.binding) c.binding = 0
-                const varType = infer(target, c)
-                head = c.isWebGL
-                        ? `uniform ${varType} ${id};`
-                        : `@group(0) @binding(${c.binding++}) var<uniform> ${id}: ${formatConversions(varType, c)};`
-        }
-        if (type === 'constant') {
-                if (c.headers.has(id)) return id
-                const varType = infer(target, c)
-                const value = code(x, c)
-                head = c.isWebGL
-                        ? `const ${varType} ${id} = ${value};`
-                        : `const ${id}: ${formatConversions(varType, c)} = ${value};`
-        }
-        if (type === 'varying') {
-                if (c.headers.has(id)) return id
-                head = `${infer(target, c)} ${id}`
-        }
-        if (head) {
-                c.headers.set(id, head)
-                c.onMount?.(id)
-                return id
-        }
+        const { id = '', children = [], fields, initialValues } = props
+        const [x, y, z, w] = children
         /**
          * variables
          */
         if (type === 'variable') return id
-        if (type === 'swizzle') return `${code(y, c)}.${code(x, c)}`
-        if (type === 'ternary') return `(${code(x, c)} ? ${code(y, c)} : ${code(z, c)})`
-        if (type === 'builtin') return c?.isWebGL ? getBluiltin(id) : id
-        if (type === 'conversion') return `${formatConversions(x, c)}(${joins(children.slice(1), c)})`
+        if (type === 'member') return `${code(y, c)}.${code(x, c)}`
+        if (type === 'ternary')
+                return c.isWebGL
+                        ? `(${code(x, c)} ? ${code(y, c)} : ${code(z, c)})`
+                        : `select(${code(z, c)}, ${code(y, c)}, ${code(x, c)})`
+        if (type === 'conversion') return `${formatConversions(x, c)}(${parseArray(children.slice(1), c)})`
         if (type === 'operator') {
                 if (x === 'not' || x === 'bitNot') return `!${code(y, c)}`
                 return `(${code(y, c)} ${getOperator(x)} ${code(z, c)})`
         }
         if (type === 'function') {
-                if (x === 'negate') return `(-${joins(children.slice(1), c)})`
-                return `${x}(${joins(children.slice(1), c)})`
+                if (x === 'negate') return `(-${parseArray(children.slice(1), c)})`
+                if (x === 'texture') return parseTexture(c, y, z, w)
+                return `${x}(${parseArray(children.slice(1), c)})`
         }
         /**
          * scopes
          */
         if (type === 'scope') return children.map((child: any) => code(child, c)).join('\n')
         if (type === 'assign') return `${code(x, c)} = ${code(y, c)};`
+        if (type === 'return') return `return ${code(x, c)};`
         if (type === 'loop')
                 return c.isWebGL
                         ? `for (int i = 0; i < ${x}; i += 1) {\n${code(y, c)}\n}`
                         : `for (var i: i32 = 0; i < ${x}; i++) {\n${code(y, c)}\n}`
+        if (type === 'if') return parseIf(c, x, y, children)
+        if (type === 'switch') return parseSwitch(c, x, children)
+        if (type === 'declare') return parseDeclare(c, x, y)
         if (type === 'define') {
-                const args = children.slice(2)
-                const ret = `${id}(${args.map((arg) => code(arg, c))})`
-                if (c.headers.has(id)) return ret
-                c.headers.set(id, generateDefine(props, c))
-                return ret
+                if (!c.code?.headers.has(id)) c.code?.headers.set(id, parseDefine(c, props, infer(target, c)))
+                return `${id}(${parseArray(children.slice(1), c)})`
         }
-        if (type === 'if') {
-                let ret = `if (${code(x, c)}) {\n${code(y, c)}\n}`
-                for (let i = 2; i < children.length; i += 2) {
-                        const isElseIf = i >= children.length - 1
-                        ret += !isElseIf
-                                ? ` else if (${code(children[i], c)}) {\n${code(children[i + 1], c)}\n}`
-                                : ` else {\n${code(children[i], c)}\n}`
-                }
-                return ret
+        if (type === 'struct') {
+                if (!c.code?.headers.has(id)) c.code?.headers.set(id, parseStructHead(c, id, fields))
+                return parseStruct(c, id, (x as NodeProxy).props.id, fields, initialValues)
+        }
+        /**
+         * headers
+         */
+        if (type === 'varying') {
+                if (c.code?.vertOutputs.has(id)) return c.isWebGL ? `${id}` : `out.${id}`
+                const field = parseVaryingHead(c, id, infer(target, c))
+                c.code?.fragInputs.set(id, field)
+                c.code?.vertOutputs.set(id, field)
+                c.code?.vertVaryings.set(id, code(x, c))
+                return c.isWebGL ? `${id}` : `out.${id}`
         }
-        if (type === 'switch') {
-                let ret = `switch (${code(x, c)}) {\n`
-                for (let i = 1; i < children.length; i += 2) {
-                        const isDefault = i >= children.length - 1
-                        if (isDefault && children.length % 2 === 0) {
-                                ret += `default:\n${code(children[i], c)}\nbreak;\n`
-                        } else if (i + 1 < children.length)
-                                ret += `case ${code(children[i], c)}:\n${code(children[i + 1], c)}\nbreak;\n`
-                }
-                ret += '}'
-                return ret
+        if (type === 'builtin') {
+                if (c.isWebGL) return getBluiltin(id)
+                if (id === 'position') return 'out.position'
+                const field = `@builtin(${id}) ${id}: ${formatConversions(infer(target, c), c)}`
+                if (c.isFrag) {
+                        c.code?.fragInputs.set(id, field)
+                } else c.code?.vertInputs.set(id, field)
+                return `in.${id}`
         }
-        if (type === 'declare') {
-                const varType = infer(x, c)
-                const varName = (y as any)?.props?.id
-                if (c.isWebGL) return `${varType} ${varName} = ${code(x, c)};`
-                const wgslType = formatConversions(varType)
-                return `var ${varName}: ${wgslType} = ${code(x, c)};`
+        if (type === 'attribute') {
+                const fun = getEventFun(c, id, true)
+                safeEventCall(x, fun)
+                target.listeners.add(fun)
+                c.code?.vertInputs.set(id, parseAttribHead(c, id, infer(target, c)))
+                return c.isWebGL ? `${id}` : `in.${id}`
+        }
+        if (c.code?.headers.has(id)) return id // must last
+        let head = ''
+        if (type === 'uniform') {
+                const varType = infer(target, c)
+                const fun = getEventFun(c, id, false, varType === 'texture')
+                safeEventCall(x, fun)
+                target.listeners.add(fun)
+                head = parseUniformHead(c, id, varType)
+        }
+        if (type === 'constant') head = parseConstantHead(c, id, infer(target, c), code(x, c))
+        if (head) {
+                c.code?.headers.set(id, head)
+                return id
         }
         return code(x, c)
 }

package/src/node/const.ts

@@ -1,27 +1,32 @@
 export const SWIZZLES = ['x', 'y', 'z', 'w', 'r', 'g', 'b', 'a', 's', 't', 'p', 'q'] as const
 
-export const CONSTANTS = [
-        'bool',
-        'uint',
-        'int',
-        'float',
-        'bvec2',
-        'ivec2',
-        'uvec2',
-        'vec2',
-        'bvec3',
-        'ivec3',
-        'uvec3',
-        'vec3',
-        'bvec4',
-        'ivec4',
-        'uvec4',
-        'vec4',
-        'color',
-        'mat2',
-        'mat3',
-        'mat4',
-] as const
+export const TYPE_MAPPING = {
+        bool: 'bool',
+        uint: 'u32',
+        int: 'i32',
+        float: 'f32',
+        bvec2: 'vec2<bool>',
+        ivec2: 'vec2i',
+        uvec2: 'vec2u',
+        vec2: 'vec2f',
+        bvec3: 'vec3<bool>',
+        ivec3: 'vec3i',
+        uvec3: 'vec3u',
+        vec3: 'vec3f',
+        bvec4: 'vec4<bool>',
+        ivec4: 'vec4i',
+        uvec4: 'vec4u',
+        vec4: 'vec4f',
+        color: 'color',
+        mat2: 'mat2x2f',
+        mat3: 'mat3x3f',
+        mat4: 'mat4x4f',
+        texture: 'texture_2d<f32>',
+        sampler2D: 'sampler',
+        struct: 'struct',
+} as const
+
+export const CONSTANTS = Object.keys(TYPE_MAPPING) as unknown as keyof typeof TYPE_MAPPING
 
 export const CONVERSIONS = [
         'toBool',
@@ -138,28 +143,6 @@ export const FUNCTIONS = [
         ...ADDITIONAL_FUNCTIONS,
 ] as const
 
-export const TYPE_MAPPING = {
-        float: 'f32',
-        int: 'i32',
-        uint: 'u32',
-        bool: 'bool',
-        vec2: 'vec2f',
-        vec3: 'vec3f',
-        vec4: 'vec4f',
-        mat2: 'mat2x2f',
-        mat3: 'mat3x3f',
-        mat4: 'mat4x4f',
-        ivec2: 'vec2i',
-        ivec3: 'vec3i',
-        ivec4: 'vec4i',
-        uvec2: 'vec2u',
-        uvec3: 'vec3u',
-        uvec4: 'vec4u',
-        bvec2: 'vec2<bool>',
-        bvec3: 'vec3<bool>',
-        bvec4: 'vec4<bool>',
-} as const
-
 export const COMPONENT_COUNT_TO_TYPE = {
         1: 'float',
         2: 'vec2',

package/src/node/index.ts

@@ -1,15 +1,88 @@
-import { builtin, conversion as c, function_ as f, uniform } from './node'
-import { hex2rgb } from './utils'
 import { is } from '../utils/helpers'
-import type { X } from './types'
+import { code } from './code'
+import { builtin, conversion as c, function_ as f, uniform as u } from './node'
+import { hex2rgb, sortHeadersByDependencies } from './utils'
+import type { NodeContext, X } from './types'
 export * from './code'
-export * from './const'
-export * from './infer'
 export * from './node'
 export * from './scope'
 export * from './types'
 export * from './utils'
 
+const GLSL_FRAGMENT_HEAD = `
+#version 300 es
+precision mediump float;
+out vec4 fragColor;
+`.trim()
+
+const generateHead = (x: X, c: NodeContext) => {
+        const body = code(x, c)
+        let head = ''
+        if (c.isWebGL && c.code?.dependencies) {
+                const sorted = sortHeadersByDependencies(c.code.headers, c.code.dependencies)
+                head = sorted.map(([, value]) => value).join('\n')
+        } else head = Array.from(c.code?.headers?.values() || []).join('\n')
+        return [head, body]
+}
+
+const generateStruct = (id: string, map: Map<string, string>) => {
+        return `struct ${id} {\n  ${Array.from(map.values()).join(',\n  ')}\n}`
+}
+
+export const vertex = (x: X, c: NodeContext) => {
+        if (is.str(x)) return x.trim()
+        c.code?.headers?.clear()
+        c.isFrag = false // for varying inputs or outputs
+        const [head, body] = generateHead(x, c)
+        const ret = []
+        if (c.isWebGL) {
+                ret.push('#version 300 es')
+                for (const code of c.code?.vertInputs?.values() || []) ret.push(`in ${code}`)
+                for (const code of c.code?.vertOutputs?.values() || []) ret.push(`out ${code}`)
+                ret.push(head)
+                ret.push('void main() {')
+                ret.push(`  gl_Position = ${body};`)
+                for (const [id, code] of c.code?.vertVaryings?.entries() || []) ret.push(`  ${id} = ${code};`)
+        } else {
+                if (c.code?.vertInputs?.size) ret.push(generateStruct('In', c.code.vertInputs))
+                if (c.code?.vertOutputs?.size) ret.push(generateStruct('Out', c.code.vertOutputs))
+                ret.push(head)
+                ret.push('@vertex')
+                ret.push(`fn main(${c.code?.vertInputs?.size ? 'in: In' : ''}) -> Out {`)
+                ret.push('  var out: Out;')
+                ret.push(`  out.position = ${body};`)
+                for (const [id, code] of c.code?.vertVaryings?.entries() || []) ret.push(`  out.${id} = ${code};`)
+                ret.push('  return out;')
+        }
+        ret.push('}')
+        const main = ret.filter(Boolean).join('\n').trim()
+        console.log(`↓↓↓generated↓↓↓\n${main}`)
+        return main
+}
+
+export const fragment = (x: X, c: NodeContext) => {
+        if (is.str(x)) return x.trim()
+        c.code?.headers?.clear()
+        c.isFrag = true // for varying inputs or outputs
+        const [head, body] = generateHead(x, c)
+        const ret = []
+        if (c.isWebGL) {
+                ret.push(GLSL_FRAGMENT_HEAD)
+                for (const code of c.code?.fragInputs?.values() || []) ret.push(`in ${code}`)
+                ret.push(head)
+                ret.push(`void main() {\n  fragColor = ${body};`)
+        } else {
+                if (c.code?.fragInputs?.size) ret.push(generateStruct('Out', c.code.fragInputs))
+                ret.push(head)
+                ret.push(`@fragment\nfn main(out: Out) -> @location(0) vec4f {`)
+                ret.push(`  return ${body};`)
+        }
+        ret.push('}')
+        const main = ret.filter(Boolean).join('\n').trim()
+        console.log(`↓↓↓generated↓↓↓\n${main}`)
+        return main
+}
+
 // Builtin Variables
 export const position = builtin('position')
 export const vertexIndex = builtin('vertex_index')
@@ -31,10 +104,10 @@ export const screenCoordinate = builtin('screenCoordinate')
 export const screenUV = builtin('screenUV')
 
 // Type constructors
-export const float = (x: X) => c('float', x)
-export const int = (x: X) => c('int', x)
-export const uint = (x: X) => c('uint', x)
-export const bool = (x: X) => c('bool', x)
+export const float = (x?: X) => c('float', x)
+export const int = (x?: X) => c('int', x)
+export const uint = (x?: X) => c('uint', x)
+export const bool = (x?: X) => c('bool', x)
 export const vec2 = (x?: X, y?: X) => c('vec2', x, y)
 export const vec3 = (x?: X, y?: X, z?: X) => c('vec3', x, y, z)
 export const vec4 = (x?: X, y?: X, z?: X, w?: X) => c('vec4', x, y, z, w)
@@ -50,15 +123,18 @@ export const uvec4 = (x?: X, y?: X, z?: X, w?: X) => c('uvec4', x, y, z, w)
 export const bvec2 = (x?: X, y?: X) => c('bvec2', x, y)
 export const bvec3 = (x?: X, y?: X, z?: X) => c('bvec3', x, y, z)
 export const bvec4 = (x?: X, y?: X, z?: X, w?: X) => c('bvec4', x, y, z, w)
+export const texture2D = (x?: X) => c('texture', x)
+export const sampler2D = () => c('sampler2D')
 export const color = (r?: X, g?: X, b?: X) => {
         if (is.num(r) && is.und(g) && is.und(b)) return vec3(...hex2rgb(r))
         return vec3(r, g, b)
 }
 
 // Default uniforms
-export const iResolution = uniform(vec2(1280, 800), 'iResolution')
-export const iMouse = uniform(vec2(0, 0), 'iMouse')
-export const iTime = uniform(float(0), 'iTime')
+export const iResolution = u(vec2(), 'iResolution')
+export const iMouse = u(vec2(), 'iMouse')
+export const iTime = u(float(), 'iTime')
+export const uv = () => position.xy.div(iResolution)
 
 // Texture Functions
 export const texture = (x: X, y: X, z?: X) => f('texture', x, y, z)
@@ -121,3 +197,13 @@ export const step = (edge: X, x: X) => f('step', edge, x)
 export const tan = (x: X) => f('tan', x)
 export const transformDirection = (dir: X, matrix: X) => f('transformDirection', dir, matrix)
 export const trunc = (x: X) => f('trunc', x)
+
+// // Struct functions
+// export const struct = (fields: Record<string, X>) => {
+//         const id = getId()
+//         const structNode = node('struct', { id, fields })
+//         // Create constructor function
+//         const constructor = () => node('struct', { id: getId(), type: id })
+//         Object.assign(constructor, structNode)
+//         return constructor as any
+// }

package/src/node/infer.ts

@@ -13,10 +13,10 @@ import {
         VEC3_RETURN_FUNCTIONS,
         VEC4_RETURN_FUNCTIONS,
 } from './const'
-import { isNodeProxy } from './utils'
-import type { Constants, NodeConfig, NodeProxy, X } from './types'
+import { isConstants, isNodeProxy, isSwizzle } from './utils'
+import type { Constants, NodeContext, NodeProxy, X } from './types'
 
-const getHighestPriorityType = (args: X[], c: NodeConfig) => {
+const getHighestPriorityType = (args: X[], c: NodeContext) => {
         return args.reduce((highest, current) => {
                 const currentType = infer(current, c)
                 const highestPriority = CONSTANTS.indexOf(highest as any)
@@ -29,7 +29,7 @@ const inferBuiltin = (id: string | undefined): Constants => {
         return BUILTIN_TYPES[id as keyof typeof BUILTIN_TYPES]!
 }
 
-const inferFunction = (funcName: string, args: X[], c: NodeConfig): Constants => {
+const inferFunction = (funcName: string, args: X[], c: NodeContext): Constants => {
         const firstArgType = args.length > 0 ? infer(args[0], c) : 'float'
         if (FIRST_ARG_TYPE_FUNCTIONS.includes(funcName as any)) return firstArgType
         if (SCALAR_RETURN_FUNCTIONS.includes(funcName as any)) return 'float'
@@ -52,38 +52,55 @@ const inferOperator = (leftType: string, rightType: string, op: string): Constan
         return (leftPriority >= rightPriority ? leftType : rightType) as Constants
 }
 
-const inferPrimitiveType = (x: any): Constants => {
+export const inferPrimitiveType = (x: any): Constants => {
         if (is.bol(x)) return 'bool'
-        if (is.num(x)) return 'float' // Number.isInteger(x) ? 'int' : 'float' // @TODO FIX
+        if (is.str(x)) return 'texture'
+        if (is.num(x)) return Number.isInteger(x) ? 'int' : 'float'
         if (is.arr(x)) return COMPONENT_COUNT_TO_TYPE[x.length as keyof typeof COMPONENT_COUNT_TO_TYPE] || 'float'
         return 'float'
 }
 
-const inferSwizzle = (count: number): Constants => {
+const inferFromCount = (count: number): Constants => {
         return COMPONENT_COUNT_TO_TYPE[count as keyof typeof COMPONENT_COUNT_TO_TYPE]!
 }
 
-export const inferImpl = (target: NodeProxy, c: NodeConfig): Constants => {
+const inferFromArray = (arr: X[], c: NodeContext): Constants => {
+        if (arr.length === 0) return 'void'
+        const [x] = arr
+        if (is.str(x)) return x as Constants // for struct
+        const ret = infer(x, c)
+        for (const x of arr.slice(1))
+                if (ret !== infer(x, c)) throw new Error(`glre node system error: defined scope return mismatch`)
+        return ret
+}
+
+export const inferImpl = (target: NodeProxy, c: NodeContext): Constants => {
         const { type, props } = target
-        const { id, children = [], inferFrom } = props
+        const { id, children = [], layout, inferFrom } = props
         const [x, y, z] = children
-        if (inferFrom) return infer(inferFrom, c)
         if (type === 'conversion') return x as Constants
         if (type === 'operator') return inferOperator(infer(y, c), infer(z, c), x as string)
         if (type === 'function') return inferFunction(x as string, children.slice(1), c)
-        if (type === 'swizzle') return inferSwizzle((x as string).length)
         if (type === 'ternary') return inferOperator(infer(y, c), infer(z, c), 'add')
         if (type === 'builtin') return inferBuiltin(id)
-        if (type === 'define') {
-                if (props.layout?.type && props.layout?.type !== 'auto') return props.layout.type as Constants
-                return y ? infer(y, c) : 'void'
+        if (type === 'define' && isConstants(layout?.type)) return layout?.type
+        if (type === 'attribute' && is.arr(x) && c.gl?.count) return inferFromCount(x.length / c.gl.count)
+        if (type === 'member') {
+                if (isSwizzle(x)) return inferFromCount(x.length)
+                if (isNodeProxy(y) && is.str(x)) {
+                        const field = y.props.fields?.[x] // for variable node of struct member
+                        if (field) return infer(field, c)
+                }
+                return 'float' // fallback @TODO FIX
         }
+        if (inferFrom) return inferFromArray(inferFrom, c)
         return infer(x, c)
 }
 
-export const infer = (target: X, c?: NodeConfig | null): Constants => {
+export const infer = (target: X, c?: NodeContext | null): Constants => {
         if (!c) c = {}
         if (!isNodeProxy(target)) return inferPrimitiveType(target)
+        if (is.arr(target)) return inferFromCount(target.length)
         if (!c.infers) c.infers = new WeakMap<NodeProxy, Constants>()
         if (c.infers.has(target)) return c.infers.get(target)!
         const ret = inferImpl(target, c)

package/src/node/node.ts

@@ -1,7 +1,8 @@
+import { is } from '../utils/helpers'
 import { code } from './code'
 import { assign, toVar } from './scope'
-import { conversionToConstant, isConversion, isFunction, isOperator, isSwizzle } from './utils'
-import type { Functions, NodeProps, NodeProxy, NodeTypes, Operators, Swizzles, X } from './types'
+import { conversionToConstant, isConversion, isFunction, isOperator, getId } from './utils'
+import type { Functions, NodeProps, NodeProxy, NodeTypes, Operators, X } from './types'
 
 const toPrimitive = (x: X, hint: string) => {
         if (hint === 'string') return code(x)
@@ -10,6 +11,7 @@ const toPrimitive = (x: X, hint: string) => {
 export const node = (type: NodeTypes, props?: NodeProps | null, ...args: X[]) => {
         if (!props) props = {}
         if (args.length) props.children = args
+        const listeners = new Set<(value: any) => void>()
         const get = (_: unknown, key: string | Symbol) => {
                 if (key === 'type') return type
                 if (key === 'props') return props
@@ -18,35 +20,32 @@ export const node = (type: NodeTypes, props?: NodeProps | null, ...args: X[]) =>
                 if (key === 'isProxy') return true
                 if (key === 'toString') return code.bind(null, x)
                 if (key === Symbol.toPrimitive) return toPrimitive.bind(null, x)
-                if (isSwizzle(key)) return swizzle(key, x)
+                if (key === 'listeners') return listeners
                 if (isOperator(key)) return (...y: X[]) => operator(key, x, ...y)
                 if (isFunction(key)) return (...y: X[]) => function_(key, x, ...y)
                 if (isConversion(key)) return () => conversion(conversionToConstant(key), x)
+                if (is.str(key)) return member(key, x) // for struct
         }
         const set = (_: unknown, key: string, y: X) => {
-                if (isSwizzle(key)) {
-                        swizzle(key, x).assign(y)
-                        return true
-                }
-                return false
+                if (key === 'value') listeners.forEach((fun) => fun(y))
+                if (is.str(key)) member(key, x).assign(y)
+                return true
         }
         const x = new Proxy({}, { get, set }) as unknown as NodeProxy
         return x
 }
 
 // headers
-export const attribute = (x: X, id?: string) => node('varying', { id }, x)
-export const uniform = (x: X, id?: string) => node('uniform', { id }, x)
-export const varying = (x: X, id?: string) => node('varying', { id }, x)
-export const constant = (x: X, id?: string) => node('constant', { id }, x)
-export const variable = (id: string) => node('variable', { id })
-export const builtin = (id: string) => node('builtin', { id })
+export const attribute = (x: X, id = getId()) => node('attribute', { id }, x)
+export const constant = (x: X, id = getId()) => node('constant', { id }, x)
+export const uniform = (x: X, id = getId()) => node('uniform', { id }, x)
+export const variable = (id = getId()) => node('variable', { id })
+export const builtin = (id = getId()) => node('builtin', { id })
+export const vertexStage = (x: X, id = getId()) => node('varying', { id, inferFrom: [x] }, x)
 
 // Node shorthands
-export const swizzle = (key: Swizzles, arg: X) => node('swizzle', null, key, arg)
-export const operator = (key: Operators, ...args: X[]) => node('operator', null, key, ...args)
-export const function_ = (key: Functions, ...args: X[]) => node('function', null, key, ...args)
-export const conversion = (key: string, ...args: X[]) => node('conversion', null, key, ...args)
-
-// x ? y : z
-export const select = (x: X, y: X, z: X) => node('ternary', null, x, y, z)
+export const operator = (key: Operators, ...x: X[]) => node('operator', null, key, ...x)
+export const function_ = (key: Functions, ...x: X[]) => node('function', null, key, ...x)
+export const conversion = (key: string, ...x: X[]) => node('conversion', null, key, ...x)
+export const member = (key: string, x: X) => node('member', null, key, x)
+export const select = (x: X, y: X, z: X) => node('ternary', null, x, y, z) // x ? y : z @TODO REMOVE