grainjs 0.1.0 → 1.0.2
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/README.md +54 -9
- package/dist/cjs/index.d.ts +6 -2
- package/dist/cjs/index.js +24 -17
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/lib/PriorityQueue.d.ts +1 -1
- package/dist/cjs/lib/PriorityQueue.js +1 -0
- package/dist/cjs/lib/PriorityQueue.js.map +1 -1
- package/dist/cjs/lib/_computed_queue.d.ts +18 -0
- package/dist/cjs/lib/_computed_queue.js +6 -1
- package/dist/cjs/lib/_computed_queue.js.map +1 -1
- package/dist/cjs/lib/binding.d.ts +16 -10
- package/dist/cjs/lib/binding.js +22 -27
- package/dist/cjs/lib/binding.js.map +1 -1
- package/dist/cjs/lib/browserGlobals.d.ts +4 -1
- package/dist/cjs/lib/browserGlobals.js +2 -0
- package/dist/cjs/lib/browserGlobals.js.map +1 -1
- package/dist/cjs/lib/computed.d.ts +11 -7
- package/dist/cjs/lib/computed.js +16 -0
- package/dist/cjs/lib/computed.js.map +1 -1
- package/dist/cjs/lib/dispose.d.ts +106 -14
- package/dist/cjs/lib/dispose.js +76 -11
- package/dist/cjs/lib/dispose.js.map +1 -1
- package/dist/cjs/lib/dom.d.ts +21 -17
- package/dist/cjs/lib/dom.js +33 -26
- package/dist/cjs/lib/dom.js.map +1 -1
- package/dist/cjs/lib/domComponent.d.ts +71 -0
- package/dist/cjs/lib/domComponent.js +15 -0
- package/dist/cjs/lib/domComponent.js.map +1 -0
- package/dist/cjs/lib/domComputed.d.ts +89 -0
- package/dist/cjs/lib/domComputed.js +92 -0
- package/dist/cjs/lib/domComputed.js.map +1 -0
- package/dist/cjs/lib/{_domDispose.d.ts → domDispose.d.ts} +12 -2
- package/dist/cjs/lib/{_domDispose.js → domDispose.js} +21 -8
- package/dist/cjs/lib/domDispose.js.map +1 -0
- package/dist/cjs/lib/{_domForEach.d.ts → domForEach.d.ts} +2 -2
- package/dist/cjs/lib/domForEach.js +72 -0
- package/dist/cjs/lib/domForEach.js.map +1 -0
- package/dist/cjs/lib/{_domImpl.d.ts → domImpl.d.ts} +15 -12
- package/dist/cjs/lib/{_domImpl.js → domImpl.js} +23 -6
- package/dist/cjs/lib/domImpl.js.map +1 -0
- package/dist/cjs/lib/{_domMethods.d.ts → domMethods.d.ts} +27 -62
- package/dist/cjs/lib/{_domMethods.js → domMethods.js} +21 -76
- package/dist/cjs/lib/domMethods.js.map +1 -0
- package/dist/cjs/lib/domevent.d.ts +32 -21
- package/dist/cjs/lib/domevent.js +33 -12
- package/dist/cjs/lib/domevent.js.map +1 -1
- package/dist/cjs/lib/emit.d.ts +25 -2
- package/dist/cjs/lib/emit.js +3 -1
- package/dist/cjs/lib/emit.js.map +1 -1
- package/dist/cjs/lib/kowrap.d.ts +45 -3
- package/dist/cjs/lib/kowrap.js +93 -10
- package/dist/cjs/lib/kowrap.js.map +1 -1
- package/dist/cjs/lib/obsArray.d.ts +8 -8
- package/dist/cjs/lib/obsArray.js +1 -0
- package/dist/cjs/lib/obsArray.js.map +1 -1
- package/dist/cjs/lib/observable.d.ts +6 -1
- package/dist/cjs/lib/observable.js +11 -2
- package/dist/cjs/lib/observable.js.map +1 -1
- package/dist/cjs/lib/pureComputed.d.ts +3 -3
- package/dist/cjs/lib/pureComputed.js +2 -1
- package/dist/cjs/lib/pureComputed.js.map +1 -1
- package/dist/cjs/lib/styled.d.ts +76 -11
- package/dist/cjs/lib/styled.js +55 -23
- package/dist/cjs/lib/styled.js.map +1 -1
- package/dist/cjs/lib/subscribe.d.ts +15 -6
- package/dist/cjs/lib/subscribe.js +6 -2
- package/dist/cjs/lib/subscribe.js.map +1 -1
- package/dist/cjs/lib/util.js +1 -0
- package/dist/cjs/lib/util.js.map +1 -1
- package/dist/cjs/lib/widgets/input.d.ts +2 -2
- package/dist/cjs/lib/widgets/input.js +2 -2
- package/dist/cjs/lib/widgets/input.js.map +1 -1
- package/dist/cjs/lib/widgets/select.d.ts +1 -1
- package/dist/cjs/lib/widgets/select.js +1 -0
- package/dist/cjs/lib/widgets/select.js.map +1 -1
- package/dist/esm/index.js +6 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/lib/PriorityQueue.js.map +1 -1
- package/dist/esm/lib/_computed_queue.js +5 -1
- package/dist/esm/lib/_computed_queue.js.map +1 -1
- package/dist/esm/lib/binding.js +20 -27
- package/dist/esm/lib/binding.js.map +1 -1
- package/dist/esm/lib/browserGlobals.js +1 -0
- package/dist/esm/lib/browserGlobals.js.map +1 -1
- package/dist/esm/lib/computed.js +15 -0
- package/dist/esm/lib/computed.js.map +1 -1
- package/dist/esm/lib/dispose.js +74 -11
- package/dist/esm/lib/dispose.js.map +1 -1
- package/dist/esm/lib/dom.js +21 -17
- package/dist/esm/lib/dom.js.map +1 -1
- package/dist/esm/lib/domComponent.js +11 -0
- package/dist/esm/lib/domComponent.js.map +1 -0
- package/dist/esm/lib/domComputed.js +84 -0
- package/dist/esm/lib/domComputed.js.map +1 -0
- package/dist/esm/lib/{_domDispose.js → domDispose.js} +19 -8
- package/dist/esm/lib/domDispose.js.map +1 -0
- package/dist/esm/lib/domForEach.js +68 -0
- package/dist/esm/lib/domForEach.js.map +1 -0
- package/dist/esm/lib/{_domImpl.js → domImpl.js} +20 -4
- package/dist/esm/lib/domImpl.js.map +1 -0
- package/dist/esm/lib/{_domMethods.js → domMethods.js} +8 -63
- package/dist/esm/lib/domMethods.js.map +1 -0
- package/dist/esm/lib/domevent.js +30 -11
- package/dist/esm/lib/domevent.js.map +1 -1
- package/dist/esm/lib/emit.js +2 -1
- package/dist/esm/lib/emit.js.map +1 -1
- package/dist/esm/lib/kowrap.js +90 -10
- package/dist/esm/lib/kowrap.js.map +1 -1
- package/dist/esm/lib/obsArray.js.map +1 -1
- package/dist/esm/lib/observable.js +9 -1
- package/dist/esm/lib/observable.js.map +1 -1
- package/dist/esm/lib/pureComputed.js +1 -1
- package/dist/esm/lib/pureComputed.js.map +1 -1
- package/dist/esm/lib/styled.js +52 -22
- package/dist/esm/lib/styled.js.map +1 -1
- package/dist/esm/lib/subscribe.js +5 -2
- package/dist/esm/lib/subscribe.js.map +1 -1
- package/dist/esm/lib/util.js.map +1 -1
- package/dist/esm/lib/widgets/input.js +1 -2
- package/dist/esm/lib/widgets/input.js.map +1 -1
- package/dist/esm/lib/widgets/select.js.map +1 -1
- package/dist/grain-full.debug.js +1627 -1222
- package/dist/grain-full.min.js +1 -1
- package/dist/grain-full.min.js.map +1 -1
- package/index.ts +6 -2
- package/lib/_computed_queue.ts +7 -1
- package/lib/binding.ts +33 -28
- package/lib/browserGlobals.ts +3 -1
- package/lib/computed.ts +37 -7
- package/lib/dispose.ts +81 -33
- package/lib/dom.ts +24 -18
- package/lib/domComponent.ts +89 -0
- package/lib/domComputed.ts +146 -0
- package/lib/{_domDispose.ts → domDispose.ts} +26 -8
- package/lib/{_domForEach.ts → domForEach.ts} +12 -11
- package/lib/{_domImpl.ts → domImpl.ts} +36 -30
- package/lib/{_domMethods.ts → domMethods.ts} +33 -103
- package/lib/domevent.ts +59 -22
- package/lib/emit.ts +2 -1
- package/lib/kowrap.ts +109 -11
- package/lib/obsArray.ts +2 -2
- package/lib/observable.ts +10 -2
- package/lib/pureComputed.ts +7 -6
- package/lib/styled.ts +65 -39
- package/lib/subscribe.ts +24 -8
- package/lib/widgets/input.ts +9 -7
- package/lib/widgets/select.ts +3 -3
- package/package.json +41 -42
- package/dist/cjs/lib/_domComponent.d.ts +0 -84
- package/dist/cjs/lib/_domComponent.js +0 -160
- package/dist/cjs/lib/_domComponent.js.map +0 -1
- package/dist/cjs/lib/_domDispose.js.map +0 -1
- package/dist/cjs/lib/_domForEach.js +0 -71
- package/dist/cjs/lib/_domForEach.js.map +0 -1
- package/dist/cjs/lib/_domImpl.js.map +0 -1
- package/dist/cjs/lib/_domMethods.js.map +0 -1
- package/dist/esm/lib/_domComponent.js +0 -155
- package/dist/esm/lib/_domComponent.js.map +0 -1
- package/dist/esm/lib/_domDispose.js.map +0 -1
- package/dist/esm/lib/_domForEach.js +0 -68
- package/dist/esm/lib/_domForEach.js.map +0 -1
- package/dist/esm/lib/_domImpl.js.map +0 -1
- package/dist/esm/lib/_domMethods.js.map +0 -1
- package/lib/_domComponent.ts +0 -167
|
@@ -1,155 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Implementation of UI components that can be inserted into dom(). See documentation for
|
|
3
|
-
* createElem() and create().
|
|
4
|
-
*/
|
|
5
|
-
import { onDisposeElem } from './_domDispose';
|
|
6
|
-
import { update } from './_domImpl';
|
|
7
|
-
import { replaceContent } from './_domMethods';
|
|
8
|
-
import { Disposable } from './dispose';
|
|
9
|
-
// Use the browser globals in a way that allows replacing them with mocks in tests.
|
|
10
|
-
import { G } from './browserGlobals';
|
|
11
|
-
/**
|
|
12
|
-
* Helper that takes ownership of a component by mounting it to a parent element.
|
|
13
|
-
*/
|
|
14
|
-
class DomOwner {
|
|
15
|
-
constructor(_parentElem) {
|
|
16
|
-
this._parentElem = _parentElem;
|
|
17
|
-
}
|
|
18
|
-
autoDispose(comp) { comp.mount(this._parentElem); }
|
|
19
|
-
}
|
|
20
|
-
/**
|
|
21
|
-
* A UI component should extend this base class and implement a constructor that creates some DOM
|
|
22
|
-
* and calls this.setContent() with it. Compared to a simple function returning DOM (a
|
|
23
|
-
* "functional" component), a "class" component makes it easier to organize code into methods.
|
|
24
|
-
*
|
|
25
|
-
* In addition, a "class" component may be disposed to remove it from the DOM, although this is
|
|
26
|
-
* uncommon since a UI component is normally owned by its containing DOM.
|
|
27
|
-
*/
|
|
28
|
-
export class Component extends Disposable {
|
|
29
|
-
constructor() {
|
|
30
|
-
super();
|
|
31
|
-
this._markerPre = G.document.createComment('A');
|
|
32
|
-
this._markerPost = G.document.createComment('B');
|
|
33
|
-
this._contentToMount = null;
|
|
34
|
-
// If the containing DOM is disposed, it will dispose all of our DOM (included among children
|
|
35
|
-
// of the containing DOM). Let it also dispose this Component when it gets to _markerPost.
|
|
36
|
-
// Since _unmount() is unnecessary here, we skip its work by unseting _markerPre/_markerPost.
|
|
37
|
-
onDisposeElem(this._markerPost, () => {
|
|
38
|
-
this._markerPre = this._markerPost = undefined;
|
|
39
|
-
this.dispose();
|
|
40
|
-
});
|
|
41
|
-
// When the component is disposed, unmount the DOM we created (i.e. dispose and remove).
|
|
42
|
-
// Except that we skip this as unnecessary when the disposal is triggered by containing DOM.
|
|
43
|
-
this.onDispose(this._unmount, this);
|
|
44
|
-
}
|
|
45
|
-
/**
|
|
46
|
-
* Create a component using Foo.create(owner, ...args) similarly to creating any other
|
|
47
|
-
* Disposable object. The difference is that `owner` may be a DOM Element, and the content set
|
|
48
|
-
* by the constructor's setContent() call will be appended to and owned by that owner element.
|
|
49
|
-
*
|
|
50
|
-
* If the owner is not an Element, works like a regular Disposable. To add such a component to
|
|
51
|
-
* DOM, use the mount() method.
|
|
52
|
-
*/
|
|
53
|
-
// TODO add typescript overloads for strict argument checks.
|
|
54
|
-
static create(owner, ...args) {
|
|
55
|
-
const _owner = owner instanceof G.Element ? new DomOwner(owner) : owner;
|
|
56
|
-
return Disposable.create.call(this, _owner, ...args);
|
|
57
|
-
}
|
|
58
|
-
/**
|
|
59
|
-
* Inserts the content of this component into a parent DOM element.
|
|
60
|
-
*/
|
|
61
|
-
mount(elem) {
|
|
62
|
-
// Insert the result of setContent() into the given parent element. Note that mount() must
|
|
63
|
-
// only ever be called once. It is normally called as part of .create().
|
|
64
|
-
if (!this._markerPost) {
|
|
65
|
-
throw new Error('Component mount() called when already disposed');
|
|
66
|
-
}
|
|
67
|
-
if (this._markerPost.parentNode) {
|
|
68
|
-
throw new Error('Component mount() called twice');
|
|
69
|
-
}
|
|
70
|
-
update(elem, this._markerPre, this._contentToMount, this._markerPost);
|
|
71
|
-
this._contentToMount = null;
|
|
72
|
-
}
|
|
73
|
-
/**
|
|
74
|
-
* Components should call setContent() with their DOM content, typically in the constructor. If
|
|
75
|
-
* called outside the constructor, setContent() will replace previously set DOM. It accepts any
|
|
76
|
-
* DOM Node; use dom.frag() to insert multiple nodes together.
|
|
77
|
-
*/
|
|
78
|
-
setContent(content) {
|
|
79
|
-
if (this._markerPost) {
|
|
80
|
-
if (this._markerPost.parentNode) {
|
|
81
|
-
// Component is already mounted. Replace previous content.
|
|
82
|
-
replaceContent(this._markerPre, this._markerPost, content);
|
|
83
|
-
}
|
|
84
|
-
else {
|
|
85
|
-
// Component is created but not yet mounted. Save the content for the mount() call.
|
|
86
|
-
this._contentToMount = content;
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
/**
|
|
91
|
-
* Detaches and disposes the DOM created and attached in mount().
|
|
92
|
-
*/
|
|
93
|
-
_unmount() {
|
|
94
|
-
// Dispose the owned content, and remove it from the DOM. The conditional skips the work when
|
|
95
|
-
// the unmounting is triggered by the disposal of the containing DOM.
|
|
96
|
-
if (this._markerPost && this._markerPost.parentNode) {
|
|
97
|
-
const elem = this._markerPost.parentNode;
|
|
98
|
-
replaceContent(this._markerPre, this._markerPost, null);
|
|
99
|
-
elem.removeChild(this._markerPre);
|
|
100
|
-
elem.removeChild(this._markerPost);
|
|
101
|
-
}
|
|
102
|
-
this._markerPre = this._markerPost = undefined;
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
/**
|
|
106
|
-
* Construct and insert a UI component into the given DOM element. The component must extend
|
|
107
|
-
* dom.Component, and should build DOM and call setContent(DOM) in the constructor. DOM may be any
|
|
108
|
-
* Node. Use dom.frag() to insert multiple nodes together.
|
|
109
|
-
*
|
|
110
|
-
* Logically, the parent `elem` owns the created component, and the component owns the DOM set by
|
|
111
|
-
* setContent(). If the parent is disposed, so is the component and its DOM. If the component is
|
|
112
|
-
* somehow disposed directly, then its DOM is disposed and removed from `elem`.
|
|
113
|
-
*
|
|
114
|
-
* Note the correct usage:
|
|
115
|
-
*
|
|
116
|
-
* dom('div', dom.create(Comp1), dom.create(Comp2, ...args))
|
|
117
|
-
*
|
|
118
|
-
* To understand why the syntax is such, consider a potential alterntive such as:
|
|
119
|
-
*
|
|
120
|
-
* dom('div', _insert_(new Comp1()), _insert_(new Comp2(...args))
|
|
121
|
-
*
|
|
122
|
-
* In both cases, the constructor for Comp1 runs before the constructor for Comp2. What happens
|
|
123
|
-
* when Comp2's constructor throws an exception? In the second case, nothing yet owns the
|
|
124
|
-
* created Comp1 component, and it will never get cleaned up. In the first, correct case,
|
|
125
|
-
* dom('div') element gets ownership of it early enough and will dispose it.
|
|
126
|
-
*
|
|
127
|
-
* @param {Element} elem: The element to which to append the newly constructed component.
|
|
128
|
-
* @param {Class} ComponentClass: The component class to instantiate. It must extend
|
|
129
|
-
* dom.Component(...) and implement the render() method.
|
|
130
|
-
* @param {Objects} ...args: Arguments to the Component's constructor.
|
|
131
|
-
*/
|
|
132
|
-
// TODO add typescript overloads for strict argument checks.
|
|
133
|
-
export function create(cls, ...args) {
|
|
134
|
-
return (elem) => { cls.create(elem, ...args); };
|
|
135
|
-
}
|
|
136
|
-
/**
|
|
137
|
-
* If you need to initialize a component after creation, you may do it in the middle of a dom()
|
|
138
|
-
* call using createInit(), in which the last of args is initFunc: a function called with the
|
|
139
|
-
* constructed instance of the component:
|
|
140
|
-
* dom.createInit(MyComponent, ...args, c => {
|
|
141
|
-
* c.addChild(...);
|
|
142
|
-
* c.setOption(...);
|
|
143
|
-
* });
|
|
144
|
-
* The benefit of such inline construction is that the component is owned by the dom element as
|
|
145
|
-
* soon as it's created, so an exception in the init function or later among dom()'s arguments
|
|
146
|
-
* will trigger a cleanup.
|
|
147
|
-
*/
|
|
148
|
-
export function createInit(cls, ...args) {
|
|
149
|
-
return (elem) => {
|
|
150
|
-
const initFunc = args.pop();
|
|
151
|
-
const c = cls.create(elem, ...args);
|
|
152
|
-
initFunc(c);
|
|
153
|
-
};
|
|
154
|
-
}
|
|
155
|
-
//# sourceMappingURL=_domComponent.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"_domComponent.js","sourceRoot":"","sources":["../../../lib/_domComponent.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAmB,MAAM,EAAC,MAAM,YAAY,CAAC;AACpD,OAAO,EAAC,cAAc,EAAC,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAC,UAAU,EAAmB,MAAM,WAAW,CAAC;AAEvD,mFAAmF;AACnF,OAAO,EAAC,CAAC,EAAC,MAAM,kBAAkB,CAAC;AAQnC;;GAEG;AACH;IACE,YAAoB,WAAoB;QAApB,gBAAW,GAAX,WAAW,CAAS;IAAG,CAAC;IACrC,WAAW,CAAC,IAAe,IAAU,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;CAC5E;AAED;;;;;;;GAOG;AACH,MAAM,gBAA0B,SAAQ,UAAU;IAoBhD;QACE,KAAK,EAAE,CAAC;QALF,eAAU,GAAS,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACjD,gBAAW,GAAS,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QAClD,oBAAe,GAAc,IAAI,CAAC;QAKxC,6FAA6F;QAC7F,0FAA0F;QAC1F,6FAA6F;QAC7F,aAAa,CAAC,IAAI,CAAC,WAAW,EAAE,GAAG,EAAE;YACnC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,GAAG,SAAU,CAAC;YAChD,IAAI,CAAC,OAAO,EAAE,CAAC;QACjB,CAAC,CAAC,CAAC;QAEH,wFAAwF;QACxF,4FAA4F;QAC5F,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;IACtC,CAAC;IAjCD;;;;;;;OAOG;IACH,4DAA4D;IACrD,MAAM,CAAC,MAAM,CACsB,KAAoC,EAAE,GAAG,IAAW;QAC5F,MAAM,MAAM,GAA0B,KAAK,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;QAC/F,OAAO,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;IACvD,CAAC;IAsBD;;OAEG;IACI,KAAK,CAAC,IAAa;QACxB,0FAA0F;QAC1F,wEAAwE;QACxE,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YAAE,MAAM,IAAI,KAAK,CAAC,gDAAgD,CAAC,CAAC;SAAE;QAC7F,IAAI,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE;YAAE,MAAM,IAAI,KAAK,CAAC,gCAAgC,CAAC,CAAC;SAAE;QACvF,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QACtE,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;IAC9B,CAAC;IAED;;;;OAIG;IACO,UAAU,CAAC,OAAa;QAChC,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE;gBAC/B,0DAA0D;gBAC1D,cAAc,CAAC,IAAI,CAAC,UAAW,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;aAC7D;iBAAM;gBACL,mFAAmF;gBACnF,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;aAChC;SACF;IACH,CAAC;IAED;;OAEG;IACK,QAAQ;QACd,6FAA6F;QAC7F,qEAAqE;QACrE,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE;YACnD,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC;YACzC,cAAc,CAAC,IAAI,CAAC,UAAW,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;YACzD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,UAAW,CAAC,CAAC;YACnC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SACpC;QACD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,GAAG,SAAU,CAAC;IAClD,CAAC;CACF;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,4DAA4D;AAC5D,MAAM,iBAAsC,GAA2B,EAAE,GAAG,IAAW;IACrF,OAAO,CAAC,IAAI,EAAE,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;AAClD,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,qBAAwB,GAA2B,EAAE,GAAG,IAAW;IACvE,OAAO,CAAC,IAAI,EAAE,EAAE;QACd,MAAM,QAAQ,GAAmB,IAAI,CAAC,GAAG,EAAE,CAAC;QAC5C,MAAM,CAAC,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,CAAC;QACpC,QAAQ,CAAC,CAAC,CAAC,CAAC;IACd,CAAC,CAAC;AACJ,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"_domDispose.js","sourceRoot":"","sources":["../../../lib/_domDispose.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,MAAM,WAAW,GAAuC,IAAI,OAAO,EAAE,CAAC;AAItE,4FAA4F;AAC5F,mCAAmC;AACnC,kBAAkB,IAAU,EAAE,SAAoB;IAChD,IAAI,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC;IACxB,OAAO,CAAC,EAAE;QACR,4FAA4F;QAC5F,gCAAgC;QAChC,QAAQ,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;QACvB,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC;KACnB;IACD,SAAS,CAAC,IAAI,CAAC,CAAC;AAClB,CAAC;AAED,6DAA6D;AAC7D,sBAAsB,IAAU;IAC9B,IAAI,QAAQ,GAAG,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACrC,IAAI,QAAQ,EAAE;QACZ,IAAI,GAAG,GAAmB,IAAI,CAAC;QAC/B,GAAG;YACD,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YACxB,QAAQ,CAAC,IAAI,CAAC,CAAC;YACf,qEAAqE;YACrE,GAAG,GAAG,QAAQ,CAAC;YACf,QAAQ,GAAG,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;SACjC,QAAQ,QAAQ,EAAE;KACpB;AACH,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,qBAAqB,IAAU;IACnC,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;AAC/B,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,wBAAwB,IAAU,EAAE,YAAuB;IAC/D,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAC3C,WAAW,CAAC,GAAG,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;IACpC,IAAI,YAAY,EAAE;QAChB,WAAW,CAAC,GAAG,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;KAC7C;AACH,CAAC;AACD,MAAM,oBAAoB,YAAuB;IAC/C,OAAO,CAAC,IAAU,EAAE,EAAE,CAAC,aAAa,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;AAC3D,CAAC;AAED;;;;;GAKG;AACH,MAAM,0BAA0B,IAAU,EAAE,UAA4B;IACtE,IAAI,UAAU,EAAE;QACd,aAAa,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC;KACjD;AACH,CAAC;AACD,MAAM,sBAAsB,UAA4B;IACtD,IAAI,UAAU,EAAE;QACd,OAAO,CAAC,IAAU,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;KAC1D;AACH,CAAC"}
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
import { domDispose } from './_domDispose';
|
|
2
|
-
import { frag } from './_domImpl';
|
|
3
|
-
import { replaceContent } from './_domMethods';
|
|
4
|
-
import { computedArray } from './obsArray';
|
|
5
|
-
// Use the browser globals in a way that allows replacing them with mocks in tests.
|
|
6
|
-
import { G } from './browserGlobals';
|
|
7
|
-
/**
|
|
8
|
-
* Creates DOM elements for each element of an observable array. As the array is changed, children
|
|
9
|
-
* are added or removed. This works for any array-valued observable, and for obsArray() and
|
|
10
|
-
* computedArray() it works more efficiently for simple changes.
|
|
11
|
-
*
|
|
12
|
-
* The given itemCreateFunc() should return a single DOM node for each item, or null to skip that
|
|
13
|
-
* item. It is called for new items whenever they are spliced in, or the array replaced. The
|
|
14
|
-
* forEach() owns the created nodes, and runs domDispose() on them when they are spliced out.
|
|
15
|
-
*
|
|
16
|
-
* If the created nodes are removed from their parent externally, forEach() will cope with it, but
|
|
17
|
-
* will consider these elements as no longer owned, and will not run domDispose() on them.
|
|
18
|
-
*
|
|
19
|
-
* Note that itemCreateFunc() does not receive an index: an index would only be correct at the
|
|
20
|
-
* time the item is created, and would not reflect further changes to the array.
|
|
21
|
-
*
|
|
22
|
-
* If you'd like to map the DOM node back to its source item, use dom.data() and dom.getData() in
|
|
23
|
-
* itemCreateFunc().
|
|
24
|
-
*/
|
|
25
|
-
export function forEach(obsArray, itemCreateFunc) {
|
|
26
|
-
return (elem) => {
|
|
27
|
-
const markerPre = G.document.createComment('a');
|
|
28
|
-
const markerPost = G.document.createComment('b');
|
|
29
|
-
elem.appendChild(markerPre);
|
|
30
|
-
elem.appendChild(markerPost);
|
|
31
|
-
if (Array.isArray(obsArray)) {
|
|
32
|
-
replaceContent(markerPre, markerPost, obsArray.map(itemCreateFunc));
|
|
33
|
-
return;
|
|
34
|
-
}
|
|
35
|
-
const nodes = computedArray(obsArray, itemCreateFunc);
|
|
36
|
-
nodes.addListener((newArr, oldArr, splice) => {
|
|
37
|
-
if (splice) {
|
|
38
|
-
// Remove the elements that are gone.
|
|
39
|
-
for (const node of splice.deleted) {
|
|
40
|
-
if (node && node.parentNode === elem) {
|
|
41
|
-
domDispose(node);
|
|
42
|
-
elem.removeChild(node);
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
if (splice.numAdded > 0) {
|
|
46
|
-
// Find a valid child immediately following the spliced out portion, for DOM insertion.
|
|
47
|
-
const endIndex = splice.start + splice.numAdded;
|
|
48
|
-
let nextElem = markerPost;
|
|
49
|
-
for (let i = endIndex; i < newArr.length; i++) {
|
|
50
|
-
const node = newArr[i];
|
|
51
|
-
if (node && node.parentNode === elem) {
|
|
52
|
-
nextElem = node;
|
|
53
|
-
break;
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
// Insert the new elements.
|
|
57
|
-
const content = frag(newArr.slice(splice.start, endIndex));
|
|
58
|
-
elem.insertBefore(content, nextElem);
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
else {
|
|
62
|
-
replaceContent(markerPre, markerPost, newArr);
|
|
63
|
-
}
|
|
64
|
-
});
|
|
65
|
-
replaceContent(markerPre, markerPost, nodes.get());
|
|
66
|
-
};
|
|
67
|
-
}
|
|
68
|
-
//# sourceMappingURL=_domForEach.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"_domForEach.js","sourceRoot":"","sources":["../../../lib/_domForEach.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAC;AACzC,OAAO,EAAY,IAAI,EAAC,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAC,cAAc,EAAC,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAC,aAAa,EAA0B,MAAM,YAAY,CAAC;AAElE,mFAAmF;AACnF,OAAO,EAAC,CAAC,EAAC,MAAM,kBAAkB,CAAC;AAEnC;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,kBAAqB,QAA0B,EAAE,cAAsC;IAC3F,OAAO,CAAC,IAAU,EAAE,EAAE;QACpB,MAAM,SAAS,GAAG,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QAChD,MAAM,UAAU,GAAG,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACjD,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;QAC5B,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAE7B,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;YAC3B,cAAc,CAAC,SAAS,EAAE,UAAU,EAAE,QAAQ,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC;YACpE,OAAO;SACR;QAED,MAAM,KAAK,GAAwB,aAAa,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QAC3E,KAAK,CAAC,WAAW,CAAC,CAAC,MAAwB,EAAE,MAAwB,EAAE,MAAO,EAAE,EAAE;YAChF,IAAI,MAAM,EAAE;gBACV,qCAAqC;gBACrC,KAAK,MAAM,IAAI,IAAI,MAAM,CAAC,OAAO,EAAE;oBACjC,IAAI,IAAI,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,EAAE;wBACpC,UAAU,CAAC,IAAI,CAAC,CAAC;wBACjB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;qBACxB;iBACF;gBAED,IAAI,MAAM,CAAC,QAAQ,GAAG,CAAC,EAAE;oBACvB,uFAAuF;oBACvF,MAAM,QAAQ,GAAW,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC;oBACxD,IAAI,QAAQ,GAAS,UAAU,CAAC;oBAChC,KAAK,IAAI,CAAC,GAAG,QAAQ,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;wBAC7C,MAAM,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;wBACvB,IAAI,IAAI,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,EAAE;4BACpC,QAAQ,GAAG,IAAI,CAAC;4BAChB,MAAM;yBACP;qBACF;oBAED,2BAA2B;oBAC3B,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;oBAC3D,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;iBACtC;aACF;iBAAM;gBACL,cAAc,CAAC,SAAS,EAAE,UAAU,EAAE,MAAM,CAAC,CAAC;aAC/C;QACH,CAAC,CAAC,CAAC;QACH,cAAc,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC;IACrD,CAAC,CAAC;AACJ,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"_domImpl.js","sourceRoot":"","sources":["../../../lib/_domImpl.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"_domMethods.js","sourceRoot":"","sources":["../../../lib/_domMethods.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAE,UAAU,EAAE,aAAa,EAAC,MAAM,eAAe,CAAC;AACzE,OAAO,EAAsC,IAAI,EAAW,MAAM,YAAY,CAAC;AAC/E,OAAO,EAAgB,SAAS,IAAI,gBAAgB,EAAC,MAAM,WAAW,CAAC;AAEvE,mFAAmF;AACnF,OAAO,EAAC,CAAC,EAAC,MAAM,kBAAkB,CAAC;AAEnC;;;GAGG;AACH,MAAM,QAAQ,GAAwC,IAAI,OAAO,EAAE,CAAC;AAEpE;;;GAGG;AACH,oBAAuB,IAAU,EAAE,QAA0B,EACtC,QAAyC;IAC9D,eAAe,CAAC,IAAI,EAAE,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;AAC9D,CAAC;AAED;;;;GAIG;AACH,MAAM,oBAAoB,IAAa,EAAE,QAAkB;IACzD,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;QACvC,MAAM,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC1B,IAAI,GAAG,IAAI,IAAI,IAAI,GAAG,KAAK,KAAK,EAAE;YAChC,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;SACjD;KACF;AACH,CAAC;AACD,MAAM,gBAAgB,QAAkB;IACtC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;AAC7C,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,mBAAmB,IAAa,EAAE,QAAgB,EAAE,SAAsB;IAC9E,IAAI,SAAS,KAAK,IAAI,IAAI,SAAS,KAAK,SAAS,EAAE;QACjD,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;KAChC;SAAM;QACL,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;KACxC;AACH,CAAC;AACD,MAAM,eAAe,QAAgB,EAAE,YAAmC;IACxE,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,YAAY,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC;AAC1F,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,uBAAuB,IAAa,EAAE,QAAgB,EAAE,SAAkB;IAC9E,QAAQ,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;AAClD,CAAC;AACD,MAAM,mBAAmB,QAAgB,EAAE,YAAoC;IAC7E,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,YAAY,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC;AAC9F,CAAC;AAED;;;;;GAKG;AACH,MAAM,mBAAmB,IAAU,EAAE,KAAa;IAChD,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;AACrD,CAAC;AACD,MAAM,eAAe,QAA+B;IAClD,OAAO,CAAC,IAAI,EAAE,EAAE;QACd,MAAM,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;QAC/C,UAAU,CAAC,IAAI,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,GAAG,QAAQ,CAAC,SAAS,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QACnE,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC7B,CAAC,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,MAAM,oBAAoB,IAAa,EAAE,QAAgB,EAAE,KAAa;IACrE,IAAY,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC;AACxC,CAAC;AACD,MAAM,gBAAgB,QAAgB,EAAE,QAA+B;IACrE,OAAO,CAAC,IAAI,EAAE,EAAE,CACd,UAAU,CAAC,IAAI,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC;AACxE,CAAC;AAED;;;;;;GAMG;AACH,MAAM,mBAAsB,IAAU,EAAE,QAAgB,EAAE,KAAQ;IAC/D,IAAY,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC;AAClC,CAAC;AACD,MAAM,eAAkB,QAAgB,EAAE,QAA0B;IAClE,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC;AACtF,CAAC;AAED;;;;;;GAMG;AACH,MAAM,mBAAmB,IAAa,EAAE,SAAkB;IACvD,IAAoB,CAAC,KAAK,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;AAChE,CAAC;AACD,MAAM,eAAe,YAAoC;IACvD,OAAO,CAAC,IAAI,EAAE,EAAE,CACd,UAAU,CAAC,IAAI,EAAE,YAAY,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC;AACjE,CAAC;AAED;;;;;GAKG;AACH,MAAM,mBAAmB,IAAa,EAAE,SAAkB;IACvD,IAAoB,CAAC,KAAK,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;AAChE,CAAC;AACD,MAAM,eAAe,YAAoC;IACvD,OAAO,CAAC,IAAI,EAAE,EAAE,CACd,UAAU,CAAC,IAAI,EAAE,YAAY,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC;AACjE,CAAC;AAED;;GAEG;AACH,MAAM,kBAAkB,IAAa,EAAE,SAAiB,EAAE,YAAqB,IAAI;IACjF,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC;AACvD,CAAC;AAeD,MAAM,cAAc,SAAuC,EAAE,SAAkC;IAC7F,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;QACjC,OAAO,iBAAiB,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;KACzC;SAAM,IAAI,CAAC,SAAS,IAAI,OAAO,SAAS,KAAK,SAAS,EAAE;QACvD,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;KACtD;SAAM;QACL,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,SAAS,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC;KACtF;AACH,CAAC;AAOD,MAAM,oBAAoB,MAAc,EAAE,SAAuC,EACvD,SAAkC;IAC1D,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;QACjC,OAAO,iBAAiB,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;KAC7C;SAAM;QACL,OAAO,GAAG,CAAC,MAAM,GAAG,SAAS,EAAE,SAAS,CAAC,CAAC;KAC3C;AACH,CAAC;AAED,2BAA2B,MAAc,EAAE,SAAgC;IACzE,OAAO,CAAC,IAAI,EAAE,EAAE;QACd,IAAI,SAAS,GAAgB,IAAI,CAAC;QAClC,UAAU,CAAC,IAAI,EAAE,SAAS,EAAE,CAAC,IAAY,EAAE,EAAE;YAC3C,IAAI,SAAS,EAAE;gBAAE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;aAAE;YACpD,SAAS,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;YACxC,IAAI,SAAS,EAAE;gBAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;aAAE;QACnD,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,MAAM,mBAAmB,IAAU,EAAE,GAAW,EAAE,KAAU;IAC1D,MAAM,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAC/B,IAAI,GAAG,EAAE;QACP,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;KAClB;SAAM;QACL,aAAa,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;QACjD,QAAQ,CAAC,GAAG,CAAC,IAAI,EAAE,EAAC,CAAC,GAAG,CAAC,EAAE,KAAK,EAAC,CAAC,CAAC;KACpC;AACH,CAAC;AACD,MAAM,eAAe,GAAW,EAAE,QAA4B;IAC5D,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;AACjF,CAAC;AACD,MAAM,kBAAkB,IAAU,EAAE,GAAW;IAC7C,MAAM,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAC/B,OAAO,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC;AACzB,CAAC;AAED;;;;GAIG;AACH,MAAM,yBAAyB,UAAgB,EAAE,SAAe,EAAE,OAAe;IAC/E,MAAM,IAAI,GAAG,UAAU,CAAC,UAAU,CAAC;IACnC,IAAI,IAAI,EAAE;QACR,IAAI,IAAI,CAAC;QACT,KAAK,IAAI,CAAC,GAAG,UAAU,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,KAAK,SAAS,EAAE,CAAC,GAAG,IAAI,EAAE;YACnE,IAAI,GAAG,CAAC,CAAC,WAAW,CAAC;YACrB,UAAU,CAAC,CAAC,CAAC,CAAC;YACd,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;SACrB;QACD,IAAI,OAAO,EAAE;YACX,IAAI,CAAC,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,CAAC;SACnF;KACF;AACH,CAAC;AA0CD,MAAM,sBAAyB,QAA0B,EAAE,WAAgC;IACzF,MAAM,YAAY,GAAuB,WAAW,IAAK,QAAgB,CAAC;IAC1E,OAAO,CAAC,IAAU,EAAE,EAAE;QACpB,MAAM,SAAS,GAAG,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QAChD,MAAM,UAAU,GAAG,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACjD,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;QAC5B,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAC7B,UAAU,CAAC,IAAI,EAAE,QAAQ,EACvB,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,SAAS,EAAE,UAAU,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAC3E,CAAC,CAAC;AACJ,CAAC;AAED,kBAAqB,GAAM,IAAO,OAAO,GAAG,CAAC,CAAC,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,gBAAmB,YAA8B,EAAE,WAA+B;IACtF,OAAO,WAAW,CAAC,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;AACjF,CAAC"}
|
package/lib/_domComponent.ts
DELETED
|
@@ -1,167 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Implementation of UI components that can be inserted into dom(). See documentation for
|
|
3
|
-
* createElem() and create().
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import {onDisposeElem} from './_domDispose';
|
|
7
|
-
import {DomElementMethod, update} from './_domImpl';
|
|
8
|
-
import {replaceContent} from './_domMethods';
|
|
9
|
-
import {Disposable, IDisposableOwner} from './dispose';
|
|
10
|
-
|
|
11
|
-
// Use the browser globals in a way that allows replacing them with mocks in tests.
|
|
12
|
-
import {G} from './browserGlobals';
|
|
13
|
-
|
|
14
|
-
// Static type of a class that inherits Component.
|
|
15
|
-
export interface IComponentClassType<T> {
|
|
16
|
-
new (...args: any[]): T;
|
|
17
|
-
create(owner: Element|IDisposableOwner|null, ...args: any[]): T;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* Helper that takes ownership of a component by mounting it to a parent element.
|
|
22
|
-
*/
|
|
23
|
-
class DomOwner implements IDisposableOwner {
|
|
24
|
-
constructor(private _parentElem: Element) {}
|
|
25
|
-
public autoDispose(comp: Component): void { comp.mount(this._parentElem); }
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
/**
|
|
29
|
-
* A UI component should extend this base class and implement a constructor that creates some DOM
|
|
30
|
-
* and calls this.setContent() with it. Compared to a simple function returning DOM (a
|
|
31
|
-
* "functional" component), a "class" component makes it easier to organize code into methods.
|
|
32
|
-
*
|
|
33
|
-
* In addition, a "class" component may be disposed to remove it from the DOM, although this is
|
|
34
|
-
* uncommon since a UI component is normally owned by its containing DOM.
|
|
35
|
-
*/
|
|
36
|
-
export abstract class Component extends Disposable {
|
|
37
|
-
/**
|
|
38
|
-
* Create a component using Foo.create(owner, ...args) similarly to creating any other
|
|
39
|
-
* Disposable object. The difference is that `owner` may be a DOM Element, and the content set
|
|
40
|
-
* by the constructor's setContent() call will be appended to and owned by that owner element.
|
|
41
|
-
*
|
|
42
|
-
* If the owner is not an Element, works like a regular Disposable. To add such a component to
|
|
43
|
-
* DOM, use the mount() method.
|
|
44
|
-
*/
|
|
45
|
-
// TODO add typescript overloads for strict argument checks.
|
|
46
|
-
public static create<T extends Component>(this: IComponentClassType<T>,
|
|
47
|
-
owner: Element|IDisposableOwner|null, ...args: any[]): T {
|
|
48
|
-
const _owner: IDisposableOwner|null = owner instanceof G.Element ? new DomOwner(owner) : owner;
|
|
49
|
-
return Disposable.create.call(this, _owner, ...args);
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
private _markerPre: Node = G.document.createComment('A');
|
|
53
|
-
private _markerPost: Node = G.document.createComment('B');
|
|
54
|
-
private _contentToMount: Node|null = null;
|
|
55
|
-
|
|
56
|
-
constructor() {
|
|
57
|
-
super();
|
|
58
|
-
|
|
59
|
-
// If the containing DOM is disposed, it will dispose all of our DOM (included among children
|
|
60
|
-
// of the containing DOM). Let it also dispose this Component when it gets to _markerPost.
|
|
61
|
-
// Since _unmount() is unnecessary here, we skip its work by unseting _markerPre/_markerPost.
|
|
62
|
-
onDisposeElem(this._markerPost, () => {
|
|
63
|
-
this._markerPre = this._markerPost = undefined!;
|
|
64
|
-
this.dispose();
|
|
65
|
-
});
|
|
66
|
-
|
|
67
|
-
// When the component is disposed, unmount the DOM we created (i.e. dispose and remove).
|
|
68
|
-
// Except that we skip this as unnecessary when the disposal is triggered by containing DOM.
|
|
69
|
-
this.onDispose(this._unmount, this);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
/**
|
|
73
|
-
* Inserts the content of this component into a parent DOM element.
|
|
74
|
-
*/
|
|
75
|
-
public mount(elem: Element): void {
|
|
76
|
-
// Insert the result of setContent() into the given parent element. Note that mount() must
|
|
77
|
-
// only ever be called once. It is normally called as part of .create().
|
|
78
|
-
if (!this._markerPost) { throw new Error('Component mount() called when already disposed'); }
|
|
79
|
-
if (this._markerPost.parentNode) { throw new Error('Component mount() called twice'); }
|
|
80
|
-
update(elem, this._markerPre, this._contentToMount, this._markerPost);
|
|
81
|
-
this._contentToMount = null;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
/**
|
|
85
|
-
* Components should call setContent() with their DOM content, typically in the constructor. If
|
|
86
|
-
* called outside the constructor, setContent() will replace previously set DOM. It accepts any
|
|
87
|
-
* DOM Node; use dom.frag() to insert multiple nodes together.
|
|
88
|
-
*/
|
|
89
|
-
protected setContent(content: Node): void {
|
|
90
|
-
if (this._markerPost) {
|
|
91
|
-
if (this._markerPost.parentNode) {
|
|
92
|
-
// Component is already mounted. Replace previous content.
|
|
93
|
-
replaceContent(this._markerPre!, this._markerPost, content);
|
|
94
|
-
} else {
|
|
95
|
-
// Component is created but not yet mounted. Save the content for the mount() call.
|
|
96
|
-
this._contentToMount = content;
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
/**
|
|
102
|
-
* Detaches and disposes the DOM created and attached in mount().
|
|
103
|
-
*/
|
|
104
|
-
private _unmount(): void {
|
|
105
|
-
// Dispose the owned content, and remove it from the DOM. The conditional skips the work when
|
|
106
|
-
// the unmounting is triggered by the disposal of the containing DOM.
|
|
107
|
-
if (this._markerPost && this._markerPost.parentNode) {
|
|
108
|
-
const elem = this._markerPost.parentNode;
|
|
109
|
-
replaceContent(this._markerPre!, this._markerPost, null);
|
|
110
|
-
elem.removeChild(this._markerPre!);
|
|
111
|
-
elem.removeChild(this._markerPost);
|
|
112
|
-
}
|
|
113
|
-
this._markerPre = this._markerPost = undefined!;
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
/**
|
|
118
|
-
* Construct and insert a UI component into the given DOM element. The component must extend
|
|
119
|
-
* dom.Component, and should build DOM and call setContent(DOM) in the constructor. DOM may be any
|
|
120
|
-
* Node. Use dom.frag() to insert multiple nodes together.
|
|
121
|
-
*
|
|
122
|
-
* Logically, the parent `elem` owns the created component, and the component owns the DOM set by
|
|
123
|
-
* setContent(). If the parent is disposed, so is the component and its DOM. If the component is
|
|
124
|
-
* somehow disposed directly, then its DOM is disposed and removed from `elem`.
|
|
125
|
-
*
|
|
126
|
-
* Note the correct usage:
|
|
127
|
-
*
|
|
128
|
-
* dom('div', dom.create(Comp1), dom.create(Comp2, ...args))
|
|
129
|
-
*
|
|
130
|
-
* To understand why the syntax is such, consider a potential alterntive such as:
|
|
131
|
-
*
|
|
132
|
-
* dom('div', _insert_(new Comp1()), _insert_(new Comp2(...args))
|
|
133
|
-
*
|
|
134
|
-
* In both cases, the constructor for Comp1 runs before the constructor for Comp2. What happens
|
|
135
|
-
* when Comp2's constructor throws an exception? In the second case, nothing yet owns the
|
|
136
|
-
* created Comp1 component, and it will never get cleaned up. In the first, correct case,
|
|
137
|
-
* dom('div') element gets ownership of it early enough and will dispose it.
|
|
138
|
-
*
|
|
139
|
-
* @param {Element} elem: The element to which to append the newly constructed component.
|
|
140
|
-
* @param {Class} ComponentClass: The component class to instantiate. It must extend
|
|
141
|
-
* dom.Component(...) and implement the render() method.
|
|
142
|
-
* @param {Objects} ...args: Arguments to the Component's constructor.
|
|
143
|
-
*/
|
|
144
|
-
// TODO add typescript overloads for strict argument checks.
|
|
145
|
-
export function create<T extends Component>(cls: IComponentClassType<T>, ...args: any[]): DomElementMethod {
|
|
146
|
-
return (elem) => { cls.create(elem, ...args); };
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
/**
|
|
150
|
-
* If you need to initialize a component after creation, you may do it in the middle of a dom()
|
|
151
|
-
* call using createInit(), in which the last of args is initFunc: a function called with the
|
|
152
|
-
* constructed instance of the component:
|
|
153
|
-
* dom.createInit(MyComponent, ...args, c => {
|
|
154
|
-
* c.addChild(...);
|
|
155
|
-
* c.setOption(...);
|
|
156
|
-
* });
|
|
157
|
-
* The benefit of such inline construction is that the component is owned by the dom element as
|
|
158
|
-
* soon as it's created, so an exception in the init function or later among dom()'s arguments
|
|
159
|
-
* will trigger a cleanup.
|
|
160
|
-
*/
|
|
161
|
-
export function createInit<T>(cls: IComponentClassType<T>, ...args: any[]): DomElementMethod {
|
|
162
|
-
return (elem) => {
|
|
163
|
-
const initFunc: (c: T) => void = args.pop();
|
|
164
|
-
const c = cls.create(elem, ...args);
|
|
165
|
-
initFunc(c);
|
|
166
|
-
};
|
|
167
|
-
}
|