@servicetitan/ko-bridge 30.3.0 → 31.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.js +24 -37
- package/dist/html-comment.js.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/knockout-component.js +22 -37
- package/dist/knockout-component.js.map +1 -1
- package/dist/ko-binding-handlers.js +43 -30
- package/dist/ko-binding-handlers.js.map +1 -1
- package/dist/ko-observable-to-mobx.js +7 -7
- package/dist/ko-observable-to-mobx.js.map +1 -1
- package/package.json +2 -2
package/dist/html-comment.js
CHANGED
|
@@ -1,61 +1,47 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
super(...arguments);
|
|
6
|
-
Object.defineProperty(this, "parentNode", {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
configurable: true,
|
|
9
|
-
writable: true,
|
|
10
|
-
value: null
|
|
11
|
-
});
|
|
12
|
-
Object.defineProperty(this, "commentNode", {
|
|
13
|
-
enumerable: true,
|
|
14
|
-
configurable: true,
|
|
15
|
-
writable: true,
|
|
16
|
-
value: null
|
|
17
|
-
});
|
|
18
|
-
Object.defineProperty(this, "spanNode", {
|
|
1
|
+
function _define_property(obj, key, value) {
|
|
2
|
+
if (key in obj) {
|
|
3
|
+
Object.defineProperty(obj, key, {
|
|
4
|
+
value: value,
|
|
19
5
|
enumerable: true,
|
|
20
6
|
configurable: true,
|
|
21
|
-
writable: true
|
|
22
|
-
value: null
|
|
23
|
-
});
|
|
24
|
-
Object.defineProperty(this, "ref", {
|
|
25
|
-
enumerable: true,
|
|
26
|
-
configurable: true,
|
|
27
|
-
writable: true,
|
|
28
|
-
value: createRef()
|
|
7
|
+
writable: true
|
|
29
8
|
});
|
|
9
|
+
} else {
|
|
10
|
+
obj[key] = value;
|
|
30
11
|
}
|
|
12
|
+
return obj;
|
|
13
|
+
}
|
|
14
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
15
|
+
import { createRef, Component } from 'react';
|
|
16
|
+
export class HtmlComment extends Component {
|
|
31
17
|
componentDidMount() {
|
|
32
|
-
var
|
|
18
|
+
var _this_spanNode;
|
|
33
19
|
this.spanNode = this.ref.current;
|
|
34
|
-
|
|
20
|
+
var _this_spanNode_parentNode;
|
|
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;
|
|
35
22
|
if (this.parentNode && this.spanNode) {
|
|
36
23
|
this.commentNode = document.createComment(this.props.text);
|
|
37
24
|
this.parentNode.replaceChild(this.commentNode, this.spanNode);
|
|
38
25
|
}
|
|
39
26
|
}
|
|
40
27
|
componentDidUpdate() {
|
|
41
|
-
if (this.parentNode &&
|
|
42
|
-
this.spanNode &&
|
|
43
|
-
this.commentNode &&
|
|
44
|
-
this.commentNode.textContent !== this.props.text) {
|
|
28
|
+
if (this.parentNode && this.spanNode && this.commentNode && this.commentNode.textContent !== this.props.text) {
|
|
45
29
|
this.commentNode.textContent = this.props.text;
|
|
46
30
|
}
|
|
47
31
|
}
|
|
48
32
|
componentWillUnmount() {
|
|
49
|
-
if (this.parentNode &&
|
|
50
|
-
this.spanNode &&
|
|
51
|
-
this.commentNode &&
|
|
52
|
-
this.parentNode.contains(this.commentNode)) {
|
|
33
|
+
if (this.parentNode && this.spanNode && this.commentNode && this.parentNode.contains(this.commentNode)) {
|
|
53
34
|
this.parentNode.replaceChild(this.spanNode, this.commentNode);
|
|
54
35
|
}
|
|
55
36
|
}
|
|
56
37
|
render() {
|
|
57
38
|
const ElementType = getElementType(this.props);
|
|
58
|
-
return _jsx(ElementType, {
|
|
39
|
+
return /*#__PURE__*/ _jsx(ElementType, {
|
|
40
|
+
ref: this.ref
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
constructor(...args){
|
|
44
|
+
super(...args), _define_property(this, "parentNode", null), _define_property(this, "commentNode", null), _define_property(this, "spanNode", null), _define_property(this, "ref", /*#__PURE__*/ createRef());
|
|
59
45
|
}
|
|
60
46
|
}
|
|
61
47
|
function getElementType(props) {
|
|
@@ -71,4 +57,5 @@ function getElementType(props) {
|
|
|
71
57
|
}
|
|
72
58
|
return 'span';
|
|
73
59
|
}
|
|
60
|
+
|
|
74
61
|
//# sourceMappingURL=html-comment.js.map
|
package/dist/html-comment.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../src/html-comment.tsx"],"sourcesContent":["import { createRef, Component } 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":["createRef","Component","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,oBAAoBD;IAM7BE,oBAAoB;YAEE;QADlB,IAAI,CAACC,QAAQ,GAAG,IAAI,CAACC,GAAG,CAACC,OAAO;YACd;QAAlB,IAAI,CAACC,UAAU,GAAG,CAAA,6BAAA,iBAAA,IAAI,CAACH,QAAQ,cAAb,qCAAA,eAAeG,UAAU,cAAzB,uCAAA,4BAA6B;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,qBAAML;;AAsClB;AAEA,SAASoB,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"}
|
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export * from './html-comment';\nexport * from './knockout-component';\nexport * from './ko-binding-handlers';\nexport * from './ko-observable-to-mobx';\n"],"names":[],"mappings":"AAAA,cAAc,iBAAiB;AAC/B,cAAc,uBAAuB;AACrC,cAAc,wBAAwB;AACtC,cAAc,0BAA0B"}
|
|
@@ -1,34 +1,19 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
constructor() {
|
|
6
|
-
super(...arguments);
|
|
7
|
-
Object.defineProperty(this, "isBindingApplied", {
|
|
8
|
-
enumerable: true,
|
|
9
|
-
configurable: true,
|
|
10
|
-
writable: true,
|
|
11
|
-
value: false
|
|
12
|
-
});
|
|
13
|
-
Object.defineProperty(this, "ref", {
|
|
1
|
+
/* eslint-disable no-console */ function _define_property(obj, key, value) {
|
|
2
|
+
if (key in obj) {
|
|
3
|
+
Object.defineProperty(obj, key, {
|
|
4
|
+
value: value,
|
|
14
5
|
enumerable: true,
|
|
15
6
|
configurable: true,
|
|
16
|
-
writable: true
|
|
17
|
-
value: createRef()
|
|
18
|
-
});
|
|
19
|
-
Object.defineProperty(this, "node", {
|
|
20
|
-
enumerable: true,
|
|
21
|
-
configurable: true,
|
|
22
|
-
writable: true,
|
|
23
|
-
value: null
|
|
24
|
-
});
|
|
25
|
-
Object.defineProperty(this, "origVisibility", {
|
|
26
|
-
enumerable: true,
|
|
27
|
-
configurable: true,
|
|
28
|
-
writable: true,
|
|
29
|
-
value: void 0
|
|
7
|
+
writable: true
|
|
30
8
|
});
|
|
9
|
+
} else {
|
|
10
|
+
obj[key] = value;
|
|
31
11
|
}
|
|
12
|
+
return obj;
|
|
13
|
+
}
|
|
14
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
15
|
+
import { Component, createRef } from 'react';
|
|
16
|
+
export class KnockoutComponent extends Component {
|
|
32
17
|
componentDidMount() {
|
|
33
18
|
this.initNode();
|
|
34
19
|
this.initOrigVisibility();
|
|
@@ -67,15 +52,16 @@ export class KnockoutComponent extends Component {
|
|
|
67
52
|
}
|
|
68
53
|
render() {
|
|
69
54
|
const { koTemplate: KoTemplate } = this.props;
|
|
70
|
-
return _jsx(KoTemplate, {
|
|
55
|
+
return /*#__PURE__*/ _jsx(KoTemplate, {
|
|
56
|
+
ref: this.ref
|
|
57
|
+
});
|
|
71
58
|
}
|
|
72
59
|
isModelValid(koModel) {
|
|
73
60
|
return koModel !== undefined;
|
|
74
61
|
}
|
|
75
62
|
initNode() {
|
|
76
63
|
if (!(this.ref.current instanceof HTMLElement)) {
|
|
77
|
-
console.error('Knockout template should forward `ref` to HTMLElement.' +
|
|
78
|
-
'See https://reactjs.org/docs/forwarding-refs.html for more details.\n', this.props.koTemplate);
|
|
64
|
+
console.error('Knockout template should forward `ref` to HTMLElement.' + 'See https://reactjs.org/docs/forwarding-refs.html for more details.\n', this.props.koTemplate);
|
|
79
65
|
return;
|
|
80
66
|
}
|
|
81
67
|
this.node = this.ref.current;
|
|
@@ -105,13 +91,12 @@ export class KnockoutComponent extends Component {
|
|
|
105
91
|
this.isBindingApplied = true;
|
|
106
92
|
}
|
|
107
93
|
}
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
enumerable: true,
|
|
111
|
-
configurable: true,
|
|
112
|
-
writable: true,
|
|
113
|
-
value: {
|
|
114
|
-
dangerouslyUpdatable: false,
|
|
94
|
+
constructor(...args){
|
|
95
|
+
super(...args), _define_property(this, "isBindingApplied", false), _define_property(this, "ref", /*#__PURE__*/ createRef()), _define_property(this, "node", null), _define_property(this, "origVisibility", void 0);
|
|
115
96
|
}
|
|
97
|
+
}
|
|
98
|
+
_define_property(KnockoutComponent, "defaultProps", {
|
|
99
|
+
dangerouslyUpdatable: false
|
|
116
100
|
});
|
|
101
|
+
|
|
117
102
|
//# sourceMappingURL=knockout-component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
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;;;;;;;;;;;;;;AAC7B,SACIA,SAAS,EACTC,SAAS,QAIN,QAAQ;AAcf,OAAO,MAAMC,0BAA0BF;IAQnCG,oBAAoB;QAChB,IAAI,CAACC,QAAQ;QACb,IAAI,CAACC,kBAAkB;QACvB,IAAI,CAACC,YAAY;QACjB,IAAI,CAACC,oBAAoB;IAC7B;IACAC,sBAAsBC,SAAiC,EAAE;QACrD,IAAI,IAAI,CAACC,KAAK,CAACC,UAAU,KAAKF,UAAUE,UAAU,EAAE;YAChDC,QAAQC,KAAK,CAAC;YACd,OAAO;QACX;QACA,IAAI,IAAI,CAACC,gBAAgB,IAAI,IAAI,CAACJ,KAAK,CAACK,OAAO,KAAKN,UAAUM,OAAO,EAAE;YACnE,IAAI,CAAC,IAAI,CAACL,KAAK,CAACM,oBAAoB,EAAE;gBAClCJ,QAAQC,KAAK,CAAC,CAAC;;;;gBAIf,CAAC;gBACD,OAAO;YACX;YACA,OAAO;QACX;QACA,OAAO,CAAC,IAAI,CAACC,gBAAgB,IAAI,IAAI,CAACJ,KAAK,CAACK,OAAO,KAAKN,UAAUM,OAAO;IAC7E;IACAE,0BAA0B;QACtB,IAAI,CAACC,SAAS;QACd,OAAO;IACX;IACAC,qBAAqB;QACjB,IAAI,CAACb,YAAY;QACjB,IAAI,CAACC,oBAAoB;IAC7B;IACAa,uBAAuB;QACnB,IAAI,CAACF,SAAS;QACd,IAAI,CAACG,qBAAqB;IAC9B;IACAC,SAAS;QACL,MAAM,EAAEX,YAAYY,UAAU,EAAE,GAAG,IAAI,CAACb,KAAK;QAE7C,qBAAO,KAACa;YAAWC,KAAK,IAAI,CAACA,GAAG;;IACpC;IACQC,aAAaV,OAAY,EAAW;QACxC,OAAOA,YAAYW;IACvB;IACQtB,WAAW;QACf,IAAI,CAAE,CAAA,IAAI,CAACoB,GAAG,CAACG,OAAO,YAAYC,WAAU,GAAI;YAC5ChB,QAAQC,KAAK,CACT,2DACI,yEACJ,IAAI,CAACH,KAAK,CAACC,UAAU;YAEzB;QACJ;QAEA,IAAI,CAACkB,IAAI,GAAG,IAAI,CAACL,GAAG,CAACG,OAAO;IAChC;IACQtB,qBAAqB;QACzB,IAAI,CAACyB,cAAc,GAAGC,OAAOC,gBAAgB,CAAC,IAAI,CAACH,IAAI,EAAGI,UAAU,IAAI;IAC5E;IACQ1B,uBAAuB;QAC3B,MAAM2B,UAAU,IAAI,CAACT,YAAY,CAAC,IAAI,CAACf,KAAK,CAACK,OAAO;QACpD,IAAI,CAACc,IAAI,CAAEM,KAAK,CAACF,UAAU,GAAGC,UAAU,IAAI,CAACJ,cAAc,GAAI;IACnE;IACQT,wBAAwB;QAC5B,IAAI,CAACQ,IAAI,CAAEM,KAAK,CAACF,UAAU,GAAG,IAAI,CAACH,cAAc;QACjD,IAAI,CAACA,cAAc,GAAGJ;IAC1B;IACQR,YAAY;QAChB,IAAI,CAAC,IAAI,CAACJ,gBAAgB,EAAE;YACxB;QACJ;QACAsB,GAAGlB,SAAS,CAAC,IAAI,CAACW,IAAI;QACtB,IAAI,CAACf,gBAAgB,GAAG;IAC5B;IACQR,eAAe;QACnB,MAAMS,UAAUsB,OAAOC,MAAM,CAAC,IAAI,CAAC5B,KAAK,EAAE,aAAa,IAAI,CAACA,KAAK,CAACK,OAAO,GAAG;QAC5E,IAAI,IAAI,CAACU,YAAY,CAACV,UAAU;YAC5BqB,GAAGG,aAAa,CAACxB,SAAS,IAAI,CAACc,IAAI;YACnC,IAAI,CAACf,gBAAgB,GAAG;QAC5B;IACJ;;QAxFG,gBAIH,uBAAQA,oBAAmB,QAC3B,uBAAQU,qBAAMvB,cACd,uBAAQ4B,QAA2B,OACnC,uBAAQC,kBAAR,KAAA;;AAkFJ;AAxFI,iBADS5B,mBACFsC,gBAAgD;IACnDxB,sBAAsB;AAC1B"}
|
|
@@ -6,52 +6,65 @@ try {
|
|
|
6
6
|
/**
|
|
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
|
-
*/
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
catch (_a) {
|
|
13
|
-
// ignore
|
|
9
|
+
*/ createRoot = require('react-dom/client').createRoot;
|
|
10
|
+
} catch (e) {
|
|
11
|
+
// ignore
|
|
14
12
|
}
|
|
15
13
|
export const koBindingHandlers = {
|
|
16
14
|
// reactUncontrolled
|
|
17
|
-
reactUncontrolled: (ko)
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
15
|
+
reactUncontrolled: (ko)=>({
|
|
16
|
+
init: (el, valueAccessor, allBindings, _viewModel, bindingContext)=>{
|
|
17
|
+
initRoot(ko, el, allBindings);
|
|
18
|
+
const Component = ko.unwrap(valueAccessor());
|
|
19
|
+
render(ko, el, /*#__PURE__*/ _jsxs(Fragment, {
|
|
20
|
+
children: [
|
|
21
|
+
/*#__PURE__*/ _jsx(Component, {}),
|
|
22
|
+
/*#__PURE__*/ _jsx(ApplyBindings, {
|
|
23
|
+
bindingContext: bindingContext,
|
|
24
|
+
el: el,
|
|
25
|
+
ko: ko
|
|
26
|
+
})
|
|
27
|
+
]
|
|
28
|
+
}));
|
|
29
|
+
return {
|
|
30
|
+
controlsDescendantBindings: true
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
}),
|
|
25
34
|
// React component renderer for knockout
|
|
26
|
-
react: (ko)
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
35
|
+
react: (ko)=>({
|
|
36
|
+
init: (el, _valueAccessor, allBindings)=>{
|
|
37
|
+
initRoot(ko, el, allBindings);
|
|
38
|
+
return {
|
|
39
|
+
controlsDescendantBindings: true
|
|
40
|
+
}; // important
|
|
41
|
+
},
|
|
42
|
+
update: (el, valueAccessor, allBindings, viewModel)=>{
|
|
43
|
+
const Component = ko.unwrap(valueAccessor());
|
|
44
|
+
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
|
|
45
|
+
const props = allBindings.get('props') || viewModel || null;
|
|
46
|
+
render(ko, el, /*#__PURE__*/ _jsx(Component, {
|
|
47
|
+
...props
|
|
48
|
+
}));
|
|
49
|
+
}
|
|
50
|
+
})
|
|
38
51
|
};
|
|
39
52
|
function ApplyBindings({ bindingContext, el, ko }) {
|
|
40
53
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
41
|
-
useEffect(()
|
|
54
|
+
useEffect(()=>ko.applyBindingsToDescendants(bindingContext, el), []);
|
|
42
55
|
return null;
|
|
43
56
|
}
|
|
44
57
|
const ROOT_KEY = 'ko-binding-handler-root';
|
|
45
58
|
function disposalCallback(el, ko) {
|
|
46
59
|
const root = ko.utils.domData.get(el, ROOT_KEY);
|
|
47
60
|
if (root) {
|
|
48
|
-
return ()
|
|
61
|
+
return ()=>{
|
|
49
62
|
root.unmount();
|
|
50
63
|
ko.utils.domData.clear(el);
|
|
51
64
|
};
|
|
52
65
|
}
|
|
53
66
|
// eslint-disable-next-line react/no-deprecated
|
|
54
|
-
return ()
|
|
67
|
+
return ()=>ReactDOM.unmountComponentAtNode(el);
|
|
55
68
|
}
|
|
56
69
|
function initRoot(ko, el, allBindings) {
|
|
57
70
|
if (createRoot && allBindings.get('legacyRoot') !== true) {
|
|
@@ -64,10 +77,10 @@ function render(ko, container, element) {
|
|
|
64
77
|
const root = ko.utils.domData.get(container, ROOT_KEY);
|
|
65
78
|
if (root) {
|
|
66
79
|
root.render(element);
|
|
67
|
-
}
|
|
68
|
-
else {
|
|
80
|
+
} else {
|
|
69
81
|
// eslint-disable-next-line react/no-deprecated
|
|
70
82
|
ReactDOM.render(element, container);
|
|
71
83
|
}
|
|
72
84
|
}
|
|
85
|
+
|
|
73
86
|
//# sourceMappingURL=ko-binding-handlers.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
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,UAAM;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"}
|
|
@@ -4,8 +4,7 @@ import { computed, createAtom } from 'mobx';
|
|
|
4
4
|
*
|
|
5
5
|
* To avoid a situation when the `ko.observable` is not created yet at the moment of decorating (during class creating)
|
|
6
6
|
* the decorator performs initialization at the first access.
|
|
7
|
-
*/
|
|
8
|
-
export function koObservableToMobx(lazyKoObservable) {
|
|
7
|
+
*/ export function koObservableToMobx(lazyKoObservable) {
|
|
9
8
|
let value;
|
|
10
9
|
let lastKoObservable;
|
|
11
10
|
function firstAccessInit() {
|
|
@@ -22,31 +21,32 @@ export function koObservableToMobx(lazyKoObservable) {
|
|
|
22
21
|
firstAccessInit();
|
|
23
22
|
value.set(v);
|
|
24
23
|
}
|
|
25
|
-
return (targetPrototype, propertyName)
|
|
24
|
+
return (targetPrototype, propertyName)=>{
|
|
26
25
|
Object.defineProperty(targetPrototype, propertyName, {
|
|
27
26
|
get: getValue,
|
|
28
27
|
set: setValue,
|
|
29
28
|
enumerable: true,
|
|
30
|
-
configurable: true
|
|
29
|
+
configurable: true
|
|
31
30
|
});
|
|
32
31
|
};
|
|
33
32
|
}
|
|
34
33
|
export function convertKoObservableToMobx(koObservable) {
|
|
35
34
|
let subscription;
|
|
36
35
|
function subscribe() {
|
|
37
|
-
return
|
|
36
|
+
return subscription = koObservable.subscribe(()=>atom.reportChanged());
|
|
38
37
|
}
|
|
39
38
|
function unsubscribe() {
|
|
40
39
|
return subscription.dispose();
|
|
41
40
|
}
|
|
42
41
|
const atom = createAtom('ko.observable', subscribe, unsubscribe);
|
|
43
|
-
const getter = ()
|
|
42
|
+
const getter = ()=>{
|
|
44
43
|
atom.reportObserved();
|
|
45
44
|
return koObservable();
|
|
46
45
|
};
|
|
47
46
|
return computed(getter, {
|
|
48
47
|
set: koObservable,
|
|
49
|
-
equals: ()
|
|
48
|
+
equals: ()=>false
|
|
50
49
|
});
|
|
51
50
|
}
|
|
51
|
+
|
|
52
52
|
//# sourceMappingURL=ko-observable-to-mobx.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../src/ko-observable-to-mobx.ts"],"sourcesContent":["import { computed, createAtom, IComputedValue } from 'mobx';\n\n/**\n * A property decorator that converts a `ko.observable` to a `mobx.observable`.\n *\n * To avoid a situation when the `ko.observable` is not created yet at the moment of decorating (during class creating)\n * the decorator performs initialization at the first access.\n */\nexport function koObservableToMobx<T>(lazyKoObservable: () => KnockoutObservable<T>) {\n let value: IComputedValue<T>;\n let lastKoObservable: KnockoutObservable<T> | undefined;\n\n function firstAccessInit() {\n if (lastKoObservable !== lazyKoObservable()) {\n value = convertKoObservableToMobx(lazyKoObservable());\n lastKoObservable = lazyKoObservable();\n }\n }\n\n function getValue() {\n firstAccessInit();\n return value.get();\n }\n\n function setValue(v: T) {\n firstAccessInit();\n value.set(v);\n }\n\n return (targetPrototype: any, propertyName: string) => {\n Object.defineProperty(targetPrototype, propertyName, {\n get: getValue,\n set: setValue,\n enumerable: true,\n configurable: true,\n });\n };\n}\n\nexport function convertKoObservableToMobx<T>(\n koObservable: KnockoutObservable<T>\n): IComputedValue<T> {\n let subscription: KnockoutSubscription;\n\n function subscribe() {\n return (subscription = koObservable.subscribe(() => atom.reportChanged()));\n }\n\n function unsubscribe() {\n return subscription.dispose();\n }\n\n const atom = createAtom('ko.observable', subscribe, unsubscribe);\n\n const getter = () => {\n atom.reportObserved();\n return koObservable();\n };\n\n return computed(getter, {\n set: koObservable,\n equals: () => false,\n });\n}\n"],"names":["computed","createAtom","koObservableToMobx","lazyKoObservable","value","lastKoObservable","firstAccessInit","convertKoObservableToMobx","getValue","get","setValue","v","set","targetPrototype","propertyName","Object","defineProperty","enumerable","configurable","koObservable","subscription","subscribe","atom","reportChanged","unsubscribe","dispose","getter","reportObserved","equals"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,UAAU,QAAwB,OAAO;AAE5D;;;;;CAKC,GACD,OAAO,SAASC,mBAAsBC,gBAA6C;IAC/E,IAAIC;IACJ,IAAIC;IAEJ,SAASC;QACL,IAAID,qBAAqBF,oBAAoB;YACzCC,QAAQG,0BAA0BJ;YAClCE,mBAAmBF;QACvB;IACJ;IAEA,SAASK;QACLF;QACA,OAAOF,MAAMK,GAAG;IACpB;IAEA,SAASC,SAASC,CAAI;QAClBL;QACAF,MAAMQ,GAAG,CAACD;IACd;IAEA,OAAO,CAACE,iBAAsBC;QAC1BC,OAAOC,cAAc,CAACH,iBAAiBC,cAAc;YACjDL,KAAKD;YACLI,KAAKF;YACLO,YAAY;YACZC,cAAc;QAClB;IACJ;AACJ;AAEA,OAAO,SAASX,0BACZY,YAAmC;IAEnC,IAAIC;IAEJ,SAASC;QACL,OAAQD,eAAeD,aAAaE,SAAS,CAAC,IAAMC,KAAKC,aAAa;IAC1E;IAEA,SAASC;QACL,OAAOJ,aAAaK,OAAO;IAC/B;IAEA,MAAMH,OAAOrB,WAAW,iBAAiBoB,WAAWG;IAEpD,MAAME,SAAS;QACXJ,KAAKK,cAAc;QACnB,OAAOR;IACX;IAEA,OAAOnB,SAAS0B,QAAQ;QACpBd,KAAKO;QACLS,QAAQ,IAAM;IAClB;AACJ"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/ko-bridge",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "31.0.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"homepage": "https://docs.st.dev/docs/frontend/ko-bridge",
|
|
6
6
|
"repository": {
|
|
@@ -39,5 +39,5 @@
|
|
|
39
39
|
"cli": {
|
|
40
40
|
"webpack": false
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "c52e188a1217df74052774a2eea6a5126089e3d5"
|
|
43
43
|
}
|