Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

allow configuring custom fiber, add missing createContainer arguments #534

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

laino
Copy link

@laino laino commented Aug 31, 2024

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
  • Tests and/or benchmarks are included
  • Documentation is changed or added
  • Lint process passed (npm run lint)
  • Tests passed (npm run test)

Copy link

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 28888a3:

Sandbox Source
sandbox Configuration

@trezy trezy added the v7 Issues related to Pixi React v7 label Sep 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
v7 Issues related to Pixi React v7
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants