glre 0.14.0 → 0.16.0

package/package.json

@@ -1,67 +1,67 @@
-{
-        "name": "glre",
-        "author": "tseijp",
-        "license": "MIT",
-        "version": "0.14.0",
-        "module": "index.js",
-        "types": "index.ts",
-        "main": "index.cjs.js",
-        "umd": "index.develop.js",
-        "private": false,
-        "sideEffect": false,
-        "publishConfig": {
-                "access": "public"
-        },
-        "dependencies": {
-                "reev": "0.10.0",
-                "refr": "0.3.0"
-        },
-        "keywords": [
-                "glsl",
-                "webgl",
-                "hooks",
-                "react",
-                "reactjs",
-                "reactive",
-                "solid",
-                "solidjs",
-                "typescript"
-        ],
-        "peerDependencies": {
-                "expo": "*",
-                "expo-gl": "*",
-                "react": ">=16.8",
-                "react-dom": ">=16.8",
-                "solid-js": "*"
-        },
-        "peerDependenciesMeta": {
-                "expo": {
-                        "optional": true
-                },
-                "expo-gl": {
-                        "optional": true
-                },
-                "react": {
-                        "optional": true
-                },
-                "react-dom": {
-                        "optional": true
-                },
-                "solid-js": {
-                        "optional": true
-                }
-        },
-        "files": [
-                "index.js",
-                "index.cjs.js",
-                "index.develop.js",
-                "index.product.js",
-                "index.ts",
-                "native.ts",
-                "qwik.ts",
-                "react.ts",
-                "solid.ts",
-                "types.ts",
-                "utils.ts"
-        ]
-}
+{
+        "name": "glre",
+        "author": "tseijp",
+        "license": "MIT",
+        "version": "0.16.0",
+        "module": "index.js",
+        "types": "index.ts",
+        "main": "index.cjs.js",
+        "umd": "index.develop.js",
+        "private": false,
+        "sideEffect": false,
+        "publishConfig": {
+                "access": "public"
+        },
+        "dependencies": {
+                "reev": "0.10.0",
+                "refr": "0.3.0"
+        },
+        "keywords": [
+                "glsl",
+                "webgl",
+                "hooks",
+                "react",
+                "reactjs",
+                "reactive",
+                "solid",
+                "solidjs",
+                "typescript"
+        ],
+        "peerDependencies": {
+                "expo": "*",
+                "expo-gl": "*",
+                "react": ">=16.8",
+                "react-dom": ">=16.8",
+                "solid-js": "*"
+        },
+        "peerDependenciesMeta": {
+                "expo": {
+                        "optional": true
+                },
+                "expo-gl": {
+                        "optional": true
+                },
+                "react": {
+                        "optional": true
+                },
+                "react-dom": {
+                        "optional": true
+                },
+                "solid-js": {
+                        "optional": true
+                }
+        },
+        "files": [
+                "index.js",
+                "index.cjs.js",
+                "index.develop.js",
+                "index.product.js",
+                "index.ts",
+                "native.ts",
+                "qwik.ts",
+                "react.ts",
+                "solid.ts",
+                "types.ts",
+                "utils.ts"
+        ]
+}

package/qwik.ts

@@ -1,42 +1,42 @@
-import { useSignal, useVisibleTask$, $ } from '@builder.io/qwik'
-import { gl } from './index'
-import { frame } from 'refr'
-import type { GL } from './types'
-import type { Fun } from 'reev/types'
-
-export function useGL(props?: any, self = $(gl) as unknown as GL) {
-        const ref = useSignal<Element>()
-        useVisibleTask$(({ cleanup }) => {
-                self(props)
-                self.el = self.target = ref.value
-                self.gl = self.target.getContext('webgl2')
-                self.init()
-                self.resize()
-                frame.start()
-                window.addEventListener('resize', self.resize)
-                window.addEventListener('mousemove', self.mousemove)
-                cleanup(() => {
-                        self.clean()
-                        window.removeEventListener('resize', self.resize)
-                        window.removeEventListener('mousemove', self.mousemove)
-                })
-        })
-        return self
-}
-
-export function useTexture(props: any, self = gl) {
-        return self?.texture(props)
-}
-
-export function useAttribute(props: any, self = gl) {
-        return self.attribute(props)
-}
-
-export function useUniform(props: any, self = gl) {
-        return self.uniform(props)
-}
-
-export function useFrame(fun: Fun, self = gl) {
-        useTask$(() => self.frame(fun))
-        return self
-}
+import { useSignal, useVisibleTask$, $ } from '@builder.io/qwik'
+import { gl } from './index'
+import { frame } from 'refr'
+import type { GL } from './types'
+import type { Fun } from 'reev/types'
+
+export function useGL(props?: any, self = $(gl) as unknown as GL) {
+        const ref = useSignal<Element>()
+        useVisibleTask$(({ cleanup }) => {
+                self(props)
+                self.el = self.target = ref.value
+                self.gl = self.target.getContext('webgl2')
+                self.init()
+                self.resize()
+                frame.start()
+                window.addEventListener('resize', self.resize)
+                window.addEventListener('mousemove', self.mousemove)
+                cleanup(() => {
+                        self.clean()
+                        window.removeEventListener('resize', self.resize)
+                        window.removeEventListener('mousemove', self.mousemove)
+                })
+        })
+        return self
+}
+
+export function useTexture(props: any, self = gl) {
+        return self?.texture(props)
+}
+
+export function useAttribute(props: any, self = gl) {
+        return self.attribute(props)
+}
+
+export function useUniform(props: any, self = gl) {
+        return self.uniform(props)
+}
+
+export function useFrame(fun: Fun, self = gl) {
+        useTask$(() => self.frame(fun))
+        return self
+}

