@react-three/fiber 8.16.4 → 8.16.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @react-three/fiber
 
+## 8.16.5
+
+### Patch Changes
+
+- cb913e01: fix: use fast JSX, future JSX types
+
 ## 8.16.4
 
 ### Patch Changes

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

@@ -81,7 +81,7 @@ export declare type InjectState = Partial<Omit<RootState, PrivateKeys> & {
     };
     size?: Size;
 }>;
-declare function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: InjectState): JSX.Element;
+declare function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: InjectState): React.JSX.Element;
 declare const act: any;
 export * from './hooks';
 export { context, render, createRoot, unmountComponentAtNode, createPortal, reconciler, applyProps, dispose, invalidate, advance, extend, addEffect, addAfterEffect, addTail, flushGlobalEffects, getRootState, act, buildGraph, roots as _roots, };

package/dist/declarations/src/three-types.d.ts

@@ -390,4 +390,22 @@ declare global {
         }
     }
 }
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends ThreeElements {
+        }
+    }
+}
+declare module 'react/jsx-runtime' {
+    namespace JSX {
+        interface IntrinsicElements extends ThreeElements {
+        }
+    }
+}
+declare module 'react/jsx-dev-runtime' {
+    namespace JSX {
+        interface IntrinsicElements extends ThreeElements {
+        }
+    }
+}
 export {};

package/dist/{index-67aff14f.cjs.prod.js → index-81568a48.cjs.prod.js}

