@servicetitan/ko-bridge 23.1.0 → 23.2.1

package/dist/html-comment.d.ts

@@ -12,6 +12,6 @@ export declare class HtmlComment extends Component<CommentProps> {
     componentDidMount(): void;
     componentDidUpdate(): void;
     componentWillUnmount(): void;
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): JSX.Element;
 }
 //# sourceMappingURL=html-comment.d.ts.map

package/dist/html-comment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"html-comment.d.ts","sourceRoot":"","sources":["../src/html-comment.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7C,MAAM,WAAW,YAAY;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,qBAAa,WAAY,SAAQ,SAAS,CAAC,YAAY,CAAC;IACpD,OAAO,CAAC,UAAU,CAAqB;IACvC,OAAO,CAAC,WAAW,CAAqB;IACxC,OAAO,CAAC,QAAQ,CAAqB;IACrC,OAAO,CAAC,GAAG,CAA4B;IAEvC,iBAAiB;IAUjB,kBAAkB;IAWlB,oBAAoB;IAWpB,MAAM;CAIT"}
+{"version":3,"file":"html-comment.d.ts","sourceRoot":"","sources":["../src/html-comment.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7C,MAAM,WAAW,YAAY;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,qBAAa,WAAY,SAAQ,SAAS,CAAC,YAAY,CAAC;IACpD,OAAO,CAAC,UAAU,CAAqB;IACvC,OAAO,CAAC,WAAW,CAAqB;IACxC,OAAO,CAAC,QAAQ,CAAqB;IACrC,OAAO,CAAC,GAAG,CAA4B;IAEvC,iBAAiB;IAUjB,kBAAkB;IAWlB,oBAAoB;IAWpB,MAAM,IAAI,GAAG,CAAC,OAAO;CAIxB"}

package/dist/knockout-component.d.ts

@@ -16,7 +16,7 @@ export declare class KnockoutComponent extends Component<KnockoutComponentProps>
     getSnapshotBeforeUpdate(): null;
     componentDidUpdate(): void;
     componentWillUnmount(): void;
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): JSX.Element;
     private isModelValid;
     private initNode;
     private initOrigVisibility;

package/dist/knockout-component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"knockout-component.d.ts","sourceRoot":"","sources":["../src/knockout-component.tsx"],"names":[],"mappings":"AACA,OAAO,EACH,SAAS,EAET,yBAAyB,EACzB,eAAe,EACf,aAAa,EAChB,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,sBAAsB;IACnC,OAAO,EAAE,GAAG,CAAC;IACb,UAAU,EAAE,gBAAgB,CAAC,GAAG,CAAC,CAAC;IAClC,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,aAAK,gBAAgB,CAAC,CAAC,SAAS,WAAW,EAAE,CAAC,GAAG,EAAE,IAE/C,yBAAyB,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;AAErE,qBAAa,iBAAkB,SAAQ,SAAS,CAAC,sBAAsB,CAAC;IACpE,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,sBAAsB,CAAC,CAElD;IACF,OAAO,CAAC,gBAAgB,CAAS;IACjC,OAAO,CAAC,GAAG,CAA4B;IACvC,OAAO,CAAC,IAAI,CAA4B;IACxC,OAAO,CAAC,cAAc,CAAC,CAAS;IAChC,iBAAiB;IAMjB,qBAAqB,CAAC,SAAS,EAAE,sBAAsB;IAkBvD,uBAAuB;IAIvB,kBAAkB;IAIlB,oBAAoB;IAGpB,MAAM;IAKN,OAAO,CAAC,YAAY;IAGpB,OAAO,CAAC,QAAQ;IAYhB,OAAO,CAAC,kBAAkB;IAG1B,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,YAAY;CASvB"}
+{"version":3,"file":"knockout-component.d.ts","sourceRoot":"","sources":["../src/knockout-component.tsx"],"names":[],"mappings":"AACA,OAAO,EACH,SAAS,EAET,yBAAyB,EACzB,eAAe,EACf,aAAa,EAChB,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,sBAAsB;IACnC,OAAO,EAAE,GAAG,CAAC;IACb,UAAU,EAAE,gBAAgB,CAAC,GAAG,CAAC,CAAC;IAClC,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,aAAK,gBAAgB,CAAC,CAAC,SAAS,WAAW,EAAE,CAAC,GAAG,EAAE,IAE/C,yBAAyB,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;AAErE,qBAAa,iBAAkB,SAAQ,SAAS,CAAC,sBAAsB,CAAC;IACpE,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,sBAAsB,CAAC,CAElD;IACF,OAAO,CAAC,gBAAgB,CAAS;IACjC,OAAO,CAAC,GAAG,CAA4B;IACvC,OAAO,CAAC,IAAI,CAA4B;IACxC,OAAO,CAAC,cAAc,CAAC,CAAS;IAChC,iBAAiB;IAMjB,qBAAqB,CAAC,SAAS,EAAE,sBAAsB;IAkBvD,uBAAuB;IAIvB,kBAAkB;IAIlB,oBAAoB;IAGpB,MAAM,IAAI,GAAG,CAAC,OAAO;IAKrB,OAAO,CAAC,YAAY;IAGpB,OAAO,CAAC,QAAQ;IAYhB,OAAO,CAAC,kBAAkB;IAG1B,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,YAAY;CASvB"}

