@react-three/fiber 10.0.0-canary.dc0ec15 → 10.0.0-canary.e53bd54
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.
- package/dist/chunks/webgl.cjs +27 -0
- package/dist/chunks/webgl.mjs +11 -0
- package/dist/chunks/webgpu.cjs +37 -0
- package/dist/chunks/webgpu.mjs +21 -0
- package/dist/extension.cjs +7 -273
- package/dist/extension.d.cts +10 -1629
- package/dist/extension.d.mts +10 -1629
- package/dist/extension.d.ts +10 -1601
- package/dist/extension.mjs +1 -258
- package/dist/index.cjs +97 -15412
- package/dist/index.d.cts +124 -3911
- package/dist/index.d.mts +124 -3911
- package/dist/index.d.ts +124 -3883
- package/dist/index.mjs +10 -15311
- package/dist/legacy.cjs +97 -15370
- package/dist/legacy.d.cts +110 -3880
- package/dist/legacy.d.mts +110 -3880
- package/dist/legacy.d.ts +110 -3854
- package/dist/legacy.mjs +12 -15270
- package/dist/shared/fiber.B6zNSmwj.cjs +359 -0
- package/dist/shared/fiber.BGL2rpse.cjs +15129 -0
- package/dist/shared/fiber.Bw8YnGg5.d.cts +701 -0
- package/dist/shared/fiber.Bw8YnGg5.d.mts +701 -0
- package/dist/shared/fiber.Bw8YnGg5.d.ts +701 -0
- package/dist/shared/fiber.C_v1rkNg.mjs +329 -0
- package/dist/shared/fiber.Ch4JrXS2.mjs +15031 -0
- package/dist/shared/fiber.DAg-9ieU.d.ts +2852 -0
- package/dist/shared/fiber.Ddgoyqql.d.mts +2852 -0
- package/dist/shared/fiber.DiPB625B.d.cts +2852 -0
- package/dist/webgpu/index.cjs +101 -16329
- package/dist/webgpu/index.d.cts +113 -4228
- package/dist/webgpu/index.d.mts +113 -4228
- package/dist/webgpu/index.d.ts +113 -4200
- package/dist/webgpu/index.mjs +16 -16211
- package/package.json +1 -3
|
@@ -0,0 +1,329 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { useContext } from 'react';
|
|
3
|
+
import { jsx } from 'react/jsx-runtime';
|
|
4
|
+
import { useFiber, useContextBridge, traverseFiber } from 'its-fine';
|
|
5
|
+
import { getScheduler } from '@pmndrs/scheduler';
|
|
6
|
+
|
|
7
|
+
var __defProp = Object.defineProperty;
|
|
8
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
+
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
10
|
+
const useIsomorphicLayoutEffect = /* @__PURE__ */ (() => typeof window !== "undefined" && (window.document?.createElement || window.navigator?.product === "ReactNative"))() ? React.useLayoutEffect : React.useEffect;
|
|
11
|
+
function useMutableCallback(fn) {
|
|
12
|
+
const ref = React.useRef(fn);
|
|
13
|
+
useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
|
|
14
|
+
return ref;
|
|
15
|
+
}
|
|
16
|
+
function useBridge() {
|
|
17
|
+
const fiber = useFiber();
|
|
18
|
+
const ContextBridge = useContextBridge();
|
|
19
|
+
return React.useMemo(
|
|
20
|
+
() => ({ children }) => {
|
|
21
|
+
const strict = !!traverseFiber(fiber, true, (node) => node.type === React.StrictMode);
|
|
22
|
+
const Root = strict ? React.StrictMode : React.Fragment;
|
|
23
|
+
return /* @__PURE__ */ jsx(Root, { children: /* @__PURE__ */ jsx(ContextBridge, { children }) });
|
|
24
|
+
},
|
|
25
|
+
[fiber, ContextBridge]
|
|
26
|
+
);
|
|
27
|
+
}
|
|
28
|
+
function Block({ set }) {
|
|
29
|
+
useIsomorphicLayoutEffect(() => {
|
|
30
|
+
set(new Promise(() => null));
|
|
31
|
+
return () => set(false);
|
|
32
|
+
}, [set]);
|
|
33
|
+
return null;
|
|
34
|
+
}
|
|
35
|
+
const ErrorBoundary = /* @__PURE__ */ (() => {
|
|
36
|
+
var _a;
|
|
37
|
+
return _a = class extends React.Component {
|
|
38
|
+
constructor() {
|
|
39
|
+
super(...arguments);
|
|
40
|
+
__publicField(this, "state", { error: false });
|
|
41
|
+
}
|
|
42
|
+
componentDidCatch(err) {
|
|
43
|
+
this.props.set(err);
|
|
44
|
+
}
|
|
45
|
+
render() {
|
|
46
|
+
return this.state.error ? null : this.props.children;
|
|
47
|
+
}
|
|
48
|
+
}, __publicField(_a, "getDerivedStateFromError", () => ({ error: true })), _a;
|
|
49
|
+
})();
|
|
50
|
+
|
|
51
|
+
const shownNotices = /* @__PURE__ */ new Set();
|
|
52
|
+
function notifyDepreciated({ heading, body, link }) {
|
|
53
|
+
if (typeof process !== "undefined" && (process.env.NODE_ENV === "test" || process.env.JEST_WORKER_ID !== void 0) && process.env.R3F_SHOW_DEPRECATION_WARNINGS !== "true") {
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
if (shownNotices.has(heading)) return;
|
|
57
|
+
shownNotices.add(heading);
|
|
58
|
+
const caller = getCallerFrame();
|
|
59
|
+
if (caller) {
|
|
60
|
+
console.log();
|
|
61
|
+
}
|
|
62
|
+
const boxStyle = "background: #ff9800; color: #1a1a1a; padding: 8px 12px; border-radius: 4px; font-weight: 500;";
|
|
63
|
+
if (caller) {
|
|
64
|
+
console.log(`%c\u26A0\uFE0F ${heading}`, boxStyle);
|
|
65
|
+
}
|
|
66
|
+
if (body || link) {
|
|
67
|
+
let message = "";
|
|
68
|
+
if (body) message += body;
|
|
69
|
+
if (link) message += (body ? "\n\n" : "") + `More info: ${link}`;
|
|
70
|
+
console.warn(`%c${message}`, "font-weight: bold;");
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
function getCallerFrame(depth = 3) {
|
|
74
|
+
const stack = new Error().stack;
|
|
75
|
+
if (!stack) return null;
|
|
76
|
+
const lines = stack.split("\n");
|
|
77
|
+
const frame = lines[depth];
|
|
78
|
+
if (!frame) return null;
|
|
79
|
+
let match = frame.match(/^\s*at (?:(.+?) )?\(?(.+?):(\d+):(\d+)\)?$/);
|
|
80
|
+
if (!match) {
|
|
81
|
+
match = frame.match(/^(?:(.+?)@)?(.+?):(\d+):(\d+)$/);
|
|
82
|
+
}
|
|
83
|
+
if (!match) return null;
|
|
84
|
+
const [, fn, url, line] = match;
|
|
85
|
+
return {
|
|
86
|
+
functionName: fn ?? "<anonymous>",
|
|
87
|
+
location: formatLocation(url, Number(line))
|
|
88
|
+
};
|
|
89
|
+
}
|
|
90
|
+
function formatLocation(url, line) {
|
|
91
|
+
const clean = url.split("?")[0];
|
|
92
|
+
const file = clean.split("/").pop() ?? clean;
|
|
93
|
+
return `${file}:${line}`;
|
|
94
|
+
}
|
|
95
|
+
function notifyAlpha({ message, link }) {
|
|
96
|
+
if (typeof process !== "undefined" && (process.env.NODE_ENV === "test" || process.env.JEST_WORKER_ID !== void 0) && process.env.R3F_SHOW_ALPHA_WARNINGS !== "true") {
|
|
97
|
+
return;
|
|
98
|
+
}
|
|
99
|
+
if (shownNotices.has(message)) return;
|
|
100
|
+
shownNotices.add(message);
|
|
101
|
+
const boxStyle = "background: #6366f1; color: #ffffff; padding: 6px 10px; border-radius: 4px; font-weight: 500;";
|
|
102
|
+
console.log(`%c\u{1F52C} ${message}`, boxStyle);
|
|
103
|
+
{
|
|
104
|
+
console.log(`%cMore info: ${link}`, "color: #6366f1; font-weight: normal;");
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
const R3F_CONTEXT = Symbol.for("@react-three/fiber.context");
|
|
109
|
+
const context = globalThis[R3F_CONTEXT] ?? (globalThis[R3F_CONTEXT] = React.createContext(null));
|
|
110
|
+
|
|
111
|
+
function useStore() {
|
|
112
|
+
const store = useContext(context);
|
|
113
|
+
if (!store) throw new Error("R3F: Hooks can only be used within the Canvas component!");
|
|
114
|
+
return store;
|
|
115
|
+
}
|
|
116
|
+
function useThree(selector = (state) => state, equalityFn) {
|
|
117
|
+
return useStore()(selector, equalityFn);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
function useFrame(callback, priorityOrOptions) {
|
|
121
|
+
const store = React.useContext(context);
|
|
122
|
+
const isInsideCanvas = store !== null;
|
|
123
|
+
const scheduler = getScheduler();
|
|
124
|
+
const optionsKey = typeof priorityOrOptions === "number" ? `p:${priorityOrOptions}` : priorityOrOptions ? JSON.stringify({
|
|
125
|
+
id: priorityOrOptions.id,
|
|
126
|
+
phase: priorityOrOptions.phase,
|
|
127
|
+
priority: priorityOrOptions.priority,
|
|
128
|
+
fps: priorityOrOptions.fps,
|
|
129
|
+
drop: priorityOrOptions.drop,
|
|
130
|
+
enabled: priorityOrOptions.enabled,
|
|
131
|
+
before: priorityOrOptions.before,
|
|
132
|
+
after: priorityOrOptions.after
|
|
133
|
+
}) : "";
|
|
134
|
+
const options = React.useMemo(() => {
|
|
135
|
+
return typeof priorityOrOptions === "number" ? { priority: priorityOrOptions } : priorityOrOptions ?? {};
|
|
136
|
+
}, [optionsKey]);
|
|
137
|
+
const reactId = React.useId();
|
|
138
|
+
const id = options.id ?? reactId;
|
|
139
|
+
const callbackRef = useMutableCallback(callback);
|
|
140
|
+
const isLegacyPriority = typeof priorityOrOptions === "number" && priorityOrOptions > 0;
|
|
141
|
+
useIsomorphicLayoutEffect(() => {
|
|
142
|
+
if (!callback) return;
|
|
143
|
+
if (isInsideCanvas) {
|
|
144
|
+
const state = store.getState();
|
|
145
|
+
const rootId = state.internal.rootId;
|
|
146
|
+
if (isLegacyPriority) {
|
|
147
|
+
state.internal.priority++;
|
|
148
|
+
let parentRoot = state.previousRoot;
|
|
149
|
+
while (parentRoot) {
|
|
150
|
+
const parentState = parentRoot.getState();
|
|
151
|
+
if (parentState?.internal) parentState.internal.priority++;
|
|
152
|
+
parentRoot = parentState?.previousRoot;
|
|
153
|
+
}
|
|
154
|
+
notifyDepreciated({
|
|
155
|
+
heading: "useFrame with numeric priority is deprecated",
|
|
156
|
+
body: 'Using useFrame(callback, number) to control render order is deprecated.\n\nFor custom rendering, use: useFrame(callback, { phase: "render" })\nFor execution order within update phase, use: useFrame(callback, { priority: number })',
|
|
157
|
+
link: "https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe"
|
|
158
|
+
});
|
|
159
|
+
}
|
|
160
|
+
const wrappedCallback = (frameState, delta) => {
|
|
161
|
+
const localState = store.getState();
|
|
162
|
+
const mergedState = {
|
|
163
|
+
...localState,
|
|
164
|
+
time: frameState.time,
|
|
165
|
+
delta: frameState.delta,
|
|
166
|
+
elapsed: frameState.elapsed,
|
|
167
|
+
frame: frameState.frame
|
|
168
|
+
};
|
|
169
|
+
callbackRef.current?.(mergedState, delta);
|
|
170
|
+
};
|
|
171
|
+
const unregister = scheduler.register(wrappedCallback, {
|
|
172
|
+
id,
|
|
173
|
+
rootId,
|
|
174
|
+
...options
|
|
175
|
+
});
|
|
176
|
+
return () => {
|
|
177
|
+
unregister();
|
|
178
|
+
if (isLegacyPriority) {
|
|
179
|
+
const currentState = store.getState();
|
|
180
|
+
if (currentState.internal) {
|
|
181
|
+
currentState.internal.priority--;
|
|
182
|
+
let parentRoot = currentState.previousRoot;
|
|
183
|
+
while (parentRoot) {
|
|
184
|
+
const parentState = parentRoot.getState();
|
|
185
|
+
if (parentState?.internal) parentState.internal.priority--;
|
|
186
|
+
parentRoot = parentState?.previousRoot;
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
};
|
|
191
|
+
} else {
|
|
192
|
+
return scheduler.register(
|
|
193
|
+
(state, delta) => {
|
|
194
|
+
const frameState = state;
|
|
195
|
+
if (!frameState.renderer) return;
|
|
196
|
+
callbackRef.current?.(frameState, delta);
|
|
197
|
+
},
|
|
198
|
+
{ id, ...options }
|
|
199
|
+
);
|
|
200
|
+
}
|
|
201
|
+
}, [store, scheduler, id, optionsKey, isLegacyPriority, isInsideCanvas]);
|
|
202
|
+
const isPaused = React.useSyncExternalStore(
|
|
203
|
+
// Subscribe function
|
|
204
|
+
React.useCallback(
|
|
205
|
+
(onStoreChange) => {
|
|
206
|
+
return getScheduler().subscribeJobState(id, onStoreChange);
|
|
207
|
+
},
|
|
208
|
+
[id]
|
|
209
|
+
),
|
|
210
|
+
// getSnapshot function
|
|
211
|
+
React.useCallback(() => getScheduler().isJobPaused(id), [id]),
|
|
212
|
+
// getServerSnapshot function (SSR)
|
|
213
|
+
React.useCallback(() => false, [])
|
|
214
|
+
);
|
|
215
|
+
const controls = React.useMemo(() => {
|
|
216
|
+
const scheduler2 = getScheduler();
|
|
217
|
+
return {
|
|
218
|
+
/** The job's unique ID */
|
|
219
|
+
id,
|
|
220
|
+
/**
|
|
221
|
+
* Access to the global scheduler for frame loop control.
|
|
222
|
+
* Use for controlling the entire frame loop, adding phases, etc.
|
|
223
|
+
*/
|
|
224
|
+
scheduler: scheduler2,
|
|
225
|
+
/**
|
|
226
|
+
* The root that currently owns this job. Resolve on access because ambient
|
|
227
|
+
* jobs can be adopted by a Canvas after the controls object is created.
|
|
228
|
+
*/
|
|
229
|
+
get rootId() {
|
|
230
|
+
return getScheduler().getJobRootId(id);
|
|
231
|
+
},
|
|
232
|
+
/**
|
|
233
|
+
* Manually step this job only.
|
|
234
|
+
* Bypasses FPS limiting - always runs.
|
|
235
|
+
* @param timestamp Optional timestamp (defaults to performance.now())
|
|
236
|
+
*/
|
|
237
|
+
step: (timestamp) => {
|
|
238
|
+
getScheduler().stepJob(id, timestamp);
|
|
239
|
+
},
|
|
240
|
+
/**
|
|
241
|
+
* Manually step ALL jobs in the scheduler.
|
|
242
|
+
* Useful for frameloop='never' mode.
|
|
243
|
+
* @param timestamp Optional timestamp (defaults to performance.now())
|
|
244
|
+
*/
|
|
245
|
+
stepAll: (timestamp) => {
|
|
246
|
+
getScheduler().step(timestamp);
|
|
247
|
+
},
|
|
248
|
+
/**
|
|
249
|
+
* Request frames for this job's owning root without waking sibling roots.
|
|
250
|
+
*/
|
|
251
|
+
invalidate: (frames, stackFrames) => {
|
|
252
|
+
const scheduler3 = getScheduler();
|
|
253
|
+
const rootId = scheduler3.getJobRootId(id);
|
|
254
|
+
if (rootId) scheduler3.invalidateRoot(rootId, frames, stackFrames);
|
|
255
|
+
},
|
|
256
|
+
/**
|
|
257
|
+
* Pause this job (set enabled=false).
|
|
258
|
+
* Job remains registered but won't run.
|
|
259
|
+
*/
|
|
260
|
+
pause: () => {
|
|
261
|
+
getScheduler().pauseJob(id);
|
|
262
|
+
},
|
|
263
|
+
/**
|
|
264
|
+
* Resume this job (set enabled=true).
|
|
265
|
+
*/
|
|
266
|
+
resume: () => {
|
|
267
|
+
getScheduler().resumeJob(id);
|
|
268
|
+
},
|
|
269
|
+
/**
|
|
270
|
+
* Reactive paused state - automatically updates when pause/resume is called.
|
|
271
|
+
* No need for forceUpdate() in your components.
|
|
272
|
+
*/
|
|
273
|
+
isPaused
|
|
274
|
+
};
|
|
275
|
+
}, [id, isPaused]);
|
|
276
|
+
return controls;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
const R3F_EXTENSIONS = Symbol.for("@react-three/fiber.extensions");
|
|
280
|
+
function getRegistry() {
|
|
281
|
+
return globalThis[R3F_EXTENSIONS] ?? (globalThis[R3F_EXTENSIONS] = {
|
|
282
|
+
extensions: /* @__PURE__ */ new Map(),
|
|
283
|
+
roots: /* @__PURE__ */ new Set(),
|
|
284
|
+
applied: /* @__PURE__ */ new WeakMap()
|
|
285
|
+
});
|
|
286
|
+
}
|
|
287
|
+
function setupRoot(registry, store, extension) {
|
|
288
|
+
let applied = registry.applied.get(store);
|
|
289
|
+
if (!applied) registry.applied.set(store, applied = /* @__PURE__ */ new Map());
|
|
290
|
+
if (applied.has(extension.name)) return;
|
|
291
|
+
applied.set(extension.name, extension);
|
|
292
|
+
const patch = extension.setup?.(store);
|
|
293
|
+
if (patch) store.setState(patch);
|
|
294
|
+
}
|
|
295
|
+
function registerRootExtension(extension) {
|
|
296
|
+
const registry = getRegistry();
|
|
297
|
+
registry.extensions.set(extension.name, extension);
|
|
298
|
+
for (const store of registry.roots) setupRoot(registry, store, extension);
|
|
299
|
+
return () => {
|
|
300
|
+
if (registry.extensions.get(extension.name) === extension) registry.extensions.delete(extension.name);
|
|
301
|
+
};
|
|
302
|
+
}
|
|
303
|
+
function setRenderOverride(store, render) {
|
|
304
|
+
store.getState().internal.renderOverride = render;
|
|
305
|
+
}
|
|
306
|
+
function attachRootExtensions(store) {
|
|
307
|
+
const registry = getRegistry();
|
|
308
|
+
registry.roots.add(store);
|
|
309
|
+
for (const extension of registry.extensions.values()) setupRoot(registry, store, extension);
|
|
310
|
+
}
|
|
311
|
+
function current(registry, setUpBy) {
|
|
312
|
+
return registry.extensions.get(setUpBy.name) ?? setUpBy;
|
|
313
|
+
}
|
|
314
|
+
function detachRootExtensions(store) {
|
|
315
|
+
const registry = getRegistry();
|
|
316
|
+
if (!registry.roots.delete(store)) return;
|
|
317
|
+
const applied = registry.applied.get(store);
|
|
318
|
+
registry.applied.delete(store);
|
|
319
|
+
if (!applied) return;
|
|
320
|
+
for (const setUpBy of applied.values()) current(registry, setUpBy).dispose?.(store);
|
|
321
|
+
}
|
|
322
|
+
function notifyRootExtensionsHmr(store) {
|
|
323
|
+
const registry = getRegistry();
|
|
324
|
+
const applied = registry.applied.get(store);
|
|
325
|
+
if (!applied) return;
|
|
326
|
+
for (const setUpBy of applied.values()) current(registry, setUpBy).hmr?.(store);
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
export { Block as B, ErrorBoundary as E, useThree as a, useFrame as b, context as c, useIsomorphicLayoutEffect as d, useMutableCallback as e, useBridge as f, detachRootExtensions as g, attachRootExtensions as h, notifyAlpha as i, notifyRootExtensionsHmr as j, notifyDepreciated as n, registerRootExtension as r, setRenderOverride as s, useStore as u };
|