@holoviz/panel 1.4.2 → 1.5.0-a.1

package/dist/lib/models/pdf.js

@@ -1,6 +1,6 @@
 import { Markup } from "@bokehjs/models/widgets/markup";
 import { PanelMarkupView } from "./layout";
-import { htmlDecode } from "./html";
+import { html_decode } from "./html";
 export class PDFView extends PanelMarkupView {
     static __name__ = "PDFView";
     connect_signals() {
@@ -19,7 +19,7 @@ export class PDFView extends PanelMarkupView {
             this.container.innerHTML = `<embed src="${url}#page=${this.model.start_page}" type="application/pdf" width="100%" height="100%"></embed>`;
         }
         else {
-            const html = htmlDecode(this.model.text);
+            const html = html_decode(this.model.text);
             this.container.innerHTML = html || "";
         }
     }

package/dist/lib/models/pdf.js.map

@@ -1 +1 @@
-{"version":3,"file":"pdf.js","sourceRoot":"","sources":["../../../models/pdf.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,MAAM,EAAC,MAAM,gCAAgC,CAAA;AACrD,OAAO,EAAC,eAAe,EAAC,MAAM,UAAU,CAAA;AACxC,OAAO,EAAC,UAAU,EAAC,MAAM,QAAQ,CAAA;AAEjC,MAAM,OAAO,OAAQ,SAAQ,eAAe;;IAGjC,eAAe;QACtB,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,MAAM,EAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAA;QACtE,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,CAAC,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAA,CAAC,CAAC,CAAC,CAAA;IACnF,CAAC;IAEQ,MAAM;QACb,KAAK,CAAC,MAAM,EAAE,CAAA;QACd,IAAI,CAAC,MAAM,EAAE,CAAA;IACf,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;YACrB,MAAM,IAAI,GAAG,IAAI,CAAC,sBAAsB,EAAE,CAAA;YAC1C,MAAM,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA;YACrC,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,eAAe,GAAG,SAAS,IAAI,CAAC,KAAK,CAAC,UAAU,8DAA8D,CAAA;QAC3I,CAAC;aAAM,CAAC;YACN,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;YACxC,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,IAAI,EAAE,CAAA;QACvC,CAAC;IACH,CAAC;IAES,sBAAsB;QAC9B,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC7C,MAAM,UAAU,GAAG,GAAG,CAAA;QACtB,MAAM,WAAW,GAAG,EAAE,CAAA;QACtB,KAAK,IAAI,MAAM,GAAG,CAAC,EAAE,MAAM,GAAG,eAAe,CAAC,MAAM,EAAE,MAAM,IAAI,UAAU,EAAE,CAAC;YAC3E,MAAM,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,GAAG,UAAU,CAAC,CAAA;YAChE,MAAM,YAAY,GAAG,IAAI,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;YACjD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBACtC,YAAY,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAA;YACvC,CAAC;YACD,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;QAChC,CAAC;QACD,OAAO,IAAI,IAAI,CAAC,WAAW,EAAE,EAAC,IAAI,EAAE,iBAAiB,EAAC,CAAC,CAAA;IACzD,CAAC;;AAcH,MAAM,OAAO,GAAI,SAAQ,MAAM;;IAG7B,YAAY,KAA0B;QACpC,KAAK,CAAC,KAAK,CAAC,CAAA;IACd,CAAC;IAED,MAAM,CAAU,UAAU,GAAG,qBAAqB,CAAA;IAClD;QACE,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,OAAO,CAAA;QACrC,IAAI,CAAC,MAAM,CAAY,CAAC,EAAC,GAAG,EAAE,IAAI,EAAC,EAAE,EAAE,CAAC,CAAC;YACvC,KAAK,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC;YACpB,UAAU,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC;SACrB,CAAC,CAAC,CAAA;IACL,CAAC"}
+{"version":3,"file":"pdf.js","sourceRoot":"","sources":["../../../models/pdf.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,MAAM,EAAC,MAAM,gCAAgC,CAAA;AACrD,OAAO,EAAC,eAAe,EAAC,MAAM,UAAU,CAAA;AACxC,OAAO,EAAC,WAAW,EAAC,MAAM,QAAQ,CAAA;AAElC,MAAM,OAAO,OAAQ,SAAQ,eAAe;;IAGjC,eAAe;QACtB,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,MAAM,EAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAA;QACtE,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,CAAC,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAA,CAAC,CAAC,CAAC,CAAA;IACnF,CAAC;IAEQ,MAAM;QACb,KAAK,CAAC,MAAM,EAAE,CAAA;QACd,IAAI,CAAC,MAAM,EAAE,CAAA;IACf,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;YACrB,MAAM,IAAI,GAAG,IAAI,CAAC,sBAAsB,EAAE,CAAA;YAC1C,MAAM,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA;YACrC,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,eAAe,GAAG,SAAS,IAAI,CAAC,KAAK,CAAC,UAAU,8DAA8D,CAAA;QAC3I,CAAC;aAAM,CAAC;YACN,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;YACzC,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,IAAI,EAAE,CAAA;QACvC,CAAC;IACH,CAAC;IAES,sBAAsB;QAC9B,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC7C,MAAM,UAAU,GAAG,GAAG,CAAA;QACtB,MAAM,WAAW,GAAG,EAAE,CAAA;QACtB,KAAK,IAAI,MAAM,GAAG,CAAC,EAAE,MAAM,GAAG,eAAe,CAAC,MAAM,EAAE,MAAM,IAAI,UAAU,EAAE,CAAC;YAC3E,MAAM,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,GAAG,UAAU,CAAC,CAAA;YAChE,MAAM,YAAY,GAAG,IAAI,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;YACjD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBACtC,YAAY,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAA;YACvC,CAAC;YACD,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;QAChC,CAAC;QACD,OAAO,IAAI,IAAI,CAAC,WAAW,EAAE,EAAC,IAAI,EAAE,iBAAiB,EAAC,CAAC,CAAA;IACzD,CAAC;;AAcH,MAAM,OAAO,GAAI,SAAQ,MAAM;;IAG7B,YAAY,KAA0B;QACpC,KAAK,CAAC,KAAK,CAAC,CAAA;IACd,CAAC;IAED,MAAM,CAAU,UAAU,GAAG,qBAAqB,CAAA;IAClD;QACE,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,OAAO,CAAA;QACrC,IAAI,CAAC,MAAM,CAAY,CAAC,EAAC,GAAG,EAAE,IAAI,EAAC,EAAE,EAAE,CAAC,CAAC;YACvC,KAAK,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC;YACpB,UAAU,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC;SACrB,CAAC,CAAC,CAAA;IACL,CAAC"}

package/dist/lib/models/reactive_html.d.ts

@@ -1,30 +1,31 @@
+import type { Dict } from "@bokehjs/core/types";
 import type * as p from "@bokehjs/core/properties";
-import type { LayoutDOM } from "@bokehjs/models/layouts/layout_dom";
+import { Model } from "@bokehjs/model";
+import { UIElement } from "@bokehjs/models/ui/ui_element";
 import { HTMLBox, HTMLBoxView } from "./layout";
 export declare class ReactiveHTMLView extends HTMLBoxView {
     model: ReactiveHTML;
     html: string;
     container: HTMLDivElement;
-    _parent: any;
-    _changing: boolean;
-    _event_listeners: any;
-    _mutation_observers: MutationObserver[];
-    _script_fns: any;
-    _state: any;
+    protected _changing: boolean;
+    protected readonly _event_listeners: Map<string, Map<string, (event: Event) => void>>;
+    protected _mutation_observers: MutationObserver[];
+    protected _script_fns: Map<string, Function>;
+    protected _state: any;
     initialize(): void;
-    _recursive_connect(model: any, update_children: boolean, path: string): void;
+    _recursive_connect(model: Model, update_children: boolean, path: string): void;
     connect_signals(): void;
     connect_scripts(): void;
     run_script(property: string, silent?: boolean): void;
-    get_records(property: string, index?: boolean): any[];
+    get_records(property_name: string, index?: boolean): unknown[];
     disconnect_signals(): void;
     remove(): void;
-    get child_models(): LayoutDOM[];
+    get child_models(): UIElement[];
     _after_layout(): void;
     render(): void;
     private _send_event;
     private _render_child;
-    _render_node(node: any, children: any[]): void;
+    _render_node(node: string, children: (string | UIElement)[]): void;
     private _render_children;
     private _render_html;
     private _render_script;
@@ -38,16 +39,16 @@ export declare class ReactiveHTMLView extends HTMLBoxView {
 export declare namespace ReactiveHTML {
     type Attrs = p.AttrsOf<Props>;
     type Props = HTMLBox.Props & {
-        attrs: p.Property<any>;
-        callbacks: p.Property<any>;
-        children: p.Property<any>;
-        data: p.Property<any>;
+        attrs: p.Property<Dict<[string, string[], string][]>>;
+        callbacks: p.Property<Dict<[string, string][]>>;
+        children: p.Property<Dict<(UIElement | string)[] | string>>;
+        data: p.Property<Model>;
         event_params: p.Property<string[]>;
-        events: p.Property<any>;
+        events: p.Property<Dict<Dict<boolean>>>;
         html: p.Property<string>;
         looped: p.Property<string[]>;
         nodes: p.Property<string[]>;
-        scripts: p.Property<any>;
+        scripts: p.Property<Dict<string[]>>;
     };
 }
 export interface ReactiveHTML extends ReactiveHTML.Attrs {

package/dist/lib/models/reactive_html.js

@@ -2,71 +2,78 @@ import { render } from "preact";
 import { useCallback } from "preact/hooks";
 import { html } from "htm/preact";
 import { div } from "@bokehjs/core/dom";
+import { assert, unreachable } from "@bokehjs/core/util/assert";
+import { enumerate } from "@bokehjs/core/util/iterator";
 import { isArray, isString } from "@bokehjs/core/util/types";
+import { dict, keys, entries } from "@bokehjs/core/util/object";
+import { Model } from "@bokehjs/model";
+import { UIElement } from "@bokehjs/models/ui/ui_element";
 import { dict_to_records } from "./data";
 import { serializeEvent } from "./event-to-object";
-import { DOMEvent, htmlDecode } from "./html";
+import { DOMEvent, html_decode } from "./html";
 import { HTMLBox, HTMLBoxView } from "./layout";
 function serialize_attrs(attrs) {
     const serialized = {};
-    for (const attr in attrs) {
-        let value = attrs[attr];
-        if (!isString(value)) {
-        }
-        else if (value !== "" && (value === "NaN" || !isNaN(Number(value)))) {
-            value = Number(value);
-        }
-        else if (value === "false" || value === "true") {
-            value = value === "true" ? true : false;
-        }
-        serialized[attr] = value;
+    for (const [attr, value] of entries(attrs)) {
+        const serialized_value = (() => {
+            if (isString(value)) {
+                if (value !== "" && (value === "NaN" || !isNaN(Number(value)))) {
+                    return Number(value);
+                }
+                else if (value === "false" || value === "true") {
+                    return value === "true" ? true : false;
+                }
+            }
+            return value;
+        })();
+        serialized[attr] = serialized_value;
     }
     return serialized;
 }
-function escapeRegex(string) {
+function escape_regex(string) {
     return string.replace(/[-\/\\^$*+?.()|[\]]/g, "\\$&");
 }
-function extractToken(template, str, tokens) {
-    const tokenMapping = {};
+function extract_token(template, str, tokens) {
+    const token_mapping = new Map();
     for (const match of tokens) {
-        tokenMapping[`{${match}}`] = "(.*)";
+        token_mapping.set(`{${match}}`, "(.*)");
     }
-    const tokenList = [];
-    let regexpTemplate = `^${escapeRegex(template)}$`;
+    const token_list = [];
+    let regexp_template = `^${escape_regex(template)}$`;
     // Find the order of the tokens
-    let i, tokenIndex, tokenEntry;
-    for (const m in tokenMapping) {
-        tokenIndex = template.indexOf(m);
+    let i, token_index, token_entry;
+    for (const [m, replacement] of token_mapping) {
+        token_index = template.indexOf(m);
         // Token found
-        if (tokenIndex > -1) {
-            regexpTemplate = regexpTemplate.replace(m, tokenMapping[m]);
-            tokenEntry = {
-                index: tokenIndex,
+        if (token_index > -1) {
+            regexp_template = regexp_template.replace(m, replacement);
+            token_entry = {
+                index: token_index,
                 token: m,
             };
-            for (i = 0; i < tokenList.length && tokenList[i].index < tokenIndex; i++) {
-                ;
-            }
+            for (i = 0; i < token_list.length && token_list[i].index < token_index; i++) { }
             // Insert it at index i
-            if (i < tokenList.length) {
-                tokenList.splice(i, 0, tokenEntry);
+            if (i < token_list.length) {
+                token_list.splice(i, 0, token_entry);
             }
             else {
-                tokenList.push(tokenEntry);
+                token_list.push(token_entry);
             }
         }
     }
-    regexpTemplate = regexpTemplate.replace(/\{[^{}]+\}/g, ".*");
-    const match = new RegExp(regexpTemplate).exec(str);
-    let result = null;
-    if (match) {
-        result = {};
+    regexp_template = regexp_template.replace(/\{[^{}]+\}/g, ".*");
+    const match = new RegExp(regexp_template).exec(str);
+    if (match != null) {
+        const result = {};
         // Find your token entry
-        for (i = 0; i < tokenList.length; i++) {
-            result[tokenList[i].token.slice(1, -1)] = match[i + 1];
+        for (i = 0; i < token_list.length; i++) {
+            result[token_list[i].token.slice(1, -1)] = match[i + 1];
         }
+        return result;
+    }
+    else {
+        return null;
     }
-    return result;
 }
 function element_lookup(root, el_id) {
     let el = root.getElementById(el_id);
@@ -79,37 +86,30 @@ export class ReactiveHTMLView extends HTMLBoxView {
     static __name__ = "ReactiveHTMLView";
     html;
     container;
-    _parent = null;
     _changing = false;
-    _event_listeners = {};
+    _event_listeners = new Map();
     _mutation_observers = [];
-    _script_fns = {};
+    _script_fns = new Map();
     _state = {};
     initialize() {
         super.initialize();
-        this.html = htmlDecode(this.model.html) || this.model.html;
+        this.html = html_decode(this.model.html) ?? this.model.html;
     }
     _recursive_connect(model, update_children, path) {
-        for (const prop in model.properties) {
-            let subpath;
-            if (path.length) {
-                subpath = `${path}.${prop}`;
-            }
-            else {
-                subpath = prop;
-            }
-            const obj = model[prop];
+        for (const prop of model) {
+            const subpath = path.length != 0 ? `${path}.${prop.attr}` : prop.attr;
+            const obj = prop.get_value();
             if (obj == null) {
                 continue;
             }
-            if (obj.properties != null) {
+            if (obj instanceof Model) {
                 this._recursive_connect(obj, true, subpath);
             }
-            this.on_change(model.properties[prop], () => {
+            this.on_change(prop, () => {
                 if (update_children) {
-                    for (const node in this.model.children) {
-                        if (this.model.children[node] == prop) {
-                            let children = model[prop];
+                    for (const [node, attr] of entries(this.model.children)) {
+                        if (attr == prop.attr) {
+                            let children = prop.get_value();
                             if (!isArray(children)) {
                                 children = [children];
                             }
@@ -128,7 +128,7 @@ export class ReactiveHTMLView extends HTMLBoxView {
         super.connect_signals();
         const { children, events } = this.model.properties;
         this.on_change(children, async () => {
-            this.html = htmlDecode(this.model.html) || this.model.html;
+            this.html = html_decode(this.model.html) ?? this.model.html;
             await this.build_child_views();
             this.invalidate_render();
         });
@@ -140,32 +140,33 @@ export class ReactiveHTMLView extends HTMLBoxView {
         this.connect_scripts();
     }
     connect_scripts() {
-        const id = this.model.data.id;
-        for (const prop in this.model.scripts) {
-            const scripts = this.model.scripts[prop];
+        const { id } = this.model.data;
+        for (const [prop, scripts] of entries(this.model.scripts)) {
             let data_model = this.model.data;
             let attr;
-            if (prop.indexOf(".") >= 0) {
+            if (prop.includes(".")) {
                 const path = prop.split(".");
                 attr = path[path.length - 1];
                 for (const p of path.slice(0, -1)) {
-                    data_model = data_model[p];
+                    const value = data_model.property(p).get_value();
+                    assert(value instanceof Model);
+                    data_model = value;
                 }
             }
             else {
                 attr = prop;
             }
             for (const script of scripts) {
-                const decoded_script = htmlDecode(script) || script;
+                const decoded_script = html_decode(script) ?? script;
                 const script_fn = this._render_script(decoded_script, id);
-                this._script_fns[prop] = script_fn;
-                const property = data_model.properties[attr];
-                if (property == null) {
+                this._script_fns.set(prop, script_fn);
+                if (!(attr in data_model.properties)) {
                     continue;
                 }
+                const property = data_model.property(attr);
                 const is_event_param = this.model.event_params.includes(prop);
                 this.on_change(property, () => {
-                    if (!this._changing && !(is_event_param && !data_model[prop])) {
+                    if (!this._changing && !(is_event_param && !data_model.property(prop).get_value())) {
                         this.run_script(prop);
                         if (is_event_param) {
                             data_model.setv({ [prop]: false });
@@ -176,7 +177,7 @@ export class ReactiveHTMLView extends HTMLBoxView {
         }
     }
     run_script(property, silent = false) {
-        const script_fn = this._script_fns[property];
+        const script_fn = this._script_fns.get(property);
         if (script_fn === undefined) {
             if (!silent) {
                 console.log(`Script '${property}' could not be found.`);
@@ -184,15 +185,17 @@ export class ReactiveHTMLView extends HTMLBoxView {
             return;
         }
         const this_obj = {
-            get_records: (property, index) => this.get_records(property, index),
+            get_records(property, index) {
+                return this.get_records(property, index);
+            },
         };
-        for (const name in this._script_fns) {
+        for (const name of this._script_fns.keys()) {
             this_obj[name] = () => this.run_script(name);
         }
         return script_fn(this.model, this.model.data, this._state, this, (s) => this.run_script(s), this_obj);
     }
-    get_records(property, index = true) {
-        return dict_to_records(this.model.data[property], index);
+    get_records(property_name, index = true) {
+        return dict_to_records(this.model.data.property(property_name), index);
     }
     disconnect_signals() {
         super.disconnect_signals();
@@ -205,8 +208,8 @@ export class ReactiveHTMLView extends HTMLBoxView {
     }
     get child_models() {
         const models = [];
-        for (const parent in this.model.children) {
-            for (const model of this.model.children[parent]) {
+        for (const [_parent, children] of entries(this.model.children)) {
+            for (const model of children) {
                 if (!isString(model)) {
                     models.push(model);
                 }
@@ -241,33 +244,40 @@ export class ReactiveHTMLView extends HTMLBoxView {
         }
         this.model.trigger_event(new DOMEvent(elname, serialized));
     }
-    _render_child(model, el) {
-        const view = this._child_views.get(model);
-        if (view == null) {
-            el.innerHTML = htmlDecode(model) || model;
+    _render_child(child, el) {
+        if (isString(child)) {
+            el.innerHTML = html_decode(child) ?? child;
         }
         else {
-            el.appendChild(view.el);
-            view.render();
-            view.after_render();
+            const view = this._child_views.get(child);
+            if (view == null) {
+                el.innerHTML = "";
+            }
+            else {
+                el.appendChild(view.el);
+                view.render();
+                view.after_render();
+            }
         }
     }
     _render_node(node, children) {
-        const id = this.model.data.id;
-        if (this.model.looped.indexOf(node) > -1) {
-            for (let i = 0; i < children.length; i++) {
-                const el = element_lookup(this.shadow_el, `${node}-${i}-${id}`);
+        const { id } = this.model.data;
+        if (this.model.looped.includes(node)) {
+            for (const [child, i] of enumerate(children)) {
+                const el_id = `${node}-${i}-${id}`;
+                const el = element_lookup(this.shadow_el, el_id);
                 if (el == null) {
-                    console.warn(`DOM node '${node}-${i}-${id}' could not be found. Cannot render children.`);
+                    console.warn(`DOM node '${el_id}' could not be found. Cannot render children.`);
                     continue;
                 }
-                this._render_child(children[i], el);
+                this._render_child(child, el);
             }
         }
         else {
-            const el = element_lookup(this.shadow_el, `${node}-${id}`);
+            const el_id = `${node}-${id}`;
+            const el = element_lookup(this.shadow_el, el_id);
             if (el == null) {
-                console.warn(`DOM node '${node}-${id}' could not be found. Cannot render children.`);
+                console.warn(`DOM node '${el_id}' could not be found. Cannot render children.`);
                 return;
             }
             for (const child of children) {
@@ -276,24 +286,33 @@ export class ReactiveHTMLView extends HTMLBoxView {
         }
     }
     _render_children() {
-        for (const node in this.model.children) {
-            let children = this.model.children[node];
-            if (isString(children)) {
-                children = this.model.data[children];
-                if (!isArray(children)) {
-                    children = [children];
+        for (const [node, children] of entries(this.model.children)) {
+            const computed_children = (() => {
+                if (isString(children)) {
+                    const value = this.model.data.property(children).get_value();
+                    if (isString(value)) {
+                        return [value];
+                    }
+                    else if (isArray(value)) {
+                        return value;
+                    }
+                    else {
+                        unreachable();
+                    }
                 }
-            }
-            this._render_node(node, children);
+                else {
+                    return children;
+                }
+            })();
+            this._render_node(node, computed_children);
         }
     }
     _render_html(literal, state = {}) {
         let htm = literal.replace(/[`]/g, "\\$&");
-        let callbacks = "";
+        let collected_callbacks = "";
         const methods = [];
-        for (const elname in this.model.callbacks) {
-            for (const callback of this.model.callbacks[elname]) {
-                const [cb, method] = callback;
+        for (const [el_name, callbacks] of entries(this.model.callbacks)) {
+            for (const [cb, method] of callbacks) {
                 let definition;
                 htm = htm.replaceAll(`\${${method}}`, `$--{${method}}`);
                 if (method.startsWith("script(")) {
@@ -314,7 +333,7 @@ export class ReactiveHTMLView extends HTMLBoxView {
                 else {
                     definition = `
           const ${method} = (event) => {
-            let elname = "${elname}"
+            let elname = "${el_name}"
             if (RegExp("\{\{.*loop\.index.*\}\}").test(elname)) {
               const pattern = RegExp(elname.replace(/\{\{(.+?)\}\}/g, String.fromCharCode(92) + "d+"))
               for (const p of event.path) {
@@ -332,27 +351,28 @@ export class ReactiveHTMLView extends HTMLBoxView {
                     continue;
                 }
                 methods.push(method);
-                callbacks = callbacks + definition;
+                collected_callbacks += definition;
             }
         }
-        htm = (htm
+        htm = htm
             .replaceAll("${model.", "$-{model.")
             .replaceAll("${", "${data.")
             .replaceAll("$-{model.", "${model.")
-            .replaceAll("$--{", "${"));
-        return new Function("view, model, data, state, html, useCallback", `${callbacks}return html\`${htm}\`;`)(this, this.model, this.model.data, state, html, useCallback);
+            .replaceAll("$--{", "${");
+        return new Function("view, model, data, state, html, useCallback", `${collected_callbacks}return html\`${htm}\`;`)(this, this.model, this.model.data, state, html, useCallback);
     }
     _render_script(literal, id) {
         const scripts = [];
         for (const elname of this.model.nodes) {
             const elvar = elname.replace("-", "_");
-            if (literal.indexOf(elvar) === -1) {
+            if (!literal.includes(elvar)) {
                 continue;
             }
             const script = `
       let ${elvar} = view.shadow_el.getElementById('${elname}-${id}')
-      if (${elvar} == null)
+      if (${elvar} == null) {
         ${elvar} = document.getElementById('${elname}-${id}')
+      }
       if (${elvar} == null) {
         console.warn("DOM node '${elname}' could not be found. Cannot execute callback.")
         return
@@ -377,8 +397,8 @@ export class ReactiveHTMLView extends HTMLBoxView {
         this._mutation_observers = [];
     }
     _setup_mutation_observers() {
-        const id = this.model.data.id;
-        for (const name in this.model.attrs) {
+        const { id } = this.model.data;
+        for (const name of keys(this.model.attrs)) {
             const el = element_lookup(this.shadow_el, `${name}-${id}`);
             if (el == null) {
                 console.warn(`DOM node '${name}-${id}' could not be found. Cannot set up MutationObserver.`);
@@ -392,45 +412,45 @@ export class ReactiveHTMLView extends HTMLBoxView {
         }
     }
     _remove_event_listeners() {
-        const id = this.model.data.id;
-        for (const node in this._event_listeners) {
+        const { id } = this.model.data;
+        for (const [node, callbacks] of this._event_listeners) {
             const el = element_lookup(this.shadow_el, `${node}-${id}`);
             if (el == null) {
                 continue;
             }
-            for (const event_name in this._event_listeners[node]) {
-                const event_callback = this._event_listeners[node][event_name];
+            for (const [event_name, event_callback] of callbacks) {
                 el.removeEventListener(event_name, event_callback);
             }
         }
-        this._event_listeners = {};
+        this._event_listeners.clear();
     }
     _setup_event_listeners() {
-        const id = this.model.data.id;
-        for (const node in this.model.events) {
+        const { id } = this.model.data;
+        const attrs = dict(this.model.attrs);
+        for (const [node, node_events] of entries(this.model.events)) {
             const el = element_lookup(this.shadow_el, `${node}-${id}`);
             if (el == null) {
                 console.warn(`DOM node '${node}-${id}' could not be found. Cannot subscribe to DOM events.`);
                 continue;
             }
-            const node_events = this.model.events[node];
-            for (const event_name in node_events) {
+            for (const [event_name, event_doit] of entries(node_events)) {
                 const event_callback = (event) => {
                     this._send_event(node, event_name, event);
-                    if (node in this.model.attrs && node_events[event_name]) {
+                    if (attrs.has(node) && event_doit) {
                         this._update_model(el, node);
                     }
                 };
                 el.addEventListener(event_name, event_callback);
-                if (!(node in this._event_listeners)) {
-                    this._event_listeners[node] = {};
+                let callbacks = this._event_listeners.get(node);
+                if (callbacks === undefined) {
+                    this._event_listeners.set(node, callbacks = new Map());
                 }
-                this._event_listeners[node][event_name] = event_callback;
+                callbacks.set(event_name, event_callback);
             }
         }
     }
     _update(property = null) {
-        if (property == null || (this.html.indexOf(`\${${property}}`) > -1)) {
+        if (property == null || this.html.includes(`\${${property}}`)) {
             const rendered = this._render_html(this.html);
             if (rendered == null) {
                 return;
@@ -448,25 +468,26 @@ export class ReactiveHTMLView extends HTMLBoxView {
         if (this._changing) {
             return;
         }
+        const attr_infos = dict(this.model.attrs).get(name) ?? [];
         const attrs = {};
-        for (const attr_info of this.model.attrs[name]) {
+        for (const attr_info of attr_infos) {
             const [attr, tokens, template] = attr_info;
-            let value = attr === "children" ? el.innerHTML : el[attr];
+            let value = attr == "children" ? el.innerHTML : el[attr];
             if (tokens.length === 1 && (`{${tokens[0]}}` === template)) {
                 attrs[tokens[0]] = value;
             }
             else if (isString(value)) {
-                value = extractToken(template, value, tokens);
+                value = extract_token(template, value, tokens);
                 if (value == null) {
                     console.warn(`Could not resolve parameters in ${name} element ${attr} attribute value ${value}.`);
                 }
                 else {
-                    for (const param in value) {
-                        if (value[param] === undefined) {
+                    for (const [param, param_val] of entries(value)) {
+                        if (param_val === undefined) {
                             console.warn(`Could not resolve ${param} in ${name} element ${attr} attribute value ${value}.`);
                         }
                         else {
-                            attrs[param] = value[param];
+                            attrs[param] = param_val;
                         }
                     }
                 }
@@ -492,17 +513,17 @@ export class ReactiveHTML extends HTMLBox {
     static __module__ = "panel.models.reactive_html";
     static {
         this.prototype.default_view = ReactiveHTMLView;
-        this.define(({ List, Any, Str }) => ({
-            attrs: [Any, {}],
-            callbacks: [Any, {}],
-            children: [Any, {}],
-            data: [Any],
+        this.define(({ Bool, Str, List, Dict, Tuple, Or, Ref }) => ({
+            attrs: [Dict(List(Tuple(Str, List(Str), Str))), {}],
+            callbacks: [Dict(List(Tuple(Str, Str))), {}],
+            children: [Dict(Or(List(Or(Ref(UIElement), Str)), Str)), {}],
+            data: [Ref(Model)],
             event_params: [List(Str), []],
-            events: [Any, {}],
+            events: [Dict(Dict(Bool)), {}],
             html: [Str, ""],
             looped: [List(Str), []],
             nodes: [List(Str), []],
-            scripts: [Any, {}],
+            scripts: [Dict(List(Str)), {}],
         }));
     }
 }