pixi-react icon indicating copy to clipboard operation
pixi-react copied to clipboard

allow configuring custom fiber, add missing createContainer arguments

Open laino opened this issue 1 year ago • 1 comments

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)

laino avatar Aug 31 '24 04:08 laino

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

codesandbox-ci[bot] avatar Aug 31 '24 04:08 codesandbox-ci[bot]

Closing since v7 is no longer the latest version and will only receive security updates moving forward.

trezy avatar Mar 01 '25 23:03 trezy