@@ -7,6 +7,7 @@ var create = require('zustand');
 var Reconciler = require('react-reconciler');
 var scheduler = require('scheduler');
 var suspendReact = require('suspend-react');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -154,7 +155,7 @@ function createRenderer(_roots, _getEventPriority) {
       } else if (child.isObject3D && parentInstance.isObject3D) {
         var _child$__r3f4;
         parentInstance.remove(child);
-        // @ts-ignore
+        // @ts-expect-error
         // Remove interactivity on the initial root
         if ((_child$__r3f4 = child.__r3f) != null && _child$__r3f4.root) {
           removeInteractivity(findInitialRoot(child), child);
@@ -369,7 +370,7 @@ function createRenderer(_roots, _getEventPriority) {
     hideTextInstance: handleTextInstance,
     unhideTextInstance: handleTextInstance,
     // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
-    // @ts-ignore
+    // @ts-expect-error
     getCurrentEventPriority: () => _getEventPriority ? _getEventPriority() : constants.DefaultEventPriority,
     beforeActiveInstanceBlur: () => {},
     afterActiveInstanceBlur: () => {},
@@ -724,7 +725,7 @@ function applyProps$1(instance, data) {
         // create a blank slate of the instance and copy the particular parameter.
         let ctor = DEFAULTS.get(currentInstance.constructor);
         if (!ctor) {
-          // @ts-ignore
+          // @ts-expect-error
           ctor = new currentInstance.constructor();
           DEFAULTS.set(currentInstance.constructor, ctor);
         }
@@ -2059,7 +2060,7 @@ function createRoot(canvas) {
     render(children) {
       // The root has to be configured before it can be rendered
       if (!configured) this.configure();
-      reconciler.updateContainer( /*#__PURE__*/React__namespace.createElement(Provider, {
+      reconciler.updateContainer( /*#__PURE__*/jsxRuntime.jsx(Provider, {
         store: store,
         children: children,
         onCreated: onCreated,
@@ -2100,9 +2101,10 @@ function Provider({
     if (!store.getState().events.connected) state.events.connect == null ? void 0 : state.events.connect(rootElement);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/React__namespace.createElement(context.Provider, {
-    value: store
-  }, children);
+  return /*#__PURE__*/jsxRuntime.jsx(context.Provider, {
+    value: store,
+    children: children
+  });
 }
 function unmountComponentAtNode(canvas, callback) {
   const root = roots.get(canvas);
@@ -2131,12 +2133,11 @@ function unmountComponentAtNode(canvas, callback) {
   }
 }
 function createPortal(children, container, state) {
-  return /*#__PURE__*/React__namespace.createElement(Portal, {
-    key: container.uuid,
+  return /*#__PURE__*/jsxRuntime.jsx(Portal, {
     children: children,
     container: container,
     state: state
-  });
+  }, container.uuid);
 }
 function Portal({
   state = {},
@@ -2262,9 +2263,12 @@ function Portal({
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, reconciler.createPortal( /*#__PURE__*/React__namespace.createElement(context.Provider, {
-    value: usePortalStore
-  }, children), usePortalStore, null));
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: reconciler.createPortal( /*#__PURE__*/jsxRuntime.jsx(context.Provider, {
+      value: usePortalStore,
+      children: children
+    }), usePortalStore, null)
+  });
 }
 reconciler.injectIntoDevTools({
   bundleType: 0 ,

package/dist/{index-20975705.cjs.dev.js → index-b1a4ae91.cjs.dev.js}

@@ -7,6 +7,7 @@ var create = require('zustand');
 var Reconciler = require('react-reconciler');
 var scheduler = require('scheduler');
 var suspendReact = require('suspend-react');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -154,7 +155,7 @@ function createRenderer(_roots, _getEventPriority) {
       } else if (child.isObject3D && parentInstance.isObject3D) {
         var _child$__r3f4;
         parentInstance.remove(child);
-        // @ts-ignore
+        // @ts-expect-error
         // Remove interactivity on the initial root
         if ((_child$__r3f4 = child.__r3f) != null && _child$__r3f4.root) {
           removeInteractivity(findInitialRoot(child), child);
@@ -369,7 +370,7 @@ function createRenderer(_roots, _getEventPriority) {
     hideTextInstance: handleTextInstance,
     unhideTextInstance: handleTextInstance,
     // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
-    // @ts-ignore
+    // @ts-expect-error
     getCurrentEventPriority: () => _getEventPriority ? _getEventPriority() : constants.DefaultEventPriority,
     beforeActiveInstanceBlur: () => {},
     afterActiveInstanceBlur: () => {},
@@ -724,7 +725,7 @@ function applyProps$1(instance, data) {
         // create a blank slate of the instance and copy the particular parameter.
         let ctor = DEFAULTS.get(currentInstance.constructor);
         if (!ctor) {
-          // @ts-ignore
+          // @ts-expect-error
           ctor = new currentInstance.constructor();
           DEFAULTS.set(currentInstance.constructor, ctor);
         }
@@ -2059,7 +2060,7 @@ function createRoot(canvas) {
     render(children) {
       // The root has to be configured before it can be rendered
       if (!configured) this.configure();
-      reconciler.updateContainer( /*#__PURE__*/React__namespace.createElement(Provider, {
+      reconciler.updateContainer( /*#__PURE__*/jsxRuntime.jsx(Provider, {
         store: store,
         children: children,
         onCreated: onCreated,
@@ -2100,9 +2101,10 @@ function Provider({
     if (!store.getState().events.connected) state.events.connect == null ? void 0 : state.events.connect(rootElement);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/React__namespace.createElement(context.Provider, {
-    value: store
-  }, children);
+  return /*#__PURE__*/jsxRuntime.jsx(context.Provider, {
+    value: store,
+    children: children
+  });
 }
 function unmountComponentAtNode(canvas, callback) {
   const root = roots.get(canvas);
@@ -2131,12 +2133,11 @@ function unmountComponentAtNode(canvas, callback) {
   }
 }
 function createPortal(children, container, state) {
-  return /*#__PURE__*/React__namespace.createElement(Portal, {
-    key: container.uuid,
+  return /*#__PURE__*/jsxRuntime.jsx(Portal, {
     children: children,
     container: container,
     state: state
-  });
+  }, container.uuid);
 }
 function Portal({
   state = {},
@@ -2262,9 +2263,12 @@ function Portal({
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, reconciler.createPortal( /*#__PURE__*/React__namespace.createElement(context.Provider, {
-    value: usePortalStore
-  }, children), usePortalStore, null));
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: reconciler.createPortal( /*#__PURE__*/jsxRuntime.jsx(context.Provider, {
+      value: usePortalStore,
+      children: children
+    }), usePortalStore, null)
+  });
 }
 reconciler.injectIntoDevTools({
   bundleType: process.env.NODE_ENV === 'production' ? 0 : 1,

package/dist/{index-d449885c.esm.js → index-b552952e.esm.js}

@@ -5,6 +5,7 @@ import create from 'zustand';
 import Reconciler from 'react-reconciler';
 import { unstable_scheduleCallback, unstable_IdlePriority } from 'scheduler';
 import { suspend, preload, clear } from 'suspend-react';
+import { jsx, Fragment } from 'react/jsx-runtime';
 
 var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
@@ -127,7 +128,7 @@ function createRenderer(_roots, _getEventPriority) {
       } else if (child.isObject3D && parentInstance.isObject3D) {
         var _child$__r3f4;
         parentInstance.remove(child);
-        // @ts-ignore
+        // @ts-expect-error
         // Remove interactivity on the initial root
         if ((_child$__r3f4 = child.__r3f) != null && _child$__r3f4.root) {
           removeInteractivity(findInitialRoot(child), child);
@@ -342,7 +343,7 @@ function createRenderer(_roots, _getEventPriority) {
     hideTextInstance: handleTextInstance,
     unhideTextInstance: handleTextInstance,
     // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
-    // @ts-ignore
+    // @ts-expect-error
     getCurrentEventPriority: () => _getEventPriority ? _getEventPriority() : DefaultEventPriority,
     beforeActiveInstanceBlur: () => {},
     afterActiveInstanceBlur: () => {},
@@ -697,7 +698,7 @@ function applyProps$1(instance, data) {
         // create a blank slate of the instance and copy the particular parameter.
         let ctor = DEFAULTS.get(currentInstance.constructor);
         if (!ctor) {
-          // @ts-ignore
+          // @ts-expect-error
           ctor = new currentInstance.constructor();
           DEFAULTS.set(currentInstance.constructor, ctor);
         }
@@ -2032,7 +2033,7 @@ function createRoot(canvas) {
     render(children) {
       // The root has to be configured before it can be rendered
       if (!configured) this.configure();
-      reconciler.updateContainer( /*#__PURE__*/React.createElement(Provider, {
+      reconciler.updateContainer( /*#__PURE__*/jsx(Provider, {
         store: store,
         children: children,
         onCreated: onCreated,
@@ -2073,9 +2074,10 @@ function Provider({
     if (!store.getState().events.connected) state.events.connect == null ? void 0 : state.events.connect(rootElement);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/React.createElement(context.Provider, {
-    value: store
-  }, children);
+  return /*#__PURE__*/jsx(context.Provider, {
+    value: store,
+    children: children
+  });
 }
 function unmountComponentAtNode(canvas, callback) {
   const root = roots.get(canvas);
@@ -2104,12 +2106,11 @@ function unmountComponentAtNode(canvas, callback) {
   }
 }
 function createPortal(children, container, state) {
-  return /*#__PURE__*/React.createElement(Portal, {
-    key: container.uuid,
+  return /*#__PURE__*/jsx(Portal, {
     children: children,
     container: container,
     state: state
-  });
+  }, container.uuid);
 }
 function Portal({
   state = {},
@@ -2235,9 +2236,12 @@ function Portal({
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, reconciler.createPortal( /*#__PURE__*/React.createElement(context.Provider, {
-    value: usePortalStore
-  }, children), usePortalStore, null));
+  return /*#__PURE__*/jsx(Fragment, {
+    children: reconciler.createPortal( /*#__PURE__*/jsx(context.Provider, {
+      value: usePortalStore,
+      children: children
+    }), usePortalStore, null)
+  });
 }
 reconciler.injectIntoDevTools({
   bundleType: process.env.NODE_ENV === 'production' ? 0 : 1,

package/dist/react-three-fiber.cjs.dev.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-20975705.cjs.dev.js');
-var _extends = require('@babel/runtime/helpers/extends');
+var index = require('./index-b1a4ae91.cjs.dev.js');
 var React = require('react');
 var THREE = require('three');
 var useMeasure = require('react-use-measure');
 var itsFine = require('its-fine');
+var jsxRuntime = require('react/jsx-runtime');
 require('react-reconciler/constants');
 require('zustand');
 require('react-reconciler');
@@ -210,13 +210,17 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
           onCreated == null ? void 0 : onCreated(state);
         }
       });
-      root.current.render( /*#__PURE__*/React__namespace.createElement(Bridge, null, /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
-        set: setError
-      }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
-        fallback: /*#__PURE__*/React__namespace.createElement(index.Block, {
-          set: setBlock
+      root.current.render( /*#__PURE__*/jsxRuntime.jsx(Bridge, {
+        children: /*#__PURE__*/jsxRuntime.jsx(index.ErrorBoundary, {
+          set: setError,
+          children: /*#__PURE__*/jsxRuntime.jsx(React__namespace.Suspense, {
+            fallback: /*#__PURE__*/jsxRuntime.jsx(index.Block, {
+              set: setBlock
+            }),
+            children: children
+          })
         })
-      }, children))));
+      }));
     }
   });
   React__namespace.useEffect(() => {
@@ -227,7 +231,7 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   // When the event source is not this div, we need to set pointer-events to none
   // Or else the canvas will block events from reaching the event source
   const pointerEvents = eventSource ? 'none' : 'auto';
-  return /*#__PURE__*/React__namespace.createElement("div", _extends({
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
     ref: divRef,
     style: {
       position: 'relative',
@@ -236,19 +240,23 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       overflow: 'hidden',
       pointerEvents,
       ...style
-    }
-  }, props), /*#__PURE__*/React__namespace.createElement("div", {
-    ref: containerRef,
-    style: {
-      width: '100%',
-      height: '100%'
-    }
-  }, /*#__PURE__*/React__namespace.createElement("canvas", {
-    ref: canvasRef,
-    style: {
-      display: 'block'
-    }
-  }, fallback)));
+    },
+    ...props,
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: containerRef,
+      style: {
+        width: '100%',
+        height: '100%'
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx("canvas", {
+        ref: canvasRef,
+        style: {
+          display: 'block'
+        },
+        children: fallback
+      })
+    })
+  });
 });
 
 /**
@@ -256,9 +264,12 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
 const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement(itsFine.FiberProvider, null, /*#__PURE__*/React__namespace.createElement(CanvasImpl, _extends({}, props, {
-    ref: ref
-  })));
+  return /*#__PURE__*/jsxRuntime.jsx(itsFine.FiberProvider, {
+    children: /*#__PURE__*/jsxRuntime.jsx(CanvasImpl, {
+      ...props,
+      ref: ref
+    })
+  });
 });
 
 exports.ReactThreeFiber = index.threeTypes;

package/dist/react-three-fiber.cjs.prod.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-67aff14f.cjs.prod.js');
-var _extends = require('@babel/runtime/helpers/extends');
+var index = require('./index-81568a48.cjs.prod.js');
 var React = require('react');
 var THREE = require('three');
 var useMeasure = require('react-use-measure');
 var itsFine = require('its-fine');
+var jsxRuntime = require('react/jsx-runtime');
 require('react-reconciler/constants');
 require('zustand');
 require('react-reconciler');
@@ -210,13 +210,17 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
           onCreated == null ? void 0 : onCreated(state);
         }
       });
-      root.current.render( /*#__PURE__*/React__namespace.createElement(Bridge, null, /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
-        set: setError
-      }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
-        fallback: /*#__PURE__*/React__namespace.createElement(index.Block, {
-          set: setBlock
+      root.current.render( /*#__PURE__*/jsxRuntime.jsx(Bridge, {
+        children: /*#__PURE__*/jsxRuntime.jsx(index.ErrorBoundary, {
+          set: setError,
+          children: /*#__PURE__*/jsxRuntime.jsx(React__namespace.Suspense, {
+            fallback: /*#__PURE__*/jsxRuntime.jsx(index.Block, {
+              set: setBlock
+            }),
+            children: children
+          })
         })
-      }, children))));
+      }));
     }
   });
   React__namespace.useEffect(() => {
@@ -227,7 +231,7 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   // When the event source is not this div, we need to set pointer-events to none
   // Or else the canvas will block events from reaching the event source
   const pointerEvents = eventSource ? 'none' : 'auto';
-  return /*#__PURE__*/React__namespace.createElement("div", _extends({
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
     ref: divRef,
     style: {
       position: 'relative',
@@ -236,19 +240,23 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       overflow: 'hidden',
       pointerEvents,
       ...style
-    }
-  }, props), /*#__PURE__*/React__namespace.createElement("div", {
-    ref: containerRef,
-    style: {
-      width: '100%',
-      height: '100%'
-    }
-  }, /*#__PURE__*/React__namespace.createElement("canvas", {
-    ref: canvasRef,
-    style: {
-      display: 'block'
-    }
-  }, fallback)));
+    },
+    ...props,
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: containerRef,
+      style: {
+        width: '100%',
+        height: '100%'
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx("canvas", {
+        ref: canvasRef,
+        style: {
+          display: 'block'
+        },
+        children: fallback
+      })
+    })
+  });
 });
 
 /**
@@ -256,9 +264,12 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
 const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement(itsFine.FiberProvider, null, /*#__PURE__*/React__namespace.createElement(CanvasImpl, _extends({}, props, {
-    ref: ref
-  })));
+  return /*#__PURE__*/jsxRuntime.jsx(itsFine.FiberProvider, {
+    children: /*#__PURE__*/jsxRuntime.jsx(CanvasImpl, {
+      ...props,
+      ref: ref
+    })
+  });
 });
 
 exports.ReactThreeFiber = index.threeTypes;

package/dist/react-three-fiber.esm.js

@@ -1,10 +1,10 @@
-import { c as createEvents, e as extend, u as useMutableCallback, a as useIsomorphicLayoutEffect, b as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from './index-d449885c.esm.js';
-export { t as ReactThreeFiber, x as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, w as buildGraph, f as context, c as createEvents, g as createPortal, b as createRoot, k as dispose, e as extend, q as flushGlobalEffects, s as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, C as useFrame, D as useGraph, y as useInstanceHandle, F as useLoader, z as useStore, A as useThree } from './index-d449885c.esm.js';
-import _extends from '@babel/runtime/helpers/esm/extends';
+import { c as createEvents, e as extend, u as useMutableCallback, a as useIsomorphicLayoutEffect, b as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from './index-b552952e.esm.js';
+export { t as ReactThreeFiber, x as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, w as buildGraph, f as context, c as createEvents, g as createPortal, b as createRoot, k as dispose, e as extend, q as flushGlobalEffects, s as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, C as useFrame, D as useGraph, y as useInstanceHandle, F as useLoader, z as useStore, A as useThree } from './index-b552952e.esm.js';
 import * as React from 'react';
 import * as THREE from 'three';
 import useMeasure from 'react-use-measure';
 import { FiberProvider, useContextBridge } from 'its-fine';
+import { jsx } from 'react/jsx-runtime';
 import 'react-reconciler/constants';
 import 'zustand';
 import 'react-reconciler';
@@ -183,13 +183,17 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(function Canvas({
           onCreated == null ? void 0 : onCreated(state);
         }
       });
-      root.current.render( /*#__PURE__*/React.createElement(Bridge, null, /*#__PURE__*/React.createElement(ErrorBoundary, {
-        set: setError
-      }, /*#__PURE__*/React.createElement(React.Suspense, {
-        fallback: /*#__PURE__*/React.createElement(Block, {
-          set: setBlock
+      root.current.render( /*#__PURE__*/jsx(Bridge, {
+        children: /*#__PURE__*/jsx(ErrorBoundary, {
+          set: setError,
+          children: /*#__PURE__*/jsx(React.Suspense, {
+            fallback: /*#__PURE__*/jsx(Block, {
+              set: setBlock
+            }),
+            children: children
+          })
         })
-      }, children))));
+      }));
     }
   });
   React.useEffect(() => {
@@ -200,7 +204,7 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(function Canvas({
   // When the event source is not this div, we need to set pointer-events to none
   // Or else the canvas will block events from reaching the event source
   const pointerEvents = eventSource ? 'none' : 'auto';
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/jsx("div", {
     ref: divRef,
     style: {
       position: 'relative',
@@ -209,19 +213,23 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(function Canvas({
       overflow: 'hidden',
       pointerEvents,
       ...style
-    }
-  }, props), /*#__PURE__*/React.createElement("div", {
-    ref: containerRef,
-    style: {
-      width: '100%',
-      height: '100%'
-    }
-  }, /*#__PURE__*/React.createElement("canvas", {
-    ref: canvasRef,
-    style: {
-      display: 'block'
-    }
-  }, fallback)));
+    },
+    ...props,
+    children: /*#__PURE__*/jsx("div", {
+      ref: containerRef,
+      style: {
+        width: '100%',
+        height: '100%'
+      },
+      children: /*#__PURE__*/jsx("canvas", {
+        ref: canvasRef,
+        style: {
+          display: 'block'
+        },
+        children: fallback
+      })
+    })
+  });
 });
 
 /**
@@ -229,9 +237,12 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(function Canvas({
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
 const Canvas = /*#__PURE__*/React.forwardRef(function CanvasWrapper(props, ref) {
-  return /*#__PURE__*/React.createElement(FiberProvider, null, /*#__PURE__*/React.createElement(CanvasImpl, _extends({}, props, {
-    ref: ref
-  })));
+  return /*#__PURE__*/jsx(FiberProvider, {
+    children: /*#__PURE__*/jsx(CanvasImpl, {
+      ...props,
+      ref: ref
+    })
+  });
 });
 
 export { Canvas, createPointerEvents as events };

package/native/dist/react-three-fiber-native.cjs.dev.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-20975705.cjs.dev.js');
-var _extends = require('@babel/runtime/helpers/extends');
+var index = require('../../dist/index-b1a4ae91.cjs.dev.js');
 var React = require('react');
 var THREE = require('three');
 var reactNative = require('react-native');
 var expoGl = require('expo-gl');
 var itsFine = require('its-fine');
+var jsxRuntime = require('react/jsx-runtime');
 var expoAsset = require('expo-asset');
 var fs = require('expo-file-system');
 var base64Js = require('base64-js');
@@ -251,31 +251,38 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
         return onCreated == null ? void 0 : onCreated(state);
       }
     });
-    root.current.render( /*#__PURE__*/React__namespace.createElement(Bridge, null, /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
-      set: setError
-    }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
-      fallback: /*#__PURE__*/React__namespace.createElement(index.Block, {
-        set: setBlock
+    root.current.render( /*#__PURE__*/jsxRuntime.jsx(Bridge, {
+      children: /*#__PURE__*/jsxRuntime.jsx(index.ErrorBoundary, {
+        set: setError,
+        children: /*#__PURE__*/jsxRuntime.jsx(React__namespace.Suspense, {
+          fallback: /*#__PURE__*/jsxRuntime.jsx(index.Block, {
+            set: setBlock
+          }),
+          children: children
+        })
       })
-    }, children))));
+    }));
   }
   React__namespace.useEffect(() => {
     if (canvas) {
       return () => index.unmountComponentAtNode(canvas);
     }
   }, [canvas]);
-  return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, props, {
+  return /*#__PURE__*/jsxRuntime.jsx(reactNative.View, {
+    ...props,
     ref: viewRef,
     onLayout: onLayout,
     style: {
       flex: 1,
       ...style
-    }
-  }, bind), width > 0 && /*#__PURE__*/React__namespace.createElement(expoGl.GLView, {
-    msaaSamples: antialias ? 4 : 0,
-    onContextCreate: onContextCreate,
-    style: reactNative.StyleSheet.absoluteFill
-  }));
+    },
+    ...bind,
+    children: width > 0 && /*#__PURE__*/jsxRuntime.jsx(expoGl.GLView, {
+      msaaSamples: antialias ? 4 : 0,
+      onContextCreate: onContextCreate,
+      style: reactNative.StyleSheet.absoluteFill
+    })
+  });
 });
 
 /**
@@ -283,9 +290,12 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
 const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement(itsFine.FiberProvider, null, /*#__PURE__*/React__namespace.createElement(CanvasImpl, _extends({}, props, {
-    ref: ref
-  })));
+  return /*#__PURE__*/jsxRuntime.jsx(itsFine.FiberProvider, {
+    children: /*#__PURE__*/jsxRuntime.jsx(CanvasImpl, {
+      ...props,
+      ref: ref
+    })
+  });
 });
 
 // http://stackoverflow.com/questions/105034
@@ -421,7 +431,7 @@ function polyfills() {
       texture.needsUpdate = true;
 
       // Force non-DOM upload for EXGL texImage2D
-      // @ts-ignore
+      // @ts-expect-error
       texture.isDataTexture = true;
       onLoad == null ? void 0 : onLoad(texture);
     }).catch(onError);

package/native/dist/react-three-fiber-native.cjs.prod.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-67aff14f.cjs.prod.js');
-var _extends = require('@babel/runtime/helpers/extends');
+var index = require('../../dist/index-81568a48.cjs.prod.js');
 var React = require('react');
 var THREE = require('three');
 var reactNative = require('react-native');
 var expoGl = require('expo-gl');
 var itsFine = require('its-fine');
+var jsxRuntime = require('react/jsx-runtime');
 var expoAsset = require('expo-asset');
 var fs = require('expo-file-system');
 var base64Js = require('base64-js');
@@ -251,31 +251,38 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
         return onCreated == null ? void 0 : onCreated(state);
       }
     });
-    root.current.render( /*#__PURE__*/React__namespace.createElement(Bridge, null, /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
-      set: setError
-    }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
-      fallback: /*#__PURE__*/React__namespace.createElement(index.Block, {
-        set: setBlock
+    root.current.render( /*#__PURE__*/jsxRuntime.jsx(Bridge, {
+      children: /*#__PURE__*/jsxRuntime.jsx(index.ErrorBoundary, {
+        set: setError,
+        children: /*#__PURE__*/jsxRuntime.jsx(React__namespace.Suspense, {
+          fallback: /*#__PURE__*/jsxRuntime.jsx(index.Block, {
+            set: setBlock
+          }),
+          children: children
+        })
       })
-    }, children))));
+    }));
   }
   React__namespace.useEffect(() => {
     if (canvas) {
       return () => index.unmountComponentAtNode(canvas);
     }
   }, [canvas]);