package/react.ts

@@ -1,59 +1,66 @@
-import { useState, useEffect, useMemo } from 'react'
-import { gl } from './index'
-import { frame } from 'refr'
-import { mutable } from 'reev'
-import type { GL } from './types'
-import type { Fun } from 'refr'
-import type { MutableArgs } from 'reev/types'
-
-export const useMutable = <T extends object>(...args: MutableArgs<T>) => {
-        const [memo] = useState(() => mutable<T>())
-        return memo(...args)
-}
-
-export const useGL = (props: Partial<GL> = {}, self = gl) => {
-        const memo1 = useMutable(props) as Partial<GL>
-        const memo2 = useMutable({
-                ref(target: unknown) {
-                        if (target) {
-                                self.target = target
-                                self.mount()
-                        } else self.clean()
-                },
-                mount() {
-                        self.el = self.target
-                        self.gl = self.target.getContext('webgl2')
-                        self.init()
-                        self.resize()
-                        frame.start()
-                        window.addEventListener('resize', self.resize)
-                        window.addEventListener('mousemove', self.mousemove)
-                },
-                clean() {
-                        frame.cancel()
-                        window.removeEventListener('resize', self.resize)
-                        window.removeEventListener('mousemove', self.mousemove)
-                },
-        }) as Partial<GL>
-
-        return useMemo(() => self(memo2)(memo1), [self, memo1, memo2])
-}
-
-export function useTexture(props: any, self = gl) {
-        return self.texture(props)
-}
-
-export function useAttribute(props: any, self = gl) {
-        return self.attribute(props)
-}
-
-export function useUniform(props: any, self = gl) {
-        return self.uniform(props)
-}
-
-export function useFrame(fun: Fun, self = gl) {
-        const ref = useMutable(fun)
-        useEffect(() => self.frame(fun), [])
-        useEffect(() => () => self.frame(ref), [])
-        return self
-}
+import { useState, useEffect, useMemo } from 'react'
+import { createTF, gl } from './index'
+import { frame } from 'refr'
+import { mutable } from 'reev'
+import type { GL } from './types'
+import type { Fun } from 'refr'
+import type { MutableArgs } from 'reev/types'
+
+export const useMutable = <T extends object>(...args: MutableArgs<T>) => {
+        const [memo] = useState(() => mutable<T>())
+        return memo(...args)
+}
+
+export const useGL = (props: Partial<GL> = {}, self = gl) => {
+        const memo1 = useMutable(props) as Partial<GL>
+        const memo2 = useMutable({
+                ref(target: unknown) {
+                        if (target) {
+                                self.target = target
+                                self.mount()
+                        } else self.clean()
+                },
+                mount() {
+                        self.el = self.target
+                        self.gl = self.target.getContext('webgl2')
+                        self.init()
+                        self.resize()
+                        frame.start()
+                        window.addEventListener('resize', self.resize)
+                        self.el.addEventListener('mousemove', self.mousemove)
+                },
+                clean() {
+                        self(memo2)(memo1)
+                        frame.cancel()
+                        window.removeEventListener('resize', self.resize)
+                },
+        }) as Partial<GL>
+
+        return useMemo(() => self(memo2)(memo1), [self, memo1, memo2])
+}
+
+export const useTF = (props: Partial<GL>, self = gl) => {
+        const memo = useMutable(props) as Partial<GL>
+        const tf = useMemo(() => createTF(memo, self), [memo, self])
+        useEffect(() => void tf.mount() || tf.clean, [self])
+        return tf
+}
+
+export function useTexture(props: any, self = gl) {
+        return self.texture(props)
+}
+
+export function useAttribute(props: any, self = gl) {
+        return self.attribute(props)
+}
+
+export function useUniform(props: any, self = gl) {
+        return self.uniform(props)
+}
+
+export function useFrame(fun: Fun, self = gl) {
+        const ref = useMutable(fun)
+        useEffect(() => self.frame(fun), [])
+        useEffect(() => () => self.frame(ref), [])
+        return self
+}

