glre 0.15.0 → 0.17.0

package/package.json

@@ -1,67 +1,165 @@
-{
-        "name": "glre",
-        "author": "tseijp",
-        "license": "MIT",
-        "version": "0.15.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",
+        "version": "0.17.0",
+        "author": "tseijp",
+        "license": "MIT",
+        "private": false,
+        "sideEffect": false,
+        "publishConfig": {
+                "access": "public"
+        },
+        "bugs": {
+                "url": "https://github.com/tseijp/glre/issues"
+        },
+        "repository": "tseijp/glre",
+        "homepage": "https://glre.tsei.jp",
+        "keywords": [
+                "glsl",
+                "webgl",
+                "hooks",
+                "react",
+                "reactjs",
+                "reactive",
+                "solid",
+                "solidjs",
+                "typescript"
+        ],
+        "main": "./dist/index.js",
+        "types": "./dist/index.d.ts",
+        "module": "./dist/index.mjs",
+        "exports": {
+                "./packages.json": "./packages.json",
+                ".": {
+                        "types": "./dist/index.d.ts",
+                        "import": {
+                                "types": "./dist/index.d.ts",
+                                "default": "./dist/index.mjs"
+                        },
+                        "module": {
+                                "types": "./dist/index.d.ts",
+                                "default": "./dist/index.mjs"
+                        },
+                        "require": "./dist/index.js",
+                        "default": "./dist/index.js"
+                },
+                "./*": {
+                        "types": "./dist/index.d.ts",
+                        "import": {
+                                "types": "./dist/index.d.ts",
+                                "default": "./dist/index.mjs"
+                        },
+                        "module": {
+                                "types": "./dist/index.d.ts",
+                                "default": "./dist/index.mjs"
+                        },
+                        "require": "./dist/index.js",
+                        "default": "./dist/index.js"
+                },
+                "./react": {
+                        "types": "./dist/react.d.ts",
+                        "import": {
+                                "types": "./dist/react.d.ts",
+                                "default": "./dist/react.mjs"
+                        },
+                        "module": {
+                                "types": "./dist/react.d.ts",
+                                "default": "./dist/react.mjs"
+                        },
+                        "require": "./dist/react.js",
+                        "default": "./dist/react.js"
+                },
+                "./react/*": {
+                        "types": "./dist/react.d.ts",
+                        "import": {
+                                "types": "./dist/react.d.ts",
+                                "default": "./dist/react.mjs"
+                        },
+                        "module": {
+                                "types": "./dist/react.d.ts",
+                                "default": "./dist/react.mjs"
+                        },
+                        "require": "./dist/react.js",
+                        "default": "./dist/react.js"
+                },
+                "./native": {
+                        "types": "./dist/native.d.ts",
+                        "import": {
+                                "types": "./dist/native.d.ts",
+                                "default": "./dist/native.mjs"
+                        },
+                        "module": {
+                                "types": "./dist/native.d.ts",
+                                "default": "./dist/native.mjs"
+                        },
+                        "require": "./dist/native.js",
+                        "default": "./dist/native.js"
+                },
+                "./native/*": {
+                        "types": "./dist/native.d.ts",
+                        "import": {
+                                "types": "./dist/native.d.ts",
+                                "default": "./dist/native.mjs"
+                        },
+                        "module": {
+                                "types": "./dist/native.d.ts",
+                                "default": "./dist/native.mjs"
+                        },
+                        "require": "./dist/native.js",
+                        "default": "./dist/native.js"
+                },
+                "./solid": {
+                        "types": "./dist/solid.d.ts",
+                        "import": {
+                                "types": "./dist/solid.d.ts",
+                                "default": "./dist/solid.mjs"
+                        },
+                        "module": {
+                                "types": "./dist/solid.d.ts",
+                                "default": "./dist/solid.mjs"
+                        },
+                        "require": "./dist/solid.js",
+                        "default": "./dist/solid.js"
+                },
+                "./solid/*": {
+                        "types": "./dist/solid.d.ts",
+                        "import": {
+                                "types": "./dist/solid.d.ts",
+                                "default": "./dist/solid.mjs"
+                        },
+                        "module": {
+                                "types": "./dist/solid.d.ts",
+                                "default": "./dist/solid.mjs"
+                        },
+                        "require": "./dist/solid.js",
+                        "default": "./dist/solid.js"
+                }
+        },
+        "dependencies": {
+                "reev": "0.12.0",
+                "refr": "0.3.0"
+        },
+        "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
+                }
+        }
+}

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, useTask$, 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 const 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 const useTexture = (props: any, self = gl) => {
+        return self?.texture(props)
+}
+
+export const useAttribute = (props: any, self = gl) => {
+        return self.attribute(props)
+}
+
+export const useUniform = (props: any, self = gl) => {
+        return self.uniform(props)
+}
+
+export const useFrame = (fun: Fun, self = gl) => {
+        useTask$(() => self.frame(fun))
+        return self
+}

