piral-core 0.15.0-alpha.4355 → 0.15.0-alpha.4396

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-core",
-  "version": "0.15.0-alpha.4355",
+  "version": "0.15.0-alpha.4396",
   "description": "The core library for creating a Piral instance.",
   "keywords": [
     "portal",
@@ -71,8 +71,8 @@
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "dependencies": {
-    "piral-base": "0.15.0-alpha.4355",
-    "piral-debug-utils": "0.15.0-alpha.4355",
+    "piral-base": "0.15.0-alpha.4396",
+    "piral-debug-utils": "0.15.0-alpha.4396",
     "zustand": "^3.0.0"
   },
   "peerDependencies": {
@@ -100,5 +100,5 @@
     "history",
     "tslib"
   ],
-  "gitHead": "a4dda359fe03992cd06bfb808df916747beb065d"
+  "gitHead": "62abff4d61634b3ecffda2407f1c29f1de929b4c"
 }

package/src/RootListener.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRoot } from 'react-dom/client';
+import { render } from 'react-dom';
 import { act } from 'react-dom/test-utils';
 import { RootListener } from './RootListener';
 
@@ -10,7 +10,7 @@ jest.mock('./hooks/globalState', () => ({
 }));
 
 function resolveAfter(time = 5) {
-  return new Promise<void>(resolve => setTimeout(resolve, time));
+  return new Promise<void>((resolve) => setTimeout(resolve, time));
 }
 
 describe('RootListener Component', () => {
@@ -19,8 +19,7 @@ describe('RootListener Component', () => {
     const removed = jest.fn();
     document.body.appendChild(element);
     const container = document.body.appendChild(document.createElement('div'));
-    const root = createRoot(container);
-    root.render(<RootListener />);
+    render(<RootListener />, container);
     document.body.removeEventListener = removed;
     await act(() => {
       const event = new CustomEvent('render-html', {
@@ -40,11 +39,10 @@ describe('RootListener Component', () => {
   it('removes the RootListener successfully', async () => {
     const container = document.body.appendChild(document.createElement('div'));
     const removed = jest.fn();
-    const root = createRoot(container);
-    root.render(<RootListener />);
+    render(<RootListener />, container);
     document.body.removeEventListener = removed;
     await act(resolveAfter);
-    root.unmount();
+    render(<div />, container);
     await act(resolveAfter);
     expect(removed).toHaveBeenCalled();
   });

package/src/components/ForeignComponentContainer.test.tsx

@@ -1,17 +1,16 @@
 import * as React from 'react';
-import { createRoot } from 'react-dom/client';
+import { render as renderDom } from 'react-dom';
 import { act } from 'react-dom/test-utils';
 import { ForeignComponentContainer } from './ForeignComponentContainer';
 
 function resolveAfter(time = 5) {
-  return new Promise<void>(resolve => setTimeout(resolve, time));
+  return new Promise<void>((resolve) => setTimeout(resolve, time));
 }
 
 async function render(element: any, container: Element) {
-  const root = createRoot(container);
-  root.render(element);
+  renderDom(element, container);
   await act(resolveAfter);
-  return root;
+  return () => renderDom(<div />, container);
 }
 
 describe('ForeignComponentContainer component', () => {
@@ -32,13 +31,13 @@ describe('ForeignComponentContainer component', () => {
     const mount = jest.fn();
     const unmount = jest.fn();
     const component = { mount, unmount };
-    const root = await render(
+    const doUnmount = await render(
       <ForeignComponentContainer $component={component} $context={undefined} $portalId="foo" innerProps={{}} />,
       container,
     );
     expect(mount).toHaveBeenCalled();
     expect(unmount).not.toHaveBeenCalled();
-    root.unmount();
+    doUnmount();
     expect(unmount).toHaveBeenCalled();
     container.remove();
   });
@@ -48,7 +47,7 @@ describe('ForeignComponentContainer component', () => {
     const mount = jest.fn();
     const update = jest.fn();
     const component = { mount, update };
-    const root = await render(
+    await render(
       <ForeignComponentContainer
         $component={component}
         $context={undefined}
@@ -59,13 +58,14 @@ describe('ForeignComponentContainer component', () => {
     );
     expect(mount).toHaveBeenCalled();
     expect(update).not.toHaveBeenCalled();
-    root.render(
+    await render(
       <ForeignComponentContainer
         $component={component}
         $context={undefined}
         $portalId="foo"
         innerProps={{ a: 'foo' }}
       />,
+      container,
     );
     await act(resolveAfter);
     expect(update).toHaveBeenCalled();
@@ -78,14 +78,14 @@ describe('ForeignComponentContainer component', () => {
     ForeignComponentContainer.prototype.componentDidMount = function () {
       componentDidMount.call(this);
       this.previous = {
-        removeEventListener() { },
+        removeEventListener() {},
       };
     };
     const mount = jest.fn();
     const update = jest.fn();
     const unmount = jest.fn();
     const component = { mount, update, unmount };
-    const root = await render(
+    await render(
       <ForeignComponentContainer
         $component={component}
         $context={undefined}
@@ -97,13 +97,14 @@ describe('ForeignComponentContainer component', () => {
     expect(mount).toHaveBeenCalled();
     expect(unmount).not.toHaveBeenCalled();
     expect(update).not.toHaveBeenCalled();
-    root.render(
+    await render(
       <ForeignComponentContainer
         $component={component}
         $context={undefined}
         $portalId="foo"
         innerProps={{ a: 'foo' }}
       />,
+      container,
     );
     await act(resolveAfter);
     expect(update).not.toHaveBeenCalled();
@@ -124,7 +125,7 @@ describe('ForeignComponentContainer component', () => {
     expect(mount).toHaveBeenCalled();
     const node = document.querySelector('[data-portal-id=foo]');
     expect(renderHtmlExtension).not.toHaveBeenCalled();
-    node.dispatchEvent(new CustomEvent('render-html', { detail: {} }));
+    node?.dispatchEvent(new CustomEvent('render-html', { detail: {} }));
     await act(resolveAfter);
     expect(renderHtmlExtension).toHaveBeenCalled();
     container.remove();

package/src/hooks/setter.test.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { act } from 'react-dom/test-utils';
-import { createRoot } from 'react-dom/client';
+import { render } from 'react-dom';
 import { useSetter } from './setter';
 
 describe('UseSetter Hook Module', () => {
@@ -12,9 +12,8 @@ describe('UseSetter Hook Module', () => {
       return null;
     };
 
-    const root = createRoot(document.body.appendChild(document.createElement('div')));
-    root.render(React.createElement(MyComponent));
-    await act(() => new Promise(resolve => setTimeout(resolve, 5)));
+    render(React.createElement(MyComponent), document.body.appendChild(document.createElement('div')));
+    await act(() => new Promise((resolve) => setTimeout(resolve, 5)));
     expect(cb).toHaveBeenCalled();
   });
 });