@symbiote-native/gl 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 A. Prokopenko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,220 @@
-# Temporary Holding Version
+# @symbiote-native/gl
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[`expo-gl`](https://docs.expo.dev/versions/latest/sdk/gl-view/) for **every**
+[SymbioteNative](../../README.md) adapter: React, Vue, Svelte, Solid and Angular. A `GLView` that
+gives a WebGL2 context to draw into, headless contexts and snapshots.
+
+Built the same way as [`@symbiote-native/clipboard`](../clipboard)'s `ClipboardPasteButton`, an
+`expo-modules-core` native view reached through `requireNativeViewManager` (see the
+`symbiote-expo-native-module` project skill: why `expo-modules-core` is depended on directly and never
+the `expo` meta-package, why the upstream JS is hand-ported into `core/`, and how autolinking finds the
+native module). One render function in `core/` returns a descriptor and every adapter only turns it into
+its own element.
+
+## Install
+
+**New app:**
+
+```bash
+npx @symbiote-native/cli new my-app --gl
+```
+
+**Existing SymbioteNative app:**
+
+```bash
+npx @symbiote-native/cli add --gl
+```
+
+Either way: installs `@symbiote-native/gl` and wires the native autolinking automatically,
+see [`@symbiote-native/cli`](../cli).
+
+<details>
+<summary>Manual install (no CLI - installing and wiring native autolinking by hand)</summary>
+
+```bash
+npm install @symbiote-native/gl
+```
+
+Depends on `expo-gl` and `expo-modules-core` directly (regular dependencies, pinned to exact
+versions, since this package's `core/` is hand-ported against one specific native API shape).
+Never install `expo-gl` yourself, and never add the `expo` package to this project: it bundles
+its own Metro/Babel pipeline that conflicts with this project's own.
+
+### Required one-time step: native autolinking wiring
+
+`expo-gl`'s native code is discovered by `expo-modules-autolinking`, not by RN's own
+`react-native.config.cjs` mechanism. Wire it into the native host app **once**, it covers this package
+and every other `expo-modules-core` package with zero further changes. The steps and the
+mechanics behind them are in the `symbiote-expo-native-module` skill and in
+[`@symbiote-native/network`](../network)'s README; the reference app is `examples/expo-react`.
+
+</details>
+
+## Shape
+
+```
+src/core/                gl-view.ts - the view and its handle. gl-context.ts - createContextAsync,
+                         destroyContextAsync, takeSnapshotAsync, getWorkletContext, forgetting a context.
+                         worklet-context-manager.ts - the optional Reanimated side, in its own file so an
+                         import of Reanimated inside a try survives Metro's inline requires. gl-utils.ts,
+                         gl-errors.ts, types.ts.
+src/react/               @symbiote-native/gl/react   - GLView
+src/vue/                 @symbiote-native/gl/vue     - GLView
+src/svelte/              @symbiote-native/gl/svelte  - GLView (.svelte)
+src/solid/               @symbiote-native/gl/solid   - GLView
+src/angular/             @symbiote-native/gl/angular - GLView
+```
+
+A controller may define `dispose`, which every adapter runs on unmount (a React effect cleanup, Vue
+`onUnmounted`, Solid `onCleanup`, a Svelte `$effect` teardown, Angular's `disposeView`). `GLView` uses it to
+forget its context. The package tsconfig adds the DOM lib for the WebGL types.
+
+## Use it
+
+### React
+
+```tsx
+import { GLView, type IExpoWebGLRenderingContext } from '@symbiote-native/gl/react';
+
+function onContextCreate(gl: IExpoWebGLRenderingContext) {
+  gl.clearColor(0, 1, 1, 1);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  gl.endFrameEXP();
+}
+
+<GLView style={{ flex: 1 }} onContextCreate={onContextCreate} />;
+```
+
+### Vue
+
+```vue
+<script setup lang="ts">
+import { GLView, type IExpoWebGLRenderingContext } from '@symbiote-native/gl/vue';
+
+function onContextCreate(gl: IExpoWebGLRenderingContext) {
+  gl.clearColor(0, 1, 1, 1);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  gl.endFrameEXP();
+}
+</script>
+
+<template>
+  <GLView :style="{ flex: 1 }" @contextCreate="onContextCreate" />
+</template>
+```
+
+### Angular
+
+```ts
+import { Component } from '@angular/core';
+import { GLView, type IExpoWebGLRenderingContext } from '@symbiote-native/gl/angular';
+
+@Component({
+  standalone: true,
+  imports: [GLView],
+  template: `<GLView [style]="{ flex: 1 }" [onContextCreate]="onContextCreate" />`,
+})
+export class Surface {
+  readonly onContextCreate = (gl: IExpoWebGLRenderingContext): void => {
+    gl.clearColor(0, 1, 1, 1);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.endFrameEXP();
+  };
+}
+```
+
+### Svelte
+
+```svelte
+<script lang="ts">
+  import { GLView, type IExpoWebGLRenderingContext } from '@symbiote-native/gl/svelte';
+
+  function onContextCreate(gl: IExpoWebGLRenderingContext) {
+    gl.clearColor(0, 1, 1, 1);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.endFrameEXP();
+  }
+</script>
+
+<GLView style={{ flex: 1 }} {onContextCreate} />
+```
+
+### Solid
+
+```tsx
+import { GLView, type IExpoWebGLRenderingContext } from '@symbiote-native/gl/solid';
+
+function onContextCreate(gl: IExpoWebGLRenderingContext) {
+  gl.clearColor(0, 1, 1, 1);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  gl.endFrameEXP();
+}
+
+<GLView style={{ flex: 1 }} onContextCreate={onContextCreate} />;
+```
+
+## API
+
+```ts
+<GLView onContextCreate={(gl: IExpoWebGLRenderingContext) => void} msaaSamples? enableExperimentalWorkletSupport? style? />
+// gl is a WebGL2 context, call gl.endFrameEXP() at the end of every frame
+// handle: exglCtxId, createCameraTextureAsync(camera), destroyObjectAsync(texture), takeSnapshotAsync(options?)
+
+createContextAsync(): Promise<IExpoWebGLRenderingContext>      // headless
+destroyContextAsync(exgl?: IExpoWebGLRenderingContext | number): Promise<boolean>
+takeSnapshotAsync(exgl?: IExpoWebGLRenderingContext | number, options?): Promise<IGLSnapshot>
+getWorkletContext(contextId: number): IExpoWebGLRenderingContext | undefined    // inside a worklet
+GLLoggingOption  gl.__expoSetLogging(option)                    // prints the GL calls with console.warn
+```
+
+Ported from upstream's `GLView.tsx` and `GLView.types.ts`.
+
+## Notes
+
+- **Nothing reaches the screen until `endFrameEXP()`.** Call it at the end of every frame, including
+  the first. The drawing buffer is presented only then.
+- **`onContextCreate` runs once per surface.** Start your loop in it and stop it when the view
+  unmounts. The package forgets the context of the view when it unmounts.
+- **Texture images must be files on disk.** `gl.texImage2D` reads a file path, so load a bundled image
+  with [`@symbiote-native/asset`](/docs/packages/asset/) and pass its `localUri` after
+  `downloadAsync()` resolves.
+- **Reanimated stays optional.** `getWorkletContext` and `enableExperimentalWorkletSupport` need
+  `react-native-reanimated` in your app, the package does not depend on it.
+- **Logging is printed with `console.warn`.** `gl.__expoSetLogging(option)` prints every GL call, which
+  is slow, so switch it off once you have the answer.
+- **Not ported.** The web build, the `nativeRef_EXPERIMENTAL` prop (hidden upstream) and upstream's one test, which is skipped there.
+- **Not ported.** The web build, the hidden `nativeRef_EXPERIMENTAL` prop and upstream's one test (skipped there).
+
+## Common questions
+
+- **Black view.** Call `gl.endFrameEXP()` after drawing, then check
+  `gl.getShaderInfoLog(shader)` and `gl.getProgramInfoLog(program)`: a failed program draws nothing
+  without throwing.
+- **Stutter.** One animated scene at a time (they share a GL thread), judge on a device (the iOS
+  Simulator renders in software), `msaaSamples={0}` and 30 fps for a full-screen shader, and
+  `precision highp float` in animated fragment shaders.
+- **Crash in the background on iOS.** GL calls are forbidden once the app is inactive. Stop the loop
+  when `AppState` leaves `active`.
+- **Blank texture in a release build.** Pass the asset's `localUri` after `await asset.downloadAsync()`
+  (`@symbiote-native/asset`), a not yet downloaded asset reports a name instead of a path.
+- **Reanimated worklets.** Experimental: `enableExperimentalWorkletSupport` and
+  `getWorkletContext(gl.contextId)`, needs `react-native-reanimated` in the app.
+- **Camera texture memory.** Call `destroyObjectAsync(texture)` when done.
+
+Sources: [Expo docs: GLView](https://docs.expo.dev/versions/latest/sdk/gl-view/),
+[expo/expo#7367](https://github.com/expo/expo/issues/7367),
+[expo/expo#18483](https://github.com/expo/expo/issues/18483),
+[expo/expo#2693](https://github.com/expo/expo/issues/2693),
+[expo/expo#11267](https://github.com/expo/expo/issues/11267),
+[expo/expo#12468](https://github.com/expo/expo/issues/12468).
+
+## Test it
+
+No device is needed for the logic. The core tests (`src/core/*.test.ts`) replace `expo-modules-core`
+(`requireNativeViewManager`, `Platform`) and assert the view and the context bookkeeping. The
+adapter tests (`src/{react,vue,solid,angular}/**/*.test.*`, `vitest`) render the real component over the
+recording Fabric with an injected view config and assert the committed payload, and Svelte's
+`*.smoke.test.ts` compile the `.svelte` files and mount them. Painting itself is verified on a device in
+the six `examples/expo-*` canary apps (`examples/expo-react`, `examples/expo-vue-sfc`,
+`examples/expo-vue-tsx`, `examples/expo-svelte`, `examples/expo-solid`, `examples/expo-angular`), see the
+parent [README](../../README.md).

package/build/angular/gl-view/index.d.ts

@@ -0,0 +1,18 @@
+import { NativeViewBase } from '@symbiote-native/angular';
+import type { IDescriptor } from '@symbiote-native/components';
+import type { IGLViewProps } from '../../core';
+declare const GL_VIEW_INPUTS: readonly ["onContextCreate", "msaaSamples", "enableExperimentalWorkletSupport"];
+export interface GLView extends Partial<Pick<IGLViewProps, (typeof GL_VIEW_INPUTS)[number]>> {
+}
+/** Angular twin of `expo-gl`'s `GLView` */
+export declare class GLView extends NativeViewBase {
+    private readonly view;
+    readonly createCameraTextureAsync: (camera: import("..").IGLNodeOrTag) => Promise<WebGLTexture>;
+    readonly destroyObjectAsync: (glObject: import("..").IGLObject) => Promise<boolean>;
+    readonly takeSnapshotAsync: (options?: import("..").IGLSnapshotOptions) => Promise<import("..").IGLSnapshot>;
+    get exglCtxId(): number | undefined;
+    protected readonly propNames: readonly ["onContextCreate", "msaaSamples", "enableExperimentalWorkletSupport"];
+    protected renderView(props: object): IDescriptor | null;
+    protected disposeView(): void;
+}
+export {};

package/build/angular/gl-view/index.js

@@ -0,0 +1,87 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { DescriptorOutlet, NativeViewBase } from '@symbiote-native/angular';
+import { createGLView } from '../../core/index.js';
+// One list is the inputs of the component and the props it hands to the native view
+const GL_VIEW_INPUTS = [
+    'onContextCreate',
+    'msaaSamples',
+    'enableExperimentalWorkletSupport',
+];
+/** Angular twin of `expo-gl`'s `GLView` */
+let GLView = (() => {
+    let _classDecorators = [Component({
+            selector: 'GLView',
+            standalone: true,
+            imports: [DescriptorOutlet],
+            inputs: [...GL_VIEW_INPUTS],
+            changeDetection: ChangeDetectionStrategy.OnPush,
+            template: `@if (descriptor; as node) {
+    <symbiote-descriptor-outlet [node]="node" />
+  }`,
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = NativeViewBase;
+    var GLView = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            GLView = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        view = createGLView(() => this.hostNode());
+        // The functions of the view are members of the component, a `@ViewChild` reaches them
+        createCameraTextureAsync = this.view.handle.createCameraTextureAsync;
+        destroyObjectAsync = this.view.handle.destroyObjectAsync;
+        takeSnapshotAsync = this.view.handle.takeSnapshotAsync;
+        get exglCtxId() {
+            return this.view.handle.exglCtxId;
+        }
+        propNames = GL_VIEW_INPUTS;
+        renderView(props) {
+            return this.view.render(props);
+        }
+        disposeView() {
+            this.view.dispose();
+        }
+    };
+    return GLView = _classThis;
+})();
+export { GLView };

package/build/angular/index.d.ts

@@ -0,0 +1,2 @@
+export { GLView } from './gl-view';
+export * from '../core';

package/build/angular/index.js

@@ -0,0 +1,3 @@
+// @symbiote-native/gl/angular: a GLView that gives a WebGL context to draw into, on a shared core
+export { GLView } from './gl-view/index.js';
+export * from '../core/index.js';

package/build/core/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const GL_MODULE_NAME = "ExpoGL";
+export declare const GL_PACKAGE_NAME = "expo-gl";
+/** Where the native module keeps the contexts it installs on the runtime, by id */
+export declare const GL_CONTEXTS_GLOBAL = "__EXGLContexts";

package/build/core/constants.js

@@ -0,0 +1,4 @@
+export const GL_MODULE_NAME = 'ExpoGL';
+export const GL_PACKAGE_NAME = 'expo-gl';
+/** Where the native module keeps the contexts it installs on the runtime, by id */
+export const GL_CONTEXTS_GLOBAL = '__EXGLContexts';

package/build/core/gl-context.d.ts

@@ -0,0 +1,13 @@
+import type { IExpoWebGLRenderingContext, IGLSnapshot, IGLSnapshotOptions } from './types';
+/** The context of a worklet, `exgl` has to be created with worklet support */
+export declare function getWorkletContext(contextId: number): IExpoWebGLRenderingContext | undefined;
+export declare function unregisterGLContext(exglCtxId: number): void;
+/** The GL interface of a context id the native side created */
+export declare function getGl(exglCtxId: number): IExpoWebGLRenderingContext;
+export declare function getContextId(exgl?: IExpoWebGLRenderingContext | number): number;
+/** A context with no view, which does not present its framebuffer, take a snapshot to see it */
+export declare function createContextAsync(): Promise<IExpoWebGLRenderingContext>;
+/** For a headless context made by `createContextAsync` */
+export declare function destroyContextAsync(exgl?: IExpoWebGLRenderingContext | number): Promise<boolean>;
+/** Saves the framebuffer as a file in the cache directory of the app */
+export declare function takeSnapshotAsync(exgl?: IExpoWebGLRenderingContext | number, options?: IGLSnapshotOptions): Promise<IGLSnapshot>;

package/build/core/gl-context.js

@@ -0,0 +1,54 @@
+import { CodedError } from 'expo-modules-core';
+import { GL_CONTEXTS_GLOBAL } from './constants.js';
+import { configureLogging } from './gl-utils.js';
+import { glNativeModule } from './native-module.js';
+import { createWorkletContextManager } from './worklet-context-manager.js';
+const workletContextManager = createWorkletContextManager();
+function isContext(value) {
+    return typeof value === 'object' && value !== null;
+}
+/** The context of a worklet, `exgl` has to be created with worklet support */
+export function getWorkletContext(contextId) {
+    'worklet';
+    return workletContextManager.getContext(contextId);
+}
+export function unregisterGLContext(exglCtxId) {
+    const contexts = Reflect.get(globalThis, GL_CONTEXTS_GLOBAL);
+    if (contexts)
+        Reflect.deleteProperty(Object(contexts), String(exglCtxId));
+    workletContextManager.unregister?.(exglCtxId);
+}
+/** The GL interface of a context id the native side created */
+export function getGl(exglCtxId) {
+    const contexts = Reflect.get(globalThis, GL_CONTEXTS_GLOBAL);
+    if (!contexts) {
+        throw new CodedError('ERR_GL_NOT_AVAILABLE', 'GL is currently not available. (Have you enabled remote debugging? GL is not available while debugging remotely.)');
+    }
+    const gl = Reflect.get(Object(contexts), String(exglCtxId));
+    if (!isContext(gl))
+        throw new Error(`There is no EXGLContext with id ${exglCtxId}`);
+    configureLogging(gl);
+    return gl;
+}
+export function getContextId(exgl) {
+    const exglCtxId = exgl && typeof exgl === 'object' ? exgl.contextId : exgl;
+    if (!exglCtxId || typeof exglCtxId !== 'number') {
+        throw new Error(`Invalid EXGLContext id: ${String(exglCtxId)}`);
+    }
+    return exglCtxId;
+}
+/** A context with no view, which does not present its framebuffer, take a snapshot to see it */
+export async function createContextAsync() {
+    const { exglCtxId } = await glNativeModule.createContextAsync();
+    return getGl(exglCtxId);
+}
+/** For a headless context made by `createContextAsync` */
+export async function destroyContextAsync(exgl) {
+    const exglCtxId = getContextId(exgl);
+    unregisterGLContext(exglCtxId);
+    return glNativeModule.destroyContextAsync(exglCtxId);
+}
+/** Saves the framebuffer as a file in the cache directory of the app */
+export async function takeSnapshotAsync(exgl, options = {}) {
+    return glNativeModule.takeSnapshotAsync(getContextId(exgl), options);
+}

package/build/core/gl-errors.d.ts

@@ -0,0 +1 @@
+export declare const GL_ERRORS: Readonly<Record<number, string>>;

package/build/core/gl-errors.js

@@ -0,0 +1,8 @@
+export const GL_ERRORS = {
+    1280: 'INVALID ENUM: An unacceptable value has been specified for an enumerated argument.',
+    1281: 'INVALID_VALUE: A numeric argument is out of range.',
+    1282: 'INVALID_OPERATION: The specified command is not allowed for the current state.',
+    1285: 'OUT_OF_MEMORY: Not enough memory is left to execute the command.',
+    1286: 'INVALID_FRAMEBUFFER_OPERATION: The currently bound framebuffer is not complete when trying to render to or to read from it.',
+    37442: 'CONTEXT_LOST_WEBGL: The WebGL context is lost.',
+};

package/build/core/gl-utils.d.ts

@@ -0,0 +1,5 @@
+import type { IExpoWebGLRenderingContext } from './types';
+type ILoggableGL = Pick<IExpoWebGLRenderingContext, '__expoSetLogging'>;
+/** Adds `__expoSetLogging` to the context, for the logging options useful in debugging GL calls */
+export declare function configureLogging(gl: ILoggableGL): void;
+export {};

package/build/core/gl-utils.js

@@ -0,0 +1,84 @@
+import { GL_ERRORS } from './gl-errors.js';
+import { GLLoggingOption } from './types.js';
+const MAX_STRING_LENGTH = 20;
+const SET_LOGGING_KEY = '__expoSetLogging';
+const wrappers = new WeakSet();
+function isGLFunction(value) {
+    return typeof value === 'function';
+}
+function constantNameOf(gl, value) {
+    for (const name in gl) {
+        if (Reflect.get(gl, name) === value)
+            return name;
+    }
+    return undefined;
+}
+// Numbers get the name of a constant that holds them, which can mislead for a size, so the
+// number stays. Strings are cut because a shader is long and logging it blocks the bridge
+function describeArg(gl, option, arg) {
+    if (option & GLLoggingOption.RESOLVE_CONSTANTS && typeof arg === 'number') {
+        const name = constantNameOf(gl, arg);
+        if (name)
+            return `${arg} (${name})`;
+    }
+    const isLong = typeof arg === 'string' && arg.length > MAX_STRING_LENGTH;
+    if (option & GLLoggingOption.TRUNCATE_STRINGS && isLong) {
+        const lastSpace = arg.lastIndexOf(' ', MAX_STRING_LENGTH);
+        return `${arg.slice(0, lastSpace >= 0 ? lastSpace : MAX_STRING_LENGTH)}...`;
+    }
+    return String(arg);
+}
+// The original `getError`, a wrapped one would log itself
+function reportError(gl) {
+    const getError = Reflect.get(Reflect.getPrototypeOf(gl) ?? {}, 'getError');
+    if (!isGLFunction(getError))
+        return;
+    const error = getError.call(gl);
+    if (typeof error !== 'number' || error === Reflect.get(gl, 'NO_ERROR'))
+        return;
+    console.warn(`\x1b[31mExpoGL: Error ${GL_ERRORS[error]}\x1b[0m`);
+}
+function wrapMethod(gl, key, original, getOption) {
+    const wrapper = (...args) => {
+        const option = getOption();
+        if (option & GLLoggingOption.METHOD_CALLS) {
+            const params = args.map(arg => describeArg(gl, option, arg));
+            console.warn(`ExpoGL: ${key}(${params.join(', ')})`);
+        }
+        const result = original.apply(gl, args);
+        if (option & GLLoggingOption.METHOD_CALLS)
+            console.warn(`ExpoGL:   = ${String(result)}`);
+        if (option & GLLoggingOption.GET_ERRORS && key !== 'getError')
+            reportError(gl);
+        return result;
+    };
+    wrappers.add(wrapper);
+    Reflect.set(gl, key, wrapper);
+}
+function wrapMethods(gl, getOption) {
+    for (const [key, original] of Object.entries(Reflect.getPrototypeOf(gl) ?? {})) {
+        if (isGLFunction(original) && key !== SET_LOGGING_KEY) {
+            wrapMethod(gl, key, original, getOption);
+        }
+    }
+}
+function unwrapMethods(gl) {
+    for (const [key, value] of Object.entries(gl)) {
+        if (isGLFunction(value) && wrappers.has(value))
+            Reflect.deleteProperty(gl, key);
+    }
+}
+/** Adds `__expoSetLogging` to the context, for the logging options useful in debugging GL calls */
+export function configureLogging(gl) {
+    let loggingOption = GLLoggingOption.DISABLED;
+    gl.__expoSetLogging = (option) => {
+        // Both on or both off needs no wrapping or unwrapping, only the new option
+        if (!loggingOption !== !option) {
+            if (option)
+                wrapMethods(gl, () => loggingOption);
+            else
+                unwrapMethods(gl);
+        }
+        loggingOption = option;
+    };
+}

package/build/core/gl-view.d.ts

@@ -0,0 +1,16 @@
+import type { IDescriptor } from '@symbiote-native/components';
+import type { ISymbioteNode } from '@symbiote-native/engine';
+import type { IGLViewHandle } from './types';
+export declare const glViewName: () => string;
+export declare const ensureGLViewRegistered: () => boolean;
+export type IGLView = {
+    handle: IGLViewHandle;
+    /** `null` means the view cannot register and the caller renders nothing */
+    render(props: object): IDescriptor | null;
+    /** Forgets the context of the surface, called when the view unmounts */
+    dispose(): void;
+};
+type IGetNode = () => ISymbioteNode | null | undefined;
+/** One per mounted view, `getNode` is kept for the shape the adapters share */
+export declare function createGLView(_getNode: IGetNode): IGLView;
+export {};