From 2e842280b54af7af0a008413603cd82601c26674 Mon Sep 17 00:00:00 2001 From: nick Date: Wed, 16 Nov 2022 17:40:34 +0300 Subject: [PATCH 1/3] Fix CDN rendering according React 18 changes --- src/CDN.stories.mdx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/CDN.stories.mdx b/src/CDN.stories.mdx index bf52162b..f8bae85d 100644 --- a/src/CDN.stories.mdx +++ b/src/CDN.stories.mdx @@ -21,8 +21,8 @@ Example with dependencies: ```html - - + + @@ -38,8 +38,9 @@ Example with dependencies: ) - - ReactDOM.render(, document.getElementById('root')) + const container = document.getElementById('root'); + const root = ReactDOM.createRoot(container); + root.render(); From fcd022e6b7ce7f752700d45c7a6a0687a7eb5e87 Mon Sep 17 00:00:00 2001 From: nick Date: Wed, 16 Nov 2022 17:41:31 +0300 Subject: [PATCH 2/3] Fix links to React branch --- src/reconciler/hostconfig.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/reconciler/hostconfig.js b/src/reconciler/hostconfig.js index 6423980a..460b06f4 100644 --- a/src/reconciler/hostconfig.js +++ b/src/reconciler/hostconfig.js @@ -3,8 +3,8 @@ * Host Config file. * * See: - * https://github.com/facebook/react/tree/master/packages/react-reconciler - * https://github.com/facebook/react/blob/master/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js + * https://github.com/facebook/react/tree/main/packages/react-reconciler + * https://github.com/facebook/react/blob/main/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js * ------------------------------------------- */ From be687831426f7d274cbda7a3d0bc28247f6c2ce3 Mon Sep 17 00:00:00 2001 From: nick Date: Wed, 16 Nov 2022 17:45:25 +0300 Subject: [PATCH 3/3] Fix tests in reconciler --- test/reconciler.test.js | 102 ++++++++++++++++++++-------------------- 1 file changed, 52 insertions(+), 50 deletions(-) diff --git a/test/reconciler.test.js b/test/reconciler.test.js index 8a169b6c..5cce9323 100644 --- a/test/reconciler.test.js +++ b/test/reconciler.test.js @@ -12,10 +12,18 @@ const act = React.unstable_act describe('reconciler', () => { let container = new PIXI.Container() + let container1 = new PIXI.Container() + let container2 = new PIXI.Container() container.root = true + container1.root = true + container2.root = true let root + let root1 + let root2 const renderInContainer = comp => root.render(comp) + const renderInContainer1 = comp => root1.render(comp) + const renderInContainer2 = comp => root2.render(comp) beforeEach(() => { jest.clearAllMocks() @@ -24,7 +32,7 @@ describe('reconciler', () => { }) afterEach(() => { - root.unmount() + act(() => root.unmount()) }) describe('single render', () => { @@ -384,10 +392,10 @@ describe('reconciler', () => { }) }) - // TODO Suspence tests just doesn't wort right now and I can't understand why + // TODO Suspence tests just doesn't work right now and I can't understand why // Probably the async nature interferes somehow // Or implementation details of reconciler changed - xdescribe('suspense', () => { + describe('suspense', () => { let asyncLoaded = false beforeEach(() => { @@ -408,13 +416,21 @@ describe('reconciler', () => { return } - test('renders suspense fallback', () => { + /** + * ------------------------------------------- + * For React-18 content inside Suspense will not be rendered + * + * See: + * https://github.com/reactjs/rfcs/blob/main/text/0213-suspense-in-react-18.md#behavior-change-committed-trees-are-always-consistent + * ------------------------------------------- + */ + test('renders suspense fallback', async () => { jest.useFakeTimers() - const loadingTextRef = React.createRef(null) - const siblingTextRef = React.createRef(null) + const loadingTextRef = React.createRef() + const siblingTextRef = React.createRef() - act(() => + await act(async () => renderInContainer( }> @@ -422,83 +438,71 @@ describe('reconciler', () => { ) ) - jest.runAllTimers() - // loading Text should be rendered + // "loading" Text should be rendered expect(loadingTextRef.current).toBeDefined() - - // content should be hidden - const hideInstanceMock = getCall(hostconfig.hideInstance) - expect(hideInstanceMock.fn).toHaveBeenCalledTimes(1) - expect(siblingTextRef.current.visible).toEqual(false) + // "hidden" Text should be null + expect(siblingTextRef.current).toBeNull(); }) test('renders suspense content', () => { jest.useFakeTimers() - const siblingTextRef = React.createRef(null) + const siblingTextRef = React.createRef() + const loadingTextRef = React.createRef() act(() => renderInContainer( - }> + }> - + ) ) + expect(siblingTextRef.current).toBeNull(); jest.runAllTimers() act(() => renderInContainer( - }> + }> - + ) ) - // hidden content should be visible again - expect(siblingTextRef.current.visible).toEqual(true) - - // sibling text & AsyncText content is unhidden - const unhideInstanceMock = getCall(hostconfig.unhideInstance) - expect(unhideInstanceMock.fn).toHaveBeenCalledTimes(2) - + // hidden content should be present again + expect(siblingTextRef.current).not.toBeNull(); // loading text, sibling text, and async text content were all created - const createInstanceMock = getCall(hostconfig.createInstance) - expect(createInstanceMock.all.map(([ins]) => ins)).toEqual(['Text', 'Text', 'Text']) + const createInstanceMock = getCall(hostconfig.createInstance); + expect(createInstanceMock.all.map(([ins, obj]) => obj.text)).toEqual(['A', 'loading', 'A', 'content']) }) }) describe('emits request render', () => { let spy1 = jest.fn() let spy2 = jest.fn() - let root - - let container2 = new PIXI.Container() - container2.root = true - beforeEach(() => { - spy1.mockReset() - spy2.mockReset() - container.on('__REACT_PIXI_REQUEST_RENDER__', spy1) + spy1.mockClear() + spy2.mockClear() + container1.on('__REACT_PIXI_REQUEST_RENDER__', spy1) container2.on('__REACT_PIXI_REQUEST_RENDER__', spy2) - root = createRoot(container2) + root1 = createRoot(container1) + root2 = createRoot(container2) }) afterEach(() => { - container.off('__REACT_PIXI_REQUEST_RENDER__', spy1) + container1.off('__REACT_PIXI_REQUEST_RENDER__', spy1) container2.off('__REACT_PIXI_REQUEST_RENDER__', spy2) - root.unmount() + act(() => root1.unmount()) + act(() => root2.unmount()) }) - const renderInContainer2 = comp => root.render(comp) - it('receives request events via root container', function () { act(() => - renderInContainer( + renderInContainer1( @@ -506,12 +510,12 @@ describe('reconciler', () => { ) expect(spy1).toHaveBeenCalled() + expect(spy1).toHaveBeenCalledTimes(2) // spy1 called 2 times: 1 - appendInitialChild, 2 - appendChildToContainer }) - // TODO Fix it, more info near the assertions - xit('receives different events in different containers', function () { + it('receives different events in different containers', function () { act(() => - renderInContainer( + renderInContainer1( @@ -534,11 +538,9 @@ describe('reconciler', () => { ) ) - // TODO Previously it was 1 and 2 accordingly, now it's 2 and 3 - // I don't know why double render request happens - // And I don't know why it's only first time (otherwise it would be 2 and 4) - expect(spy1).toHaveBeenCalledTimes(1) - expect(spy2).toHaveBeenCalledTimes(2) + expect(spy1).toHaveBeenCalledTimes(2); // spy1 called 2 times: 1 - appendInitialChild, 2 - appendChildToContainer + expect(spy2).toHaveBeenCalledTimes(3); // spy2 called 3 times: 1 - appendInitialChild 2 - appendChildToContainer 3 - commitUpdate }) }) }) +