v0.5.0

What's Changed

• refactor(core): create instances' objects on commit by @CodyJasonBennett in #44
• refactor(core): use resolve in applyprops by @CodyJasonBennett in #45
• refactor(types): extend native types for JSX elements by @CodyJasonBennett in #46
• fix(core): handle container append on mount by @CodyJasonBennett in #47
• fix(core): decouple previous attach on reconstruct by @CodyJasonBennett in #48
• fix(core): don't diff reserved props, skip instance props in applyProps by @CodyJasonBennett in #49
• fix(core): update attach reactively on commit update by @CodyJasonBennett in #50
• feat: use @types/ogl drop-in by @CodyJasonBennett in #51
• fix(core): don't set non-attributes as attributes by @CodyJasonBennett in #52

New Architecture

This release sports a new reconciliation architecture and a bunch of fixes for substantial improvements in performance and stability, particularly when using react features like suspense and concurrency.

Handling OGL side-effects

Instances' respective OGL elements are no longer created alongside the instance, but on commit mount once the tree is finalized. Instead, instances are created as descriptors that will create and link up with an OGL element once managed in the tree.

This prevents GPU memory leaks that would arise when using suspense or concurrent features whenever instances are discarded and later recreated as renders are rolled back to fallback content. OGL's use of effectful constructors is not a good design, but this way, we work around them.

Reactive attach

Attach is now gracefully handled reactively instead of at instance creation. Multiple elements can alternate between attach targets and will clean up after themselves in isolation.

<mesh>
  <box />
  <customProgram>
    <texture attach={foo ? 'texture1' : 'texture2'} />
    <texture attach={foo ? 'texture2' : 'texture1'} />
  </customProgram>
</mesh>

OGL Types

Additionally, OGL type information is now inherited from https://github.com/CodyJasonBennett/ogl-types aliased to @types/ogl (see oframe/ogl#24 as for getting this in DefinitelyTyped). These are 1-1 with the current version of OGL and will be maintained in lockstep by the community.

Event types changes

With this change, event types are now streamlined to extend Raycast hit interfaces, with a reference to the original DOM event:

export interface OGLEvent<TEvent extends Event> extends Partial<OGL.RaycastHit> {
  nativeEvent: TEvent
  // OGL.RaycastHit
  // localPoint?: OGL.Vec3
  // distance?: number
  // point?: OGL.Vec3
  // faceNormal?: OGL.Vec3
  // localFaceNormal?: OGL.Vec3
  // uv?: OGL.Vec2
  // localNormal?: OGL.Vec3
  // normal?: OGL.Vec3
}

export interface EventHandlers {
  onClick?: (event: OGLEvent<MouseEvent>) => void
  onPointerUp?: (event: OGLEvent<PointerEvent>) => void
  onPointerDown?: (event: OGLEvent<PointerEvent>) => void
  onPointerMove?: (event: OGLEvent<PointerEvent>) => void
  onPointerOver?: (event: OGLEvent<PointerEvent>) => void
  onPointerOut?: (event: OGLEvent<PointerEvent>) => void
}

Node types changes

Furthermore, extended JSX nodes have a streamlined interface rather than function-specific node interfaces, and a props helper type for element-specific prop values:

import type { WithOGLProps, Node } from 'react-ogl'

class CustomElement {}

interface CustomElementProps extends WithOGLProps<CustomElement> {}

declare global {
  namespace JSX {
    interface IntrinsicElements {
      customElement: Node<CustomElement, typeof CustomElement>
    }
  }
}

Full Changelog: v0.4.3...v0.5.0