@react-three/fiber 9.0.0-alpha.2 → 9.0.0-alpha.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/CHANGELOG.md +962 -522
  2. package/dist/declarations/src/core/events.d.ts +91 -69
  3. package/dist/declarations/src/core/hooks.d.ts +53 -27
  4. package/dist/declarations/src/core/index.d.ts +15 -60
  5. package/dist/declarations/src/core/loop.d.ts +31 -15
  6. package/dist/declarations/src/core/reconciler.d.ts +43 -0
  7. package/dist/declarations/src/core/renderer.d.ts +85 -40
  8. package/dist/declarations/src/core/stages.d.ts +64 -59
  9. package/dist/declarations/src/core/store.d.ts +147 -109
  10. package/dist/declarations/src/core/utils.d.ts +128 -80
  11. package/dist/declarations/src/index.d.ts +6 -10
  12. package/dist/declarations/src/native/Canvas.d.ts +14 -8
  13. package/dist/declarations/src/native/events.d.ts +4 -4
  14. package/dist/declarations/src/native.d.ts +6 -8
  15. package/dist/declarations/src/three-types.d.ts +56 -47
  16. package/dist/declarations/src/web/Canvas.d.ts +24 -11
  17. package/dist/declarations/src/web/events.d.ts +4 -4
  18. package/dist/{index-5bd4d3cf.cjs.dev.js → loop-0698c205.cjs.dev.js} +1469 -1268
  19. package/dist/{index-8128f248.cjs.prod.js → loop-a0ef8208.cjs.prod.js} +1469 -1268
  20. package/dist/{index-47b7622a.esm.js → loop-b2aca207.esm.js} +1466 -1268
  21. package/dist/react-three-fiber.cjs.d.ts +1 -0
  22. package/dist/react-three-fiber.cjs.dev.js +126 -115
  23. package/dist/react-three-fiber.cjs.prod.js +126 -115
  24. package/dist/react-three-fiber.esm.js +92 -84
  25. package/native/dist/react-three-fiber-native.cjs.d.ts +1 -0
  26. package/native/dist/react-three-fiber-native.cjs.dev.js +278 -211
  27. package/native/dist/react-three-fiber-native.cjs.prod.js +278 -211
  28. package/native/dist/react-three-fiber-native.esm.js +242 -180
  29. package/native/package.json +5 -5
  30. package/package.json +18 -12
  31. package/readme.md +253 -202
  32. package/dist/declarations/src/native/polyfills.d.ts +0 -1
@@ -1 +1,2 @@
1
1
  export * from "./declarations/src/index";
2
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVhY3QtdGhyZWUtZmliZXIuY2pzLmQudHMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuL2RlY2xhcmF0aW9ucy9zcmMvaW5kZXguZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9
@@ -2,12 +2,12 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var loop = require('./loop-0698c205.cjs.dev.js');
5
6
  var _extends = require('@babel/runtime/helpers/extends');
6
7
  var React = require('react');
7
8
  var THREE = require('three');
8
9
  var useMeasure = require('react-use-measure');
9
10
  var itsFine = require('its-fine');
10
- var index = require('./index-5bd4d3cf.cjs.dev.js');
11
11
  require('react-reconciler/constants');
12
12
  require('zustand');
13
13
  require('react-reconciler');
@@ -50,64 +50,72 @@ const DOM_EVENTS = {
50
50
  onPointerCancel: ['pointercancel', true],
51
51
  onLostPointerCapture: ['lostpointercapture', true]
52
52
  };
53
- /** Default R3F event manager for web */
54
53
 
