glre 0.11.0 → 0.12.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "glre",
   "author": "tseijp",
   "license": "MIT",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "module": "index.js",
   "types": "index.ts",
   "main": "index.cjs.js",
@@ -35,7 +35,9 @@
     "index.ts",
     "events.ts",
     "helpers.ts",
-    "utils.ts",
-    "types.ts"
+    "react.ts",
+    "solid.ts",
+    "types.ts",
+    "utils.ts"
   ]
 }

package/react.ts

@@ -0,0 +1,40 @@
+import { gl } from './index'
+import type { GL } from './types'
+import { useRef, useMemo, useEffect, useCallback } from 'react'
+
+export function useGL(config?: Partial<GL>, target?: GL) {
+        const self = useMemo(() => {
+                if (target) return target
+                return (gl.default = gl(target))
+        }, [target])
+        useEffect(() => void self.setConfig(config), [self, config])
+        useEffect(() => void self.event('mount'), [self])
+        useEffect(() => () => self.event('clean'), [self])
+        return self
+}
+
+export function useTexture(props, self?: GL) {
+        if (!self) self = gl.default
+        useEffect(() => self.setTexture(props), [props, self])
+}
+
+export function useAttribute(props, self?: GL) {
+        if (!self) self = gl.default
+        return self.setAttribute(props)
+}
+
+export function useUniform(props, self?: GL) {
+        if (!self) self = gl.default
+        return self.setUniform(props)
+}
+
+export function useFrame(fun, self?: GL) {
+        if (!self) self = gl.default
+        const ref = useMutable(fun)
+        useEffect(() => void self.setFrame(ref), [ref, self])
+}
+
+export function useMutable(fun) {
+        const ref = useRef(fun)
+        return useCallback(() => ref.current(), [])
+}

package/solid.ts

@@ -0,0 +1,25 @@
+import { gl } from './index'
+import type { GL } from './types'
+import { onMount, onCleanup } from 'solid-js'
+
+export function createGL(config: Partial<GL>, _gl?: GL) {
+        const self = _gl || (gl.default = gl(config))
+        onMount(() => self.event('mount'))
+        onCleanup(() => self.event('clean'))
+        return self
+}
+
+export function onFrame(fun: any, self: GL) {
+        if (!self) self = gl.default
+        onMount(() => self.setFrame(fun))
+}
+
+export function setTexture(props, self?: GL) {
+        if (!self) self = gl.default
+        return self.setTexture(props)
+}
+
+export function setAttribute(props, self?: GL) {
+        if (!self) self = gl.default
+        return self.setAttribute(props)
+}

package/README.md