package/dist/ko-binding-handlers.d.ts

@@ -1,14 +1,8 @@
+/// <reference types="knockout" />
+declare type KO = typeof import('knockout');
 export declare const koBindingHandlers: {
-    reactUncontrolled: (ko: any) => {
-        init: (el: Element, valueAccessor: any, _1: any, _2: any, bindingContext: any) => {
-            controlsDescendantBindings: boolean;
-        };
-    };
-    react: (ko: any) => {
-        init: (el: any) => {
-            controlsDescendantBindings: boolean;
-        };
-        update: (el: Element, valueAccessor: any, allBindings: any, viewModel: any) => void;
-    };
+    reactUncontrolled: (ko: KO) => KnockoutBindingHandler;
+    react: (ko: KO) => KnockoutBindingHandler;
 };
+export {};
 //# sourceMappingURL=ko-binding-handlers.d.ts.map

package/dist/ko-binding-handlers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ko-binding-handlers.d.ts","sourceRoot":"","sources":["../src/ko-binding-handlers.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB;4BAEF,GAAG;mBACZ,OAAO,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,kBAAkB,GAAG;;;;gBAYrE,GAAG;mBACA,GAAG;;;qBAMD,OAAO,iBAAiB,GAAG,eAAe,GAAG,aAAa,GAAG;;CAOjF,CAAC"}
+{"version":3,"file":"ko-binding-handlers.d.ts","sourceRoot":"","sources":["../src/ko-binding-handlers.tsx"],"names":[],"mappings":";AAIA,aAAK,EAAE,GAAG,cAAc,UAAU,CAAC,CAAC;AAapC,eAAO,MAAM,iBAAiB;4BAEF,EAAE,KAAG,sBAAsB;gBAsBvC,EAAE,KAAG,sBAAsB;CAoB1C,CAAC"}

package/dist/ko-binding-handlers.js