54
+ /** Default R3F event manager for web */
55
55
  function createPointerEvents(store) {
56
56
  const {
57
57
  handlePointer
58
- } = index.createEvents(store);
58
+ } = loop.createEvents(store);
59
59
  return {
60
60
  priority: 1,
61
61
  enabled: true,
62
-
63
62
  compute(event, state, previous) {
64
63
  // https://github.com/pmndrs/react-three-fiber/pull/782
65
64
  // Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
66
65
  state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
67
66
  state.raycaster.setFromCamera(state.pointer, state.camera);
68
67
  },
69
-
70
68
  connected: undefined,
71
- handlers: Object.keys(DOM_EVENTS).reduce((acc, key) => ({ ...acc,
69
+ handlers: Object.keys(DOM_EVENTS).reduce((acc, key) => ({
70
+ ...acc,
72
71
  [key]: handlePointer(key)
73
72
  }), {}),
73
+ update: () => {
74
+ var _internal$lastEvent;
75
+ const {
76
+ events,
77
+ internal
78
+ } = store.getState();
79
+ if ((_internal$lastEvent = internal.lastEvent) != null && _internal$lastEvent.current && events.handlers) events.handlers.onPointerMove(internal.lastEvent.current);
80
+ },
74
81
  connect: target => {
75
- var _events$handlers;
76
-
77
82
  const {
78
83
  set,
79
84
  events
80
85
  } = store.getState();
81
86
  events.disconnect == null ? void 0 : events.disconnect();
82
87
  set(state => ({
83
- events: { ...state.events,
88
+ events: {
89
+ ...state.events,
84
90
  connected: target
85
91
  }
86
92
  }));
87
- Object.entries((_events$handlers = events.handlers) != null ? _events$handlers : []).forEach(([name, event]) => {
88
- const [eventName, passive] = DOM_EVENTS[name];
89
- target.addEventListener(eventName, event, {
90
- passive
91
- });
92
- });
93
+ if (events.handlers) {
94
+ for (const name in events.handlers) {
95
+ const event = events.handlers[name];
96
+ const [eventName, passive] = DOM_EVENTS[name];
97
+ target.addEventListener(eventName, event, {
98
+ passive
99
+ });
100
+ }
101
+ }
93
102
  },
94
103
  disconnect: () => {
95
104
  const {
96
105
  set,
97
106
  events
98
107
  } = store.getState();
99
-
100
108
  if (events.connected) {
101
- var _events$handlers2;
102
-
103
- Object.entries((_events$handlers2 = events.handlers) != null ? _events$handlers2 : []).forEach(([name, event]) => {
104
- if (events && events.connected instanceof HTMLElement) {
109
+ if (events.handlers) {
110
+ for (const name in events.handlers) {
111
+ const event = events.handlers[name];
105
112
  const [eventName] = DOM_EVENTS[name];
106
113
  events.connected.removeEventListener(eventName, event);
107
114
  }
108
- });
115
+ }
109
116
  set(state => ({
110
- events: { ...state.events,
117
+ events: {
118
+ ...state.events,
111
119
  connected: undefined
112
120
  }
113
121
  }));
@@ -135,6 +143,7 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
135
143
  performance,
136
144
  raycaster,
137
145
  camera,
146
+ scene,
138
147
  onPointerMissed,
139
148
  onCreated,
140
149
  stages,
@@ -143,8 +152,8 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
143
152
  // Create a known catalogue of Threejs-native elements
144
153
  // This will include the entire THREE namespace by default, users can extend
145
154
  // their own elements by using the createRoot API instead
146
- React__namespace.useMemo(() => index.extend(THREE__namespace), []);
147
- const Bridge = itsFine.useContextBridge();
155
+ React__namespace.useMemo(() => loop.extend(THREE__namespace), []);
156
+ const Bridge = loop.useBridge();
148
157
  const [containerRef, containerRect] = useMeasure__default["default"]({
149
158
  scroll: true,
150
159
  debounce: {
@@ -155,72 +164,71 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
155
164
  });
156
165
  const canvasRef = React__namespace.useRef(null);
157
166
  const divRef = React__namespace.useRef(null);
158
- const [canvas, setCanvas] = React__namespace.useState(null);
159
167
  React__namespace.useImperativeHandle(forwardedRef, () => canvasRef.current);
160
- const handlePointerMissed = index.useMutableCallback(onPointerMissed);
168
+ const handlePointerMissed = loop.useMutableCallback(onPointerMissed);
161
169
  const [block, setBlock] = React__namespace.useState(false);
162
- const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
163
-
164
- if (block) throw block; // Throw exception outwards if anything within canvas throws
170
+ const [error, setError] = React__namespace.useState(false);
165
171
 
172
+ // Suspend this component if block is a promise (2nd run)
173
+ if (block) throw block;
174
+ // Throw exception outwards if anything within canvas throws
166
175
  if (error) throw error;
167
176
  const root = React__namespace.useRef(null);
168
-
169
- if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
170
- if (!root.current) root.current = index.createRoot(canvas);
171
- root.current.configure({
172
- gl,
173
- events,
174
- shadows,
175
- linear,
176
- flat,
177
- legacy,
178
- orthographic,
179
- frameloop,
180
- dpr,
181
- performance,
182
- raycaster,
183
- camera,
184
- stages,
185
- size: containerRect,
186
- // Pass mutable reference to onPointerMissed so it's free to update
187
- onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
188
- onCreated: state => {
189
- // Connect to event source
190
- state.events.connect == null ? void 0 : state.events.connect(eventSource ? index.isRef(eventSource) ? eventSource.current : eventSource : divRef.current); // Set up compute function
191
-
192
- if (eventPrefix) {
193
- state.setEvents({
194
- compute: (event, state) => {
195
- const x = event[eventPrefix + 'X'];
196
- const y = event[eventPrefix + 'Y'];
197
- state.pointer.set(x / state.size.width * 2 - 1, -(y / state.size.height) * 2 + 1);
198
- state.raycaster.setFromCamera(state.pointer, state.camera);
199
- }
200
- });
201
- } // Call onCreated callback
202
-
203
-
204
- onCreated == null ? void 0 : onCreated(state);
205
- }
206
- });
207
- root.current.render( /*#__PURE__*/React__namespace.createElement(Bridge, null, /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
208
- set: setError
209
- }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
210
- fallback: /*#__PURE__*/React__namespace.createElement(index.Block, {
211
- set: setBlock
212
- })
213
- }, children))));
214
- }
215
-
216
- index.useIsomorphicLayoutEffect(() => {
217
- setCanvas(canvasRef.current);
218
- }, []);
177
+ loop.useIsomorphicLayoutEffect(() => {
178
+ const canvas = canvasRef.current;
179
+ if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
180
+ if (!root.current) root.current = loop.createRoot(canvas);
181
+ root.current.configure({
182
+ gl,
183
+ scene,
184
+ events,
185
+ shadows,
186
+ linear,
187
+ flat,
188
+ legacy,
189
+ orthographic,
190
+ frameloop,
191
+ dpr,
192
+ performance,
193
+ raycaster,
194
+ camera,
195
+ size: containerRect,
196
+ // Pass mutable reference to onPointerMissed so it's free to update
197
+ onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
198
+ onCreated: state => {
199
+ // Connect to event source
200
+ state.events.connect == null ? void 0 : state.events.connect(eventSource ? loop.isRef(eventSource) ? eventSource.current : eventSource : divRef.current);
201
+ // Set up compute function
202
+ if (eventPrefix) {
203
+ state.setEvents({
204
+ compute: (event, state) => {
205
+ const x = event[eventPrefix + 'X'];
206
+ const y = event[eventPrefix + 'Y'];
207
+ state.pointer.set(x / state.size.width * 2 - 1, -(y / state.size.height) * 2 + 1);
208
+ state.raycaster.setFromCamera(state.pointer, state.camera);
209
+ }
210
+ });
211
+ }
212
+ // Call onCreated callback
213
+ onCreated == null ? void 0 : onCreated(state);
214
+ }
215
+ });
216
+ root.current.render( /*#__PURE__*/React__namespace.createElement(Bridge, null, /*#__PURE__*/React__namespace.createElement(loop.ErrorBoundary, {
217
+ set: setError
218
+ }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
219
+ fallback: /*#__PURE__*/React__namespace.createElement(loop.Block, {
220
+ set: setBlock
221
+ })
222
+ }, children))));
223
+ }
224
+ });
219
225
  React__namespace.useEffect(() => {
220
- if (canvas) return () => index.unmountComponentAtNode(canvas);
221
- }, [canvas]); // When the event source is not this div, we need to set pointer-events to none
222
- // Or else the canvas will block events from reaching the event source
226
+ const canvas = canvasRef.current;
227
+ if (canvas) return () => loop.unmountComponentAtNode(canvas);
228
+ }, []);
223
229
 
