@react-three/fiber 9.0.0-alpha.5 → 9.0.0-alpha.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @react-three/fiber
 
+## 8.16.5
+
+### Patch Changes
+
+- cb913e01: fix: use fast JSX, future JSX types
+
+## 8.16.4
+
+### Patch Changes
+
+- 1270d24c: fix: missing dependency on inject function
+
 ## 8.16.3
 
 ### Patch Changes

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

@@ -80,5 +80,5 @@ export type InjectState = Partial<Omit<RootState, 'events'> & {
         connected?: any;
     };
 }>;
-export declare function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: InjectState): JSX.Element;
+export declare function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: InjectState): React.JSX.Element;
 export {};

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

@@ -53,4 +53,16 @@ declare module 'react' {
         }
     }
 }
+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/{loop-1fad3b6f.cjs.prod.js → loop-6e8a6208.cjs.prod.js}

@@ -5,9 +5,9 @@ var React = require('react');
 var constants = require('react-reconciler/constants');
 var traditional = require('zustand/traditional');
 var itsFine = require('its-fine');
-var _extends = require('@babel/runtime/helpers/extends');
 var Reconciler = require('react-reconciler');
 var scheduler = require('scheduler');
+var jsxRuntime = require('react/jsx-runtime');
 var suspendReact = require('suspend-react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -38,10 +38,6 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
-// TODO: handle constructor overloads
-// https://github.com/pmndrs/react-three-fiber/pull/2931
-// https://github.com/microsoft/TypeScript/issues/37079
-
 const catalogue = {};
 let i = 0;
 const extend = objects => {
@@ -52,9 +48,10 @@ const extend = objects => {
     // Returns a component whose name will be inferred in devtools
     // @ts-expect-error
     return /*#__PURE__*/React__namespace.forwardRef({
-      [objects.name]: (props, ref) => /*#__PURE__*/React__namespace.createElement(Component, _extends({}, props, {
+      [objects.name]: (props, ref) => /*#__PURE__*/jsxRuntime.jsx(Component, {
+        ...props,
         ref: ref
-      }))
+      })
     }[objects.name]);
   } else {
     return void Object.assign(catalogue, objects);
@@ -474,7 +471,11 @@ function useBridge() {
   }) => {
     const strict = !!itsFine.traverseFiber(fiber, true, node => node.type === React__namespace.StrictMode);
     const Root = strict ? React__namespace.StrictMode : React__namespace.Fragment;
-    return /*#__PURE__*/React__namespace.createElement(Root, null, /*#__PURE__*/React__namespace.createElement(ContextBridge, null, children));
+    return /*#__PURE__*/jsxRuntime.jsx(Root, {
+      children: /*#__PURE__*/jsxRuntime.jsx(ContextBridge, {
+        children: children
+      })
+    });
   }, [fiber, ContextBridge]);
 }
 function Block({
@@ -1815,9 +1816,6 @@ useLoader.clear = function (loader, input) {
   return suspendReact.clear([loader, ...keys]);
 };
 
-// Shim for OffscreenCanvas since it was removed from DOM types
-// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/54988
-
 const _roots = new Map();
 const shallowLoose = {
   objects: 'shallow',
@@ -2169,7 +2167,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,
@@ -2210,9 +2208,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);
@@ -2241,7 +2240,7 @@ function unmountComponentAtNode(canvas, callback) {
   }
 }
 function createPortal(children, container, state) {
-  return /*#__PURE__*/React__namespace.createElement(Portal, {
+  return /*#__PURE__*/jsxRuntime.jsx(Portal, {
     children: children,
     container: container,
     state: state
@@ -2324,9 +2323,12 @@ function Portal({
     return store;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [previousRoot, container]);
-  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/{loop-02cefb27.cjs.dev.js → loop-c991cb05.cjs.dev.js}

@@ -5,9 +5,9 @@ var React = require('react');
 var constants = require('react-reconciler/constants');
 var traditional = require('zustand/traditional');
 var itsFine = require('its-fine');
-var _extends = require('@babel/runtime/helpers/extends');
 var Reconciler = require('react-reconciler');
 var scheduler = require('scheduler');
+var jsxRuntime = require('react/jsx-runtime');
 var suspendReact = require('suspend-react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -38,10 +38,6 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
-// TODO: handle constructor overloads
-// https://github.com/pmndrs/react-three-fiber/pull/2931
-// https://github.com/microsoft/TypeScript/issues/37079
-
 const catalogue = {};
 let i = 0;
 const extend = objects => {
@@ -52,9 +48,10 @@ const extend = objects => {
     // Returns a component whose name will be inferred in devtools
     // @ts-expect-error
     return /*#__PURE__*/React__namespace.forwardRef({
-      [objects.name]: (props, ref) => /*#__PURE__*/React__namespace.createElement(Component, _extends({}, props, {
+      [objects.name]: (props, ref) => /*#__PURE__*/jsxRuntime.jsx(Component, {
+        ...props,
         ref: ref
-      }))
+      })
     }[objects.name]);
   } else {
     return void Object.assign(catalogue, objects);
@@ -474,7 +471,11 @@ function useBridge() {
   }) => {
     const strict = !!itsFine.traverseFiber(fiber, true, node => node.type === React__namespace.StrictMode);
     const Root = strict ? React__namespace.StrictMode : React__namespace.Fragment;
-    return /*#__PURE__*/React__namespace.createElement(Root, null, /*#__PURE__*/React__namespace.createElement(ContextBridge, null, children));
+    return /*#__PURE__*/jsxRuntime.jsx(Root, {
+      children: /*#__PURE__*/jsxRuntime.jsx(ContextBridge, {
+        children: children
+      })
+    });
   }, [fiber, ContextBridge]);
 }
 function Block({
@@ -1815,9 +1816,6 @@ useLoader.clear = function (loader, input) {
   return suspendReact.clear([loader, ...keys]);
 };
 
-// Shim for OffscreenCanvas since it was removed from DOM types
-// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/54988
-
 const _roots = new Map();
 const shallowLoose = {
   objects: 'shallow',
@@ -2169,7 +2167,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,
@@ -2210,9 +2208,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);
@@ -2241,7 +2240,7 @@ function unmountComponentAtNode(canvas, callback) {
   }
 }
 function createPortal(children, container, state) {
-  return /*#__PURE__*/React__namespace.createElement(Portal, {
+  return /*#__PURE__*/jsxRuntime.jsx(Portal, {
     children: children,
     container: container,
     state: state
@@ -2324,9 +2323,12 @@ function Portal({
     return store;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [previousRoot, container]);
-  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/{loop-d73c6316.esm.js → loop-ef070875.esm.js}

@@ -3,19 +3,15 @@ import * as React from 'react';
 import { NoEventPriority, DefaultEventPriority, ContinuousEventPriority, DiscreteEventPriority, ConcurrentRoot } from 'react-reconciler/constants';
 import { createWithEqualityFn } from 'zustand/traditional';
 import { useFiber, useContextBridge, traverseFiber } from 'its-fine';
-import _extends from '@babel/runtime/helpers/esm/extends';
 import Reconciler from 'react-reconciler';
 import { unstable_scheduleCallback, unstable_IdlePriority } from 'scheduler';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import { suspend, preload, clear } from 'suspend-react';
 
 var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
-// TODO: handle constructor overloads
-// https://github.com/pmndrs/react-three-fiber/pull/2931
-// https://github.com/microsoft/TypeScript/issues/37079
-
 const catalogue = {};
 let i = 0;
 const extend = objects => {
@@ -26,9 +22,10 @@ const extend = objects => {
     // Returns a component whose name will be inferred in devtools
     // @ts-expect-error
     return /*#__PURE__*/React.forwardRef({
-      [objects.name]: (props, ref) => /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+      [objects.name]: (props, ref) => /*#__PURE__*/jsx(Component, {
+        ...props,
         ref: ref
-      }))
+      })
     }[objects.name]);
   } else {
     return void Object.assign(catalogue, objects);
@@ -448,7 +445,11 @@ function useBridge() {
   }) => {
     const strict = !!traverseFiber(fiber, true, node => node.type === React.StrictMode);
     const Root = strict ? React.StrictMode : React.Fragment;
-    return /*#__PURE__*/React.createElement(Root, null, /*#__PURE__*/React.createElement(ContextBridge, null, children));
+    return /*#__PURE__*/jsx(Root, {
+      children: /*#__PURE__*/jsx(ContextBridge, {
+        children: children
+      })
+    });
   }, [fiber, ContextBridge]);
 }
 function Block({
@@ -1789,9 +1790,6 @@ useLoader.clear = function (loader, input) {
   return clear([loader, ...keys]);
 };
 
-// Shim for OffscreenCanvas since it was removed from DOM types
-// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/54988
-
 const _roots = new Map();
 const shallowLoose = {
   objects: 'shallow',
@@ -2143,7 +2141,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,
@@ -2184,9 +2182,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);
@@ -2215,7 +2214,7 @@ function unmountComponentAtNode(canvas, callback) {
   }
 }
 function createPortal(children, container, state) {
-  return /*#__PURE__*/React.createElement(Portal, {
+  return /*#__PURE__*/jsx(Portal, {
     children: children,
     container: container,
     state: state
@@ -2298,9 +2297,12 @@ function Portal({
     return store;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [previousRoot, container]);
-  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 loop = require('./loop-02cefb27.cjs.dev.js');
-var _extends = require('@babel/runtime/helpers/extends');
+var loop = require('./loop-c991cb05.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/traditional');
 require('react-reconciler');
@@ -213,13 +213,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(loop.ErrorBoundary, {
-        set: setError
-      }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
-        fallback: /*#__PURE__*/React__namespace.createElement(loop.Block, {
-          set: setBlock
+      root.current.render( /*#__PURE__*/jsxRuntime.jsx(Bridge, {
+        children: /*#__PURE__*/jsxRuntime.jsx(loop.ErrorBoundary, {
+          set: setError,
+          children: /*#__PURE__*/jsxRuntime.jsx(React__namespace.Suspense, {
+            fallback: /*#__PURE__*/jsxRuntime.jsx(loop.Block, {
+              set: setBlock
+            }),
+            children: children
+          })
         })
-      }, children))));
+      }));
     }
   });
   React__namespace.useEffect(() => {
@@ -230,7 +234,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',
@@ -239,19 +243,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
+      })
+    })
+  });
 });
 
 /**
@@ -259,9 +267,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.FixedStage = loop.FixedStage;

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

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var loop = require('./loop-1fad3b6f.cjs.prod.js');
-var _extends = require('@babel/runtime/helpers/extends');
+var loop = require('./loop-6e8a6208.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/traditional');
 require('react-reconciler');
@@ -213,13 +213,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(loop.ErrorBoundary, {
-        set: setError
-      }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
-        fallback: /*#__PURE__*/React__namespace.createElement(loop.Block, {
-          set: setBlock
+      root.current.render( /*#__PURE__*/jsxRuntime.jsx(Bridge, {
+        children: /*#__PURE__*/jsxRuntime.jsx(loop.ErrorBoundary, {
+          set: setError,
+          children: /*#__PURE__*/jsxRuntime.jsx(React__namespace.Suspense, {
+            fallback: /*#__PURE__*/jsxRuntime.jsx(loop.Block, {
+              set: setBlock
+            }),
+            children: children
+          })
         })
-      }, children))));
+      }));
     }
   });
   React__namespace.useEffect(() => {
@@ -230,7 +234,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',
@@ -239,19 +243,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
+      })
+    })
+  });
 });
 
 /**
@@ -259,9 +267,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.FixedStage = loop.FixedStage;

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

@@ -1,10 +1,10 @@
-import { c as createEvents, e as extend, u as useBridge, a as useMutableCallback, b as useIsomorphicLayoutEffect, d as createRoot, i as isRef, E as ErrorBoundary, B as Block, f as unmountComponentAtNode } from './loop-d73c6316.esm.js';
-export { F as FixedStage, t as ReactThreeFiber, S as Stage, p as Stages, _ as _roots, x as act, j as addAfterEffect, h as addEffect, k as addTail, m as advance, s as applyProps, y as buildGraph, q as context, c as createEvents, o as createPortal, d as createRoot, w as dispose, e as extend, g as flushGlobalEffects, v as getRootState, l as invalidate, r as reconciler, n as render, f as unmountComponentAtNode, D as useFrame, H as useGraph, z as useInstanceHandle, I as useLoader, A as useStore, C as useThree, G as useUpdate } from './loop-d73c6316.esm.js';
-import _extends from '@babel/runtime/helpers/esm/extends';
+import { c as createEvents, e as extend, u as useBridge, a as useMutableCallback, b as useIsomorphicLayoutEffect, d as createRoot, i as isRef, E as ErrorBoundary, B as Block, f as unmountComponentAtNode } from './loop-ef070875.esm.js';
+export { F as FixedStage, t as ReactThreeFiber, S as Stage, p as Stages, _ as _roots, x as act, j as addAfterEffect, h as addEffect, k as addTail, m as advance, s as applyProps, y as buildGraph, q as context, c as createEvents, o as createPortal, d as createRoot, w as dispose, e as extend, g as flushGlobalEffects, v as getRootState, l as invalidate, r as reconciler, n as render, f as unmountComponentAtNode, D as useFrame, H as useGraph, z as useInstanceHandle, I as useLoader, A as useStore, C as useThree, G as useUpdate } from './loop-ef070875.esm.js';
 import * as React from 'react';
 import * as THREE from 'three';
 import useMeasure from 'react-use-measure';
 import { FiberProvider } from 'its-fine';
+import { jsx } from 'react/jsx-runtime';
 import 'react-reconciler/constants';
 import 'zustand/traditional';
 import 'react-reconciler';
@@ -186,13 +186,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(() => {
@@ -203,7 +207,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',
@@ -212,19 +216,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
+      })
+    })
+  });
 });
 
 /**
@@ -232,9 +240,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 loop = require('../../dist/loop-02cefb27.cjs.dev.js');
-var _extends = require('@babel/runtime/helpers/extends');
+var loop = require('../../dist/loop-c991cb05.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');
@@ -255,31 +255,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(loop.ErrorBoundary, {
-      set: setError
-    }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
-      fallback: /*#__PURE__*/React__namespace.createElement(loop.Block, {
-        set: setBlock
+    root.current.render( /*#__PURE__*/jsxRuntime.jsx(Bridge, {
+      children: /*#__PURE__*/jsxRuntime.jsx(loop.ErrorBoundary, {
+        set: setError,
+        children: /*#__PURE__*/jsxRuntime.jsx(React__namespace.Suspense, {
+          fallback: /*#__PURE__*/jsxRuntime.jsx(loop.Block, {
+            set: setBlock
+          }),
+          children: children
+        })
       })
-    }, children))));
+    }));
   }
   React__namespace.useEffect(() => {
     if (canvas) {
       return () => loop.unmountComponentAtNode(canvas);
     }
   }, [canvas]);