@@ -1,34 +1,72 @@
-import { createElement } from 'react';
-// eslint-disable-next-line react/no-deprecated
-import { render, unmountComponentAtNode } from 'react-dom';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+let createRoot;
+try {
+    /**
+     * Note, the webpack.IgnorePlugin must be configured to ignore this dependency.
+     * @see {@link file://./../../startup/src/webpack/configs/plugins/ignore-plugin/ignore-plugin.ts}
+     */
+    createRoot = require('react-dom/client').createRoot;
+}
+catch (e) {
+    // ignore
+}
 export const koBindingHandlers = {
     // reactUncontrolled
     reactUncontrolled: (ko) => ({
-        init: (el, valueAccessor, _1, _2, bindingContext) => {
-            const component = ko.unwrap(valueAccessor());
-            ko.utils.domNodeDisposal.addDisposeCallback(el, () => {
-                unmountComponentAtNode(el);
-            });
-            render(createElement(component), el, () => {
-                ko.applyBindingsToDescendants(bindingContext, el);
-            });
+        init: (el, valueAccessor, allBindings, _viewModel, bindingContext) => {
+            initRoot(ko, el, allBindings);
+            const Component = ko.unwrap(valueAccessor());
+            render(ko, el, _jsxs(Fragment, { children: [_jsx(Component, {}), _jsx(ApplyBindings, { bindingContext: bindingContext, el: el, ko: ko })] }));
             return { controlsDescendantBindings: true };
         },
     }),
     // React component renderer for knockout
     react: (ko) => ({
-        init: (el) => {
-            ko.utils.domNodeDisposal.addDisposeCallback(el, () => {
-                unmountComponentAtNode(el);
-            });
+        init: (el, _valueAccessor, allBindings) => {
+            initRoot(ko, el, allBindings);
             return { controlsDescendantBindings: true }; // important
         },
         update: (el, valueAccessor, allBindings, viewModel) => {
-            const component = ko.unwrap(valueAccessor());
-            let props = allBindings.get('props');
-            props = props ? props : viewModel ? viewModel : null;
-            render(createElement(component, props), el);
+            const Component = ko.unwrap(valueAccessor());
+            const props = allBindings.get('props') || viewModel || null;
+            render(ko, el, _jsx(Component, Object.assign({}, props)));
         },
     }),
 };
+function ApplyBindings({ bindingContext, el, ko }) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => ko.applyBindingsToDescendants(bindingContext, el), []);
+    return null;
+}
+const ROOT_KEY = 'ko-binding-handler-root';
+function disposalCallback(el, ko) {
+    const root = ko.utils.domData.get(el, ROOT_KEY);
+    if (root) {
+        return () => {
+            root.unmount();
+            ko.utils.domData.clear(el);
+        };
+    }
+    // eslint-disable-next-line react/no-deprecated
+    return () => ReactDOM.unmountComponentAtNode(el);
+}
+function initRoot(ko, el, allBindings) {
+    if (createRoot && allBindings.get('legacyRoot') !== true) {
+        const root = createRoot(el);
+        ko.utils.domData.set(el, ROOT_KEY, root);
+    }
+    ko.utils.domNodeDisposal.addDisposeCallback(el, disposalCallback(el, ko));
+}
+function render(ko, container, element) {
+    const root = ko.utils.domData.get(container, ROOT_KEY);
+    if (root) {
+        root.render(element);
+    }
+    else {
+        // eslint-disable-next-line react/no-deprecated
+        ReactDOM.render(element, container);
+    }
+}
 //# sourceMappingURL=ko-binding-handlers.js.map

package/dist/ko-binding-handlers.js.map

