grainjs 1.0.1 → 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.
Files changed (78) hide show
  1. package/README.md +54 -9
  2. package/dist/cjs/index.js +24 -17
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/cjs/lib/PriorityQueue.d.ts +1 -1
  5. package/dist/cjs/lib/PriorityQueue.js +1 -0
  6. package/dist/cjs/lib/PriorityQueue.js.map +1 -1
  7. package/dist/cjs/lib/_computed_queue.js +1 -0
  8. package/dist/cjs/lib/_computed_queue.js.map +1 -1
  9. package/dist/cjs/lib/binding.js +1 -0
  10. package/dist/cjs/lib/binding.js.map +1 -1
  11. package/dist/cjs/lib/browserGlobals.d.ts +4 -1
  12. package/dist/cjs/lib/browserGlobals.js +2 -0
  13. package/dist/cjs/lib/browserGlobals.js.map +1 -1
  14. package/dist/cjs/lib/computed.js +1 -0
  15. package/dist/cjs/lib/computed.js.map +1 -1
  16. package/dist/cjs/lib/dispose.js +1 -0
  17. package/dist/cjs/lib/dispose.js.map +1 -1
  18. package/dist/cjs/lib/dom.d.ts +2 -0
  19. package/dist/cjs/lib/dom.js +20 -10
  20. package/dist/cjs/lib/dom.js.map +1 -1
  21. package/dist/cjs/lib/domComponent.d.ts +1 -4
  22. package/dist/cjs/lib/domComponent.js +2 -65
  23. package/dist/cjs/lib/domComponent.js.map +1 -1
  24. package/dist/cjs/lib/domComputed.d.ts +23 -3
  25. package/dist/cjs/lib/domComputed.js +27 -0
  26. package/dist/cjs/lib/domComputed.js.map +1 -1
  27. package/dist/cjs/lib/domDispose.js +1 -0
  28. package/dist/cjs/lib/domDispose.js.map +1 -1
  29. package/dist/cjs/lib/domForEach.d.ts +2 -2
  30. package/dist/cjs/lib/domForEach.js +38 -39
  31. package/dist/cjs/lib/domForEach.js.map +1 -1
  32. package/dist/cjs/lib/domImpl.js +1 -0
  33. package/dist/cjs/lib/domImpl.js.map +1 -1
  34. package/dist/cjs/lib/domMethods.js +3 -1
  35. package/dist/cjs/lib/domMethods.js.map +1 -1
  36. package/dist/cjs/lib/domevent.js +1 -0
  37. package/dist/cjs/lib/domevent.js.map +1 -1
  38. package/dist/cjs/lib/emit.js +1 -0
  39. package/dist/cjs/lib/emit.js.map +1 -1
  40. package/dist/cjs/lib/kowrap.js +1 -0
  41. package/dist/cjs/lib/kowrap.js.map +1 -1
  42. package/dist/cjs/lib/obsArray.js +1 -0
  43. package/dist/cjs/lib/obsArray.js.map +1 -1
  44. package/dist/cjs/lib/observable.js +2 -1
  45. package/dist/cjs/lib/observable.js.map +1 -1
  46. package/dist/cjs/lib/pureComputed.js +1 -0
  47. package/dist/cjs/lib/pureComputed.js.map +1 -1
  48. package/dist/cjs/lib/styled.js +1 -0
  49. package/dist/cjs/lib/styled.js.map +1 -1
  50. package/dist/cjs/lib/subscribe.js +1 -0
  51. package/dist/cjs/lib/subscribe.js.map +1 -1
  52. package/dist/cjs/lib/util.js +1 -0
  53. package/dist/cjs/lib/util.js.map +1 -1
  54. package/dist/cjs/lib/widgets/input.js +1 -0
  55. package/dist/cjs/lib/widgets/input.js.map +1 -1
  56. package/dist/cjs/lib/widgets/select.js +1 -0
  57. package/dist/cjs/lib/widgets/select.js.map +1 -1
  58. package/dist/esm/lib/browserGlobals.js +1 -0
  59. package/dist/esm/lib/browserGlobals.js.map +1 -1
  60. package/dist/esm/lib/dom.js +2 -0
  61. package/dist/esm/lib/dom.js.map +1 -1
  62. package/dist/esm/lib/domComponent.js +2 -66
  63. package/dist/esm/lib/domComponent.js.map +1 -1
  64. package/dist/esm/lib/domComputed.js +25 -1
  65. package/dist/esm/lib/domComputed.js.map +1 -1
  66. package/dist/esm/lib/domForEach.js +37 -39
  67. package/dist/esm/lib/domForEach.js.map +1 -1
  68. package/dist/esm/lib/domevent.js.map +1 -1
  69. package/dist/grain-full.debug.js +137 -135
  70. package/dist/grain-full.min.js +1 -1
  71. package/dist/grain-full.min.js.map +1 -1
  72. package/lib/browserGlobals.ts +3 -1
  73. package/lib/dom.ts +2 -0
  74. package/lib/domComponent.ts +2 -13
  75. package/lib/domComputed.ts +40 -5
  76. package/lib/domForEach.ts +7 -10
  77. package/lib/domevent.ts +1 -1
  78. package/package.json +33 -34
