@react-three/fiber 8.0.0-beta-03 → 8.0.0-beta-04

package/dist/declarations/src/core/events.d.ts

@@ -57,6 +57,7 @@ export interface PointerCaptureTarget {
     intersection: Intersection;
     target: Element;
 }
+export declare function getEventPriority(): any;
 export declare function removeInteractivity(store: UseStore<RootState>, object: THREE.Object3D): void;
 export declare function createEvents(store: UseStore<RootState>): {
     handlePointer: (name: string) => (event: DomEvent) => void;

package/dist/declarations/src/{web → core}/index.d.ts

@@ -6,8 +6,7 @@ import { dispose } from '../core/utils';
 import { Renderer, StoreProps, context, RootState, Size } from '../core/store';
 import { extend, Root } from '../core/renderer';
 import { addEffect, addAfterEffect, addTail } from '../core/loop';
-import { createPointerEvents as events } from './events';
-import { EventManager } from '../core/events';
+import { EventManager } from './events';
 declare const roots: Map<Element, Root>;
 declare const invalidate: (state?: RootState | undefined) => void, advance: (timestamp: number, runGlobalEffects?: boolean, state?: RootState | undefined) => void;
 declare const reconciler: import("react-reconciler").Reconciler<unknown, unknown, unknown, unknown, unknown>, applyProps: typeof import("../core/utils").applyProps;
@@ -29,5 +28,4 @@ declare function render<TCanvas extends Element>(element: React.ReactNode, canva
 declare function unmountComponentAtNode<TElement extends Element>(canvas: TElement, callback?: (canvas: TElement) => void): void;
 declare const act: any;
 declare function createPortal(children: React.ReactNode, container: THREE.Object3D): React.ReactNode;
-export * from '../core/hooks';
-export { context, render, createRoot, unmountComponentAtNode, createPortal, events, reconciler, applyProps, dispose, invalidate, advance, extend, addEffect, addAfterEffect, addTail, act, roots as _roots, };
+export { context, render, createRoot, unmountComponentAtNode, createPortal, reconciler, applyProps, dispose, invalidate, advance, extend, addEffect, addAfterEffect, addTail, act, roots as _roots, };

package/dist/declarations/src/index.d.ts

@@ -4,5 +4,7 @@ export { ReactThreeFiber };
 export type { Intersection, Subscription, Dpr, Size, Viewport, Camera, RenderCallback, Performance, RootState, } from './core/store';
 export type { ThreeEvent, Events, EventManager } from './core/events';
 export type { ObjectMap } from './core/utils';
+export * from './core/hooks';
 export * from './web/Canvas';
-export * from './web';
+export { createPointerEvents as events } from './web/events';
+export * from './core';

package/dist/declarations/src/native/Canvas.d.ts

@@ -1,16 +1,13 @@
 import * as React from 'react';
 import { View, ViewProps, ViewStyle } from 'react-native';
-import { ExpoWebGLRenderingContext } from 'expo-gl';
 import { UseStore } from 'zustand';
-import { RenderProps } from './index';
+import { RenderProps } from '../core';
 import { RootState } from '../core/store';
 import { EventManager } from '../core/events';
-export interface Props extends Omit<RenderProps<View>, 'size' | 'events'>, ViewProps {
+export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size' | 'events'>, ViewProps {
     children: React.ReactNode;
     fallback?: React.ReactNode;
     style?: ViewStyle;
     events?: (store: UseStore<RootState>) => EventManager<any>;
-    nativeRef_EXPERIMENTAL?: React.MutableRefObject<any>;
-    onContextCreate?: (gl: ExpoWebGLRenderingContext) => Promise<any> | void;
 }
 export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<View>>;

package/dist/declarations/src/native/events.d.ts

@@ -2,5 +2,4 @@ import { UseStore } from 'zustand';
 import { RootState } from '../core/store';
 import { EventManager } from '../core/events';
 import { View } from 'react-native';
-export declare function getEventPriority(): any;
 export declare function createTouchEvents(store: UseStore<RootState>): EventManager<View>;

package/dist/declarations/src/native.d.ts

@@ -4,5 +4,7 @@ export { ReactThreeFiber };
 export type { Intersection, Subscription, Dpr, Size, Viewport, Camera, RenderCallback, Performance, RootState, } from './core/store';
 export type { ThreeEvent, Events, EventManager } from './core/events';
 export type { ObjectMap } from './core/utils';
+export * from './native/hooks';
 export * from './native/Canvas';
-export * from './native/index';
+export { createTouchEvents as events } from './native/events';
+export * from './core';

package/dist/declarations/src/web/Canvas.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { Options as ResizeOptions } from 'react-use-measure';
 import { UseStore } from 'zustand';
-import { RenderProps } from './index';
+import { RenderProps } from '../core';
 import { RootState } from '../core/store';
 import { EventManager } from '../core/events';
 export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size' | 'events'>, React.HTMLAttributes<HTMLDivElement> {

package/dist/declarations/src/web/events.d.ts

@@ -1,5 +1,4 @@
 import { UseStore } from 'zustand';
 import { RootState } from '../core/store';
 import { EventManager } from '../core/events';
-export declare function getEventPriority(): any;
 export declare function createPointerEvents(store: UseStore<RootState>): EventManager<HTMLElement>;

package/dist/{hooks-7b7e01e6.cjs.prod.js → index-eb414398.cjs.prod.js}

@@ -1,12 +1,12 @@
 'use strict';
 
-var Reconciler = require('react-reconciler');
-var scheduler = require('scheduler');
-var constants = require('react-reconciler/constants');
-var THREE = require('three');
 var React = require('react');
 var suspendReact = require('suspend-react');
+var THREE = require('three');
+var constants = require('react-reconciler/constants');
 var create = require('zustand');
+var Reconciler = require('react-reconciler');
+var scheduler = require('scheduler');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -30,10 +30,10 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var Reconciler__default = /*#__PURE__*/_interopDefault(Reconciler);
-var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var create__default = /*#__PURE__*/_interopDefault(create);
+var Reconciler__default = /*#__PURE__*/_interopDefault(Reconciler);
 
 var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
@@ -241,7 +241,7 @@ function diffProps(instance, {
   };
 } // This function applies a set of changes to the instance
 
-function applyProps(instance, data) {
+function applyProps$1(instance, data) {
   var _instance$__r3f3, _root$getState;
 
   // Filter equals, events and reserved props
@@ -351,13 +351,41 @@ function updateInstance(instance) {
 
 function makeId(event) {
   return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
+} // https://github.com/facebook/react/tree/main/packages/react-reconciler#getcurrenteventpriority
+// Gives React a clue as to how import the current interaction is
+
+
+function getEventPriority() {
+  var _window, _window$event;
+
+  let name = (_window = window) == null ? void 0 : (_window$event = _window.event) == null ? void 0 : _window$event.type;
+
+  switch (name) {
+    case 'click':
+    case 'contextmenu':
+    case 'dblclick':
+    case 'pointercancel':
+    case 'pointerdown':
+    case 'pointerup':
+      return constants.DiscreteEventPriority;
+
+    case 'pointermove':
+    case 'pointerout':
+    case 'pointerover':
+    case 'pointerenter':
+    case 'pointerleave':
+    case 'wheel':
+      return constants.ContinuousEventPriority;
+
+    default:
+      return constants.DefaultEventPriority;
+  }
 }
 /**
  * Release pointer captures.
  * This is called by releasePointerCapture in the API, and when an object is removed.
  */
 
-
 function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
   const captureData = captures.get(obj);
 
@@ -829,7 +857,7 @@ function createRenderer(roots, getEventPriority) {
     // why it passes "true" here
 
 
-    applyProps(instance, props);
+    applyProps$1(instance, props);
     return instance;
   }
 
@@ -1027,7 +1055,7 @@ function createRenderer(roots, getEventPriority) {
     commitUpdate(instance, [reconstruct, diff], type, oldProps, newProps, fiber) {
       // Reconstruct when args or <primitive object={...} have changes
       if (reconstruct) switchInstance(instance, type, newProps, fiber); // Otherwise just overwrite props
-      else applyProps(instance, diff);
+      else applyProps$1(instance, diff);
     },
 
     hideInstance(instance) {
@@ -1116,7 +1144,7 @@ function createRenderer(roots, getEventPriority) {
   });
   return {
     reconciler,
-    applyProps
+    applyProps: applyProps$1
   };
 }
 
@@ -1418,6 +1446,60 @@ const createStore = (applyProps, invalidate, advance, props) => {
   return rootState;
 };
 
+function useStore() {
+  const store = React__namespace.useContext(context);
+  if (!store) throw `R3F hooks can only be used within the Canvas component!`;
+  return store;
+}
+function useThree(selector = state => state, equalityFn) {
+  return useStore()(selector, equalityFn);
+}
+function useFrame(callback, renderPriority = 0) {
+  const subscribe = useStore().getState().internal.subscribe; // Update ref
+
+  const ref = React__namespace.useRef(callback);
+  React__namespace.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
+
+  React__namespace.useLayoutEffect(() => subscribe(ref, renderPriority), [renderPriority, subscribe]);
+  return null;
+}
+function useGraph(object) {
+  return React__namespace.useMemo(() => buildGraph(object), [object]);
+}
+
+function loadingFn(extensions, onProgress) {
+  return function (Proto, ...input) {
+    // Construct new loader and run extensions
+    const loader = new Proto();
+    if (extensions) extensions(loader); // Go through the urls and load them
+
+    return Promise.all(input.map(input => new Promise((res, reject) => loader.load(input, data => {
+      if (data.scene) Object.assign(data, buildGraph(data.scene));
+      res(data);
+    }, onProgress, error => reject(`Could not load ${input}: ${error.message}`)))));
+  };
+}
+
+function useLoader(Proto, input, extensions, onProgress) {
+  // Use suspense to load async assets
+  const keys = Array.isArray(input) ? input : [input];
+  const results = suspendReact.suspend(loadingFn(extensions, onProgress), [Proto, ...keys], {
+    equal: is.equ
+  }); // Return the object/s
+
+  return Array.isArray(input) ? results : results[0];
+}
+
+useLoader.preload = function (Proto, input, extensions) {
+  const keys = Array.isArray(input) ? input : [input];
+  return suspendReact.preload(loadingFn(extensions), [Proto, ...keys]);
+};
+
+useLoader.clear = function (Proto, input) {
+  const keys = Array.isArray(input) ? input : [input];
+  return suspendReact.clear([Proto, ...keys]);
+};
+
 function createSubs(callback, subs) {
   const index = subs.length;
   subs.push(callback);
@@ -1436,7 +1518,7 @@ function run(effects, timestamp) {
   for (i = 0; i < effects.length; i++) effects[i](timestamp);
 }
 
-function render(timestamp, state) {
+function render$1(timestamp, state) {
   // Run local effects
   let delta = state.clock.getDelta(); // In frameloop='never' mode, clock times are updated using the provided timestamp
 
@@ -1472,7 +1554,7 @@ function createLoop(roots) {
       const state = root.store.getState(); // If the frameloop is invalidated, do not run another frame
 
       if (state.internal.active && (state.frameloop === 'always' || state.internal.frames > 0) && !((_state$gl$xr = state.gl.xr) != null && _state$gl$xr.isPresenting)) {
-        repeat += render(timestamp, state);
+        repeat += render$1(timestamp, state);
       }
     }); // Run after-effects
 
@@ -1500,7 +1582,7 @@ function createLoop(roots) {
 
   function advance(timestamp, runGlobalEffects = true, state) {
     if (runGlobalEffects) run(globalEffects, timestamp);
-    if (!state) roots.forEach(root => render(timestamp, root.store.getState()));else render(timestamp, state);
+    if (!state) roots.forEach(root => render$1(timestamp, root.store.getState()));else render$1(timestamp, state);
     if (runGlobalEffects) run(globalAfterEffects, timestamp);
   }
 
@@ -1511,77 +1593,211 @@ function createLoop(roots) {
   };
 }
 
-function useStore() {
-  const store = React__namespace.useContext(context);
-  if (!store) throw `R3F hooks can only be used within the Canvas component!`;
-  return store;
-}
-function useThree(selector = state => state, equalityFn) {
-  return useStore()(selector, equalityFn);
-}
-function useFrame(callback, renderPriority = 0) {
-  const subscribe = useStore().getState().internal.subscribe; // Update ref
+const roots = new Map();
+const {
+  invalidate,
+  advance
+} = createLoop(roots);
+const {
+  reconciler,
+  applyProps
+} = createRenderer(roots, getEventPriority);
+
+const createRendererInstance = (gl, canvas) => {
+  const customRenderer = typeof gl === 'function' ? gl(canvas) : gl;
+  if (isRenderer(customRenderer)) return customRenderer;
+  const renderer = new THREE__namespace.WebGLRenderer({
+    powerPreference: 'high-performance',
+    canvas: canvas,
+    antialias: true,
+    alpha: true,
+    ...gl
+  }); // Set color management
+
+  renderer.outputEncoding = THREE__namespace.sRGBEncoding;
+  renderer.toneMapping = THREE__namespace.ACESFilmicToneMapping; // Set gl props
+
+  if (gl) applyProps(renderer, gl);
+  return renderer;
+};
 
-  const ref = React__namespace.useRef(callback);
-  React__namespace.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
+function createRoot(canvas, config) {
+  return {
+    render: element => {
+      var _store;
+
+      let {
+        gl,
+        size,
+        events,
+        onCreated,
+        ...props
+      } = config || {}; // Allow size to take on container bounds initially
+
+      if (!size) {
+        var _canvas$parentElement, _canvas$parentElement2, _canvas$parentElement3, _canvas$parentElement4;
+
+        size = {
+          width: (_canvas$parentElement = (_canvas$parentElement2 = canvas.parentElement) == null ? void 0 : _canvas$parentElement2.clientWidth) != null ? _canvas$parentElement : 0,
+          height: (_canvas$parentElement3 = (_canvas$parentElement4 = canvas.parentElement) == null ? void 0 : _canvas$parentElement4.clientHeight) != null ? _canvas$parentElement3 : 0
+        };
+      }
 
-  React__namespace.useLayoutEffect(() => subscribe(ref, renderPriority), [renderPriority, subscribe]);
-  return null;
+      let root = roots.get(canvas);
+      let fiber = root == null ? void 0 : root.fiber;
+      let store = root == null ? void 0 : root.store;
+      let state = (_store = store) == null ? void 0 : _store.getState();
+
+      if (fiber && state) {
+        // When a root was found, see if any fundamental props must be changed or exchanged
+        // Check pixelratio
+        if (props.dpr !== undefined && state.viewport.dpr !== calculateDpr(props.dpr)) state.setDpr(props.dpr); // Check size
+
+        if (state.size.width !== size.width || state.size.height !== size.height) state.setSize(size.width, size.height); // Check frameloop
+
+        if (state.frameloop !== props.frameloop) state.setFrameloop(props.frameloop); // For some props we want to reset the entire root
+        // Changes to the color-space
+
+        const linearChanged = props.linear !== state.internal.lastProps.linear;
+
+        if (linearChanged) {
+          unmountComponentAtNode(canvas);
+          fiber = undefined;
+        }
+      }
+
+      if (!fiber) {
+        // If no root has been found, make one
+        // Create gl
+        const glRenderer = createRendererInstance(gl, canvas); // Create store
+
+        store = createStore(applyProps, invalidate, advance, {
+          gl: glRenderer,
+          size,
+          ...props
+        });
+        const state = store.getState(); // Create renderer
+
+        fiber = reconciler.createContainer(store, constants.ConcurrentRoot, false, null); // Map it
+
+        roots.set(canvas, {
+          fiber,
+          store
+        }); // Store events internally
+
+        if (events) state.set({
+          events: events(store)
+        });
+      }
+
+      if (store && fiber) {
+        reconciler.updateContainer( /*#__PURE__*/React__namespace.createElement(Provider, {
+          store: store,
+          element: element,
+          onCreated: onCreated,
+          target: canvas
+        }), fiber, null, () => undefined);
+        return store;
+      } else {
+        throw 'Error creating root!';
+      }
+    },
+    unmount: () => unmountComponentAtNode(canvas)
+  };
 }
-function useGraph(object) {
-  return React__namespace.useMemo(() => buildGraph(object), [object]);
+
+function render(element, canvas, config = {}) {
+  console.warn('R3F.render is no longer supported in React 18. Use createRoot instead!');
+  return createRoot(canvas, config).render(element);
 }
 
-function loadingFn(extensions, onProgress) {
-  return function (Proto, ...input) {
-    // Construct new loader and run extensions
-    const loader = new Proto();
-    if (extensions) extensions(loader); // Go through the urls and load them
+function Provider({
+  store,
+  element,
+  onCreated,
+  target
+}) {
+  React__namespace.useEffect(() => {
+    const state = store.getState(); // Flag the canvas active, rendering will now begin
+
+    state.set(state => ({
+      internal: { ...state.internal,
+        active: true
+      }
+    })); // Connect events
 
-    return Promise.all(input.map(input => new Promise((res, reject) => loader.load(input, data => {
-      if (data.scene) Object.assign(data, buildGraph(data.scene));
-      res(data);
-    }, onProgress, error => reject(`Could not load ${input}: ${error.message}`)))));
-  };
+    state.events.connect == null ? void 0 : state.events.connect(target); // Notifiy that init is completed, the scene graph exists, but nothing has yet rendered
+
+    if (onCreated) onCreated(state); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React__namespace.createElement(context.Provider, {
+    value: store
+  }, element);
 }
 
-function useLoader(Proto, input, extensions, onProgress) {
-  // Use suspense to load async assets
-  const keys = Array.isArray(input) ? input : [input];
-  const results = suspendReact.suspend(loadingFn(extensions, onProgress), [Proto, ...keys], {
-    equal: is.equ
-  }); // Return the object/s
+function unmountComponentAtNode(canvas, callback) {
+  const root = roots.get(canvas);
+  const fiber = root == null ? void 0 : root.fiber;
 
-  return Array.isArray(input) ? results : results[0];
+  if (fiber) {
+    const state = root == null ? void 0 : root.store.getState();
+    if (state) state.internal.active = false;
+    reconciler.updateContainer(null, fiber, null, () => {
+      if (state) {
+        setTimeout(() => {
+          try {
+            var _state$gl, _state$gl$renderLists, _state$gl2, _state$gl3;
+
+            state.events.disconnect == null ? void 0 : state.events.disconnect();
+            (_state$gl = state.gl) == null ? void 0 : (_state$gl$renderLists = _state$gl.renderLists) == null ? void 0 : _state$gl$renderLists.dispose == null ? void 0 : _state$gl$renderLists.dispose();
+            (_state$gl2 = state.gl) == null ? void 0 : _state$gl2.forceContextLoss == null ? void 0 : _state$gl2.forceContextLoss();
+            if ((_state$gl3 = state.gl) != null && _state$gl3.xr) state.internal.xr.disconnect();
+            dispose(state);
+            roots.delete(canvas);
+            if (callback) callback(canvas);
+          } catch (e) {
+            /* ... */
+          }
+        }, 500);
+      }
+    });
+  }
 }
 
-useLoader.preload = function (Proto, input, extensions) {
-  const keys = Array.isArray(input) ? input : [input];
-  return suspendReact.preload(loadingFn(extensions), [Proto, ...keys]);
-};
+const act = React__namespace.unstable_act;
 
-useLoader.clear = function (Proto, input) {
-  const keys = Array.isArray(input) ? input : [input];
-  return suspendReact.clear([Proto, ...keys]);
-};
+function createPortal(children, container) {
+  return reconciler.createPortal(children, container, null, null);
+}
+
+reconciler.injectIntoDevTools({
+  bundleType: 0 ,
+  rendererPackageName: '@react-three/fiber',
+  version: '18.0.0'
+});
 
+exports.act = act;
 exports.addAfterEffect = addAfterEffect;
 exports.addEffect = addEffect;
 exports.addTail = addTail;
+exports.advance = advance;
+exports.applyProps = applyProps;
 exports.buildGraph = buildGraph;
-exports.calculateDpr = calculateDpr;
 exports.context = context;
 exports.createEvents = createEvents;
-exports.createLoop = createLoop;
-exports.createRenderer = createRenderer;
-exports.createStore = createStore;
+exports.createPortal = createPortal;
+exports.createRoot = createRoot;
 exports.dispose = dispose;
 exports.extend = extend;
+exports.invalidate = invalidate;
 exports.is = is;
-exports.isRenderer = isRenderer;
 exports.omit = omit;
 exports.pick = pick;
+exports.reconciler = reconciler;
+exports.render = render;
+exports.roots = roots;
 exports.threeTypes = threeTypes;
+exports.unmountComponentAtNode = unmountComponentAtNode;
 exports.useFrame = useFrame;
 exports.useGraph = useGraph;
 exports.useLoader = useLoader;