add mountView utility to handle error handling on mount

and use it where errorToDOM is used currently for catching mount errors
This commit is contained in:
Bruno Windels 2021-06-04 10:07:12 +02:00
parent ff370d03db
commit dde26da5a6
3 changed files with 33 additions and 23 deletions

View file

@ -15,7 +15,7 @@ limitations under the License.
*/ */
import {el} from "./html.js"; import {el} from "./html.js";
import {errorToDOM} from "./error.js"; import {mountView} from "./utils.js";
function insertAt(parentNode, idx, childNode) { function insertAt(parentNode, idx, childNode) {
const isLast = idx === parentNode.childElementCount; const isLast = idx === parentNode.childElementCount;
@ -108,12 +108,7 @@ export class ListView {
for (let item of this._list) { for (let item of this._list) {
const child = this._childCreator(item); const child = this._childCreator(item);
this._childInstances.push(child); this._childInstances.push(child);
try { fragment.appendChild(mountView(child, this._mountArgs));
const childDomNode = child.mount(this._mountArgs);
fragment.appendChild(childDomNode);
} catch (err) {
fragment.appendChild(errorToDOM(err));
}
} }
this._root.appendChild(fragment); this._root.appendChild(fragment);
} }
@ -122,13 +117,7 @@ export class ListView {
this.onBeforeListChanged(); this.onBeforeListChanged();
const child = this._childCreator(value); const child = this._childCreator(value);
this._childInstances.splice(idx, 0, child); this._childInstances.splice(idx, 0, child);
let node; insertAt(this._root, idx, mountView(child, this._mountArgs));
try {
node = child.mount(this._mountArgs);
} catch (err) {
node = errorToDOM(err);
}
insertAt(this._root, idx, node);
this.onListChanged(); this.onListChanged();
} }

View file

@ -15,7 +15,7 @@ limitations under the License.
*/ */
import { setAttribute, text, isChildren, classNames, TAG_NAMES, HTML_NS } from "./html.js"; import { setAttribute, text, isChildren, classNames, TAG_NAMES, HTML_NS } from "./html.js";
import {errorToDOM} from "./error.js"; import {mountView} from "./utils.js";
import {BaseUpdateView} from "./BaseUpdateView.js"; import {BaseUpdateView} from "./BaseUpdateView.js";
function objHasFns(obj) { function objHasFns(obj) {
@ -282,17 +282,11 @@ class TemplateBuilder {
return node; return node;
} }
// this insert a view, and is not a view factory for `if`, so returns the root element to insert in the template // this inserts a view, and is not a view factory for `if`, so returns the root element to insert in the template
// you should not call t.view() and not use the result (e.g. attach the result to the template DOM tree). // you should not call t.view() and not use the result (e.g. attach the result to the template DOM tree).
view(view, mountOptions = undefined) { view(view, mountOptions = undefined) {
let root;
try {
root = view.mount(mountOptions);
} catch (err) {
return errorToDOM(err);
}
this._templateView.addSubView(view); this._templateView.addSubView(view);
return root; return mountView(view, mountOptions);
} }
// map a value to a view, every time the value changes // map a value to a view, every time the value changes

View file

@ -0,0 +1,27 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import {errorToDOM} from "./error.js";
export function mountView(view, mountArgs = undefined) {
let node;
try {
node = view.mount(mountArgs);
} catch (err) {
node = errorToDOM(err);
}
return node;
}