@react-three/fiber 9.0.0-rc.4 → 9.0.0-rc.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @react-three/fiber
 
+## 8.17.14
+
+### Patch Changes
+
+- eeeed16b: fix: update use-measure
+
+## 8.17.13
+
+### Patch Changes
+
+- 0a0f2acd: fix: upstream use-measure
+
 ## 8.17.12
 
 ### Patch Changes

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

@@ -6,7 +6,7 @@ export { flushGlobalEffects, addEffect, addAfterEffect, addTail, invalidate, adv
 export type { AttachFnType, AttachType, ConstructorRepresentation, Catalogue, Args, InstanceProps, Instance, } from "./reconciler.js";
 export { extend, reconciler } from "./reconciler.js";
 export type { ReconcilerRoot, GLProps, CameraProps, RenderProps, InjectState } from "./renderer.js";
-export { _roots, render, createRoot, unmountComponentAtNode, createPortal } from "./renderer.js";
+export { _roots, createRoot, unmountComponentAtNode, createPortal } from "./renderer.js";
 export type { Subscription, Dpr, Size, Viewport, RenderCallback, Frameloop, Performance, Renderer, XRManager, RootState, RootStore, } from "./store.js";
 export { context } from "./store.js";
 export type { ObjectMap, Camera, Disposable, Act } from "./utils.js";

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

@@ -8,7 +8,10 @@ import { type Properties, Camera } from "./utils.js";
 interface OffscreenCanvas extends EventTarget {
 }
 export declare const _roots: Map<HTMLCanvasElement | OffscreenCanvas, Root>;
-export type GLProps = Renderer | ((canvas: HTMLCanvasElement | OffscreenCanvas) => Renderer) | Partial<Properties<THREE.WebGLRenderer> | THREE.WebGLRendererParameters>;
+export type DefaultGLProps = Omit<THREE.WebGLRendererParameters, 'canvas'> & {
+    canvas: HTMLCanvasElement | OffscreenCanvas;
+};
+export type GLProps = Renderer | ((defaultProps: DefaultGLProps) => Renderer) | ((defaultProps: DefaultGLProps) => Promise<Renderer>) | Partial<Properties<THREE.WebGLRenderer> | THREE.WebGLRendererParameters>;
 export type CameraProps = (Camera | Partial<ThreeElement<typeof THREE.Camera> & ThreeElement<typeof THREE.PerspectiveCamera> & ThreeElement<typeof THREE.OrthographicCamera>>) & {
     /** Flags the camera as manual, putting projection into your own hands */
     manual?: boolean;
@@ -61,12 +64,11 @@ export interface RenderProps<TCanvas extends HTMLCanvasElement | OffscreenCanvas
     onPointerMissed?: (event: MouseEvent) => void;
 }
 export interface ReconcilerRoot<TCanvas extends HTMLCanvasElement | OffscreenCanvas> {
-    configure: (config?: RenderProps<TCanvas>) => ReconcilerRoot<TCanvas>;
+    configure: (config?: RenderProps<TCanvas>) => Promise<ReconcilerRoot<TCanvas>>;
     render: (element: React.ReactNode) => RootStore;
     unmount: () => void;
 }
 export declare function createRoot<TCanvas extends HTMLCanvasElement | OffscreenCanvas>(canvas: TCanvas): ReconcilerRoot<TCanvas>;
-export declare function render<TCanvas extends HTMLCanvasElement | OffscreenCanvas>(children: React.ReactNode, canvas: TCanvas, config: RenderProps<TCanvas>): RootStore;
 export declare function unmountComponentAtNode<TCanvas extends HTMLCanvasElement | OffscreenCanvas>(canvas: TCanvas, callback?: (canvas: TCanvas) => void): void;
 export type InjectState = Partial<Omit<RootState, 'events'> & {
     events?: {

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

@@ -158,6 +158,7 @@ export declare const is: {
     num: (a: any) => a is number;
     boo: (a: any) => a is boolean;
     und: (a: any) => boolean;
+    nul: (a: any) => boolean;
     arr: (a: any) => boolean;
     equ(a: any, b: any, { arrays, objects, strict }?: EquConfig): boolean;
 };

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Options as ResizeOptions } from "./use-measure.js";
+import { Options as ResizeOptions } from 'react-use-measure';
 import { RenderProps } from "../core/index.js";
 export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;

package/dist/{events-64d1e225.esm.js → events-06bc1550.esm.js}

@@ -110,6 +110,7 @@ const is = {
   num: a => typeof a === 'number',
   boo: a => typeof a === 'boolean',
   und: a => a === void 0,
+  nul: a => a === null,
   arr: a => Array.isArray(a),
   equ(a, b, {
     arrays = 'shallow',
@@ -203,10 +204,7 @@ function prepare(target, root, type, props) {
       handlers: {},
       isHidden: false
     };
-    if (object) {
-      object.__r3f = instance;
-      if (type) applyProps(object, instance.props);
-    }
+    if (object) object.__r3f = instance;
   }
   return instance;
 }
@@ -278,6 +276,18 @@ const RESERVED_PROPS = [...REACT_INTERNAL_PROPS,
 // Behavior flags
 'dispose'];
 const MEMOIZED_PROTOTYPES = new Map();
+function getMemoizedPrototype(root) {
+  let ctor = MEMOIZED_PROTOTYPES.get(root.constructor);
+  try {
+    if (!ctor) {
+      ctor = new root.constructor();
+      MEMOIZED_PROTOTYPES.set(root.constructor, ctor);
+    }
+  } catch (e) {
+    // ...
+  }
+  return ctor;
+}
 
 // This function prepares a set of changes to be applied to the instance
 function diffProps(instance, newProps) {
@@ -314,12 +324,8 @@ function diffProps(instance, newProps) {
     // For removed props, try to set default values, if possible
     if (root.constructor && root.constructor.length === 0) {
       // create a blank slate of the instance and copy the particular parameter.
-      let ctor = MEMOIZED_PROTOTYPES.get(root.constructor);
-      if (!ctor) {
-        ctor = new root.constructor();
-        MEMOIZED_PROTOTYPES.set(root.constructor, ctor);
-      }
-      changedProps[key] = ctor[key];
+      const ctor = getMemoizedPrototype(root);
+      if (!is.und(ctor)) changedProps[key] = ctor[key];
     } else {
       // instance does not have constructor, just set it to 0
       changedProps[key] = 0;
@@ -361,7 +367,13 @@ function applyProps(object, props) {
 
     // Copy if properties match signatures
     if (target != null && target.copy && value != null && value.constructor && target.constructor === value.constructor) {
-      target.copy(value);
+      // fetch the default state of the target
+      const ctor = getMemoizedPrototype(root);
+      // The target key was originally null or undefined, which indicates that the object which
+      // is now present was externally set by the user, we should therefore assign the value directly
+      if (!is.und(ctor) && (is.und(ctor[key]) || is.nul(ctor[key]))) root[key] = value;
+      // Otherwise copy is correct
+      else target.copy(value);
     }
     // Layers have no copy function, we must therefore copy the mask property
     else if (target instanceof THREE.Layers && value instanceof THREE.Layers) {
@@ -1059,7 +1071,7 @@ const createStore = (invalidate, advance) => {
       oldDpr = viewport.dpr;
       // Update camera & renderer
       updateCamera(camera, size);
-      gl.setPixelRatio(viewport.dpr);
+      if (viewport.dpr > 0) gl.setPixelRatio(viewport.dpr);
       const updateStyle = typeof HTMLCanvasElement !== 'undefined' && gl.domElement instanceof HTMLCanvasElement;
       gl.setSize(size.width, size.height, updateStyle);
     }
@@ -1294,11 +1306,11 @@ function handleContainerEffects(parent, child, beforeChild) {
     // Create object
     child.object = (_child$props$object = child.props.object) != null ? _child$props$object : new target(...((_child$props$args = child.props.args) != null ? _child$props$args : []));
     child.object.__r3f = child;
-
-    // Set initial props
-    applyProps(child.object, child.props);
   }
 
+  // Set initial props
+  applyProps(child.object, child.props);
+
   // Append instance
   if (child.props.attach) {
     attach(parent, child);
@@ -1310,7 +1322,6 @@ function handleContainerEffects(parent, child, beforeChild) {
       child.object.dispatchEvent({
         type: 'added'
       });
-      // @ts-expect-error https://github.com/mrdoob/three.js/pull/16934
       parent.object.dispatchEvent({
         type: 'childadded',
         child: child.object
@@ -1626,17 +1637,20 @@ const shallowLoose = {
   objects: 'shallow',
   strict: false
 };
-const createRendererInstance = (gl, canvas) => {
-  const customRenderer = typeof gl === 'function' ? gl(canvas) : gl;
-  if (isRenderer(customRenderer)) return customRenderer;
-  return new THREE.WebGLRenderer({
-    powerPreference: 'high-performance',
+async function createRendererInstance(gl, canvas) {
+  const defaultProps = {
     canvas: canvas,
+    powerPreference: 'high-performance',
     antialias: true,
-    alpha: true,
+    alpha: true
+  };
+  const customRenderer = typeof gl === 'function' ? await gl(defaultProps) : gl;
+  if (isRenderer(customRenderer)) return customRenderer;
+  return new THREE.WebGLRenderer({
+    ...defaultProps,
     ...gl
   });
-};
+}
 function computeInitialSize(canvas, size) {
   if (!size && typeof HTMLCanvasElement !== 'undefined' && canvas instanceof HTMLCanvasElement && canvas.parentElement) {
     const {
@@ -1717,7 +1731,7 @@ function createRoot(canvas) {
   let configured = false;
   let lastCamera;
   return {
-    configure(props = {}) {
+    async configure(props = {}) {
       let {
         gl: glConfig,
         size: propsSize,
@@ -1741,7 +1755,7 @@ function createRoot(canvas) {
       // Set up renderer (one time only!)
       let gl = state.gl;
       if (!state.gl) state.set({
-        gl: gl = createRendererInstance(glConfig, canvas)
+        gl: gl = await createRendererInstance(glConfig, canvas)
       });
 
       // Set up raycaster (one time only!)
@@ -1811,6 +1825,31 @@ function createRoot(canvas) {
         });
       }
 
+      // Store events internally
+      if (events && !state.events.handlers) state.set({
+        events: events(store)
+      });
+      // Check size, allow it to take on container bounds initially
+      const size = computeInitialSize(canvas, propsSize);
+      if (!is.equ(size, state.size, shallowLoose)) {
+        state.setSize(size.width, size.height, size.top, size.left);
+      }
+      // Check pixelratio
+      if (dpr && state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr);
+      // Check frameloop
+      if (state.frameloop !== frameloop) state.setFrameloop(frameloop);
+      // Check pointer missed
+      if (!state.onPointerMissed) state.set({
+        onPointerMissed
+      });
+      // Check performance
+      if (performance && !is.equ(performance, state.performance, shallowLoose)) state.set(state => ({
+        performance: {
+          ...state.performance,
+          ...performance
+        }
+      }));
+
       // Set up XR (one time only!)
       if (!state.xr) {
         var _gl$xr;
@@ -1892,30 +1931,6 @@ function createRoot(canvas) {
 
       // Set gl props
       if (glConfig && !is.fun(glConfig) && !isRenderer(glConfig) && !is.equ(glConfig, gl, shallowLoose)) applyProps(gl, glConfig);
-      // Store events internally
-      if (events && !state.events.handlers) state.set({
-        events: events(store)
-      });
-      // Check size, allow it to take on container bounds initially
-      const size = computeInitialSize(canvas, propsSize);
-      if (!is.equ(size, state.size, shallowLoose)) {
-        state.setSize(size.width, size.height, size.top, size.left);
-      }
-      // Check pixelratio
-      if (dpr && state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr);
-      // Check frameloop
-      if (state.frameloop !== frameloop) state.setFrameloop(frameloop);
-      // Check pointer missed
-      if (!state.onPointerMissed) state.set({
-        onPointerMissed
-      });
-      // Check performance
-      if (performance && !is.equ(performance, state.performance, shallowLoose)) state.set(state => ({
-        performance: {
-          ...state.performance,
-          ...performance
-        }
-      }));
 
       // Set locals
       onCreated = onCreatedCallback;
@@ -1924,7 +1939,7 @@ function createRoot(canvas) {
     },
     render(children) {
       // The root has to be configured before it can be rendered
-      if (!configured) this.configure();
+      if (!configured) throw "The root has to be configured before it can be rendered, call 'configure' first!";
       reconciler.updateContainer( /*#__PURE__*/jsx(Provider, {
         store: store,
         children: children,
@@ -1938,12 +1953,6 @@ function createRoot(canvas) {
     }
   };
 }
-function render(children, canvas, config) {
-  console.warn('R3F.render is no longer supported in React 18. Use createRoot instead!');
-  const root = createRoot(canvas);
-  root.configure(config);
-  return root.render(children);
-}
 function Provider({
   store,
   children,
@@ -2081,12 +2090,16 @@ function Portal({
     return store;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [previousRoot, container]);
-  return /*#__PURE__*/jsx(Fragment, {
-    children: reconciler.createPortal( /*#__PURE__*/jsx(context.Provider, {
-      value: usePortalStore,
-      children: children
-    }), usePortalStore, null)
-  });
+  return (
+    /*#__PURE__*/
+    // @ts-ignore, reconciler types are not maintained
+    jsx(Fragment, {
+      children: reconciler.createPortal( /*#__PURE__*/jsx(context.Provider, {
+        value: usePortalStore,
+        children: children
+      }), usePortalStore, null)
+    })
+  );
 }
 
 function createSubs(callback, subs) {
@@ -2186,7 +2199,7 @@ function loop(timestamp) {
       repeat += update(timestamp, state);
     }
   }
-  useFrameInProgress = true;
+  useFrameInProgress = false;
 
   // Run after-effects
   flushGlobalEffects('after', timestamp);
@@ -2265,7 +2278,7 @@ function createPointerEvents(store) {
     compute(event, state, previous) {
       // https://github.com/pmndrs/react-three-fiber/pull/782
       // Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
-      state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
+      state.pointer.set((event.offsetX - state.size.left) / state.size.width * 2 - 1, -((event.offsetY - state.size.top) / state.size.height) * 2 + 1);
       state.raycaster.setFromCamera(state.pointer, state.camera);
     },
     connected: undefined,
@@ -2327,4 +2340,4 @@ function createPointerEvents(store) {
   };
 }
 
-export { useStore as A, Block as B, useThree as C, useFrame as D, ErrorBoundary as E, useGraph as F, useLoader as G, _roots as _, useMutableCallback as a, useIsomorphicLayoutEffect as b, createRoot as c, unmountComponentAtNode as d, extend as e, createPointerEvents as f, createEvents as g, flushGlobalEffects as h, isRef as i, addEffect as j, addAfterEffect as k, addTail as l, invalidate as m, advance as n, render as o, createPortal as p, context as q, reconciler as r, applyProps as s, threeTypes as t, useBridge as u, getRootState as v, dispose as w, act as x, buildGraph as y, useInstanceHandle as z };
+export { useThree as A, Block as B, useFrame as C, useGraph as D, ErrorBoundary as E, useLoader as F, _roots as _, useMutableCallback as a, useIsomorphicLayoutEffect as b, createRoot as c, unmountComponentAtNode as d, extend as e, createPointerEvents as f, createEvents as g, flushGlobalEffects as h, isRef as i, addEffect as j, addAfterEffect as k, addTail as l, invalidate as m, advance as n, createPortal as o, context as p, applyProps as q, reconciler as r, getRootState as s, threeTypes as t, useBridge as u, dispose as v, act as w, buildGraph as x, useInstanceHandle as y, useStore as z };

package/dist/{events-c2452172.cjs.dev.js → events-4464c9d4.cjs.dev.js}

@@ -136,6 +136,7 @@ const is = {
   num: a => typeof a === 'number',
   boo: a => typeof a === 'boolean',
   und: a => a === void 0,
+  nul: a => a === null,
   arr: a => Array.isArray(a),
   equ(a, b, {
     arrays = 'shallow',
@@ -229,10 +230,7 @@ function prepare(target, root, type, props) {
       handlers: {},
       isHidden: false
     };
-    if (object) {
-      object.__r3f = instance;
-      if (type) applyProps(object, instance.props);
-    }
+    if (object) object.__r3f = instance;
   }
   return instance;
 }
@@ -304,6 +302,18 @@ const RESERVED_PROPS = [...REACT_INTERNAL_PROPS,
 // Behavior flags
 'dispose'];
 const MEMOIZED_PROTOTYPES = new Map();
+function getMemoizedPrototype(root) {
+  let ctor = MEMOIZED_PROTOTYPES.get(root.constructor);
+  try {
+    if (!ctor) {
+      ctor = new root.constructor();
+      MEMOIZED_PROTOTYPES.set(root.constructor, ctor);
+    }
+  } catch (e) {
+    // ...
+  }
+  return ctor;
+}
 
 // This function prepares a set of changes to be applied to the instance
 function diffProps(instance, newProps) {
@@ -340,12 +350,8 @@ function diffProps(instance, newProps) {
     // For removed props, try to set default values, if possible
     if (root.constructor && root.constructor.length === 0) {
       // create a blank slate of the instance and copy the particular parameter.
-      let ctor = MEMOIZED_PROTOTYPES.get(root.constructor);
-      if (!ctor) {
-        ctor = new root.constructor();
-        MEMOIZED_PROTOTYPES.set(root.constructor, ctor);
-      }
-      changedProps[key] = ctor[key];
+      const ctor = getMemoizedPrototype(root);
+      if (!is.und(ctor)) changedProps[key] = ctor[key];
     } else {
       // instance does not have constructor, just set it to 0
       changedProps[key] = 0;
@@ -387,7 +393,13 @@ function applyProps(object, props) {
 
     // Copy if properties match signatures
     if (target != null && target.copy && value != null && value.constructor && target.constructor === value.constructor) {
-      target.copy(value);
+      // fetch the default state of the target
+      const ctor = getMemoizedPrototype(root);
+      // The target key was originally null or undefined, which indicates that the object which
+      // is now present was externally set by the user, we should therefore assign the value directly
+      if (!is.und(ctor) && (is.und(ctor[key]) || is.nul(ctor[key]))) root[key] = value;
+      // Otherwise copy is correct
+      else target.copy(value);
     }
     // Layers have no copy function, we must therefore copy the mask property
     else if (target instanceof THREE__namespace.Layers && value instanceof THREE__namespace.Layers) {
@@ -1085,7 +1097,7 @@ const createStore = (invalidate, advance) => {
       oldDpr = viewport.dpr;
       // Update camera & renderer
       updateCamera(camera, size);
-      gl.setPixelRatio(viewport.dpr);
+      if (viewport.dpr > 0) gl.setPixelRatio(viewport.dpr);
       const updateStyle = typeof HTMLCanvasElement !== 'undefined' && gl.domElement instanceof HTMLCanvasElement;
       gl.setSize(size.width, size.height, updateStyle);
     }
@@ -1320,11 +1332,11 @@ function handleContainerEffects(parent, child, beforeChild) {
     // Create object
     child.object = (_child$props$object = child.props.object) != null ? _child$props$object : new target(...((_child$props$args = child.props.args) != null ? _child$props$args : []));
     child.object.__r3f = child;
-
-    // Set initial props
-    applyProps(child.object, child.props);
   }
 
+  // Set initial props
+  applyProps(child.object, child.props);
+
   // Append instance
   if (child.props.attach) {
     attach(parent, child);
@@ -1336,7 +1348,6 @@ function handleContainerEffects(parent, child, beforeChild) {
       child.object.dispatchEvent({
         type: 'added'
       });
-      // @ts-expect-error https://github.com/mrdoob/three.js/pull/16934
       parent.object.dispatchEvent({
         type: 'childadded',
         child: child.object
@@ -1652,17 +1663,20 @@ const shallowLoose = {
   objects: 'shallow',
   strict: false
 };
-const createRendererInstance = (gl, canvas) => {
-  const customRenderer = typeof gl === 'function' ? gl(canvas) : gl;
-  if (isRenderer(customRenderer)) return customRenderer;
-  return new THREE__namespace.WebGLRenderer({
-    powerPreference: 'high-performance',
+async function createRendererInstance(gl, canvas) {
+  const defaultProps = {
     canvas: canvas,
+    powerPreference: 'high-performance',
     antialias: true,
-    alpha: true,
+    alpha: true
+  };
+  const customRenderer = typeof gl === 'function' ? await gl(defaultProps) : gl;
+  if (isRenderer(customRenderer)) return customRenderer;
+  return new THREE__namespace.WebGLRenderer({
+    ...defaultProps,
     ...gl
   });
-};
+}
 function computeInitialSize(canvas, size) {
   if (!size && typeof HTMLCanvasElement !== 'undefined' && canvas instanceof HTMLCanvasElement && canvas.parentElement) {
     const {
@@ -1743,7 +1757,7 @@ function createRoot(canvas) {
   let configured = false;
   let lastCamera;
   return {
-    configure(props = {}) {
+    async configure(props = {}) {
       let {
         gl: glConfig,
         size: propsSize,
@@ -1767,7 +1781,7 @@ function createRoot(canvas) {
       // Set up renderer (one time only!)
       let gl = state.gl;
       if (!state.gl) state.set({
-        gl: gl = createRendererInstance(glConfig, canvas)
+        gl: gl = await createRendererInstance(glConfig, canvas)
       });
 
       // Set up raycaster (one time only!)
@@ -1837,6 +1851,31 @@ function createRoot(canvas) {
         });
       }
 
+      // Store events internally
+      if (events && !state.events.handlers) state.set({
+        events: events(store)
+      });
+      // Check size, allow it to take on container bounds initially
+      const size = computeInitialSize(canvas, propsSize);
+      if (!is.equ(size, state.size, shallowLoose)) {
+        state.setSize(size.width, size.height, size.top, size.left);
+      }
+      // Check pixelratio
+      if (dpr && state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr);
+      // Check frameloop
+      if (state.frameloop !== frameloop) state.setFrameloop(frameloop);
+      // Check pointer missed
+      if (!state.onPointerMissed) state.set({
+        onPointerMissed
+      });
+      // Check performance
+      if (performance && !is.equ(performance, state.performance, shallowLoose)) state.set(state => ({
+        performance: {
+          ...state.performance,
+          ...performance
+        }
+      }));
+
       // Set up XR (one time only!)
       if (!state.xr) {
         var _gl$xr;
@@ -1918,30 +1957,6 @@ function createRoot(canvas) {
 
       // Set gl props
       if (glConfig && !is.fun(glConfig) && !isRenderer(glConfig) && !is.equ(glConfig, gl, shallowLoose)) applyProps(gl, glConfig);
-      // Store events internally
-      if (events && !state.events.handlers) state.set({
-        events: events(store)
-      });
-      // Check size, allow it to take on container bounds initially
-      const size = computeInitialSize(canvas, propsSize);
-      if (!is.equ(size, state.size, shallowLoose)) {
-        state.setSize(size.width, size.height, size.top, size.left);
-      }
-      // Check pixelratio
-      if (dpr && state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr);
-      // Check frameloop
-      if (state.frameloop !== frameloop) state.setFrameloop(frameloop);
-      // Check pointer missed
-      if (!state.onPointerMissed) state.set({
-        onPointerMissed
-      });
-      // Check performance
-      if (performance && !is.equ(performance, state.performance, shallowLoose)) state.set(state => ({
-        performance: {
-          ...state.performance,
-          ...performance
-        }
-      }));
 
       // Set locals
       onCreated = onCreatedCallback;
@@ -1950,7 +1965,7 @@ function createRoot(canvas) {
     },
     render(children) {
       // The root has to be configured before it can be rendered
-      if (!configured) this.configure();
+      if (!configured) throw "The root has to be configured before it can be rendered, call 'configure' first!";
       reconciler.updateContainer( /*#__PURE__*/jsxRuntime.jsx(Provider, {
         store: store,
         children: children,
@@ -1964,12 +1979,6 @@ function createRoot(canvas) {
     }
   };
 }
-function render(children, canvas, config) {
-  console.warn('R3F.render is no longer supported in React 18. Use createRoot instead!');
-  const root = createRoot(canvas);
-  root.configure(config);
-  return root.render(children);
-}
 function Provider({
   store,
   children,
@@ -2107,12 +2116,16 @@ function Portal({
     return store;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [previousRoot, container]);
-  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: reconciler.createPortal( /*#__PURE__*/jsxRuntime.jsx(context.Provider, {
-      value: usePortalStore,
-      children: children
-    }), usePortalStore, null)
-  });
+  return (
+    /*#__PURE__*/
+    // @ts-ignore, reconciler types are not maintained
+    jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: reconciler.createPortal( /*#__PURE__*/jsxRuntime.jsx(context.Provider, {
+        value: usePortalStore,
+        children: children
+      }), usePortalStore, null)
+    })
+  );
 }
 
 function createSubs(callback, subs) {
@@ -2212,7 +2225,7 @@ function loop(timestamp) {
       repeat += update(timestamp, state);
     }
   }
-  useFrameInProgress = true;
+  useFrameInProgress = false;
 
   // Run after-effects
   flushGlobalEffects('after', timestamp);
@@ -2291,7 +2304,7 @@ function createPointerEvents(store) {
     compute(event, state, previous) {
       // https://github.com/pmndrs/react-three-fiber/pull/782
       // Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
-      state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
+      state.pointer.set((event.offsetX - state.size.left) / state.size.width * 2 - 1, -((event.offsetY - state.size.top) / state.size.height) * 2 + 1);
       state.raycaster.setFromCamera(state.pointer, state.camera);
     },
     connected: undefined,
@@ -2375,7 +2388,6 @@ exports.getRootState = getRootState;
 exports.invalidate = invalidate;
 exports.isRef = isRef;
 exports.reconciler = reconciler;
-exports.render = render;
 exports.threeTypes = threeTypes;
 exports.unmountComponentAtNode = unmountComponentAtNode;
 exports.useBridge = useBridge;