@servicetitan/ko-bridge 33.1.1 → 34.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/html-comment.d.ts.map +1 -1
- package/dist/html-comment.js +3 -3
- package/dist/html-comment.js.map +1 -1
- package/dist/knockout-component.js +2 -2
- package/dist/knockout-component.js.map +1 -1
- package/dist/ko-binding-handlers.js +1 -1
- package/dist/ko-binding-handlers.js.map +1 -1
- package/package.json +5 -5
- package/src/__tests__/ko-binding-handlers.test.tsx +0 -1
- package/src/__tests__/ko-observable-to-mobx.test.ts +1 -2
- package/src/html-comment.tsx +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"html-comment.d.ts","sourceRoot":"","sources":["../src/html-comment.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"html-comment.d.ts","sourceRoot":"","sources":["../src/html-comment.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAa,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"}
|
package/dist/html-comment.js
CHANGED
|
@@ -12,13 +12,13 @@ function _define_property(obj, key, value) {
|
|
|
12
12
|
return obj;
|
|
13
13
|
}
|
|
14
14
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
15
|
-
import {
|
|
15
|
+
import { Component, createRef } from 'react';
|
|
16
16
|
export class HtmlComment extends Component {
|
|
17
17
|
componentDidMount() {
|
|
18
|
+
var _ref;
|
|
18
19
|
var _this_spanNode;
|
|
19
20
|
this.spanNode = this.ref.current;
|
|
20
|
-
|
|
21
|
-
this.parentNode = (_this_spanNode_parentNode = (_this_spanNode = this.spanNode) === null || _this_spanNode === void 0 ? void 0 : _this_spanNode.parentNode) !== null && _this_spanNode_parentNode !== void 0 ? _this_spanNode_parentNode : null;
|
|
21
|
+
this.parentNode = (_ref = (_this_spanNode = this.spanNode) === null || _this_spanNode === void 0 ? void 0 : _this_spanNode.parentNode) !== null && _ref !== void 0 ? _ref : null;
|
|
22
22
|
if (this.parentNode && this.spanNode) {
|
|
23
23
|
this.commentNode = document.createComment(this.props.text);
|
|
24
24
|
this.parentNode.replaceChild(this.commentNode, this.spanNode);
|
package/dist/html-comment.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/html-comment.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../src/html-comment.tsx"],"sourcesContent":["import { Component, createRef } from 'react';\n\nexport interface CommentProps {\n text: string;\n isInTable?: boolean;\n parent?: string;\n}\n\nexport class HtmlComment extends Component<CommentProps> {\n private parentNode: Node | null = null;\n private commentNode: Node | null = null;\n private spanNode: Node | null = null;\n private ref = createRef<HTMLElement>();\n\n componentDidMount() {\n this.spanNode = this.ref.current;\n this.parentNode = this.spanNode?.parentNode ?? null;\n\n if (this.parentNode && this.spanNode) {\n this.commentNode = document.createComment(this.props.text);\n this.parentNode.replaceChild(this.commentNode, this.spanNode);\n }\n }\n\n componentDidUpdate() {\n if (\n this.parentNode &&\n this.spanNode &&\n this.commentNode &&\n this.commentNode.textContent !== this.props.text\n ) {\n this.commentNode.textContent = this.props.text;\n }\n }\n\n componentWillUnmount() {\n if (\n this.parentNode &&\n this.spanNode &&\n this.commentNode &&\n this.parentNode.contains(this.commentNode)\n ) {\n this.parentNode.replaceChild(this.spanNode, this.commentNode);\n }\n }\n\n render() {\n const ElementType = getElementType(this.props);\n return <ElementType ref={this.ref as any} />;\n }\n}\n\nfunction getElementType(props: { isInTable?: boolean; parent?: string }) {\n const { isInTable, parent } = props;\n\n if (isInTable) {\n if (parent === 'tr') {\n return 'td';\n }\n\n return 'tr';\n }\n\n if (parent === 'select') {\n return 'option';\n }\n\n return 'span';\n}\n"],"names":["Component","createRef","HtmlComment","componentDidMount","spanNode","ref","current","parentNode","commentNode","document","createComment","props","text","replaceChild","componentDidUpdate","textContent","componentWillUnmount","contains","render","ElementType","getElementType","isInTable","parent"],"mappings":";;;;;;;;;;;;;;AAAA,SAASA,SAAS,EAAEC,SAAS,QAAQ,QAAQ;AAQ7C,OAAO,MAAMC,oBAAoBF;IAM7BG,oBAAoB;;YAEE;QADlB,IAAI,CAACC,QAAQ,GAAG,IAAI,CAACC,GAAG,CAACC,OAAO;QAChC,IAAI,CAACC,UAAU,YAAG,iBAAA,IAAI,CAACH,QAAQ,cAAb,qCAAA,eAAeG,UAAU,uCAAI;QAE/C,IAAI,IAAI,CAACA,UAAU,IAAI,IAAI,CAACH,QAAQ,EAAE;YAClC,IAAI,CAACI,WAAW,GAAGC,SAASC,aAAa,CAAC,IAAI,CAACC,KAAK,CAACC,IAAI;YACzD,IAAI,CAACL,UAAU,CAACM,YAAY,CAAC,IAAI,CAACL,WAAW,EAAE,IAAI,CAACJ,QAAQ;QAChE;IACJ;IAEAU,qBAAqB;QACjB,IACI,IAAI,CAACP,UAAU,IACf,IAAI,CAACH,QAAQ,IACb,IAAI,CAACI,WAAW,IAChB,IAAI,CAACA,WAAW,CAACO,WAAW,KAAK,IAAI,CAACJ,KAAK,CAACC,IAAI,EAClD;YACE,IAAI,CAACJ,WAAW,CAACO,WAAW,GAAG,IAAI,CAACJ,KAAK,CAACC,IAAI;QAClD;IACJ;IAEAI,uBAAuB;QACnB,IACI,IAAI,CAACT,UAAU,IACf,IAAI,CAACH,QAAQ,IACb,IAAI,CAACI,WAAW,IAChB,IAAI,CAACD,UAAU,CAACU,QAAQ,CAAC,IAAI,CAACT,WAAW,GAC3C;YACE,IAAI,CAACD,UAAU,CAACM,YAAY,CAAC,IAAI,CAACT,QAAQ,EAAE,IAAI,CAACI,WAAW;QAChE;IACJ;IAEAU,SAAS;QACL,MAAMC,cAAcC,eAAe,IAAI,CAACT,KAAK;QAC7C,qBAAO,KAACQ;YAAYd,KAAK,IAAI,CAACA,GAAG;;IACrC;;QAzCG,gBACH,uBAAQE,cAA0B,OAClC,uBAAQC,eAA2B,OACnC,uBAAQJ,YAAwB,OAChC,uBAAQC,qBAAMJ;;AAsClB;AAEA,SAASmB,eAAeT,KAA+C;IACnE,MAAM,EAAEU,SAAS,EAAEC,MAAM,EAAE,GAAGX;IAE9B,IAAIU,WAAW;QACX,IAAIC,WAAW,MAAM;YACjB,OAAO;QACX;QAEA,OAAO;IACX;IAEA,IAAIA,WAAW,UAAU;QACrB,OAAO;IACX;IAEA,OAAO;AACX"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
function _define_property(obj, key, value) {
|
|
2
2
|
if (key in obj) {
|
|
3
3
|
Object.defineProperty(obj, key, {
|
|
4
4
|
value: value,
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
return obj;
|
|
13
13
|
}
|
|
14
14
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
15
|
-
import { Component, createRef } from 'react';
|
|
15
|
+
/* eslint-disable no-console */ import { Component, createRef } from 'react';
|
|
16
16
|
export class KnockoutComponent extends Component {
|
|
17
17
|
componentDidMount() {
|
|
18
18
|
this.initNode();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/knockout-component.tsx"],"sourcesContent":["/* eslint-disable no-console */\nimport {\n Component,\n createRef,\n ForwardRefExoticComponent,\n PropsWithoutRef,\n RefAttributes,\n} from 'react';\n\ndeclare const ko: any;\n\nexport interface KnockoutComponentProps {\n koModel: any;\n koTemplate: KnockoutTemplate<any>;\n dangerouslyUpdatable?: boolean;\n}\n\ntype KnockoutTemplate<T extends HTMLElement, P = object> =\n // Got it from React.forwardRef declaration\n ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;\n\nexport class KnockoutComponent extends Component<KnockoutComponentProps> {\n static defaultProps: Partial<KnockoutComponentProps> = {\n dangerouslyUpdatable: false,\n };\n private isBindingApplied = false;\n private ref = createRef<HTMLElement>();\n private node: HTMLElement | null = null;\n private origVisibility?: string;\n componentDidMount() {\n this.initNode();\n this.initOrigVisibility();\n this.applyBinding();\n this.updateNodeVisibility();\n }\n shouldComponentUpdate(nextProps: KnockoutComponentProps) {\n if (this.props.koTemplate !== nextProps.koTemplate) {\n console.error(\"Knockout template can't be changed during component life cycle.\");\n return false;\n }\n if (this.isBindingApplied && this.props.koModel !== nextProps.koModel) {\n if (!this.props.dangerouslyUpdatable) {\n console.error(`\n Knockout model can\\'t be changed after it\\'s applied.\n If you really need it to be reapplied set dangerouslyUpdatable prop to true.\n Make sure that you know the risks.\n `);\n return false;\n }\n return true;\n }\n return !this.isBindingApplied && this.props.koModel !== nextProps.koModel;\n }\n getSnapshotBeforeUpdate() {\n this.cleanNode();\n return null;\n }\n componentDidUpdate() {\n this.applyBinding();\n this.updateNodeVisibility();\n }\n componentWillUnmount() {\n this.cleanNode();\n this.restoreOrigVisibility();\n }\n render() {\n const { koTemplate: KoTemplate } = this.props;\n\n return <KoTemplate ref={this.ref} />;\n }\n private isModelValid(koModel: any): boolean {\n return koModel !== undefined;\n }\n private initNode() {\n if (!(this.ref.current instanceof HTMLElement)) {\n console.error(\n 'Knockout template should forward `ref` to HTMLElement.' +\n 'See https://reactjs.org/docs/forwarding-refs.html for more details.\\n',\n this.props.koTemplate\n );\n return;\n }\n\n this.node = this.ref.current!;\n }\n private initOrigVisibility() {\n this.origVisibility = window.getComputedStyle(this.node!).visibility || 'visible';\n }\n private updateNodeVisibility() {\n const isValid = this.isModelValid(this.props.koModel);\n this.node!.style.visibility = isValid ? this.origVisibility! : 'hidden';\n }\n private restoreOrigVisibility() {\n this.node!.style.visibility = this.origVisibility!;\n this.origVisibility = undefined;\n }\n private cleanNode() {\n if (!this.isBindingApplied) {\n return;\n }\n ko.cleanNode(this.node!);\n this.isBindingApplied = false;\n }\n private applyBinding() {\n const koModel = Object.hasOwn(this.props, 'koModel') ? this.props.koModel : null;\n if (this.isModelValid(koModel)) {\n ko.applyBindings(koModel, this.node!);\n this.isBindingApplied = true;\n }\n }\n}\n"],"names":["Component","createRef","KnockoutComponent","componentDidMount","initNode","initOrigVisibility","applyBinding","updateNodeVisibility","shouldComponentUpdate","nextProps","props","koTemplate","console","error","isBindingApplied","koModel","dangerouslyUpdatable","getSnapshotBeforeUpdate","cleanNode","componentDidUpdate","componentWillUnmount","restoreOrigVisibility","render","KoTemplate","ref","isModelValid","undefined","current","HTMLElement","node","origVisibility","window","getComputedStyle","visibility","isValid","style","ko","Object","hasOwn","applyBindings","defaultProps"],"mappings":"AAAA,6BAA6B
|
|
1
|
+
{"version":3,"sources":["../src/knockout-component.tsx"],"sourcesContent":["/* eslint-disable no-console */\nimport {\n Component,\n createRef,\n ForwardRefExoticComponent,\n PropsWithoutRef,\n RefAttributes,\n} from 'react';\n\ndeclare const ko: any;\n\nexport interface KnockoutComponentProps {\n koModel: any;\n koTemplate: KnockoutTemplate<any>;\n dangerouslyUpdatable?: boolean;\n}\n\ntype KnockoutTemplate<T extends HTMLElement, P = object> =\n // Got it from React.forwardRef declaration\n ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;\n\nexport class KnockoutComponent extends Component<KnockoutComponentProps> {\n static defaultProps: Partial<KnockoutComponentProps> = {\n dangerouslyUpdatable: false,\n };\n private isBindingApplied = false;\n private ref = createRef<HTMLElement>();\n private node: HTMLElement | null = null;\n private origVisibility?: string;\n componentDidMount() {\n this.initNode();\n this.initOrigVisibility();\n this.applyBinding();\n this.updateNodeVisibility();\n }\n shouldComponentUpdate(nextProps: KnockoutComponentProps) {\n if (this.props.koTemplate !== nextProps.koTemplate) {\n console.error(\"Knockout template can't be changed during component life cycle.\");\n return false;\n }\n if (this.isBindingApplied && this.props.koModel !== nextProps.koModel) {\n if (!this.props.dangerouslyUpdatable) {\n console.error(`\n Knockout model can\\'t be changed after it\\'s applied.\n If you really need it to be reapplied set dangerouslyUpdatable prop to true.\n Make sure that you know the risks.\n `);\n return false;\n }\n return true;\n }\n return !this.isBindingApplied && this.props.koModel !== nextProps.koModel;\n }\n getSnapshotBeforeUpdate() {\n this.cleanNode();\n return null;\n }\n componentDidUpdate() {\n this.applyBinding();\n this.updateNodeVisibility();\n }\n componentWillUnmount() {\n this.cleanNode();\n this.restoreOrigVisibility();\n }\n render() {\n const { koTemplate: KoTemplate } = this.props;\n\n return <KoTemplate ref={this.ref} />;\n }\n private isModelValid(koModel: any): boolean {\n return koModel !== undefined;\n }\n private initNode() {\n if (!(this.ref.current instanceof HTMLElement)) {\n console.error(\n 'Knockout template should forward `ref` to HTMLElement.' +\n 'See https://reactjs.org/docs/forwarding-refs.html for more details.\\n',\n this.props.koTemplate\n );\n return;\n }\n\n this.node = this.ref.current!;\n }\n private initOrigVisibility() {\n this.origVisibility = window.getComputedStyle(this.node!).visibility || 'visible';\n }\n private updateNodeVisibility() {\n const isValid = this.isModelValid(this.props.koModel);\n this.node!.style.visibility = isValid ? this.origVisibility! : 'hidden';\n }\n private restoreOrigVisibility() {\n this.node!.style.visibility = this.origVisibility!;\n this.origVisibility = undefined;\n }\n private cleanNode() {\n if (!this.isBindingApplied) {\n return;\n }\n ko.cleanNode(this.node!);\n this.isBindingApplied = false;\n }\n private applyBinding() {\n const koModel = Object.hasOwn(this.props, 'koModel') ? this.props.koModel : null;\n if (this.isModelValid(koModel)) {\n ko.applyBindings(koModel, this.node!);\n this.isBindingApplied = true;\n }\n }\n}\n"],"names":["Component","createRef","KnockoutComponent","componentDidMount","initNode","initOrigVisibility","applyBinding","updateNodeVisibility","shouldComponentUpdate","nextProps","props","koTemplate","console","error","isBindingApplied","koModel","dangerouslyUpdatable","getSnapshotBeforeUpdate","cleanNode","componentDidUpdate","componentWillUnmount","restoreOrigVisibility","render","KoTemplate","ref","isModelValid","undefined","current","HTMLElement","node","origVisibility","window","getComputedStyle","visibility","isValid","style","ko","Object","hasOwn","applyBindings","defaultProps"],"mappings":"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"}
|
|
@@ -7,7 +7,7 @@ try {
|
|
|
7
7
|
* Note, the webpack.IgnorePlugin must be configured to ignore this dependency.
|
|
8
8
|
* @see {@link file://./../../startup/src/webpack/configs/plugins/ignore-plugin/ignore-plugin.ts}
|
|
9
9
|
*/ createRoot = require('react-dom/client').createRoot;
|
|
10
|
-
} catch (
|
|
10
|
+
} catch (unused) {
|
|
11
11
|
// ignore
|
|
12
12
|
}
|
|
13
13
|
export const koBindingHandlers = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/ko-binding-handlers.tsx"],"sourcesContent":["import { ComponentType, Fragment, ReactElement, useEffect } from 'react';\nimport ReactDOM from 'react-dom';\nimport type ReactDOMClient from 'react-dom/client';\n\ntype KO = typeof import('knockout');\n\nlet createRoot: typeof ReactDOMClient.createRoot;\ntry {\n /**\n * Note, the webpack.IgnorePlugin must be configured to ignore this dependency.\n * @see {@link file://./../../startup/src/webpack/configs/plugins/ignore-plugin/ignore-plugin.ts}\n */\n createRoot = require('react-dom/client').createRoot;\n} catch {\n // ignore\n}\n\nexport const koBindingHandlers = {\n // reactUncontrolled\n reactUncontrolled: (ko: KO): KnockoutBindingHandler => ({\n init: (\n el: Element,\n valueAccessor: () => any,\n allBindings: KnockoutAllBindingsAccessor,\n _viewModel: any,\n bindingContext: KnockoutBindingContext\n ) => {\n initRoot(ko, el, allBindings);\n const Component = ko.unwrap<ComponentType>(valueAccessor());\n render(\n ko,\n el,\n <Fragment>\n <Component />\n <ApplyBindings bindingContext={bindingContext} el={el} ko={ko} />\n </Fragment>\n );\n return { controlsDescendantBindings: true };\n },\n }),\n // React component renderer for knockout\n react: (ko: KO): KnockoutBindingHandler => ({\n init: (\n el: Element,\n _valueAccessor: () => any,\n allBindings: KnockoutAllBindingsAccessor\n ) => {\n initRoot(ko, el, allBindings);\n return { controlsDescendantBindings: true }; // important\n },\n update: (\n el: Element,\n valueAccessor: () => any,\n allBindings: KnockoutAllBindingsAccessor,\n viewModel: any\n ) => {\n const Component = ko.unwrap<ComponentType>(valueAccessor());\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\n const props = allBindings.get('props') || viewModel || null;\n render(ko, el, <Component {...props} />);\n },\n }),\n};\n\nfunction ApplyBindings({ bindingContext, el, ko }: { bindingContext: any; el: Element; ko: KO }) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useEffect(() => ko.applyBindingsToDescendants(bindingContext, el), []);\n return null;\n}\n\nconst ROOT_KEY = 'ko-binding-handler-root';\n\nfunction disposalCallback(el: Element, ko: KO) {\n const root = ko.utils.domData.get(el, ROOT_KEY);\n if (root) {\n return () => {\n root.unmount();\n ko.utils.domData.clear(el);\n };\n }\n // eslint-disable-next-line react/no-deprecated\n return () => ReactDOM.unmountComponentAtNode(el);\n}\nfunction initRoot(ko: KO, el: Element, allBindings: KnockoutAllBindingsAccessor) {\n if (createRoot && allBindings.get('legacyRoot') !== true) {\n const root = createRoot(el);\n ko.utils.domData.set(el, ROOT_KEY, root);\n }\n\n ko.utils.domNodeDisposal.addDisposeCallback(el, disposalCallback(el, ko));\n}\n\nfunction render(ko: KO, container: Element, element: ReactElement) {\n const root = ko.utils.domData.get(container, ROOT_KEY);\n if (root) {\n root.render(element);\n } else {\n // eslint-disable-next-line react/no-deprecated\n ReactDOM.render(element, container);\n }\n}\n"],"names":["Fragment","useEffect","ReactDOM","createRoot","require","koBindingHandlers","reactUncontrolled","ko","init","el","valueAccessor","allBindings","_viewModel","bindingContext","initRoot","Component","unwrap","render","ApplyBindings","controlsDescendantBindings","react","_valueAccessor","update","viewModel","props","get","applyBindingsToDescendants","ROOT_KEY","disposalCallback","root","utils","domData","unmount","clear","unmountComponentAtNode","set","domNodeDisposal","addDisposeCallback","container","element"],"mappings":";AAAA,SAAwBA,QAAQ,EAAgBC,SAAS,QAAQ,QAAQ;AACzE,OAAOC,cAAc,YAAY;AAKjC,IAAIC;AACJ,IAAI;IACA;;;KAGC,GACDA,aAAaC,QAAQ,oBAAoBD,UAAU;AACvD,EAAE,
|
|
1
|
+
{"version":3,"sources":["../src/ko-binding-handlers.tsx"],"sourcesContent":["import { ComponentType, Fragment, ReactElement, useEffect } from 'react';\nimport ReactDOM from 'react-dom';\nimport type ReactDOMClient from 'react-dom/client';\n\ntype KO = typeof import('knockout');\n\nlet createRoot: typeof ReactDOMClient.createRoot;\ntry {\n /**\n * Note, the webpack.IgnorePlugin must be configured to ignore this dependency.\n * @see {@link file://./../../startup/src/webpack/configs/plugins/ignore-plugin/ignore-plugin.ts}\n */\n createRoot = require('react-dom/client').createRoot;\n} catch {\n // ignore\n}\n\nexport const koBindingHandlers = {\n // reactUncontrolled\n reactUncontrolled: (ko: KO): KnockoutBindingHandler => ({\n init: (\n el: Element,\n valueAccessor: () => any,\n allBindings: KnockoutAllBindingsAccessor,\n _viewModel: any,\n bindingContext: KnockoutBindingContext\n ) => {\n initRoot(ko, el, allBindings);\n const Component = ko.unwrap<ComponentType>(valueAccessor());\n render(\n ko,\n el,\n <Fragment>\n <Component />\n <ApplyBindings bindingContext={bindingContext} el={el} ko={ko} />\n </Fragment>\n );\n return { controlsDescendantBindings: true };\n },\n }),\n // React component renderer for knockout\n react: (ko: KO): KnockoutBindingHandler => ({\n init: (\n el: Element,\n _valueAccessor: () => any,\n allBindings: KnockoutAllBindingsAccessor\n ) => {\n initRoot(ko, el, allBindings);\n return { controlsDescendantBindings: true }; // important\n },\n update: (\n el: Element,\n valueAccessor: () => any,\n allBindings: KnockoutAllBindingsAccessor,\n viewModel: any\n ) => {\n const Component = ko.unwrap<ComponentType>(valueAccessor());\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\n const props = allBindings.get('props') || viewModel || null;\n render(ko, el, <Component {...props} />);\n },\n }),\n};\n\nfunction ApplyBindings({ bindingContext, el, ko }: { bindingContext: any; el: Element; ko: KO }) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useEffect(() => ko.applyBindingsToDescendants(bindingContext, el), []);\n return null;\n}\n\nconst ROOT_KEY = 'ko-binding-handler-root';\n\nfunction disposalCallback(el: Element, ko: KO) {\n const root = ko.utils.domData.get(el, ROOT_KEY);\n if (root) {\n return () => {\n root.unmount();\n ko.utils.domData.clear(el);\n };\n }\n // eslint-disable-next-line react/no-deprecated\n return () => ReactDOM.unmountComponentAtNode(el);\n}\nfunction initRoot(ko: KO, el: Element, allBindings: KnockoutAllBindingsAccessor) {\n if (createRoot && allBindings.get('legacyRoot') !== true) {\n const root = createRoot(el);\n ko.utils.domData.set(el, ROOT_KEY, root);\n }\n\n ko.utils.domNodeDisposal.addDisposeCallback(el, disposalCallback(el, ko));\n}\n\nfunction render(ko: KO, container: Element, element: ReactElement) {\n const root = ko.utils.domData.get(container, ROOT_KEY);\n if (root) {\n root.render(element);\n } else {\n // eslint-disable-next-line react/no-deprecated\n ReactDOM.render(element, container);\n }\n}\n"],"names":["Fragment","useEffect","ReactDOM","createRoot","require","koBindingHandlers","reactUncontrolled","ko","init","el","valueAccessor","allBindings","_viewModel","bindingContext","initRoot","Component","unwrap","render","ApplyBindings","controlsDescendantBindings","react","_valueAccessor","update","viewModel","props","get","applyBindingsToDescendants","ROOT_KEY","disposalCallback","root","utils","domData","unmount","clear","unmountComponentAtNode","set","domNodeDisposal","addDisposeCallback","container","element"],"mappings":";AAAA,SAAwBA,QAAQ,EAAgBC,SAAS,QAAQ,QAAQ;AACzE,OAAOC,cAAc,YAAY;AAKjC,IAAIC;AACJ,IAAI;IACA;;;KAGC,GACDA,aAAaC,QAAQ,oBAAoBD,UAAU;AACvD,EAAE,eAAM;AACJ,SAAS;AACb;AAEA,OAAO,MAAME,oBAAoB;IAC7B,oBAAoB;IACpBC,mBAAmB,CAACC,KAAoC,CAAA;YACpDC,MAAM,CACFC,IACAC,eACAC,aACAC,YACAC;gBAEAC,SAASP,IAAIE,IAAIE;gBACjB,MAAMI,YAAYR,GAAGS,MAAM,CAAgBN;gBAC3CO,OACIV,IACAE,kBACA,MAACT;;sCACG,KAACe;sCACD,KAACG;4BAAcL,gBAAgBA;4BAAgBJ,IAAIA;4BAAIF,IAAIA;;;;gBAGnE,OAAO;oBAAEY,4BAA4B;gBAAK;YAC9C;QACJ,CAAA;IACA,wCAAwC;IACxCC,OAAO,CAACb,KAAoC,CAAA;YACxCC,MAAM,CACFC,IACAY,gBACAV;gBAEAG,SAASP,IAAIE,IAAIE;gBACjB,OAAO;oBAAEQ,4BAA4B;gBAAK,GAAG,YAAY;YAC7D;YACAG,QAAQ,CACJb,IACAC,eACAC,aACAY;gBAEA,MAAMR,YAAYR,GAAGS,MAAM,CAAgBN;gBAC3C,wEAAwE;gBACxE,MAAMc,QAAQb,YAAYc,GAAG,CAAC,YAAYF,aAAa;gBACvDN,OAAOV,IAAIE,kBAAI,KAACM;oBAAW,GAAGS,KAAK;;YACvC;QACJ,CAAA;AACJ,EAAE;AAEF,SAASN,cAAc,EAAEL,cAAc,EAAEJ,EAAE,EAAEF,EAAE,EAAgD;IAC3F,uDAAuD;IACvDN,UAAU,IAAMM,GAAGmB,0BAA0B,CAACb,gBAAgBJ,KAAK,EAAE;IACrE,OAAO;AACX;AAEA,MAAMkB,WAAW;AAEjB,SAASC,iBAAiBnB,EAAW,EAAEF,EAAM;IACzC,MAAMsB,OAAOtB,GAAGuB,KAAK,CAACC,OAAO,CAACN,GAAG,CAAChB,IAAIkB;IACtC,IAAIE,MAAM;QACN,OAAO;YACHA,KAAKG,OAAO;YACZzB,GAAGuB,KAAK,CAACC,OAAO,CAACE,KAAK,CAACxB;QAC3B;IACJ;IACA,+CAA+C;IAC/C,OAAO,IAAMP,SAASgC,sBAAsB,CAACzB;AACjD;AACA,SAASK,SAASP,EAAM,EAAEE,EAAW,EAAEE,WAAwC;IAC3E,IAAIR,cAAcQ,YAAYc,GAAG,CAAC,kBAAkB,MAAM;QACtD,MAAMI,OAAO1B,WAAWM;QACxBF,GAAGuB,KAAK,CAACC,OAAO,CAACI,GAAG,CAAC1B,IAAIkB,UAAUE;IACvC;IAEAtB,GAAGuB,KAAK,CAACM,eAAe,CAACC,kBAAkB,CAAC5B,IAAImB,iBAAiBnB,IAAIF;AACzE;AAEA,SAASU,OAAOV,EAAM,EAAE+B,SAAkB,EAAEC,OAAqB;IAC7D,MAAMV,OAAOtB,GAAGuB,KAAK,CAACC,OAAO,CAACN,GAAG,CAACa,WAAWX;IAC7C,IAAIE,MAAM;QACNA,KAAKZ,MAAM,CAACsB;IAChB,OAAO;QACH,+CAA+C;QAC/CrC,SAASe,MAAM,CAACsB,SAASD;IAC7B;AACJ"}
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/ko-bridge",
|
|
3
|
-
"version": "
|
|
4
|
-
"description": "",
|
|
5
|
-
"homepage": "https://docs.st.dev/docs/frontend/ko-bridge",
|
|
3
|
+
"version": "34.0.0",
|
|
4
|
+
"description": "Collection of components and utils to connect Knockout and React codebase",
|
|
5
|
+
"homepage": "https://docs.st.dev/docs/frontend/uikit/ko-bridge",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
8
8
|
"url": "https://github.com/servicetitan/uikit.git",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"devDependencies": {
|
|
19
19
|
"@testing-library/dom": "^10.4.1",
|
|
20
20
|
"@testing-library/jest-dom": "^6.9.1",
|
|
21
|
-
"@testing-library/react": "^16.3.
|
|
21
|
+
"@testing-library/react": "^16.3.2",
|
|
22
22
|
"@types/knockout": "~3.4.71",
|
|
23
23
|
"@types/react": "~18.3.3",
|
|
24
24
|
"@types/react-dom": "~18.3.0",
|
|
@@ -39,5 +39,5 @@
|
|
|
39
39
|
"cli": {
|
|
40
40
|
"webpack": false
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "e193dc22703963f67099874a24de535d0696b6e2"
|
|
43
43
|
}
|
|
@@ -3,7 +3,6 @@ import { act, screen, waitFor } from '@testing-library/react';
|
|
|
3
3
|
import ko from 'knockout';
|
|
4
4
|
import { ComponentType } from 'react';
|
|
5
5
|
import ReactDOM from 'react-dom';
|
|
6
|
-
|
|
7
6
|
import { koBindingHandlers } from '../ko-binding-handlers';
|
|
8
7
|
|
|
9
8
|
describe('[ko-bridge] koBindingHandlers', () => {
|
package/src/html-comment.tsx
CHANGED