-  return /*#__PURE__*/React__namespace.createElement(_View, _extends({}, props, {
+  return /*#__PURE__*/jsxRuntime.jsx(_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
+    })
+  });
 });
 
 /**
@@ -287,9 +294,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
@@ -425,7 +435,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 loop = require('../../dist/loop-1fad3b6f.cjs.prod.js');
-var _extends = require('@babel/runtime/helpers/extends');
+var loop = require('../../dist/loop-6e8a6208.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');
@@ -255,31 +255,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(loop.ErrorBoundary, {
-      set: setError
-    }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
-      fallback: /*#__PURE__*/React__namespace.createElement(loop.Block, {
-        set: setBlock
+    root.current.render( /*#__PURE__*/jsxRuntime.jsx(Bridge, {
+      children: /*#__PURE__*/jsxRuntime.jsx(loop.ErrorBoundary, {
+        set: setError,
+        children: /*#__PURE__*/jsxRuntime.jsx(React__namespace.Suspense, {
+          fallback: /*#__PURE__*/jsxRuntime.jsx(loop.Block, {
+            set: setBlock
+          }),
+          children: children
+        })
       })
-    }, children))));
+    }));
   }
   React__namespace.useEffect(() => {
     if (canvas) {
       return () => loop.unmountComponentAtNode(canvas);
     }
   }, [canvas]);