@@ -1,23 +1,30 @@
1
1
  (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.grainjs = f()}})(function(){var define,module,exports;return (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
2
2
  "use strict";
3
- function __export(m) {
4
- for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
5
- }
3
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
4
+ if (k2 === undefined) k2 = k;
5
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
6
+ }) : (function(o, m, k, k2) {
7
+ if (k2 === undefined) k2 = k;
8
+ o[k2] = m[k];
9
+ }));
10
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
11
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
12
+ };
6
13
  Object.defineProperty(exports, "__esModule", { value: true });
7
- __export(require("./lib/binding"));
8
- __export(require("./lib/computed"));
9
- __export(require("./lib/dispose"));
10
- __export(require("./lib/dom"));
11
- __export(require("./lib/emit"));
12
- __export(require("./lib/kowrap"));
13
- __export(require("./lib/obsArray"));
14
- __export(require("./lib/observable"));
15
- __export(require("./lib/pureComputed"));
16
- __export(require("./lib/styled"));
17
- __export(require("./lib/subscribe"));
18
- __export(require("./lib/util"));
19
- __export(require("./lib/widgets/input"));
20
- __export(require("./lib/widgets/select"));
14
+ __exportStar(require("./lib/binding"), exports);
15
+ __exportStar(require("./lib/computed"), exports);
16
+ __exportStar(require("./lib/dispose"), exports);
17
+ __exportStar(require("./lib/dom"), exports);
18
+ __exportStar(require("./lib/emit"), exports);
19
+ __exportStar(require("./lib/kowrap"), exports);
20
+ __exportStar(require("./lib/obsArray"), exports);
21
+ __exportStar(require("./lib/observable"), exports);
22
+ __exportStar(require("./lib/pureComputed"), exports);
23
+ __exportStar(require("./lib/styled"), exports);
24
+ __exportStar(require("./lib/subscribe"), exports);
25
+ __exportStar(require("./lib/util"), exports);
26
+ __exportStar(require("./lib/widgets/input"), exports);
27
+ __exportStar(require("./lib/widgets/select"), exports);
21
28
 