@@ -1 +1 @@
-{"version":3,"file":"ko-binding-handlers.js","sourceRoot":"","sources":["../src/ko-binding-handlers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,+CAA+C;AAC/C,OAAO,EAAE,MAAM,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AAE3D,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC7B,oBAAoB;IACpB,iBAAiB,EAAE,CAAC,EAAO,EAAE,EAAE,CAAC,CAAC;QAC7B,IAAI,EAAE,CAAC,EAAW,EAAE,aAAkB,EAAE,EAAO,EAAE,EAAO,EAAE,cAAmB,EAAE,EAAE;YAC7E,MAAM,SAAS,GAAG,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC,CAAC;YAC7C,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,kBAAkB,CAAC,EAAE,EAAE,GAAG,EAAE;gBACjD,sBAAsB,CAAC,EAAE,CAAC,CAAC;YAC/B,CAAC,CAAC,CAAC;YACH,MAAM,CAAC,aAAa,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE;gBACtC,EAAE,CAAC,0BAA0B,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;YACtD,CAAC,CAAC,CAAC;YACH,OAAO,EAAE,0BAA0B,EAAE,IAAI,EAAE,CAAC;QAChD,CAAC;KACJ,CAAC;IACF,wCAAwC;IACxC,KAAK,EAAE,CAAC,EAAO,EAAE,EAAE,CAAC,CAAC;QACjB,IAAI,EAAE,CAAC,EAAO,EAAE,EAAE;YACd,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,kBAAkB,CAAC,EAAE,EAAE,GAAG,EAAE;gBACjD,sBAAsB,CAAC,EAAE,CAAC,CAAC;YAC/B,CAAC,CAAC,CAAC;YACH,OAAO,EAAE,0BAA0B,EAAE,IAAI,EAAE,CAAC,CAAC,YAAY;QAC7D,CAAC;QACD,MAAM,EAAE,CAAC,EAAW,EAAE,aAAkB,EAAE,WAAgB,EAAE,SAAc,EAAE,EAAE;YAC1E,MAAM,SAAS,GAAG,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC,CAAC;YAC7C,IAAI,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;YACrC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;YACrD,MAAM,CAAC,aAAa,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;QAChD,CAAC;KACJ,CAAC;CACL,CAAC"}
+{"version":3,"file":"ko-binding-handlers.js","sourceRoot":"","sources":["../src/ko-binding-handlers.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/ko-bridge",
-    "version": "23.1.0",
+    "version": "23.2.1",
     "description": "",
     "homepage": "https://docs.st.dev/docs/frontend/ko-bridge",
     "repository": {
@@ -16,6 +16,8 @@
         "src"
     ],
     "devDependencies": {
+        "@testing-library/jest-dom": "^6.4.2",
+        "@testing-library/react": "^14.2.1",
         "@types/knockout": "~3.4.71",
         "@types/react": "~18.2.55",
         "@types/react-dom": "~18.2.19",
@@ -36,5 +38,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "7267270e54cdb3a2926f61feb4939d057e82adb3"
+    "gitHead": "b9322f0b223f6c4539ff2e90d2c18ffa97d349da"
 }

package/src/__tests__/ko-binding-handlers.test.tsx

@@ -0,0 +1,218 @@
+import '@testing-library/jest-dom';
+import { act, screen, waitFor } from '@testing-library/react';
+import ko from 'knockout';
+import { ComponentType } from 'react';
+import ReactDOM from 'react-dom';
+
+import { koBindingHandlers } from '../ko-binding-handlers';
+
+describe('[ko-bridge] koBindingHandlers', () => {
+    let el: HTMLElement;
+    let mockAllBindings: any;
+    let mockBindingContext: any;
+    let valueAccessor: () => ComponentType;
+    let viewModel: Record<string, any>;
+
+    interface MockButtonProps {
+        title?: string;
+    }
+
+    function MockButton({ title }: Readonly<MockButtonProps>) {
+        return <button>{title ?? 'MockButton'}</button>;
+    }
+
+    function itRendersComponent(subject: Function) {
+        test('renders Component', async () => {
+            subject();
+
+            await waitFor(() => {
+                expect(screen.getByRole('button', { name: 'MockButton' })).toBeInTheDocument();
+            });
+        });
+    }
+
+    function itRegistersUnmountCallback(subject: Function) {
+        test('registers callback that unmounts Component', () => {
+            const callbackSpy = jest.spyOn(ko.utils.domNodeDisposal, 'addDisposeCallback');
+            subject();
+
+            const root = ko.utils.domData.get(el, 'ko-binding-handler-root'); // Beware: this relies on an implementation detail
+            const unmountSpy = jest.spyOn(root, 'unmount');
+
+            const [, disposeCallback] = callbackSpy.mock.calls[0];
+            act(() => disposeCallback());
+
+            expect(unmountSpy).toHaveBeenCalled();
+        });
+    }
+
+    function itRendersLegacyComponent(subject: Function) {
+        // eslint-disable-next-line react/no-deprecated
+        const originalRender = ReactDOM.render;
+
+        test('uses legacy API to render Component', async () => {
+            const renderSpy = jest
+                .spyOn(ReactDOM, 'render')
+                .mockImplementation((...args: Parameters<ReactDOM.Renderer>) =>
+                    originalRender(...args)
+                );
+
+            subject();
+
+            await waitFor(() => {
+                expect(screen.getByRole('button', { name: 'MockButton' })).toBeInTheDocument();
+            });
+
+            expect(renderSpy).toHaveBeenCalled();
+        });
+    }
+
+    function itRegistersLegacyUnmountCallback(subject: Function) {
+        test('uses legacy API to unmount Component', () => {
+            const callbackSpy = jest.spyOn(ko.utils.domNodeDisposal, 'addDisposeCallback');
+
+            subject();
+
+            jest.spyOn(ReactDOM, 'unmountComponentAtNode');
+
+            const [, disposeCallback] = callbackSpy.mock.calls[0];
+            disposeCallback();
+
+            // eslint-disable-next-line react/no-deprecated
+            expect(ReactDOM.unmountComponentAtNode).toHaveBeenCalledWith(el);
+        });
+    }
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+
+        el = document.createElement('div');
+        document.body.appendChild(el);
+
+        mockAllBindings = new Map();
+        mockBindingContext = {};
+        valueAccessor = () => MockButton;
+        viewModel = {};
+    });
+
+    afterEach(() => {
+        el.remove();
+    });
+
+    function init(handler: KnockoutBindingHandler) {
+        let result: ReturnType<Required<KnockoutBindingHandler>['init']> = undefined;
+
+        act(() => {
+            result = handler.init!(
+                el,
+                valueAccessor,
+                mockAllBindings,
+                viewModel,
+                mockBindingContext
+            );
+        });
+
+        return result;
+    }
+
+    function update(handler: KnockoutBindingHandler) {
+        let result: ReturnType<Required<KnockoutBindingHandler>['update']> = undefined;
+
+        act(() => {
+            result = handler.update!(
+                el,
+                valueAccessor,
+                mockAllBindings,
+                viewModel,
+                mockBindingContext
+            );
+        });
+
+        return result;
+    }
+
+    describe('reactUncontrolled', () => {
+        const handler: KnockoutBindingHandler = koBindingHandlers.reactUncontrolled(ko);
+
+        describe('init', () => {
+            const subject = () => init(handler);
+
+            itRendersComponent(subject);
+            itRegistersUnmountCallback(subject);
+
+            test('applies bindings to descendants', async () => {
+                jest.spyOn(ko, 'applyBindingsToDescendants');
+
+                expect(subject()).toEqual({ controlsDescendantBindings: true });
+                await waitFor(() =>
+                    expect(ko.applyBindingsToDescendants).toHaveBeenCalledWith(
+                        mockBindingContext,
+                        el
+                    )
+                );
+            });
+
+            describe('with {legacyRoot: true}', () => {
+                beforeEach(() => mockAllBindings.set('legacyRoot', true));
+
+                itRendersLegacyComponent(subject);
+                itRegistersLegacyUnmountCallback(subject);
+            });
+        });
+    });
+
+    describe('react', () => {
+        const handler: KnockoutBindingHandler = koBindingHandlers.react(ko);
+
+        describe('init', () => {
+            const subject = () => init(handler);
+
+            itRegistersUnmountCallback(subject);
+
+            describe('with {legacyRoot: true}', () => {
+                beforeEach(() => mockAllBindings.set('legacyRoot', true));
+
+                itRegistersLegacyUnmountCallback(subject);
+            });
+        });
+
+        describe('update', () => {
+            const subject = () => {
+                init(handler);
+                update(handler);
+            };
+
+            itRendersComponent(subject);
+
+            describe('with {legacyRoot: true}', () => {
+                beforeEach(() => mockAllBindings.set('legacyRoot', true));
+
+                itRendersLegacyComponent(subject);
+            });
+
+            describe('with props', () => {
+                const props = { title: 'Foo' };
+
+                beforeEach(() => mockAllBindings.set('props', props));
+
+                test('renders Component with props', () => {
+                    subject();
+
+                    expect(screen.getByRole('button', { name: props.title })).toBeInTheDocument();
+                });
+            });
+
+            describe('with viewModel', () => {
+                beforeEach(() => (viewModel = { title: 'Bar' }));
+
+                test('renders Component with viewModel as props', () => {
+                    subject();
+
+                    expect(
+                        screen.getByRole('button', { name: viewModel.title })
+                    ).toBeInTheDocument();
+                });
+            });
+        });
+    });
+});

package/src/html-comment.tsx

@@ -44,7 +44,7 @@ export class HtmlComment extends Component<CommentProps> {
         }
     }
 