package/solid.ts

@@ -1,45 +1,51 @@
-import { onMount, onCleanup } from 'solid-js'
-import { frame } from 'refr'
-import { gl } from './index'
-import type { Fun } from 'reev/types'
-
-export function createGL(props?: any, self = gl) {
-        onCleanup(self.clean)
-
-        return self({
-                ref(target: unknown) {
-                        if (target) {
-                                self.target = target
-                                self.mount()
-                        }
-                },
-                mount() {
-                        self(props)
-                        self.el = self.target
-                        self.gl = self.target.getContext('webgl2')
-                        self.init()
-                        self.resize()
-                        frame.start()
-                        window.addEventListener('resize', self.resize)
-                        window.addEventListener('mousemove', self.mousemove)
-                },
-                clean() {
-                        self(props)
-                        frame.cancel()
-                        window.removeEventListener('resize', self.resize)
-                        window.removeEventListener('mousemove', self.mousemove)
-                },
-        })
-}
-
-export function onFrame(fun: Fun, self = gl) {
-        onMount(() => self('render', fun))
-}
-
-export function setTexture(props: any, self = gl) {
-        return self.texture(props)
-}
-
-export function setAttribute(props: any, self = gl) {
-        return self.attribute(props)
-}
+import { onMount, onCleanup } from 'solid-js'
+import { frame } from 'refr'
+import { gl } from './index'
+import type { Fun } from 'reev/types'
+
+export function createGL(props?: any, self = gl) {
+        const memo = {
+                ref(target: unknown) {
+                        if (target) {
+                                self.target = target
+                                self.mount()
+                        }
+                },
+                mount() {
+                        self.el = self.target
+                        self.gl = self.target.getContext('webgl2')
+                        self.init()
+                        self.resize()
+                        frame.start()
+                        window.addEventListener('resize', self.resize)
+                        window.addEventListener('mousemove', self.mousemove)
+                },
+                clean() {
+                        self(props)(memo)
+                        frame.cancel()
+                        window.removeEventListener('resize', self.resize)
+                        window.removeEventListener('mousemove', self.mousemove)
+                },
+        }
+        onCleanup(self.clean)
+        return self(props)(memo)
+}
+
+export const createTF = (props: any, self = gl) => {
+        const tf = createTF(props, self)
+        onMount(() => tf.mount())
+        onCleanup(() => tf.clean())
+        return tf
+}
+
+export function onFrame(fun: Fun, self = gl) {
+        onMount(() => self('render', fun))
+}
+
+export function setTexture(props: any, self = gl) {
+        return self.texture(props)
+}
+
+export function setAttribute(props: any, self = gl) {
+        return self.attribute(props)
+}

package/types.ts