22
29
  },{"./lib/binding":4,"./lib/computed":6,"./lib/dispose":7,"./lib/dom":8,"./lib/emit":16,"./lib/kowrap":17,"./lib/obsArray":18,"./lib/observable":19,"./lib/pureComputed":20,"./lib/styled":21,"./lib/subscribe":22,"./lib/util":23,"./lib/widgets/input":24,"./lib/widgets/select":25}],2:[function(require,module,exports){
23
30
  "use strict";
@@ -30,6 +37,7 @@ __export(require("./lib/widgets/select"));
30
37
  * returns the most-prior element.
31
38
  */
32
39
  Object.defineProperty(exports, "__esModule", { value: true });
40
+ exports.PriorityQueue = void 0;
33
41
  class PriorityQueue {
34
42
  constructor(_isPrior) {
35
43
  this._isPrior = _isPrior;
@@ -107,6 +115,7 @@ exports.PriorityQueue = PriorityQueue;
107
115
  * call, or of bundleChanges() call, the queue gets processed in order of _priority.
108
116
  */
109
117
  Object.defineProperty(exports, "__esModule", { value: true });
118
+ exports.bundleChanges = exports.compute = exports._getPriority = exports.DepItem = void 0;
110
119
  const PriorityQueue_1 = require("./PriorityQueue");
111
120
  /**
112
121
  * DepItem is an item in a dependency relationship. It may depend on other DepItems. It is used
@@ -228,6 +237,7 @@ exports.bundleChanges = bundleChanges;
228
237
  * a plain value, or a function from which it builds a computed.
229
238
  */
230
239
  Object.defineProperty(exports, "__esModule", { value: true });
240
+ exports.subscribeElem = exports.subscribeBindable = void 0;
231
241
  const computed_1 = require("./computed");
232
242
  const domDispose_1 = require("./domDispose");
233
243
  const observable_1 = require("./observable");
@@ -293,6 +303,8 @@ exports.subscribeElem = subscribeElem;
293
303
  * });
294
304
  */
295
305
  Object.defineProperty(exports, "__esModule", { value: true });
306
+ exports.popGlobals = exports.pushGlobals = exports.G = void 0;
307
+ ;
296
308
  function _updateGlobals(dest, source) {
297
309
  dest.DocumentFragment = source.DocumentFragment;
298
310
  dest.Element = source.Element;
@@ -364,6 +376,7 @@ exports.popGlobals = popGlobals;
364
376
  * ownership of the same disposable that the callback returns.
365
377
  */
366
378
  Object.defineProperty(exports, "__esModule", { value: true });
379
+ exports.computed = exports.Computed = void 0;
367
380
  const dispose_1 = require("./dispose");
368
381
  const observable_1 = require("./observable");
369
382
  const subscribe_1 = require("./subscribe");
@@ -530,6 +543,7 @@ exports.computed = computed;
530
543
  * Bar.ctor<T>().create(...) // <-- works, creates Bar<T>, and does type-checking!
531
544
  */
532
545
  Object.defineProperty(exports, "__esModule", { value: true });
546
+ exports.setDisposeOwner = exports.MultiHolder = exports.Holder = exports.Disposable = void 0;
533
547
  const emit_1 = require("./emit");
534
548
  // Internal "owner" of disposable objects which doesn't actually dispose or keep track of them. It
535
549
  // is the effective owner when creating a Disposable with `new Foo()` rather than `Foo.create()`.
@@ -807,18 +821,26 @@ class DisposeListener extends emit_1.LLink {
807
821
  * creates Node <a id="link" class="c1 c2" href={{url}}Hello <span>world</span></a>,
808
822
  * identical to the first example above.
809
823
  */
810
- function __export(m) {
811
- for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
812
- }
824
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
825
+ if (k2 === undefined) k2 = k;
826
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
827
+ }) : (function(o, m, k, k2) {
828
+ if (k2 === undefined) k2 = k;
829
+ o[k2] = m[k];
830
+ }));
831
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
832
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
833
+ };
813
834
  Object.defineProperty(exports, "__esModule", { value: true });
835
+ exports.dom = void 0;
814
836
  // We keep various dom-related functions organized in private modules, but they are exposed here.
815
- __export(require("./domImpl"));
816
- __export(require("./domComponent"));
817
- __export(require("./domComputed"));
818
- __export(require("./domDispose"));
819
- __export(require("./domForEach"));
820
- __export(require("./domMethods"));
821
- __export(require("./domevent"));
837
+ __exportStar(require("./domImpl"), exports);
838
+ __exportStar(require("./domComponent"), exports);
839
+ __exportStar(require("./domComputed"), exports);
840
+ __exportStar(require("./domDispose"), exports);
841
+ __exportStar(require("./domForEach"), exports);
842
+ __exportStar(require("./domMethods"), exports);
843
+ __exportStar(require("./domevent"), exports);
822
844
  const _domComponent = require("./domComponent");
823
845
  const _domComputed = require("./domComputed");
824
846
  const _domDispose = require("./domDispose");
@@ -869,7 +891,9 @@ exports.dom = dom;
869
891
  dom.getData = _domMethods.getData;
870
892
  dom.replaceContent = _domComputed.replaceContent;
871
893
  dom.domComputed = _domComputed.domComputed;
894
+ dom.domComputedOwned = _domComputed.domComputedOwned;
872
895
  dom.maybe = _domComputed.maybe;