-  return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, props, {
+  return /*#__PURE__*/jsxRuntime.jsx(reactNative.View, {
+    ...props,
     ref: viewRef,
     onLayout: onLayout,
     style: {
       flex: 1,
       ...style
-    }
-  }, bind), width > 0 && /*#__PURE__*/React__namespace.createElement(expoGl.GLView, {
-    msaaSamples: antialias ? 4 : 0,
-    onContextCreate: onContextCreate,
-    style: reactNative.StyleSheet.absoluteFill
-  }));
+    },
+    ...bind,
+    children: width > 0 && /*#__PURE__*/jsxRuntime.jsx(expoGl.GLView, {
+      msaaSamples: antialias ? 4 : 0,
+      onContextCreate: onContextCreate,
+      style: reactNative.StyleSheet.absoluteFill
+    })
+  });
 });
 
 /**
@@ -283,9 +290,12 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
 const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement(itsFine.FiberProvider, null, /*#__PURE__*/React__namespace.createElement(CanvasImpl, _extends({}, props, {
-    ref: ref
-  })));
+  return /*#__PURE__*/jsxRuntime.jsx(itsFine.FiberProvider, {
+    children: /*#__PURE__*/jsxRuntime.jsx(CanvasImpl, {
+      ...props,
+      ref: ref
+    })
+  });
 });
 
 // http://stackoverflow.com/questions/105034