230
+ // When the event source is not this div, we need to set pointer-events to none
231
+ // Or else the canvas will block events from reaching the event source
224
232
  const pointerEvents = eventSource ? 'none' : 'auto';
225
233
  return /*#__PURE__*/React__namespace.createElement("div", _extends({
226
234
  ref: divRef,
@@ -245,44 +253,47 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
245
253
  }
246
254
  }, fallback)));
247
255
  });
248
- /**
249
- * A DOM canvas which accepts threejs elements as children.
250
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
251
- */
252
256
 
257
+ /**
258
+ * A DOM canvas which accepts threejs elements as children.
259
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
260
+ */
253
261
  const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(props, ref) {
254
262
  return /*#__PURE__*/React__namespace.createElement(itsFine.FiberProvider, null, /*#__PURE__*/React__namespace.createElement(CanvasImpl, _extends({}, props, {
255
263
  ref: ref
256
264
  })));
257
265
  });
258
266
 
259
- exports.FixedStage = index.FixedStage;
260
- exports.Stage = index.Stage;
261
- exports.Stages = index.Stages;
262
- exports._roots = index.roots;
263
- exports.act = index.act;
264
- exports.addAfterEffect = index.addAfterEffect;
265
- exports.addEffect = index.addEffect;
266
- exports.addTail = index.addTail;
267
- exports.advance = index.advance;
268
- exports.applyProps = index.applyProps;
269
- exports.context = index.context;
270
- exports.createEvents = index.createEvents;
271
- exports.createPortal = index.createPortal;
272
- exports.createRoot = index.createRoot;
273
- exports.dispose = index.dispose;
274
- exports.extend = index.extend;
275
- exports.getRootState = index.getRootState;
276
- exports.invalidate = index.invalidate;
277
- exports.reconciler = index.reconciler;
278
- exports.render = index.render;
279
- exports.unmountComponentAtNode = index.unmountComponentAtNode;
280
- exports.useFrame = index.useFrame;
281
- exports.useGraph = index.useGraph;
282
- exports.useInstanceHandle = index.useInstanceHandle;
283
- exports.useLoader = index.useLoader;
284
- exports.useStore = index.useStore;
285
- exports.useThree = index.useThree;
286
- exports.useUpdate = index.useUpdate;
267
+ exports.FixedStage = loop.FixedStage;
268
+ exports.ReactThreeFiber = loop.threeTypes;
269
+ exports.Stage = loop.Stage;
270
+ exports.Stages = loop.Stages;
271
+ exports._roots = loop._roots;
272
+ exports.act = loop.act;
273
+ exports.addAfterEffect = loop.addAfterEffect;
274
+ exports.addEffect = loop.addEffect;
275
+ exports.addTail = loop.addTail;
276
+ exports.advance = loop.advance;
277
+ exports.applyProps = loop.applyProps;
278
+ exports.buildGraph = loop.buildGraph;
279
+ exports.context = loop.context;
280
+ exports.createEvents = loop.createEvents;
281
+ exports.createPortal = loop.createPortal;
282
+ exports.createRoot = loop.createRoot;
283
+ exports.dispose = loop.dispose;
284
+ exports.extend = loop.extend;
285
+ exports.flushGlobalEffects = loop.flushGlobalEffects;
286
+ exports.getRootState = loop.getRootState;
287
+ exports.invalidate = loop.invalidate;
288
+ exports.reconciler = loop.reconciler;
289
+ exports.render = loop.render;
290
+ exports.unmountComponentAtNode = loop.unmountComponentAtNode;
291
+ exports.useFrame = loop.useFrame;
292
+ exports.useGraph = loop.useGraph;
293
+ exports.useInstanceHandle = loop.useInstanceHandle;
294
+ exports.useLoader = loop.useLoader;
295
+ exports.useStore = loop.useStore;
296
+ exports.useThree = loop.useThree;
297
+ exports.useUpdate = loop.useUpdate;
287
298
  exports.Canvas = Canvas;
288
299
  exports.events = createPointerEvents;