896
+ dom.maybeOwned = _domComputed.maybeOwned;
873
897
  dom.forEach = _domForEach.forEach;
874
898
  dom.create = _domComponent.create;
875
899
  dom.onElem = domevent.onElem;
@@ -884,86 +908,25 @@ exports.dom = dom;
884
908
  },{"./domComponent":9,"./domComputed":10,"./domDispose":11,"./domForEach":12,"./domImpl":13,"./domMethods":14,"./domevent":15}],9:[function(require,module,exports){
885
909
  "use strict";
886
910
  Object.defineProperty(exports, "__esModule", { value: true });
887
- /**
888
- * UI components that can be inserted into dom().
889
- *
890
- * Components are created and inserted using dom.create():
891
- *
892
- * dom('div',
893
- * dom.create(MyWidget, ...myArgs), // Calls MyWidget.create(owner, ...myArgs)
894
- * dom.create(createMyWidget, ...myArgs), // Calls createMyWidget(owner, ...myArgs)
895
- * )
896
- *
897
- * The first argument may be a function, which is called directly, or a class with a .create()
898
- * static method, in which case that's what gets called.
899
- *
900
- * In both cases, the call gets a first argument of `owner` followed by the rest of the arguments
901
- * to dom.create(). The `owner` is a MultiHolder that will own this component. This works
902
- * naturally with any class that derives from Disposable, since it then has a suitable static
903
- * create() method.
904
- *
905
- * Function-based components may use owner to easily handle disposal. For example:
906
- *
907
- * dom.create(createMyWidget)
908
- * function createMyWidget(owner) {
909
- * const foo = Foo.create(owner);
910
- * return dom('div', foo.getTitle());
911
- * }
912
- *
913
- * The `owner` argument is the main benefit of dom.create(). Logically, the owner is the DOM where
914
- * the component is attached. When the parent DOM element is disposed, so is the component.
915
- *
916
- * [Explanation] To understand why the syntax is such, consider a potential alternative such as:
917
- *
918
- * dom('div', _insert_(new Comp1()), _insert_(new Comp2(...args)))
919
- *
920
- * In both cases, the constructor for Comp1 runs before the constructor for Comp2. What happens
921
- * when Comp2's constructor throws an exception? In the second case, nothing yet owns the
922
- * created Comp1 component, and it will never get cleaned up. With dom.create(), the DOM
923
- * gets ownership of Comp1 early enough and will dispose it.
924
- *
925
- * A function component may return DOM directly. A class component returns the class instance,
926
- * which must have a .buildDom() method which will be called right after the constructor to get
927
- * the DOM. Note that buildDom is only called once.
928
- *
929
- * A function component may also return an object with .buildDom(). So these are equivalent:
930
- *
931
- * dom.create(MyWidget)
932
- * dom.create((owner) => MyWidget.create(owner))
933
- *
934
- * Note that ownership should be handled using the `owner` argument. Don't do this:
935
- *
936
- * // NON-EXAMPLE: Nothing will dispose the created object:
937
- * // dom.create(() => new MyWidget());
938
- *
939
- * The returned DOM may includes Nodes, strings, and domComputed() values, as well as arrays of
940
- * any of these. In other words, any DomArg goes except DomMethods. All the DOM returned will be
941
- * disposed when the containing element is disposed, followed by the `owner` itself.
942
- */
943
- const dispose_1 = require("./dispose");
911
+ exports.create = void 0;
944
912
  const domComputed_1 = require("./domComputed");
945
- const domDispose_1 = require("./domDispose");
946
913
  function create(fn, ...args) {
947
- const [markerPre, markerPost, func] = domComputed_1.domComputed(null, () => {
948
- // Note that the callback to domComputed() is not called until the markers have been attached
949
- // to the parent element. We attach the MultiHolder's disposal to markerPost the way
950
- // domComputed() normally attaches its own bindings.
951
- const owner = dispose_1.MultiHolder.create(null);
952
- domDispose_1.autoDisposeElem(markerPost, owner);
914
+ return domComputed_1.domComputedOwned(null, (owner) => {
953
915
  const value = ('create' in fn) ?
954
916
  fn.create(owner, ...args) :
955
917
  fn(owner, ...args);
956
918
  return (value && typeof value === 'object' && 'buildDom' in value) ?
957
919
  value.buildDom() : value;
958
920
  });
959
- return [markerPre, markerPost, func];
960
921
  }
961
922
  exports.create = create;
962
923
 
963
- },{"./dispose":7,"./domComputed":10,"./domDispose":11}],10:[function(require,module,exports){
924
+ },{"./domComputed":10}],10:[function(require,module,exports){
964
925
  "use strict";
965
926
  Object.defineProperty(exports, "__esModule", { value: true });
927
+ exports.maybeOwned = exports.maybe = exports.domComputedOwned = exports.domComputed = exports.replaceContent = void 0;
966
928
  const binding_1 = require("./binding");
929
+ const dispose_1 = require("./dispose");
967
930
  const domDispose_1 = require("./domDispose");
968
931
  const domImpl_1 = require("./domImpl");
969
932
  // Use the browser globals in a way that allows replacing them with mocks in tests.
@@ -998,6 +961,20 @@ function domComputed(valueObs, contentFunc = identity) {
998
961
  }];
999
962
  }
1000
963
  exports.domComputed = domComputed;
964
+ /**
965
+ * Like domComputed(), but the callback gets an additional first argument, owner, which may be
966
+ * used to take ownership of objects created by the callback. These will be disposed before each
967
+ * new call to the callback, and when the containing DOM is disposed.
968
+ *
969
+ * domComputedOwned(valueObs, (owner, value) => Editor.create(owner, value).renderSomething());
970
+ */
971
+ function domComputedOwned(valueObs, contentFunc) {
972
+ const holder = dispose_1.Holder.create(null);
973
+ const [markerPre, markerPost, func] = domComputed(valueObs, (val) => contentFunc(dispose_1.MultiHolder.create(holder), val));
974
+ domDispose_1.autoDisposeElem(markerPost, holder);
975
+ return [markerPre, markerPost, func];
976
+ }
977
+ exports.domComputedOwned = domComputedOwned;
1001
978
  function identity(arg) { return arg; }
1002
979
  /**
1003
980
  * Conditionally appends DOM to an element. The value may be an observable or function (from which
@@ -1025,10 +1002,22 @@ function maybe(boolValueObs, contentFunc) {
1025
1002
  return domComputed(boolValueObs, (value) => value ? contentFunc(value) : null);
1026
1003
  }
1027
1004
  exports.maybe = maybe;
1005
+ /**
1006
+ * Like maybe(), but the callback gets an additional first argument, owner, which may be used to
1007
+ * take ownership of objects created by the callback. These will be disposed before each new call
1008
+ * to the callback, and when the condition becomes false or the containing DOM gets disposed.
1009
+ *
1010
+ * maybeOwned(showEditor, (owner) => Editor.create(owner).renderSomething());
1011
+ */
1012
+ function maybeOwned(boolValueObs, contentFunc) {
1013
+ return domComputedOwned(boolValueObs, (owner, value) => value ? contentFunc(owner, value) : null);
1014
+ }
1015
+ exports.maybeOwned = maybeOwned;
1028
1016
 
1029
- },{"./binding":4,"./browserGlobals":5,"./domDispose":11,"./domImpl":13}],11:[function(require,module,exports){
1017
+ },{"./binding":4,"./browserGlobals":5,"./dispose":7,"./domDispose":11,"./domImpl":13}],11:[function(require,module,exports){
1030
1018
  "use strict";
1031
1019
  Object.defineProperty(exports, "__esModule", { value: true });
1020
+ exports.autoDispose = exports.autoDisposeElem = exports.onDispose = exports.onDisposeElem = exports.domDispose = exports.domDisposeHooks = exports._disposeNode = void 0;
1032
1021
  /**
1033
1022
  * Private global disposal map. It maintains the association between DOM nodes and cleanup
1034
1023
  * functions added with dom.onDispose(). To support multiple disposers on one element, we use a
@@ -1136,6 +1125,7 @@ exports.autoDispose = autoDispose;
1136
1125
  },{}],12:[function(require,module,exports){
1137
1126
  "use strict";
1138
1127
  Object.defineProperty(exports, "__esModule", { value: true });
1128
+ exports.forEach = void 0;
1139
1129
  const domComputed_1 = require("./domComputed");
1140
1130
  const domDispose_1 = require("./domDispose");
1141
1131
  const domImpl_1 = require("./domImpl");
@@ -1161,55 +1151,54 @@ const browserGlobals_1 = require("./browserGlobals");
1161
1151
  * itemCreateFunc().
1162
1152
  */
1163
1153
  function forEach(obsArray, itemCreateFunc) {
1164
- return (elem) => {
1165
- const markerPre = browserGlobals_1.G.document.createComment('a');
1166
- const markerPost = browserGlobals_1.G.document.createComment('b');
1167
- elem.appendChild(markerPre);
1168
- elem.appendChild(markerPost);
1169
- if (Array.isArray(obsArray)) {
1170
- domComputed_1.replaceContent(markerPre, markerPost, obsArray.map(itemCreateFunc));
1171
- return;
1172
- }
1173
- const nodes = obsArray_1.computedArray(obsArray, itemCreateFunc);
1174
- // Be sure to dispose the newly-created array when the DOM it's associated with is gone.
1175
- domDispose_1.autoDisposeElem(markerPost, nodes);
1176
- nodes.addListener((newArr, oldArr, splice) => {
1177
- if (splice) {
1178
- // Remove the elements that are gone.
1179
- for (const node of splice.deleted) {
1180
- if (node && node.parentNode === elem) {
1181
- domDispose_1.domDispose(node);
1182
- elem.removeChild(node);
1183
- }
1184
- }
1185
- if (splice.numAdded > 0) {
1186
- // Find a valid child immediately following the spliced out portion, for DOM insertion.
1187
- const endIndex = splice.start + splice.numAdded;
1188
- let nextElem = markerPost;
1189
- for (let i = endIndex; i < newArr.length; i++) {
1190
- const node = newArr[i];
1154
+ const markerPre = browserGlobals_1.G.document.createComment('a');
1155
+ const markerPost = browserGlobals_1.G.document.createComment('b');
1156
+ return [markerPre, markerPost, (elem) => {
1157
+ if (Array.isArray(obsArray)) {
1158
+ domComputed_1.replaceContent(markerPre, markerPost, obsArray.map(itemCreateFunc));
1159
+ return;
1160
+ }
1161
+ const nodes = obsArray_1.computedArray(obsArray, itemCreateFunc);
1162
+ // Be sure to dispose the newly-created array when the DOM it's associated with is gone.
1163
+ domDispose_1.autoDisposeElem(markerPost, nodes);
1164
+ nodes.addListener((newArr, oldArr, splice) => {
1165
+ if (splice) {
1166
+ // Remove the elements that are gone.
1167
+ for (const node of splice.deleted) {
1191
1168
  if (node && node.parentNode === elem) {
1192
- nextElem = node;
1193
- break;
1169
+ domDispose_1.domDispose(node);
1170
+ elem.removeChild(node);
1194
1171
  }
1195
1172
  }
1196
- // Insert the new elements.
1197
- const content = domImpl_1.frag(newArr.slice(splice.start, endIndex));
1198
- elem.insertBefore(content, nextElem);
1173
+ if (splice.numAdded > 0) {
1174
+ // Find a valid child immediately following the spliced out portion, for DOM insertion.
1175
+ const endIndex = splice.start + splice.numAdded;
1176
+ let nextElem = markerPost;
1177
+ for (let i = endIndex; i < newArr.length; i++) {
1178
+ const node = newArr[i];
1179
+ if (node && node.parentNode === elem) {
1180
+ nextElem = node;
1181
+ break;
1182
+ }
1183
+ }
1184
+ // Insert the new elements.
1185
+ const content = domImpl_1.frag(newArr.slice(splice.start, endIndex));
1186
+ elem.insertBefore(content, nextElem);
1187
+ }
1199
1188
  }
1200
- }
1201
- else {
1202
- domComputed_1.replaceContent(markerPre, markerPost, newArr);
1203
- }
1204
- });
1205
- domComputed_1.replaceContent(markerPre, markerPost, nodes.get());
1206
- };
1189
+ else {
1190
+ domComputed_1.replaceContent(markerPre, markerPost, newArr);
1191
+ }
1192
+ });
1193
+ domComputed_1.replaceContent(markerPre, markerPost, nodes.get());
1194
+ }];
1207
1195
  }
1208
1196
  exports.forEach = forEach;
1209
1197
 
1210
1198
  },{"./browserGlobals":5,"./domComputed":10,"./domDispose":11,"./domImpl":13,"./obsArray":18}],13:[function(require,module,exports){
1211
1199
  "use strict";
1212
1200
  Object.defineProperty(exports, "__esModule", { value: true });
1201
+ exports.findAll = exports.find = exports.frag = exports.update = exports.svg = exports.dom = void 0;
1213
1202
  const domDispose_1 = require("./domDispose");
1214
1203
  const domMethods_1 = require("./domMethods");
1215
1204
  // Use the browser globals in a way that allows replacing them with mocks in tests.
@@ -1381,6 +1370,7 @@ exports.findAll = findAll;
1381
1370
  },{"./browserGlobals":5,"./domDispose":11,"./domMethods":14}],14:[function(require,module,exports){
1382
1371
  "use strict";
1383
1372
  Object.defineProperty(exports, "__esModule", { value: true });
1373
+ exports.noTestId = exports.makeTestId = exports.getData = exports.data = exports.dataElem = exports.clsPrefix = exports.cls = exports.clsElem = exports.hide = exports.hideElem = exports.show = exports.showElem = exports.prop = exports.propElem = exports.style = exports.styleElem = exports.text = exports.textElem = exports.boolAttr = exports.boolAttrElem = exports.attr = exports.attrElem = exports.attrs = exports.attrsElem = void 0;
1384
1374
  const binding_1 = require("./binding");
1385
1375
  const domDispose_1 = require("./domDispose");
1386
1376
  // Use the browser globals in a way that allows replacing them with mocks in tests.
@@ -1601,7 +1591,8 @@ exports.makeTestId = makeTestId;
1601
1591
  /**
1602
1592
  * See documentation for TestId above.
1603
1593
  */
1604
- exports.noTestId = (name) => null;
1594
+ const noTestId = (name) => null;
1595
+ exports.noTestId = noTestId;
1605
1596
 
1606
1597
  },{"./binding":4,"./browserGlobals":5,"./domDispose":11}],15:[function(require,module,exports){
1607
1598
  "use strict";
@@ -1646,6 +1637,7 @@ exports.noTestId = (name) => null;
1646
1637
  * let lis = domevent.onElem(elem, 'mouseup', e => { lis.dispose(); other_work(); });
1647
1638
  */
1648
1639
  Object.defineProperty(exports, "__esModule", { value: true });
1640
+ exports.onKeyDown = exports.onKeyPress = exports.onKeyElem = exports.onMatch = exports.onMatchElem = exports.on = exports.onElem = void 0;
1649
1641
  function _findMatch(inner, outer, selector) {
1650
1642
  for (let el = inner; el && el !== outer; el = el.parentElement) {
1651
1643
  if (el.matches(selector)) {
@@ -1797,6 +1789,7 @@ exports.onKeyDown = onKeyDown;
1797
1789
  * emitter.emit("hello", "world");
1798
1790
  */
1799
1791
  Object.defineProperty(exports, "__esModule", { value: true });
1792
+ exports.Listener = exports.Emitter = exports.LLink = void 0;
1800
1793
  // Note about a possible alternative implementation.
1801
1794
  //
1802
1795
  // We could implement the same interface using an array of listeners. Certain issues apply, in
@@ -1966,6 +1959,7 @@ exports.Listener = Listener;
1966
1959
  * the returned wrapper should not be disposed; it's tied to the lifetime of the wrapped object.
1967
1960
  */
1968
1961
  Object.defineProperty(exports, "__esModule", { value: true });
1962
+ exports.setupKoDisposal = exports.toKo = exports.KoWrapObs = exports.fromKo = void 0;
1969
1963
  const domDispose_1 = require("./domDispose");
1970
1964
  const observable_1 = require("./observable");
1971
1965
  const fromKoWrappers = new WeakMap();
@@ -2114,6 +2108,7 @@ exports.setupKoDisposal = setupKoDisposal;
2114
2108
  * ownership of those disposables that are added to it as array elements.
2115
2109
  */
2116
2110
  Object.defineProperty(exports, "__esModule", { value: true });
2111
+ exports.LiveIndex = exports.makeLiveIndex = exports.computedArray = exports.ComputedArray = exports.obsArray = exports.MutableObsArray = exports.ObsArray = void 0;
2117
2112
  const dispose_1 = require("./dispose");
2118
2113
  const observable_1 = require("./observable");
2119
2114
  const subscribe_1 = require("./subscribe");
@@ -2402,11 +2397,12 @@ exports.LiveIndex = LiveIndex;
2402
2397
  * dependency is created, and which observables the dependency connects.
2403
2398
  */
2404
2399
  Object.defineProperty(exports, "__esModule", { value: true });
2400
+ exports.obsHolder = exports.observable = exports.Observable = exports.BaseObservable = exports.bundleChanges = void 0;
2405
2401
  const _computed_queue_1 = require("./_computed_queue");
2406
2402
  const dispose_1 = require("./dispose");
2407
2403
  const emit_1 = require("./emit");
2408
2404
  var _computed_queue_2 = require("./_computed_queue");
2409
- exports.bundleChanges = _computed_queue_2.bundleChanges;
2405
+ Object.defineProperty(exports, "bundleChanges", { enumerable: true, get: function () { return _computed_queue_2.bundleChanges; } });
2410
2406
  class BaseObservable {
2411
2407
  /**
2412
2408
  * Internal constructor for an Observable. You should use observable() function instead.
@@ -2582,6 +2578,7 @@ exports.obsHolder = obsHolder;
2582
2578
  * unused (since it's not registered with dependencies), so it is not necessary to dispose it.
2583
2579
  */
2584
2580
  Object.defineProperty(exports, "__esModule", { value: true });
2581
+ exports.pureComputed = exports.PureComputed = void 0;
2585
2582
  const observable_1 = require("./observable");
2586
2583
  const subscribe_1 = require("./subscribe");
2587
2584
  function _noWrite() {
@@ -2756,6 +2753,7 @@ exports.pureComputed = pureComputed;
2756
2753
  * `);
2757
2754
  */
2758
2755
  Object.defineProperty(exports, "__esModule", { value: true });
2756
+ exports.keyframes = exports.styled = void 0;
2759
2757
  // Use the browser globals in a way that allows replacing them with mocks in tests.
2760
2758
  const browserGlobals_1 = require("./browserGlobals");
2761
2759
  const domImpl_1 = require("./domImpl");
@@ -2858,6 +2856,7 @@ class KeyframePiece extends StylePiece {
2858
2856
  * subscribe(...deps, ((use, ...depValues) => READ_CALLBACK));
2859
2857
  */
2860
2858
  Object.defineProperty(exports, "__esModule", { value: true });
2859
+ exports.subscribe = exports.Subscription = void 0;
2861
2860
  const _computed_queue_1 = require("./_computed_queue");
2862
2861
  const kowrap_1 = require("./kowrap");
2863
2862
  // Constant empty array, which we use to avoid allocating new read-only empty arrays.
@@ -2982,6 +2981,7 @@ exports.subscribe = subscribe;
2982
2981
  },{"./_computed_queue":3,"./kowrap":17}],23:[function(require,module,exports){
2983
2982
  "use strict";
2984
2983
  Object.defineProperty(exports, "__esModule", { value: true });
2984
+ exports.bindBU = exports.bindUB = exports.bindB = void 0;
2985
2985
  /**
2986
2986
  * Returns f such that f() calls func(...boundArgs), i.e. optimizes `() => func(...boundArgs)`.
2987
2987
  * It is faster on node6 by 57-92%.
@@ -3045,6 +3045,7 @@ exports.bindBU = bindBU;
3045
3045
  },{}],24:[function(require,module,exports){
3046
3046
  "use strict";
3047
3047
  Object.defineProperty(exports, "__esModule", { value: true });
3048
+ exports.input = void 0;
3048
3049
  /**
3049
3050
  * General INPUT widget.
3050
3051
  */
@@ -3084,6 +3085,7 @@ exports.input = input;
3084
3085
  },{"../../index":1}],25:[function(require,module,exports){
3085
3086
  "use strict";
3086
3087
  Object.defineProperty(exports, "__esModule", { value: true });
3088
+ exports.select = void 0;
3087
3089
  /**
3088
3090
  * Select dropdown widget.
3089
3091
  */