package/react.ts

@@ -1,60 +1,59 @@
-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() {
-                        self(memo2)(memo1)
-                        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 { useEffect, useMemo } from 'react'
+import { createTF, gl } from './index'
+import { frame } from 'refr'
+import { useMutable } from 'reev/react'
+import type { GL } from './types'
+import type { Fun } from 'refr'
+
+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 const useTexture = (props: any, self = gl) => {
+        return self.texture(props)
+}
+
+export const useAttribute = (props: any, self = gl) => {
+        return self.attribute(props)
+}
+
+export const useUniform = (props: any, self = gl) => {
+        return self.uniform(props)
+}
+
+export const useFrame = (fun: Fun, self = gl) => {
+        useEffect(() => void self.frame(fun), [])
+        useEffect(() => () => self.frame(fun), [])
+        return self
+}

package/solid.ts

@@ -1,44 +1,52 @@
-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)
-        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)
-                },
-        }
-        return self(props)(memo)
-}
-
-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 { createTF, gl } from './index'
+import { GL } from './types'
+import type { Fun } from 'reev/types'
+
+export const onGL = (props?: Partial<GL>, 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 onTF = (props?: Partial<GL>, self = gl) => {
+        const tf = createTF(props, self)
+        onMount(() => tf.mount())
+        onCleanup(() => tf.clean())
+        return tf
+}
+
+export const onFrame = (fun: Fun, self = gl) => {
+        onMount(() => self('render', fun))
+}
+
+export const setTexture = (props: any, self = gl) => {
+        return self.texture(props)
+}
+
+export const setAttribute = (props: any, self = gl) => {
+        return self.attribute(props)
+}

package/test/index.test.ts

@@ -0,0 +1,5 @@
+describe('core', () => {
+        it('should work', () => {
+                expect(true).toBeTruthy()
+        })
+})

package/test/utils.test.ts

@@ -0,0 +1,43 @@
+import {
+    interleave,
+    isTemplateLiteral,
+    concat,
+    switchUniformType,
+} from 'glre/utils'
+
+describe('utils', () => {
+        const _ = (str, ...args) => [str, args] as [any, any]
+        const _0 = _`foo${false}bar${undefined}baz${null}`
+        const _1 = _`foo${  0  }bar${   NaN   }baz${ -1 }`
+        it('interleave merge strings', () => {
+                expect(interleave(..._0)).toEqual(`foofalsebarundefinedbaznull`)
+                expect(interleave(..._1)).toEqual(`foo0barNaNbaz-1`)
+        })
+        it('isTemplateLiteral', () => {
+                expect(isTemplateLiteral(_0[0])).toEqual(true)
+                expect(isTemplateLiteral(_1[0])).toEqual(true)
+        })
+
+        const headerUniform = `uniform vec2 iMouse;`;
+        const withUniform = `void main() { gl_FragColor = vec4(iMouse, 0., 1.); }`
+        const noneUniform = `void main() { gl_FragColor = vec4(0., 1., 0., 1.); }`
+        it.each`
+                i    | key         | shader                         | toBe
+                ${0} | ${void 0}   | ${                withUniform} | ${headerUniform + withUniform}
+                ${1} | ${"iMouse"} | ${                withUniform} | ${headerUniform + withUniform}
+                ${2} | ${"iMouse"} | ${                noneUniform} | ${noneUniform}
+                ${3} | ${void 0}   | ${headerUniform + withUniform} | ${headerUniform + withUniform}
+                ${4} | ${"iMouse"} | ${headerUniform + withUniform} | ${headerUniform + withUniform}
+                ${5} | ${"iMouse"} | ${headerUniform + noneUniform} | ${headerUniform + noneUniform}
+        `('concat $i', ({ key, shader, toBe }) => {
+                expect(concat(shader, headerUniform, key)).toBe(toBe)
+        })
+        it.each`
+                i    | uniformType           | uniformKey | isMatrix | value
+                ${0} | ${'uniform1f'}        | ${'float'} | ${false} | ${10}
+                ${1} | ${'uniform2fv'}       | ${'vec2'}  | ${false} | ${[0, 1]}
+                ${2} | ${`uniformMatrix2fv`} | ${'mat2'}  | ${true}  | ${[0, 1, 2, 3]}
+        `('switchUniformType $i', ({ value, isMatrix, uniformType, uniformKey }) => {
+                expect(switchUniformType(value, isMatrix)).toEqual([uniformType, uniformKey])
+        })
+})

package/tsup.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'tsup'
+import { defaultConfig } from '../../tsup.config.base'
+
+export default defineConfig((options) => {
+        return defaultConfig(
+                {
+                        entry: [
+                                'index.ts',
+                                'native.ts',
+                                'react.ts',
+                                'solid.ts',
+                        ],
+                },
+                options
+        )
+})