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:
parent
ff370d03db
commit
dde26da5a6
3 changed files with 33 additions and 23 deletions
|
@ -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();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
27
src/platform/web/ui/general/utils.js
Normal file
27
src/platform/web/ui/general/utils.js
Normal 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;
|
||||||
|
}
|
Reference in a new issue