@@ -421,7 +431,7 @@ function polyfills() {
       texture.needsUpdate = true;
 
       // Force non-DOM upload for EXGL texImage2D
-      // @ts-ignore
+      // @ts-expect-error
       texture.isDataTexture = true;
       onLoad == null ? void 0 : onLoad(texture);
     }).catch(onError);

package/native/dist/react-three-fiber-native.esm.js

@@ -1,11 +1,11 @@
-import { c as createEvents, e as extend, u as useMutableCallback, b as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-d449885c.esm.js';
-export { t as ReactThreeFiber, x as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, w as buildGraph, f as context, c as createEvents, g as createPortal, b as createRoot, k as dispose, e as extend, q as flushGlobalEffects, s as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, C as useFrame, D as useGraph, y as useInstanceHandle, F as useLoader, z as useStore, A as useThree } from '../../dist/index-d449885c.esm.js';
-import _extends from '@babel/runtime/helpers/esm/extends';
+import { c as createEvents, e as extend, u as useMutableCallback, b as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-b552952e.esm.js';
+export { t as ReactThreeFiber, x as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, w as buildGraph, f as context, c as createEvents, g as createPortal, b as createRoot, k as dispose, e as extend, q as flushGlobalEffects, s as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, C as useFrame, D as useGraph, y as useInstanceHandle, F as useLoader, z as useStore, A as useThree } from '../../dist/index-b552952e.esm.js';
 import * as React from 'react';
 import * as THREE from 'three';
 import { PanResponder, PixelRatio, View, StyleSheet, Platform, Image, NativeModules } from 'react-native';
 import { GLView } from 'expo-gl';
 import { FiberProvider, useContextBridge } from 'its-fine';
+import { jsx } from 'react/jsx-runtime';
 import { Asset } from 'expo-asset';
 import * as fs from 'expo-file-system';
 import { fromByteArray } from 'base64-js';
@@ -226,31 +226,38 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(({
         return onCreated == null ? void 0 : onCreated(state);
       }
     });
-    root.current.render( /*#__PURE__*/React.createElement(Bridge, null, /*#__PURE__*/React.createElement(ErrorBoundary, {
-      set: setError
-    }, /*#__PURE__*/React.createElement(React.Suspense, {
-      fallback: /*#__PURE__*/React.createElement(Block, {
-        set: setBlock
+    root.current.render( /*#__PURE__*/jsx(Bridge, {
+      children: /*#__PURE__*/jsx(ErrorBoundary, {
+        set: setError,
+        children: /*#__PURE__*/jsx(React.Suspense, {
+          fallback: /*#__PURE__*/jsx(Block, {
+            set: setBlock
+          }),
+          children: children
+        })
       })
-    }, children))));
+    }));
   }
   React.useEffect(() => {
     if (canvas) {
       return () => unmountComponentAtNode(canvas);
     }
   }, [canvas]);
-  return /*#__PURE__*/React.createElement(View, _extends({}, props, {
+  return /*#__PURE__*/jsx(View, {
+    ...props,
     ref: viewRef,
     onLayout: onLayout,
     style: {
       flex: 1,
       ...style
-    }
-  }, bind), width > 0 && /*#__PURE__*/React.createElement(GLView, {
-    msaaSamples: antialias ? 4 : 0,
-    onContextCreate: onContextCreate,
-    style: StyleSheet.absoluteFill
-  }));
+    },
+    ...bind,
+    children: width > 0 && /*#__PURE__*/jsx(GLView, {
+      msaaSamples: antialias ? 4 : 0,
+      onContextCreate: onContextCreate,
+      style: StyleSheet.absoluteFill
+    })
+  });
 });
 
 /**
@@ -258,9 +265,12 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(({
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
 const Canvas = /*#__PURE__*/React.forwardRef(function CanvasWrapper(props, ref) {
-  return /*#__PURE__*/React.createElement(FiberProvider, null, /*#__PURE__*/React.createElement(CanvasImpl, _extends({}, props, {
-    ref: ref
-  })));
+  return /*#__PURE__*/jsx(FiberProvider, {
+    children: /*#__PURE__*/jsx(CanvasImpl, {
+      ...props,
+      ref: ref
+    })
+  });
 });
 
 // http://stackoverflow.com/questions/105034
@@ -396,7 +406,7 @@ function polyfills() {
       texture.needsUpdate = true;
 
       // Force non-DOM upload for EXGL texImage2D
-      // @ts-ignore
+      // @ts-expect-error
       texture.isDataTexture = true;
       onLoad == null ? void 0 : onLoad(texture);
     }).catch(onError);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "8.16.4",
+  "version": "8.16.5",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",

package/readme.md

@@ -22,7 +22,7 @@ None. Everything that works in Threejs will work here without exception.
 
 #### Is it slower than plain Threejs?
 
-No. There is no overhead. Components render outside of React. It outperforms Threejs in scale due to Reacts scheduling abilities.
+No. There is no overhead. Components render outside of React. It outperforms Threejs in scale due to React's scheduling abilities.
 
 #### Can it keep up with frequent feature updates to Threejs?