-  return /*#__PURE__*/React__namespace.createElement(_View, _extends({}, props, {
+  return /*#__PURE__*/jsxRuntime.jsx(_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
+    })
+  });
 });
 
 /**
@@ -287,9 +294,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
@@ -425,7 +435,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 useBridge, a as useMutableCallback, d as createRoot, E as ErrorBoundary, B as Block, f as unmountComponentAtNode } from '../../dist/loop-d73c6316.esm.js';
-export { F as FixedStage, t as ReactThreeFiber, S as Stage, p as Stages, _ as _roots, x as act, j as addAfterEffect, h as addEffect, k as addTail, m as advance, s as applyProps, y as buildGraph, q as context, c as createEvents, o as createPortal, d as createRoot, w as dispose, e as extend, g as flushGlobalEffects, v as getRootState, l as invalidate, r as reconciler, n as render, f as unmountComponentAtNode, D as useFrame, H as useGraph, z as useInstanceHandle, I as useLoader, A as useStore, C as useThree, G as useUpdate } from '../../dist/loop-d73c6316.esm.js';
-import _extends from '@babel/runtime/helpers/esm/extends';
+import { c as createEvents, e as extend, u as useBridge, a as useMutableCallback, d as createRoot, E as ErrorBoundary, B as Block, f as unmountComponentAtNode } from '../../dist/loop-ef070875.esm.js';
+export { F as FixedStage, t as ReactThreeFiber, S as Stage, p as Stages, _ as _roots, x as act, j as addAfterEffect, h as addEffect, k as addTail, m as advance, s as applyProps, y as buildGraph, q as context, c as createEvents, o as createPortal, d as createRoot, w as dispose, e as extend, g as flushGlobalEffects, v as getRootState, l as invalidate, r as reconciler, n as render, f as unmountComponentAtNode, D as useFrame, H as useGraph, z as useInstanceHandle, I as useLoader, A as useStore, C as useThree, G as useUpdate } from '../../dist/loop-ef070875.esm.js';
 import * as React from 'react';
 import * as THREE from 'three';
 import { PanResponder, PixelRatio, StyleSheet, View, Platform, Image, NativeModules } from 'react-native';
 import { GLView } from 'expo-gl';
 import { FiberProvider } 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';
@@ -230,31 +230,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
+    })
+  });
 });
 
 /**
@@ -262,9 +269,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
@@ -400,7 +410,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": "9.0.0-alpha.5",
+  "version": "9.0.0-alpha.6",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",
@@ -47,9 +47,9 @@
     "base64-js": "^1.5.1",
     "buffer": "^6.0.3",
     "its-fine": "^1.2.5",
-    "react-reconciler": "0.31.0-beta-94eed63c49-20240425",
+    "react-reconciler": "0.31.0-beta-6946ebe620-20240508",
     "react-use-measure": "^2.1.1",
-    "scheduler": "0.25.0-beta-94eed63c49-20240425",
+    "scheduler": "0.25.0-beta-6946ebe620-20240508",
     "suspend-react": "^0.1.3",
     "zustand": "^4.1.2"
   },

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?