@@ -1,98 +1,101 @@
-import type { Queue } from 'refr/types'
-import type { Nested, EventState } from 'reev/types'
-
-export type Uniform = number | number[]
-
-export type Attribute = number[]
-
-export type Attributes = Record<string, Attribute>
-
-export type Uniforms = Record<string, Uniform>
-
-export type GL = EventState<{
-        /**
-         * initial value
-         */
-        id: string
-        size: [number, number]
-        mouse: [number, number]
-        count: number
-        vs: string
-        fs: string
-        vert: string
-        frag: string
-        vertex: string
-        fragment: string
-        int: PrecisionMode
-        float: PrecisionMode
-        sampler2D: PrecisionMode
-        samplerCube: PrecisionMode
-        lastActiveUnit: number
-
-        /**
-         * core state
-         */
-        gl: any
-        pg: any
-        el: any
-        frame: Queue
-        target: any
-        stride: Nested<number>
-        // @TODO Nested<(key: string, value: number: number[], ibo: number[]) => number>
-        location: Nested<any>
-        activeUnit: Nested<number>
-        default: any
-
-        /**
-         * events
-         */
-        ref?: any
-        init(varying?: string[]): void
-        mount(): void
-        clean(): void
-        render(): void
-        mousemove(e: Event): void
-        resize(e?: Event, width?: number, height?: number): void
-        load(e?: Event, image?: HTMLImageElement): void
-
-        /**
-         * setter
-         */
-        _uniform(key: string, value: Uniform): GL
-        uniform(key: string, value: Uniform): GL
-        uniform(target: { [key: string]: Uniform }): GL
-        _texture(key: string, value: string): GL
-        texture(key: string, value: string): GL
-        texture(target: { [key: string]: string }): GL
-        _attribute(key: string, value: Attribute, iboValue?: Attribute): GL
-        attribute(key: string, value: Attribute, iboValue?: Attribute): GL
-        attribute(target: { [key: string]: Attribute }): GL
-        // config(key?: keyof GL, value?: GL[keyof GL]): GL
-        // config(target?: Partial<GL>): GL
-
-        /**
-         * short hands
-         */
-        clear(key?: GLClearMode): void
-        viewport(size?: [number, number]): void
-        drawArrays(key?: GLDrawMode): void
-        drawElements(key?: GLDrawMode): void
-}>
-
-export type PrecisionMode = 'highp' | 'mediump' | 'lowp'
-
-export type GLClearMode =
-        | 'COLOR_BUFFER_BIT'
-        | 'DEPTH_BUFFER_BIT'
-        | 'STENCIL_BUFFER_BIT'
-
-export type GLDrawMode =
-        | 'POINTS'
-        | 'LINE_STRIP'
-        | 'LINE_LOOP'
-        | 'LINES'
-        | 'TRIANGLE_STRIP'
-        | 'TRIANGLE_FAN'
-        | 'TRIANGLES'
-
-export type GLDrawType = 'UNSIGNED_BYTE' | 'UNSIGNED_SHORT' | 'UNSIGNED_INT'
+import type { Queue } from 'refr/types'
+import type { Nested, EventState } from 'reev/types'
+
+export type Uniform = number | number[]
+
+export type Attribute = number[]
+
+export type Attributes = Record<string, Attribute>
+
+export type Uniforms = Record<string, Uniform>
+
+export type GL = EventState<{
+        /**
+         * initial value
+         */
+        id: string
+        width: number
+        height: number
+        size: [number, number]
+        mouse: [number, number]
+        count: number
+        vs: string
+        fs: string
+        vert: string
+        frag: string
+        vertex: string
+        fragment: string
+        varying: string
+        int: PrecisionMode
+        float: PrecisionMode
+        sampler2D: PrecisionMode
+        samplerCube: PrecisionMode
+        lastActiveUnit: number
+
+        /**
+         * core state
+         */
+        gl: any
+        pg: any
+        el: any
+        frame: Queue
+        target: any
+        stride: Nested<number>
+        // @TODO Nested<(key: string, value: number: number[], ibo: number[]) => number>
+        location: Nested<any>
+        activeUnit: Nested<number>
+        default: any
+
+        /**
+         * events
+         */
+        ref?: any
+        init(varying?: string[]): void
+        mount(): void
+        clean(): void
+        render(): void
+        mousemove(e: Event): void
+        resize(e?: Event, width?: number, height?: number): void
+        load(e?: Event, image?: HTMLImageElement): void
+
+        /**
+         * setter
+         */
+        _uniform(key: string, value: Uniform): GL
+        uniform(key: string, value: Uniform): GL
+        uniform(target: { [key: string]: Uniform }): GL
+        _texture(key: string, value: string): GL
+        texture(key: string, value: string): GL
+        texture(target: { [key: string]: string }): GL
+        _attribute(key: string, value: Attribute, iboValue?: Attribute): GL
+        attribute(key: string, value: Attribute, iboValue?: Attribute): GL
+        attribute(target: { [key: string]: Attribute }): GL
+        // config(key?: keyof GL, value?: GL[keyof GL]): GL
+        // config(target?: Partial<GL>): GL
+
+        /**
+         * short hands
+         */
+        clear(key?: GLClearMode): void
+        viewport(size?: [number, number]): void
+        drawArrays(key?: GLDrawMode): void
+        drawElements(key?: GLDrawMode): void
+}>
+
+export type PrecisionMode = 'highp' | 'mediump' | 'lowp'
+
+export type GLClearMode =
+        | 'COLOR_BUFFER_BIT'
+        | 'DEPTH_BUFFER_BIT'
+        | 'STENCIL_BUFFER_BIT'
+
+export type GLDrawMode =
+        | 'POINTS'
+        | 'LINE_STRIP'
+        | 'LINE_LOOP'
+        | 'LINES'
+        | 'TRIANGLE_STRIP'
+        | 'TRIANGLE_FAN'
+        | 'TRIANGLES'
+
+export type GLDrawType = 'UNSIGNED_BYTE' | 'UNSIGNED_SHORT' | 'UNSIGNED_INT'