@@ -1,245 +0,0 @@
-# 🌇 glre
-
-<strong>
-<samp>
-
-<p align="center">
-
-[![ npm version ](
-    https://img.shields.io/npm/v/glre?style=flat&colorA=000&colorB=000)](
-    https://www.npmjs.com/package/glre)
-[![ downloads ](
-    https://img.shields.io/npm/dm/glre.svg?style=flat&colorA=000&colorB=000)](
-    https://www.npmtrends.com/glre)
-[![ license MIT ](
-    https://img.shields.io/npm/l/glre?style=flat&colorA=000&colorB=000)](
-    https://github.com/tseijp/glre)
-[![ docs available ](
-    https://img.shields.io/badge/docs-available-000.svg?style=flat&colorA=000)](
-    https://glre.tsei.jp/>)
-[![ bundle size ](
-    https://img.shields.io/bundlephobia/minzip/glre?style=flat&colorA=000&colorB=000)](
-    https://bundlephobia.com/package/glre@latest)
-
-glre is a simple glsl Reactive Engine on the web and native via TypeScript, React, Solid and more.
-
-</p>
-<p align="center" valign="top">
-  <a href="https://codesandbox.io/s/glre-test1-skyl9p">
-    <img alt="test1" width="256" src="https://user-images.githubusercontent.com/40712342/212297558-15a1e721-55d6-4b6f-aab4-9f5d7cede2cb.gif"></img>
-  </a>
-  <a href="https://codesandbox.io/s/glre-test2-c1syho">
-    <img alt="test2" width="256" src="https://user-images.githubusercontent.com/40712342/212297576-e12cef1b-b0e0-40cb-ac0f-7fb387ae6da8.gif"></img>
-  </a>
-  <a href="https://codesandbox.io/s/glre-test3-ntlk3l">
-    <img alt="test3" width="256" src="https://user-images.githubusercontent.com/40712342/212297587-0227d536-5cef-447a-be3e-4c93dad002a2.gif"></img>
-  </a>
-  <a href="https://codesandbox.io/s/glre-raymarch-test-q8pyxv" target="_blank" rel="noopener">
-    <img alt="raymarch1" width="256" src="https://user-images.githubusercontent.com/40712342/215024903-90f25934-1018-4f2a-81e6-f16e5c64c378.gif">
-  </a>
-  <a href="https://codesandbox.io/s/glre-raymarch-test2-fcds29" target="_blank" rel="noopener">
-    <img alt="raymarch2" width="256" src="https://user-images.githubusercontent.com/40712342/215024942-27766b2b-7b85-4725-bb3d-865bf137ea29.gif">
-  </a>
-  <a href="https://codesandbox.io/s/glre-raymarch-test3-nx6ggi" target="_blank" rel="noopener">
-    <img alt="raymarch3" width="256" src="https://user-images.githubusercontent.com/40712342/215025052-c2fa46e5-5e0e-4de8-baee-869ca6135a61.gif">
-  </a>
-  <a href="https://codesandbox.io/s/glre-raymarch-test4-cy1wpp" target="_blank" rel="noopener">
-    <img alt="raymarch4" width="256" src="https://user-images.githubusercontent.com/40712342/215025289-132b4213-aabc-48f2-bbe3-05764a8dae42.gif">
-  </a>
-  <a href="https://codesandbox.io/s/glre-raymarch-test5-19v0g7" target="_blank" rel="noopener">
-    <img alt="raymarch5" width="256" src="https://user-images.githubusercontent.com/40712342/215025456-8ab75328-ca7a-41f6-b5fe-98dd58410b38.gif">
-  </a>
-  <a href="https://codesandbox.io/s/glre-raymarch-test6-jew0it" target="_blank" rel="noopener">
-    <img alt="raymarch6" width="256" src="https://user-images.githubusercontent.com/40712342/215025517-343fdfbf-af54-497c-a759-267acc450366.gif">
-  </a>
-</p>
-
-## Installation
-
-```ruby
-npm install glre
-```
-
-<table>
-<td width="1000px" valign="top">
-
-## Documentation
-
-###### [Docs][docs] : glre Introduction
-
-###### [API][api] : glre API and feature
-
-###### [Guide][guide] : Creating a scene
-
-[docs]: https://glre.tsei.jp/docs
-[api]: https://glre.tsei.jp/api
-[guide]: https://glre.tsei.jp/guide
-
-</td>
-<td width="1000px" valign="top">
-
-## Ecosystem
-
-###### ⛪️ [reev][reev]: reactive event state manager
-
-###### 🌃 [refr][refr]: request animation frame
-
-[reev]: https://github.com/tseijp/reev
-[refr]: https://github.com/tseijp/refr
-
-</td>
-<td width="1000px" valign="top">
-
-## Staying informed
-
-###### [github discussions][github] welcome✨
-
-###### [@tseijp][twitter] twitter
-
-###### [tsei.jp][articles] articles
-
-[github]: https://github.com/tseijp/glre/discussions
-[twitter]: https://twitter.com/tseijp
-[articles]: https://tsei.jp/articles
-
-</td>
-</table>
-
-## PRs
-
-###### welcome✨
-
-## What does it look like?
-
-<table>
-  <tr>
-    <td width="7500px" align="center" valign="center">
-      glre simplifies glsl programming via TypeScript, React, Solid and more (<a href="https://codesandbox.io/s/glre-basic-demo-ppzo3d">live demo</a>).
-    </td>
-    <td width="2500px" valign="top">
-      <a href="https://codesandbox.io/s/glre-basic-demo-ppzo3d">
-        <img alt="4" src="https://i.imgur.com/Lb3h9fs.jpg"></img>
-      </a>
-    </td>
-  </tr>
-</table>
-
-```ts
-import { createRoot } from "react-dom/client";
-import { useGL, useFrame } from "@glre/react";
-
-const App = (props) => {
-  const gl = useGL()`
-    precision highp float;
-    uniform vec2 iResolution;
-    void main() {
-      gl_FragColor = vec4(fract(gl_FragCoord.xy / iResolution), 0, 1);
-    }
-  `;
-  useFrame(() => {
-    gl.clear();
-    gl.viewport();
-    gl.drawArrays();
-    return true;
-  });
-  return <canvas id={gl.id} {...props} />;
-};
-
-const style = { top: 0, left: 0, position: "fixed" };
-createRoot(document.getElementById("root")).render(<App style={style} />);
-```
-
-<details>
-<summary>
-
-solid js supported ([codesandbox demo](https://codesandbox.io/s/glre-basic-demo2-m1h6cr))
-
-</summary>
-
-```html
-<html>
-  <body>
-    <script type="module">
-      import html from "https://cdn.skypack.dev/solid-js/html";
-      import { gl } from "https://cdn.skypack.dev/glre@latest";
-      import { render } from "https://cdn.skypack.dev/solid-js/web";
-      import { onCleanup, onMount } from "https://cdn.skypack.dev/solid-js";
-
-      function createGL(config, _gl) {
-        const self = _gl || (gl.default = gl(config));
-        onMount(() => self.mount());
-        onCleanup(() => self.clean());
-        return self;
-      }
-
-      function onFrame(fun, self) {
-        if (!self) self = gl.default;
-        onMount(() => self.setFrame(fun));
-      }
-
-      const App = () => {
-        const gl = createGL()`
-          precision highp float;
-          uniform vec2 iResolution;
-          void main() {
-            gl_FragColor = vec4(fract(gl_FragCoord.xy / iResolution), 0, 1);
-          }
-        `;
-        onFrame(() => {
-          gl.clear();
-          gl.viewport();
-          gl.drawArrays();
-          return true;
-        });
-        return html`<canvas id=${gl.id} />`;
-      };
-
-      render(App, document.body);
-    </script>
-  </body>
-</html>
-```
-
-</details>
-<details>
-<summary>
-
-pure js supported ([codesandbox demo](https://codesandbox.io/s/glre-basic-demo3-3bhr3y))
-
-</summary>
-
-```html
-<!DOCTYPE html>
-<html>
-  <body>
-    <script type="module">
-      import createGL from "https://cdn.skypack.dev/glre@latest"
-      const gl = createGL`
-        precision highp float;
-        uniform vec2 iResolution;
-        void main() {
-          gl_FragColor = vec4(fract(gl_FragCoord.xy / iResolution), 0, 1);
-        }
-      `;
-
-      gl.setFrame(() => {
-        gl.clear();
-        gl.viewport();
-        gl.drawArrays();
-        return true;
-      });
-
-      const style = { top: 0, left: 0, position: "fixed" };
-      const canvas = document.createElement("canvas");
-      Object.assign(canvas, { id: gl.id });
-      Object.assign(canvas.style, style);
-      document.body.append(canvas);
-      window.addEventListener("DOMContentLoaded", gl.mount);
-    </script>
-  </body>
-</html>
-```
-
-</details>
-</samp>
-</strong>