@servicetitan/ko-bridge - npm Package Compare versions

Comparing version 23.1.0 to 23.2.0

dist/ko-binding-handlers.d.ts

@@ -0,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

dist/ko-binding-handlers.js

@@ -1,15 +0,22 @@
-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 };
@@ -20,16 +27,47 @@ },
     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.json

 {
     "name": "@servicetitan/ko-bridge",
-    "version": "23.1.0",
+    "version": "23.2.0",
     "description": "",
@@ -19,2 +19,4 @@ "homepage": "https://docs.st.dev/docs/frontend/ko-bridge",
     "devDependencies": {
+        "@testing-library/jest-dom": "^6.4.2",
+        "@testing-library/react": "^14.2.1",
         "@types/knockout": "~3.4.71",
@@ -40,3 +42,3 @@ "@types/react": "~18.2.55",
     },
-    "gitHead": "7267270e54cdb3a2926f61feb4939d057e82adb3"
+    "gitHead": "4b72bab5ab6cb52a688d9329c7fbaa702ae6780c"
 }

No alert changes

Improved metrics

Total package byte prevSize

46207

increased by31.1%

Number of package files

28

increased by3.7%

Lines of code

963

increased by36.21%

Worsened metrics

Dev dependency count

9

increased by28.57%

No dependency changes