-    render() {
+    render(): JSX.Element {
         const ElementType = getElementType(this.props);
         return <ElementType ref={this.ref as any} />;
     }

package/src/knockout-component.tsx

@@ -62,7 +62,7 @@ export class KnockoutComponent extends Component<KnockoutComponentProps> {
     componentWillUnmount() {
         this.cleanNode();
     }
-    render() {
+    render(): JSX.Element {
         const { koTemplate: KoTemplate } = this.props;
 
         return <KoTemplate ref={this.ref} />;

package/src/ko-binding-handlers.tsx

@@ -0,0 +1,100 @@
+import { ComponentType, Fragment, ReactElement, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import type ReactDOMClient from 'react-dom/client';
+
+type KO = typeof import('knockout');
+
+let createRoot: typeof ReactDOMClient.createRoot;
+try {
+    /**
+     * Note, the webpack.IgnorePlugin must be configured to ignore this dependency.
+     * @see {@link file://./../../startup/src/webpack/configs/plugins/ignore-plugin/ignore-plugin.ts}
+     */
+    createRoot = require('react-dom/client').createRoot;
+} catch (e) {
+    // ignore
+}
+
+export const koBindingHandlers = {
+    // reactUncontrolled
+    reactUncontrolled: (ko: KO): KnockoutBindingHandler => ({
+        init: (
+            el: Element,
+            valueAccessor: () => any,
+            allBindings: KnockoutAllBindingsAccessor,
+            _viewModel: any,
+            bindingContext: KnockoutBindingContext
+        ) => {
+            initRoot(ko, el, allBindings);
+            const Component = ko.unwrap<ComponentType>(valueAccessor());
+            render(
+                ko,
+                el,
+                <Fragment>
+                    <Component />
+                    <ApplyBindings bindingContext={bindingContext} el={el} ko={ko} />
+                </Fragment>
+            );
+            return { controlsDescendantBindings: true };
+        },
+    }),
+    // React component renderer for knockout
+    react: (ko: KO): KnockoutBindingHandler => ({
+        init: (
+            el: Element,
+            _valueAccessor: () => any,
+            allBindings: KnockoutAllBindingsAccessor
+        ) => {
+            initRoot(ko, el, allBindings);
+            return { controlsDescendantBindings: true }; // important
+        },
+        update: (
+            el: Element,
+            valueAccessor: () => any,
+            allBindings: KnockoutAllBindingsAccessor,
+            viewModel: any
+        ) => {
+            const Component = ko.unwrap<ComponentType>(valueAccessor());
+            const props = allBindings.get('props') || viewModel || null;
+            render(ko, el, <Component {...props} />);
+        },
+    }),
+};
+
+function ApplyBindings({ bindingContext, el, ko }: { bindingContext: any; el: Element; ko: KO }) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => ko.applyBindingsToDescendants(bindingContext, el), []);
+    return null;
+}
+
+const ROOT_KEY = 'ko-binding-handler-root';
+
+function disposalCallback(el: Element, ko: KO) {
+    const root = ko.utils.domData.get(el, ROOT_KEY);
+    if (root) {
+        return () => {
+            root.unmount();
+            ko.utils.domData.clear(el);
+        };
+    }
+    // eslint-disable-next-line react/no-deprecated
+    return () => ReactDOM.unmountComponentAtNode(el);
+}
+function initRoot(ko: KO, el: Element, allBindings: KnockoutAllBindingsAccessor) {
+    if (createRoot && allBindings.get('legacyRoot') !== true) {
+        const root = createRoot(el);
+        ko.utils.domData.set(el, ROOT_KEY, root);
+    }
+
+    ko.utils.domNodeDisposal.addDisposeCallback(el, disposalCallback(el, ko));
+}
+
+function render(ko: KO, container: Element, element: ReactElement) {
+    const root = ko.utils.domData.get(container, ROOT_KEY);
+    if (root) {
+        root.render(element);
+    } else {
+        // eslint-disable-next-line react/no-deprecated
+        ReactDOM.render(element, container);
+    }
+}

package/src/ko-binding-handlers.ts

@@ -1,34 +0,0 @@
-import { createElement } from 'react';
-// eslint-disable-next-line react/no-deprecated
-import { render, unmountComponentAtNode } from 'react-dom';
-
-export const koBindingHandlers = {
-    // reactUncontrolled
-    reactUncontrolled: (ko: any) => ({
-        init: (el: Element, valueAccessor: any, _1: any, _2: any, bindingContext: any) => {
-            const component = ko.unwrap(valueAccessor());
-            ko.utils.domNodeDisposal.addDisposeCallback(el, () => {
-                unmountComponentAtNode(el);
-            });
-            render(createElement(component), el, () => {
-                ko.applyBindingsToDescendants(bindingContext, el);
-            });
-            return { controlsDescendantBindings: true };
-        },
-    }),
-    // React component renderer for knockout
-    react: (ko: any) => ({
-        init: (el: any) => {
-            ko.utils.domNodeDisposal.addDisposeCallback(el, () => {
-                unmountComponentAtNode(el);
-            });
-            return { controlsDescendantBindings: true }; // important
-        },
-        update: (el: Element, valueAccessor: any, allBindings: any, viewModel: any) => {
-            const component = ko.unwrap(valueAccessor());
-            let props = allBindings.get('props');
-            props = props ? props : viewModel ? viewModel : null;
-            render(createElement(component, props), el);
-        },
-    }),
-};