grainjs 1.0.1 → 1.0.2

package/lib/browserGlobals.ts

@@ -27,6 +27,8 @@ export interface IBrowserGlobals {
   window: typeof window;
 }
 
+export interface IBrowserGlobalsLax extends IBrowserGlobals {window: any};
+
 function _updateGlobals(dest: IBrowserGlobals, source: IBrowserGlobals): void {
   dest.DocumentFragment  = source.DocumentFragment;
   dest.Element           = source.Element;
@@ -48,7 +50,7 @@ const _globalsStack: IBrowserGlobals[] = [initial];
 /**
  * Replace globals with those from the given object. Use popGlobals() to restore previous values.
  */
-export function pushGlobals(globals: IBrowserGlobals): void {
+export function pushGlobals(globals: IBrowserGlobalsLax): void {
   _globalsStack.push(globals);
   _updateGlobals(G, globals);
 }

package/lib/dom.ts

@@ -81,7 +81,9 @@ export namespace dom {      // tslint:disable-line:no-namespace
   export const getData         = _domMethods.getData;
   export const replaceContent  = _domComputed.replaceContent;
   export const domComputed     = _domComputed.domComputed;
+  export const domComputedOwned = _domComputed.domComputedOwned;
   export const maybe           = _domComputed.maybe;
+  export const maybeOwned      = _domComputed.maybeOwned;
 
   export const forEach         = _domForEach.forEach;
 

package/lib/domComponent.ts

@@ -55,11 +55,7 @@
  * disposed when the containing element is disposed, followed by the `owner` itself.
  */
 import {MultiHolder} from './dispose';
-import {domComputed, DomComputed} from './domComputed';
-import {autoDisposeElem} from './domDispose';
-
-export type DomContents = Node | string | DomComputed | void | null | undefined | IDomContentsArray;
-export interface IDomContentsArray extends Array<DomContents> {}
+import {domComputedOwned, DomContents} from './domComputed';
 
 export interface IDomComponent {
   buildDom(): DomContents;
@@ -83,18 +79,11 @@ type DomCreatorArgs<T> =
   (T extends new (...args: infer P) => any ? P : never);
 
 export function create<Fn extends IDomCreator<any[]>>(fn: Fn, ...args: DomCreatorArgs<Fn>): DomContents {
-  const [markerPre, markerPost, func] = domComputed(null, () => {
-    // Note that the callback to domComputed() is not called until the markers have been attached
-    // to the parent element. We attach the MultiHolder's disposal to markerPost the way
-    // domComputed() normally attaches its own bindings.
-    const owner = MultiHolder.create(null);
-    autoDisposeElem(markerPost, owner);
-
+  return domComputedOwned(null, (owner) => {
     const value: DomComponentReturn = ('create' in fn) ?
       (fn as IDomCreateClass<any[]>).create(owner, ...args) :
       (fn as IDomCreateFunc<any[]>)(owner, ...args);
     return (value && typeof value === 'object' && 'buildDom' in value) ?
       value.buildDom() : value;
   });
-  return [markerPre, markerPost, func];
 }

package/lib/domComputed.ts

@@ -1,5 +1,6 @@
 import {BindableValue, subscribeElem} from './binding';
-import {domDispose} from './domDispose';
+import {Holder, MultiHolder} from './dispose';
+import {autoDisposeElem, domDispose} from './domDispose';
 import {DomArg, DomMethod, frag} from './domImpl';
 
 // Use the browser globals in a way that allows replacing them with mocks in tests.
@@ -9,12 +10,16 @@ import {G} from './browserGlobals';
 // name for use in places where a DomComputed is suitable but a general DomArg is not.
 export type DomComputed = [Node, Node, DomMethod];
 
+export type DomContents = Node | string | DomComputed | void | null | undefined | IDomContentsArray;
+export interface IDomContentsArray extends Array<DomContents> {}
+
+
 /**
  * Replaces the content between nodeBefore and nodeAfter, which should be two siblings within the
  * same parent node. New content may be anything allowed as an argument to dom(), including null
  * to insert nothing. Runs disposers, if any, on all removed content.
  */
-export function replaceContent(nodeBefore: Node, nodeAfter: Node, content: DomArg): void {
+export function replaceContent(nodeBefore: Node, nodeAfter: Node, content: DomContents): void {
   const elem = nodeBefore.parentNode;
   if (elem) {
     let next;
@@ -67,9 +72,9 @@ export function replaceContent(nodeBefore: Node, nodeAfter: Node, content: DomAr
 // Note that DomMethod is excluded because it prevents typescript from inferring the type of
 // the first argument when it's a function (and it's not useful).
 export function domComputed(valueObs: BindableValue<Exclude<DomArg, DomMethod>>): DomComputed;
-export function domComputed<T>(valueObs: BindableValue<T>, contentFunc: (val: T) => DomArg): DomComputed;
+export function domComputed<T>(valueObs: BindableValue<T>, contentFunc: (val: T) => DomContents): DomComputed;
 export function domComputed<T>(
-  valueObs: BindableValue<T>, contentFunc: (val: T) => DomArg = identity as any,
+  valueObs: BindableValue<T>, contentFunc: (val: T) => DomContents = identity as any,
 ): DomComputed {
   const markerPre = G.document.createComment('a');
   const markerPost = G.document.createComment('b');
@@ -82,6 +87,23 @@ export function domComputed<T>(
   }];
 }
 
+/**
+ * Like domComputed(), but the callback gets an additional first argument, owner, which may be
+ * used to take ownership of objects created by the callback. These will be disposed before each
+ * new call to the callback, and when the containing DOM is disposed.
+ *
+ *    domComputedOwned(valueObs, (owner, value) => Editor.create(owner, value).renderSomething());
+ */
+export function domComputedOwned<T>(
+  valueObs: BindableValue<T>, contentFunc: (owner: MultiHolder, val: T) => DomContents
+): DomComputed {
+  const holder = Holder.create(null);
+  const [markerPre, markerPost, func] = domComputed(valueObs,
+    (val: T) => contentFunc(MultiHolder.create(holder), val));
+  autoDisposeElem(markerPost, holder);
+  return [markerPre, markerPost, func];
+}
+
 function identity<T>(arg: T): T { return arg; }
 
 /**
@@ -106,6 +128,19 @@ function identity<T>(arg: T): T { return arg; }
  * @param boolValueObs: Observable or function for a computed.
  * @param contentFunc: Called with the result of boolValueObs when it is truthy. Should return DOM.
  */
-export function maybe<T>(boolValueObs: BindableValue<T>, contentFunc: (val: NonNullable<T>) => DomArg): DomComputed {
+export function maybe<T>(boolValueObs: BindableValue<T>,
+    contentFunc: (val: NonNullable<T>) => DomContents): DomComputed {
   return domComputed(boolValueObs, (value) => value ? contentFunc(value!) : null);
 }
+
+/**
+ * Like maybe(), but the callback gets an additional first argument, owner, which may be used to
+ * take ownership of objects created by the callback. These will be disposed before each new call
+ * to the callback, and when the condition becomes false or the containing DOM gets disposed.
+ *
+ *    maybeOwned(showEditor, (owner) => Editor.create(owner).renderSomething());
+ */
+export function maybeOwned<T>(boolValueObs: BindableValue<T>,
+    contentFunc: (owner: MultiHolder, val: NonNullable<T>) => DomContents): DomComputed {
+  return domComputedOwned(boolValueObs, (owner, value) => value ? contentFunc(owner, value!) : null);
+}

package/lib/domForEach.ts

@@ -1,6 +1,6 @@
-import {replaceContent} from './domComputed';
+import {DomContents, replaceContent} from './domComputed';
 import {autoDisposeElem, domDispose} from './domDispose';
-import {DomMethod, frag} from './domImpl';
+import {frag} from './domImpl';
 import {computedArray, MaybeObsArray, ObsArray} from './obsArray';
 
 // Use the browser globals in a way that allows replacing them with mocks in tests.
@@ -24,13 +24,10 @@ import {G} from './browserGlobals';
  * If you'd like to map the DOM node back to its source item, use dom.data() and dom.getData() in
  * itemCreateFunc().
  */
-export function forEach<T>(obsArray: MaybeObsArray<T>, itemCreateFunc: (item: T) => Node|null): DomMethod {
-  return (elem: Node) => {
-    const markerPre = G.document.createComment('a');
-    const markerPost = G.document.createComment('b');
-    elem.appendChild(markerPre);
-    elem.appendChild(markerPost);
-
+export function forEach<T>(obsArray: MaybeObsArray<T>, itemCreateFunc: (item: T) => Node|null): DomContents {
+  const markerPre = G.document.createComment('a');
+  const markerPost = G.document.createComment('b');
+  return [markerPre, markerPost, (elem: Node) => {
     if (Array.isArray(obsArray)) {
       replaceContent(markerPre, markerPost, obsArray.map(itemCreateFunc));
       return;
@@ -72,5 +69,5 @@ export function forEach<T>(obsArray: MaybeObsArray<T>, itemCreateFunc: (item: T)
       }
     });
     replaceContent(markerPre, markerPost, nodes.get());
-  };
+  }];
 }

package/lib/domevent.ts

@@ -171,7 +171,7 @@ export function onKeyElem<T extends HTMLElement>(
     const plainHandler = keyHandlers[ev.key];
     const handler = plainHandler || keyHandlers[ev.key + '$'];
     if (handler) {
-      if (plainHandler) {
+      if (plainHandler!) {
         ev.stopPropagation();
         ev.preventDefault();
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "grainjs",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "JS library from Grist Labs",
   "main": "dist/cjs/index",
   "module": "dist/esm/index",
@@ -16,7 +16,7 @@
     "test-browser-headless": "MOCHA_WEBDRIVER_ARGS='--no-sandbox --disable-gpu' MOCHA_WEBDRIVER_HEADLESS=1 mocha 'test/browser/*.{js,ts}'",
     "test-browser": "mocha 'test/browser/*.{js,ts}'",
     "test-browser-debug": "mocha --bail --no-exit 'test/browser/*.{js,ts}'",
-    "test-types": "dtslint --onlyTestTsNext --expectOnly test/types",
+    "test-types": "dtslint --localTs node_modules/typescript/lib --expectOnly test/types",
     "prepack": "npm run build && npm test"
   },
   "keywords": [
@@ -57,39 +57,38 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@types/chai": "^4.1.2",
-    "@types/chai-as-promised": "^7.1.0",
-    "@types/jsdom": "^12.2.0",
-    "@types/lodash": "^4.14.100",
-    "@types/mocha": "^5.2.5",
-    "@types/node": "^11.13.8",
-    "@types/selenium-webdriver": "^4.0.0",
-    "@types/sinon": "^7.0.11",
-    "@types/webpack-dev-server": "^3.1.5",
-    "browserify": "^16.2.3",
-    "chai": "^4.1.0",
+    "@types/chai": "^4.2.18",
+    "@types/chai-as-promised": "^7.1.4",
+    "@types/jsdom": "^16.2.11",
+    "@types/lodash": "^4.14.170",
+    "@types/mocha": "^8.2.2",
+    "@types/node": "^15.12.2",
+    "@types/selenium-webdriver": "^4.0.13",
+    "@types/sinon": "^10.0.2",
+    "browserify": "^17.0.0",
+    "chai": "^4.3.4",
     "chai-as-promised": "^7.1.1",
-    "chromedriver": "^74.0.0",
-    "create-react-app": "^3.0.0",
-    "dtslint": "^0.7.1",
-    "fastpriorityqueue": "^0.6.1",
-    "geckodriver": "^1.11.0",
-    "jsdom": "15.0.0",
-    "knockout": "^3.5.0",
-    "lodash": "^4.17.15",
-    "mocha": "^6.1.4",
-    "mocha-webdriver": "^0.1.13",
-    "nyc": "^14.0.0",
-    "selenium-webdriver": "^4.0.0-alpha.1",
-    "sinon": "^7.1.0",
-    "ts-loader": "^5.2.2",
-    "ts-node": "^8.1.0",
-    "tslint": "^5.11.0",
-    "typescript": "~3.4.5",
-    "typescript-tslint-plugin": "^0.3.1",
+    "chromedriver": "^91.0.0",
+    "create-react-app": "^4.0.3",
+    "dtslint": "^4.1.0",
+    "fastpriorityqueue": "^0.7.1",
+    "geckodriver": "^2.0.0",
+    "jsdom": "16.6.0",
+    "knockout": "^3.5.1",
+    "lodash": "^4.17.21",
+    "mocha": "^9.0.0",
+    "mocha-webdriver": "^0.2.9",
+    "nyc": "^15.1.0",
+    "selenium-webdriver": "^4.0.0-beta.4",
+    "sinon": "^11.1.1",
+    "ts-loader": "^9.2.3",
+    "ts-node": "^10.0.0",
+    "tslint": "^6.1.3",
+    "typescript": "~4.3.2",
+    "typescript-tslint-plugin": "^1.0.1",
     "uglify-es": "^3.2.0",
-    "webpack": "^4.15.1",
-    "webpack-cli": "^3.0.8",
-    "webpack-dev-server": "^3.3.1"
+    "webpack": "^5.38.1",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^3.11.2"
   }
 }