allow configuring custom fiber, add missing createContainer arguments
I realize you're probably not very interested in changes to the v7 version with v8 likely being on your mind, but here are some changes that were useful to me and may be to others.
Description of change
The changes allow users to create a Fiber with a custom reconciler config, useful when you want some tighter control over certain react internals (like for instance passing async work through a custom scheduler).
For existing users nothing changed, but those who want the added control now access to the internals needed to accomplish it.
I also added some missing arguments to createContainer. On a recoverable error, React would try to call the undefined error handler function, causing another error and not reporting the initial error to the user.
Here's a basic example of how to create a custom fiber:
import {
Reconciler,
ReconcilerConfig,
hostconfig,
Stage,
} from '@pixi/react';
const Fiber = Reconciler({
... hostconfig,
scheduleTimeout(fn: () => any, ms: number) {
return setTimeout(fn, ms);
},
cancelTimeout(timeout: number) {
return clearTimeout(timeout);
},
});
function comp() {
return <Stage fiber={Fiber} ...></Stage>
}
And here's how to write a helper function createFiber that will integrate with dev tools and play nicely with hot reloads:
import {
Reconciler,
ReconcilerConfig,
hostconfig,
} from '@pixi/react';
let FIBERS: Record<string, Reconciler<any, any, any, any>> = {};
if (module.hot) {
FIBERS = module.hot.data?.FIBERS ?? {};
module.hot.dispose((data) => {
data.FIBERS = FIBERS;
});
}
export function createFiber(name: string, config: Partial<ReconcilerConfig>) {
if (FIBERS[name]) {
return FIBERS[name];
}
const fiber = Reconciler({ ...hostconfig, ...config });
fiber.injectIntoDevTools({
bundleType: 1,
version: '18.3.1',
rendererPackageName: '@pixi/react [' + name + ']',
findHostInstanceByFiber: fiber.findHostInstance,
});
FIBERS[name] = fiber;
return fiber;
}
Pre-Merge Checklist
- [x] Tests and/or benchmarks are included
- [ ] Documentation is changed or added
- [x] Lint process passed (
npm run lint) - [x] Tests passed (
npm run test)
This pull request is automatically built and testable in CodeSandbox.
To see build info of the built libraries, click here or the icon next to each commit SHA.
Latest deployment of this branch, based on commit 28888a34152a2081f46ec6fb9ad1faa3fcce60d9:
| Sandbox | Source |
|---|---|
| sandbox | Configuration |
Closing since v7 is no longer the latest version and will only receive security updates moving forward.