From 4880b2b1a646b40bddae831e5a6b114b9ac7ecc0 Mon Sep 17 00:00:00 2001 From: Florian Scherf Date: Sun, 10 Apr 2022 19:05:40 +0200 Subject: [PATCH 01/17] shell: lona views: remove multi user flag The multi user flag is obsolete since Lona has support for view events. Previously multiple user could be connected to the same view runtime. Now every user gets his own runtime, and the runtimes communicate over view events. Signed-off-by: Florian Scherf --- lona/shell/commands/lona_views.py | 1 - 1 file changed, 1 deletion(-) diff --git a/lona/shell/commands/lona_views.py b/lona/shell/commands/lona_views.py index 5a572d1f..9015d938 100644 --- a/lona/shell/commands/lona_views.py +++ b/lona/shell/commands/lona_views.py @@ -195,7 +195,6 @@ def show_view_info(self, arguments): ['Thread ID', view_runtime.thread_ident], ['Thread Name', view_runtime.thread_name], ['View ID', view_runtime.view_runtime_id], - ['Multi user', repr(isinstance(view_runtime.request.user, list))], ['Daemon', repr(view_runtime.is_daemon)], ['Started at', str(view_runtime.started_at)], ['Stopped at', str(view_runtime.stopped_at or '-')], From 64778bc41993ee3e511ec6c3fa6fa4ef1b7ebc2b Mon Sep 17 00:00:00 2001 From: Florian Scherf Date: Sun, 10 Apr 2022 20:17:24 +0200 Subject: [PATCH 02/17] client: lona_context: fix id reuse Previously Lona generated a new window id by incrementing the current window count. This leads to potential reuse of ids, if a window gets removed. This patch fixes this issue by adding an internal counter to the LonaContext class which gets incremented with every new window. Signed-off-by: Florian Scherf --- lona/client/_lona/context.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/lona/client/_lona/context.js b/lona/client/_lona/context.js index 23de39d0..50ce7ffc 100644 --- a/lona/client/_lona/context.js +++ b/lona/client/_lona/context.js @@ -26,6 +26,7 @@ Lona.LonaContext = function(settings) { // state ------------------------------------------------------------------ this._windows = {}; + this._last_window_id = 0; this._connect_hooks = []; this._disconnect_hooks = []; this._rendering_hooks = []; @@ -39,7 +40,9 @@ Lona.LonaContext = function(settings) { root = document.querySelector(root); }; - var window_id = Object.keys(this._windows).length + 1; + this._last_window_id += 1; + + var window_id = this._last_window_id; this._windows[window_id] = new Lona.LonaWindow( this, root, window_id, url); From 26a98b2dc0bc011c6f9192f6692020b6a7db5a40 Mon Sep 17 00:00:00 2001 From: Florian Scherf Date: Sun, 10 Apr 2022 20:18:34 +0200 Subject: [PATCH 03/17] client: lona_context: add shortcuts In most applications Lona has only one window. This patch adds shortcuts to access this first window as the default window. Signed-off-by: Florian Scherf --- lona/client/_lona/context.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/lona/client/_lona/context.js b/lona/client/_lona/context.js index 50ce7ffc..301dc93a 100644 --- a/lona/client/_lona/context.js +++ b/lona/client/_lona/context.js @@ -326,4 +326,15 @@ Lona.LonaContext = function(settings) { _this._ws.close(); }); }; + + // shortcuts -------------------------------------------------------------- + this.get_default_window = function() { + return this._windows[1]; + }; + + this.run_view = function(url, post_data) { + var window = this.get_default_window(); + + return window.run_view(url, post_data); + }; }; From 8b0ae544af0562a3237fd330b58a117b504762fa Mon Sep 17 00:00:00 2001 From: Florian Scherf Date: Sun, 10 Apr 2022 20:45:28 +0200 Subject: [PATCH 04/17] client: remove obsolete job queue Lona had a job queue right from the start. The intention was to avoid race conditions during rendering, when websocket messages are incoming fast. Because of Javascript's event loop design, this kind of race conditions are simply impossible, which renders the job queue obsolete. This patch removes the job queue without an replacement. More information: https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop Signed-off-by: Florian Schigned-off-by: Florian Scherf --- lona/client/_lona/job-queue.js | 49 ----------------- lona/client/_lona/window.js | 66 +++++++++++------------ lona/client_pre_compiler.py | 1 - test_project/templates/lona/frontend.html | 7 --- 4 files changed, 31 insertions(+), 92 deletions(-) delete mode 100644 lona/client/_lona/job-queue.js diff --git a/lona/client/_lona/job-queue.js b/lona/client/_lona/job-queue.js deleted file mode 100644 index c951e1cf..00000000 --- a/lona/client/_lona/job-queue.js +++ /dev/null @@ -1,49 +0,0 @@ -Lona.JobQueue = function(lona_window) { - this._lona_window = lona_window; - this._promises = []; - - this._lock = function() { - var promise_resolve; - - var promise = new Promise(function(resolve, reject) { - promise_resolve = resolve; - }); - - promise.resolve = promise_resolve; - - var new_array_length = this._promises.push(promise); - - if(new_array_length == 1) { - promise.resolve(); - }; - - return promise; - }; - - this._unlock = function() { - this._promises.shift(); - - if(this._promises.length > 0) { - this._promises[0].resolve(); - }; - }; - - this.add = async function(callback) { - await this._lock(); - - try { - var promise = callback(); - - if(promise instanceof Promise) { - await promise; - }; - - } catch(error) { - this._lona_window.crash(error); - - } finally { - this._unlock(); - - }; - }; -}; diff --git a/lona/client/_lona/window.js b/lona/client/_lona/window.js index 9815b4c8..304da655 100644 --- a/lona/client/_lona/window.js +++ b/lona/client/_lona/window.js @@ -4,8 +4,6 @@ Lona.LonaWindow = function(lona_context, root, window_id) { this._window_id = window_id; this._view_start_timeout = undefined; - this._job_queue = new Lona.JobQueue(this); - this._input_event_handler = new Lona.LonaInputEventHandler( lona_context, this, @@ -200,52 +198,50 @@ Lona.LonaWindow = function(lona_context, root, window_id) { this._show_html = function(html) { _this = this; - _this._job_queue.add(function() { - var message_type = html[0]; - var data = html[1]; + var message_type = html[0]; + var data = html[1]; - // HTML - if(message_type == Lona.protocol.DATA_TYPE.HTML) { - var selector = 'a,form,[data-lona-events]'; + // HTML + if(message_type == Lona.protocol.DATA_TYPE.HTML) { + var selector = 'a,form,[data-lona-events]'; - _this._root.innerHTML = data; - _this._clean_node_cache(); + _this._root.innerHTML = data; + _this._clean_node_cache(); - _this._root.querySelectorAll(selector).forEach(function(node) { - _this._input_event_handler.patch_input_events(node); - }); + _this._root.querySelectorAll(selector).forEach(function(node) { + _this._input_event_handler.patch_input_events(node); + }); - // HTML tree - } else if(message_type == Lona.protocol.DATA_TYPE.HTML_TREE) { - _this._clear_node_cache(); + // HTML tree + } else if(message_type == Lona.protocol.DATA_TYPE.HTML_TREE) { + _this._clear_node_cache(); - var node_list = _this._dom_renderer._render_node(data) + var node_list = _this._dom_renderer._render_node(data) - _this._clear(); - _this._dom_updater._apply_node_list(_this._root, node_list); + _this._clear(); + _this._dom_updater._apply_node_list(_this._root, node_list); - // HTML update - } else if(message_type == Lona.protocol.DATA_TYPE.HTML_UPDATE) { - _this._widgets_to_setup = []; - _this._widgets_to_update = []; + // HTML update + } else if(message_type == Lona.protocol.DATA_TYPE.HTML_UPDATE) { + _this._widgets_to_setup = []; + _this._widgets_to_update = []; - data.forEach(function(patch) { - var patch_type = patch[1]; + data.forEach(function(patch) { + var patch_type = patch[1]; - if(patch_type == Lona.protocol.PATCH_TYPE.WIDGET_DATA) { - _this._widget_data_updater._apply_patch(patch); + if(patch_type == Lona.protocol.PATCH_TYPE.WIDGET_DATA) { + _this._widget_data_updater._apply_patch(patch); - } else {; - _this._dom_updater._apply_patch(patch); + } else {; + _this._dom_updater._apply_patch(patch); - }; + }; - }); - }; + }); + }; - _this._run_widget_hooks(); - _this.lona_context._run_rendering_hooks(_this); - }); + _this._run_widget_hooks(); + _this.lona_context._run_rendering_hooks(_this); }; // public api ------------------------------------------------------------- diff --git a/lona/client_pre_compiler.py b/lona/client_pre_compiler.py index d8382e2d..2eefa02d 100644 --- a/lona/client_pre_compiler.py +++ b/lona/client_pre_compiler.py @@ -13,7 +13,6 @@ SOURCE_ROOT = os.path.join(os.path.dirname(__file__), 'client') SOURCE_FILES = [ - '_lona/job-queue.js', '_lona/window-shim.js', '_lona/dom-renderer.js', '_lona/dom-updater.js', diff --git a/test_project/templates/lona/frontend.html b/test_project/templates/lona/frontend.html index 74576846..9d744a39 100644 --- a/test_project/templates/lona/frontend.html +++ b/test_project/templates/lona/frontend.html @@ -14,10 +14,6 @@

Lona Test Project

Application Started: - - - Pending Rendering Jobs: - - - Loaded Nodes: - @@ -137,16 +133,13 @@

Lona Test Project

document.querySelector('#enable-rendering-statistics').onclick = function(event) { event.preventDefault(); - var pending_rendering_jobs = document.querySelector('#pending-rendering-jobs'); var loaded_nodes = document.querySelector('#loaded-nodes'); var loaded_widgets = document.querySelector('#loaded-widgets'); - pending_rendering_jobs.innerHTML = ''; loaded_nodes.innerHTML = ''; loaded_widgets.innerHTML = ''; lona_context.add_rendering_hook(function(lona_window) { - pending_rendering_jobs.innerHTML = lona_context._windows[1]._job_queue._promises.length - 1; loaded_nodes.innerHTML = Object.keys(lona_context._windows[1]._nodes).length; loaded_widgets.innerHTML = Object.keys(lona_context._windows[1]._widget_marker).length; }); From 5ed0ad831094690660082c9c1ea39414d940dea5 Mon Sep 17 00:00:00 2001 From: Florian Scherf Date: Sun, 10 Apr 2022 20:57:16 +0200 Subject: [PATCH 05/17] client: window: remove _this The code previously used _this variables to account for scope losses in callback functions. This is unnecessary since Javascript supports arrow functions that inherit the variable scope of their parent. This patch removes all occurrences of _this and replaces them with arrow function code. Signed-off-by: Florian Scherf --- lona/client/_lona/window.js | 102 +++++++++++++++++------------------- 1 file changed, 47 insertions(+), 55 deletions(-) diff --git a/lona/client/_lona/window.js b/lona/client/_lona/window.js index 304da655..d3f853ec 100644 --- a/lona/client/_lona/window.js +++ b/lona/client/_lona/window.js @@ -102,52 +102,50 @@ Lona.LonaWindow = function(lona_context, root, window_id) { }; this._clean_node_cache = function() { - var _this = this; - // nodes - Object.keys(_this._nodes).forEach(function(key) { - var node = _this._nodes[key]; + Object.keys(this._nodes).forEach(key => { + var node = this._nodes[key]; - if(!_this._root.contains(node)) { - delete _this._nodes[key]; + if(!this._root.contains(node)) { + delete this._nodes[key]; }; }); - Object.keys(_this._widget_marker).forEach(function(key) { - var node = _this._widget_marker[key]; + Object.keys(this._widget_marker).forEach(key => { + var node = this._widget_marker[key]; // widget_marker - if(_this._root.contains(node)) { + if(this._root.contains(node)) { return; }; - delete _this._widget_marker[key]; + delete this._widget_marker[key]; // widget - if(key in _this._widgets) { + if(key in this._widgets) { // run deconstructor - if(_this._widgets[key].deconstruct !== undefined) { - _this._widgets[key].deconstruct(); + if(this._widgets[key].deconstruct !== undefined) { + this._widgets[key].deconstruct(); }; // remove widget - delete _this._widgets[key]; + delete this._widgets[key]; // remove widget data - delete _this._widget_data[key]; + delete this._widget_data[key]; // remove widget from _widgets_to_setup - if(_this._widgets_to_setup.indexOf(key) > -1) { - _this._widgets_to_setup.splice( - _this._widgets_to_setup.indexOf(key), 1); + if(this._widgets_to_setup.indexOf(key) > -1) { + this._widgets_to_setup.splice( + this._widgets_to_setup.indexOf(key), 1); }; // remove widget from _widgets_to_update - if(_this._widgets_to_update.indexOf(key) > -1) { - _this._widgets_to_update.splice( - _this._widgets_to_update.indexOf(key), 1); + if(this._widgets_to_update.indexOf(key) > -1) { + this._widgets_to_update.splice( + this._widgets_to_update.indexOf(key), 1); }; }; }); @@ -155,12 +153,10 @@ Lona.LonaWindow = function(lona_context, root, window_id) { // hooks ------------------------------------------------------------------ this._run_widget_hooks = function() { - var _this = this; - // setup - _this._widgets_to_setup.forEach(function(node_id) { - var widget = _this._widgets[node_id]; - var widget_data = _this._widget_data[node_id]; + this._widgets_to_setup.forEach(node_id => { + var widget = this._widgets[node_id]; + var widget_data = this._widget_data[node_id]; widget.data = JSON.parse(JSON.stringify(widget_data)); @@ -168,7 +164,7 @@ Lona.LonaWindow = function(lona_context, root, window_id) { return; }; - widget.nodes = _this._dom_updater._get_widget_nodes(node_id); + widget.nodes = this._dom_updater._get_widget_nodes(node_id); if(widget.setup !== undefined) { widget.setup(); @@ -176,9 +172,9 @@ Lona.LonaWindow = function(lona_context, root, window_id) { }); // data_updated - _this._widgets_to_update.forEach(function(node_id) { - var widget = _this._widgets[node_id]; - var widget_data = _this._widget_data[node_id]; + this._widgets_to_update.forEach(node_id => { + var widget = this._widgets[node_id]; + var widget_data = this._widget_data[node_id]; widget.data = JSON.parse(JSON.stringify(widget_data)); @@ -191,57 +187,55 @@ Lona.LonaWindow = function(lona_context, root, window_id) { }; }); - _this._widgets_to_setup = []; - _this._widgets_to_update = []; + this._widgets_to_setup = []; + this._widgets_to_update = []; }; - this._show_html = function(html) { - _this = this; - + this._show_html = function (html) { var message_type = html[0]; var data = html[1]; // HTML - if(message_type == Lona.protocol.DATA_TYPE.HTML) { + if (message_type == Lona.protocol.DATA_TYPE.HTML) { var selector = 'a,form,[data-lona-events]'; - _this._root.innerHTML = data; - _this._clean_node_cache(); + this._root.innerHTML = data; + this._clean_node_cache(); - _this._root.querySelectorAll(selector).forEach(function(node) { - _this._input_event_handler.patch_input_events(node); + this._root.querySelectorAll(selector).forEach(node => { + this._input_event_handler.patch_input_events(node); }); // HTML tree } else if(message_type == Lona.protocol.DATA_TYPE.HTML_TREE) { - _this._clear_node_cache(); + this._clear_node_cache(); - var node_list = _this._dom_renderer._render_node(data) + var node_list = this._dom_renderer._render_node(data) - _this._clear(); - _this._dom_updater._apply_node_list(_this._root, node_list); + this._clear(); + this._dom_updater._apply_node_list(this._root, node_list); // HTML update } else if(message_type == Lona.protocol.DATA_TYPE.HTML_UPDATE) { - _this._widgets_to_setup = []; - _this._widgets_to_update = []; + this._widgets_to_setup = []; + this._widgets_to_update = []; - data.forEach(function(patch) { + data.forEach(patch => { var patch_type = patch[1]; if(patch_type == Lona.protocol.PATCH_TYPE.WIDGET_DATA) { - _this._widget_data_updater._apply_patch(patch); + this._widget_data_updater._apply_patch(patch); } else {; - _this._dom_updater._apply_patch(patch); + this._dom_updater._apply_patch(patch); }; }); }; - _this._run_widget_hooks(); - _this.lona_context._run_rendering_hooks(_this); + this._run_widget_hooks(); + this.lona_context._run_rendering_hooks(this); }; // public api ------------------------------------------------------------- @@ -375,8 +369,6 @@ Lona.LonaWindow = function(lona_context, root, window_id) { // to this request. // This prevents glitches when switching urls fast. - var _this = this; - if(this._crashed) { return; }; @@ -423,8 +415,8 @@ Lona.LonaWindow = function(lona_context, root, window_id) { this.lona_context.send(message); // setup view start timeout - this._view_start_timeout = setTimeout(function() { - _this.lona_context._run_view_timeout_hooks(_this); + this._view_start_timeout = setTimeout(() => { + this.lona_context._run_view_timeout_hooks(this); }, Lona.settings.VIEW_START_TIMEOUT * 1000); }; From d95ba0fb374d7b80c45416e240f4b68e4ca1dde6 Mon Sep 17 00:00:00 2001 From: Florian Scherf Date: Tue, 26 Apr 2022 07:41:53 +0200 Subject: [PATCH 06/17] client: context: remove obsolete _this The code previously used _this variables to account for scope losses in callback functions. This is unnecessary since Javascript supports arrow functions that inherit the variable scope of their parent. This patch removes all occurrences of _this and replaces them with arrow function code. Signed-off-by: Florian Scherf --- lona/client/_lona/context.js | 24 +++++++++--------------- 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/lona/client/_lona/context.js b/lona/client/_lona/context.js index 301dc93a..982f9160 100644 --- a/lona/client/_lona/context.js +++ b/lona/client/_lona/context.js @@ -54,8 +54,6 @@ Lona.LonaContext = function(settings) { // input events ----------------------------------------------------------- this.patch_input_events = function(root_node_selector, window_id) { - var _this = this; - // find window if(window_id == undefined) { window_id = 1; @@ -67,7 +65,7 @@ Lona.LonaContext = function(settings) { var node = document.querySelector(root_node_selector); var selector = 'a,form,[data-lona-events]'; - node.querySelectorAll(selector).forEach(function(node) { + node.querySelectorAll(selector).forEach(node => { _window._input_event_handler.patch_input_events(node); }); }; @@ -246,16 +244,14 @@ Lona.LonaContext = function(settings) { }; this._send_pings = function() { - var _this = this; - setTimeout( - function() { - if(_this._ws.readyState != _this._ws.OPEN) { + () => { + if(this._ws.readyState != this._ws.OPEN) { return; }; - _this.send_ping(); - _this._send_pings(); + this.send_ping(); + this._send_pings(); }, Lona.settings.PING_INTERVAL * 1000, ); @@ -314,16 +310,14 @@ Lona.LonaContext = function(settings) { }; this.setup = function() { - var _this = this; - - _this.reconnect(); + this.reconnect(); // unset websocket.onclose handler when page gets unloaded to // prevent the browser from showing "Server disconnected" when the // user changes the browser URL - window.addEventListener('beforeunload', function(event) { - _this._ws.onclose = function(event) {}; - _this._ws.close(); + window.addEventListener('beforeunload', event => { + this._ws.onclose = event => {}; + this._ws.close(); }); }; From bcf4d295f7fce93f2b4e61da83a0bb590e764a27 Mon Sep 17 00:00:00 2001 From: Florian Scherf Date: Tue, 26 Apr 2022 07:52:00 +0200 Subject: [PATCH 07/17] client: dom-renderer: remove obsolete _this The code previously used _this variables to account for scope losses in callback functions. This is unnecessary since Javascript supports arrow functions that inherit the variable scope of their parent. This patch removes all occurrences of _this and replaces them with arrow function code. Signed-off-by: Florian Scherf --- lona/client/_lona/dom-renderer.js | 40 +++++++++++++++---------------- 1 file changed, 19 insertions(+), 21 deletions(-) diff --git a/lona/client/_lona/dom-renderer.js b/lona/client/_lona/dom-renderer.js index 489d9efb..0567c46d 100644 --- a/lona/client/_lona/dom-renderer.js +++ b/lona/client/_lona/dom-renderer.js @@ -4,7 +4,6 @@ Lona.LonaDomRenderer = function(lona_context, lona_window) { // html rendering --------------------------------------------------------- this._render_node = function(node_spec) { - var _this = this; var property_names = ['value', 'checked', 'selected']; var node_list = []; @@ -27,7 +26,7 @@ Lona.LonaDomRenderer = function(lona_context, lona_window) { // id list if(node_id_list.length > 0) { - _this.lona_window._dom_updater._add_id(node, node_id_list); + this.lona_window._dom_updater._add_id(node, node_id_list); }; // class list @@ -37,14 +36,14 @@ Lona.LonaDomRenderer = function(lona_context, lona_window) { // style if(Object.keys(node_style).length > 0) { - Object.keys(node_style).forEach(function(key) { + Object.keys(node_style).forEach(key => { node.style[key] = node_style[key]; }); }; // attributes if(Object.keys(node_attributes).length > 0) { - Object.keys(node_attributes).forEach(function(key) { + Object.keys(node_attributes).forEach(key => { var value = node_attributes[key]; // properties @@ -64,17 +63,17 @@ Lona.LonaDomRenderer = function(lona_context, lona_window) { }; // nodes - node_child_nodes.forEach(function(sub_node_argspec) { - var sub_node_list = _this._render_node( + node_child_nodes.forEach(sub_node_argspec => { + var sub_node_list = this._render_node( sub_node_argspec); - _this.lona_window._dom_updater._apply_node_list( + this.lona_window._dom_updater._apply_node_list( node, sub_node_list, ); }); - _this.lona_window._nodes[node_id] = node; + this.lona_window._nodes[node_id] = node; node_list.push(node); // TextNode @@ -84,7 +83,7 @@ Lona.LonaDomRenderer = function(lona_context, lona_window) { var node = document.createTextNode(node_content); - _this.lona_window._nodes[node_id] = node; + this.lona_window._nodes[node_id] = node; node_list.push(node); // Widget @@ -101,13 +100,13 @@ Lona.LonaDomRenderer = function(lona_context, lona_window) { var end_marker = document.createComment( 'end-lona-widget:' + node_id); - _this.lona_window._widget_marker[node_id] = start_marker; + this.lona_window._widget_marker[node_id] = start_marker; node_list.push(start_marker); // nodes - node_child_nodes.forEach(function(sub_node_argspec) { - var sub_node_list = _this._render_node( + node_child_nodes.forEach(sub_node_argspec => { + var sub_node_list = this._render_node( sub_node_argspec); node_list.push(sub_node_list); @@ -122,21 +121,21 @@ Lona.LonaDomRenderer = function(lona_context, lona_window) { var window_shim = new Lona.LonaWindowShim( lona_context, - _this.lona_window, + this.lona_window, node_id, ); var widget = new widget_class(window_shim); - _this.lona_window._widgets[node_id] = widget; - _this.lona_window._widget_data[node_id] = widget_data; - _this.lona_window._widgets_to_setup.splice(0, 0, node_id); + this.lona_window._widgets[node_id] = widget; + this.lona_window._widget_data[node_id] = widget_data; + this.lona_window._widgets_to_setup.splice(0, 0, node_id); }; }; // patch input events - node_list.forEach(function(node) { - _this.lona_window._input_event_handler.patch_input_events(node); + node_list.forEach(node => { + this.lona_window._input_event_handler.patch_input_events(node); }); return node_list; @@ -146,7 +145,6 @@ Lona.LonaDomRenderer = function(lona_context, lona_window) { // TODO: get rid of this method and move functionality // into _render_node() - var _this = this; var node_list = []; for(var index in node_specs) { @@ -154,8 +152,8 @@ Lona.LonaDomRenderer = function(lona_context, lona_window) { }; // patch input events - node_list.forEach(function(node) { - _this.lona_window._input_event_handler.patch_input_events(node); + node_list.forEach(node => { + this.lona_window._input_event_handler.patch_input_events(node); }); return node_list; From 63bb518788097e9ef74d75f1a3f948e55af629cf Mon Sep 17 00:00:00 2001 From: Florian Scherf Date: Tue, 26 Apr 2022 07:57:15 +0200 Subject: [PATCH 08/17] client: dom-updater: remove obsolete _this The code previously used _this variables to account for scope losses in callback functions. This is unnecessary since Javascript supports arrow functions that inherit the variable scope of their parent. This patch removes all occurrences of _this and replaces them with arrow function code. Signed-off-by: Florian Scherf --- lona/client/_lona/dom-updater.js | 48 +++++++++++++------------------- 1 file changed, 20 insertions(+), 28 deletions(-) diff --git a/lona/client/_lona/dom-updater.js b/lona/client/_lona/dom-updater.js index 36855b65..5e910b01 100644 --- a/lona/client/_lona/dom-updater.js +++ b/lona/client/_lona/dom-updater.js @@ -18,10 +18,8 @@ Lona.LonaDomUpdater = function(lona_context, lona_window) { }; this._get_widget_nodes = function(node_id) { - var _this = this; - var node_list = []; - var widget_marker = _this.lona_window._widget_marker[node_id]; + var widget_marker = this.lona_window._widget_marker[node_id]; var end_marker_text = 'end-lona-widget:' + node_id; var cursor = 0; @@ -69,15 +67,13 @@ Lona.LonaDomUpdater = function(lona_context, lona_window) { }; this._insert_node = function(node_list, node_id, index) { - var _this = this; - var target_node; var cursor = 0; // find target node // Widget - if(node_id in _this.lona_window._widget_marker) { - var marker = _this.lona_window._widget_marker[node_id]; + if(node_id in this.lona_window._widget_marker) { + var marker = this.lona_window._widget_marker[node_id]; target_node = marker.parentElement; @@ -94,7 +90,7 @@ Lona.LonaDomUpdater = function(lona_context, lona_window) { // Node } else { - target_node = _this.lona_window._nodes[node_id]; + target_node = this.lona_window._nodes[node_id]; } @@ -150,14 +146,12 @@ Lona.LonaDomUpdater = function(lona_context, lona_window) { }; this._set_node = function(node_list, target_node_id, index) { - var _this = this; - var target_node; var cursor = 0; // Widget - if(target_node_id in _this.lona_window._widget_marker) { - var marker = _this.lona_window._widget_marker[target_node_id]; + if(target_node_id in this.lona_window._widget_marker) { + var marker = this.lona_window._widget_marker[target_node_id]; var target_node = marker.parentElement; var end_marker_text = 'end-lona-widget:' + target_node_id; @@ -174,7 +168,7 @@ Lona.LonaDomUpdater = function(lona_context, lona_window) { // Node } else { - target_node = _this.lona_window._nodes[node_id]; + target_node = this.lona_window._nodes[node_id]; if(!target_node) { return; @@ -251,17 +245,16 @@ Lona.LonaDomUpdater = function(lona_context, lona_window) { }; this._remove_node = function(node_id) { - var _this = this; // TextNode - if(node_id in _this.lona_window._nodes) { - _this.lona_window._nodes[node_id].remove(); + if(node_id in this.lona_window._nodes) { + this.lona_window._nodes[node_id].remove(); - delete _this.lona_window._nodes[node_id]; + delete this.lona_window._nodes[node_id]; // Widget - } else if(node_id in _this.lona_window._widget_marker) { - var marker = _this.lona_window._widget_marker[node_id]; + } else if(node_id in this.lona_window._widget_marker) { + var marker = this.lona_window._widget_marker[node_id]; var parent_element = marker.parentElement; var end_marker_text = 'end-lona-widget:' + node_id; var index = 0; @@ -288,25 +281,24 @@ Lona.LonaDomUpdater = function(lona_context, lona_window) { node.remove(); }; - _this.lona_window._clean_node_cache(); + this.lona_window._clean_node_cache(); // Node } else { - node = _this.lona_window._nodes[node_id]; + node = this.lona_window._nodes[node_id]; if(node) { node.remove(); - _this.lona_window._clean_node_cache(); + this.lona_window._clean_node_cache(); }; }; }; this._clear_node = function(node_id) { - var _this = this; // Widget - if(node_id in _this.lona_window._widget_marker) { - var marker = _this.lona_window._widget_marker[node_id]; + if(node_id in this.lona_window._widget_marker) { + var marker = this.lona_window._widget_marker[node_id]; var child_nodes = marker.parentElement.childNodes; var end_marker_text = 'end-lona-widget:' + node_id; var index = 0; @@ -327,18 +319,18 @@ Lona.LonaDomUpdater = function(lona_context, lona_window) { child_nodes[index].remove(); }; - _this.lona_window._clean_node_cache(); + this.lona_window._clean_node_cache(); // Node } else { - var node = _this.lona_window._nodes[node_id]; + var node = this.lona_window._nodes[node_id]; if(!node) { return; }; node.innerHTML = ''; - _this.lona_window._clean_node_cache(); + this.lona_window._clean_node_cache(); }; }; From 092a64e0a898bd2665372952f8924e8fffc3bbf9 Mon Sep 17 00:00:00 2001 From: Florian Scherf Date: Tue, 26 Apr 2022 08:00:01 +0200 Subject: [PATCH 09/17] client: input-events: remove obsolete _this The code previously used _this variables to account for scope losses in callback functions. This is unnecessary since Javascript supports arrow functions that inherit the variable scope of their parent. This patch removes all occurrences of _this and replaces them with arrow function code. Signed-off-by: Florian Scherf --- lona/client/_lona/input-events.js | 36 ++++++++++++++----------------- 1 file changed, 16 insertions(+), 20 deletions(-) diff --git a/lona/client/_lona/input-events.js b/lona/client/_lona/input-events.js index 62cebe3b..23a1bac4 100644 --- a/lona/client/_lona/input-events.js +++ b/lona/client/_lona/input-events.js @@ -32,7 +32,7 @@ Lona.LonaInputEventHandler = function(lona_context, lona_window) { } else if(node.type == 'select-multiple') { value = []; - Array.from(node.selectedOptions).forEach(function(option) { + Array.from(node.selectedOptions).forEach(option => { value.push(option.value); }); @@ -169,13 +169,13 @@ Lona.LonaInputEventHandler = function(lona_context, lona_window) { var multi_selects = {}; this.querySelectorAll('select[multiple]').forEach( - function(select_node) { + select_node => { var name = select_node.name; multi_selects[select_node.name] = []; Array.from(select_node.selectedOptions).forEach( - function(option) { + option => { multi_selects[name].push(option.value); } ); @@ -281,7 +281,7 @@ Lona.LonaInputEventHandler = function(lona_context, lona_window) { var _event_types = node.getAttribute('data-lona-events'); _event_types = _event_types.split(';').filter(Boolean); - _event_types.forEach(function(event_type, index) { + _event_types.forEach((event_type, index) => { var raw_event_type = event_type.replace(':', ',') var event_type = raw_event_type.split(',').filter(Boolean); @@ -292,8 +292,6 @@ Lona.LonaInputEventHandler = function(lona_context, lona_window) { }; this.patch_input_events = function(node) { - var _this = this; - if(node.nodeType != Node.ELEMENT_NODE) { return; }; @@ -318,36 +316,34 @@ Lona.LonaInputEventHandler = function(lona_context, lona_window) { }; // data-lona-input-events attribute - Object.keys(event_types).forEach(function(key) { + Object.keys(event_types).forEach(key => { var event_type = event_types[key]; // onclick if(key == Lona.protocol.INPUT_EVENT_TYPE.CLICK) { - _this._patch_onclick(node, event_type); + this._patch_onclick(node, event_type); // onchange / oninput } else if(key == Lona.protocol.INPUT_EVENT_TYPE.CHANGE) { - _this._patch_onchange(node, event_type); + this._patch_onchange(node, event_type); // onsubmit } else if(key == Lona.protocol.INPUT_EVENT_TYPE.SUBMIT) { - _this._patch_onsubmit(node, event_type); + this._patch_onsubmit(node, event_type); // onfocus } else if(key == Lona.protocol.INPUT_EVENT_TYPE.FOCUS) { - _this._patch_onfocus(node, event_type); + this._patch_onfocus(node, event_type); // onblur } else if(key == Lona.protocol.INPUT_EVENT_TYPE.BLUR) { - _this._patch_onblur(node, event_type); + this._patch_onblur(node, event_type); }; }); }; this.fire_input_event = function(node, event_type, data) { - var _this = this; - if(this.lona_window._crashed) { return; }; @@ -373,7 +369,7 @@ Lona.LonaInputEventHandler = function(lona_context, lona_window) { }; // send event message - var event_id = _this.gen_event_id(); + var event_id = this.gen_event_id(); var payload = [ event_id, @@ -386,8 +382,8 @@ Lona.LonaInputEventHandler = function(lona_context, lona_window) { ]; var message = [ - _this.lona_window._window_id, - _this.lona_window._view_runtime_id, + this.lona_window._window_id, + this.lona_window._view_runtime_id, Lona.protocol.METHOD.INPUT_EVENT, payload, ] @@ -397,11 +393,11 @@ Lona.LonaInputEventHandler = function(lona_context, lona_window) { JSON.stringify(message) ); - _this.lona_context.send(message); + this.lona_context.send(message); // setup timeout - _this._timeouts[event_id] = setTimeout(function() { - _this.lona_context._run_input_event_timeout_hooks(_this); + this._timeouts[event_id] = setTimeout(() => { + this.lona_context._run_input_event_timeout_hooks(this); }, Lona.settings.INPUT_EVENT_TIMEOUT * 1000); }; From cdba3a31cf529628dfe670ebaf9485cfb063b818 Mon Sep 17 00:00:00 2001 From: Florian Scherf Date: Sun, 10 Apr 2022 21:33:12 +0200 Subject: [PATCH 10/17] client: window: remove obsolete semicolon Signed-off-by: Florian Scherf --- lona/client/_lona/window.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lona/client/_lona/window.js b/lona/client/_lona/window.js index d3f853ec..486c8fad 100644 --- a/lona/client/_lona/window.js +++ b/lona/client/_lona/window.js @@ -226,7 +226,7 @@ Lona.LonaWindow = function(lona_context, root, window_id) { if(patch_type == Lona.protocol.PATCH_TYPE.WIDGET_DATA) { this._widget_data_updater._apply_patch(patch); - } else {; + } else { this._dom_updater._apply_patch(patch); }; From 82a266c9e677255a991fcfa398b5629950017477 Mon Sep 17 00:00:00 2001 From: Florian Scherf Date: Fri, 6 May 2022 21:29:24 +0200 Subject: [PATCH 11/17] client: context: use class keyword instead of functions for classes Signed-off-by: Florian Scherf --- lona/client/_lona/context.js | 104 +++++++++++++++++------------------ 1 file changed, 52 insertions(+), 52 deletions(-) diff --git a/lona/client/_lona/context.js b/lona/client/_lona/context.js index 982f9160..ff9fe69f 100644 --- a/lona/client/_lona/context.js +++ b/lona/client/_lona/context.js @@ -1,41 +1,41 @@ -Lona.LonaContext = function(settings) { - // settings --------------------------------------------------------------- - this.settings = settings || {}; - this.settings.target = this.settings.target || '#lona'; - this.settings.title = this.settings.title || ''; - - if(typeof(this.settings.update_address_bar) == 'undefined') { - this.settings.update_address_bar = true; - }; +Lona.LonaContext = class LonaContext { + constructor(settings) { + this.settings = settings || {}; + this.settings.target = this.settings.target || '#lona'; + this.settings.title = this.settings.title || ''; + + if(typeof(this.settings.update_address_bar) == 'undefined') { + this.settings.update_address_bar = true; + }; - if(typeof(this.settings.update_title) == 'undefined') { - this.settings.update_title = true; - }; + if(typeof(this.settings.update_title) == 'undefined') { + this.settings.update_title = true; + }; - if(typeof(this.settings.follow_redirects) == 'undefined') { - this.settings.follow_redirects = true; - }; + if(typeof(this.settings.follow_redirects) == 'undefined') { + this.settings.follow_redirects = true; + }; - if(typeof(this.settings.follow_http_redirects) == 'undefined') { - this.settings.follow_http_redirects = true; - }; + if(typeof(this.settings.follow_http_redirects) == 'undefined') { + this.settings.follow_http_redirects = true; + }; - if(typeof(this.settings.scroll_to_top_on_view_start) == 'undefined') { - this.settings.scroll_to_top_on_view_start = true; - }; + if(typeof(this.settings.scroll_to_top_on_view_start) == 'undefined') { + this.settings.scroll_to_top_on_view_start = true; + }; - // state ------------------------------------------------------------------ - this._windows = {}; - this._last_window_id = 0; - this._connect_hooks = []; - this._disconnect_hooks = []; - this._rendering_hooks = []; - this._view_timeout_hooks = []; - this._input_event_timeout_hooks = []; - this._message_handler = []; + this._windows = {}; + this._last_window_id = 0; + this._connect_hooks = []; + this._disconnect_hooks = []; + this._rendering_hooks = []; + this._view_timeout_hooks = []; + this._input_event_timeout_hooks = []; + this._message_handler = []; + }; // window ----------------------------------------------------------------- - this.create_window = function(root, url) { + create_window(root, url) { if(typeof(root) == 'string') { root = document.querySelector(root); }; @@ -53,7 +53,7 @@ Lona.LonaContext = function(settings) { }; // input events ----------------------------------------------------------- - this.patch_input_events = function(root_node_selector, window_id) { + patch_input_events(root_node_selector, window_id) { // find window if(window_id == undefined) { window_id = 1; @@ -71,31 +71,31 @@ Lona.LonaContext = function(settings) { }; // hooks ------------------------------------------------------------------ - this.add_connect_hook = function(hook) { + add_connect_hook(hook) { this._connect_hooks.push(hook); }; - this.add_disconnect_hook = function(hook) { + add_disconnect_hook(hook) { this._disconnect_hooks.push(hook); }; - this.add_rendering_hook = function(hook) { + add_rendering_hook(hook) { this._rendering_hooks.push(hook); }; - this.add_view_timeout_hook = function(hook) { + add_view_timeout_hook(hook) { this._view_timeout_hooks.push(hook); }; - this.add_input_event_timeout_hook = function(hook) { + add_input_event_timeout_hook(hook) { this._input_event_timeout_hooks.push(hook); }; - this.add_message_handler = function(handler) { + add_message_handler(handler) { this._message_handler.push(handler); }; - this._run_connect_hooks = function(event) { + _run_connect_hooks(event) { for(var i in this._connect_hooks) { var hook = this._connect_hooks[i]; @@ -103,7 +103,7 @@ Lona.LonaContext = function(settings) { }; }; - this._run_disconnect_hooks = function(event) { + _run_disconnect_hooks(event) { for(var i in this._disconnect_hooks) { var hook = this._disconnect_hooks[i]; @@ -111,7 +111,7 @@ Lona.LonaContext = function(settings) { }; }; - this._run_rendering_hooks = function(lona_window) { + _run_rendering_hooks(lona_window) { try { for(var i in this._rendering_hooks) { var hook = this._rendering_hooks[i]; @@ -125,7 +125,7 @@ Lona.LonaContext = function(settings) { }; }; - this._run_view_timeout_hooks = function(lona_window) { + _run_view_timeout_hooks(lona_window) { var lona_window_shim = new Lona.LonaWindowShim(this, lona_window); try { @@ -141,7 +141,7 @@ Lona.LonaContext = function(settings) { }; }; - this._run_input_event_timeout_hooks = function(lona_window) { + _run_input_event_timeout_hooks(lona_window) { var lona_window_shim = new Lona.LonaWindowShim(this, lona_window); try { @@ -157,7 +157,7 @@ Lona.LonaContext = function(settings) { }; }; - this._run_message_handler = function(message) { + _run_message_handler(message) { for(var i in this._message_handler) { var message_handler = this._message_handler[i]; @@ -170,7 +170,7 @@ Lona.LonaContext = function(settings) { }; // websocket messages ----------------------------------------------------- - this.send = function(message) { + send(message) { if(typeof(message) != 'string') { message = JSON.stringify(message); }; @@ -180,7 +180,7 @@ Lona.LonaContext = function(settings) { this._ws.send(message); }; - this._handle_raw_websocket_message = function(event) { + _handle_raw_websocket_message(event) { var raw_message = event.data; var json_data = undefined; @@ -227,7 +227,7 @@ Lona.LonaContext = function(settings) { }; // pings ------------------------------------------------------------------ - this.send_ping = function() { + send_ping() { var raw_message = [ undefined, // window_id undefined, // view_runtime_id @@ -243,7 +243,7 @@ Lona.LonaContext = function(settings) { this.send(message); }; - this._send_pings = function() { + _send_pings() { setTimeout( () => { if(this._ws.readyState != this._ws.OPEN) { @@ -258,7 +258,7 @@ Lona.LonaContext = function(settings) { }; // setup ------------------------------------------------------------------ - this.reconnect = function() { + reconnect() { // state this._windows = {}; @@ -309,7 +309,7 @@ Lona.LonaContext = function(settings) { }; }; - this.setup = function() { + setup() { this.reconnect(); // unset websocket.onclose handler when page gets unloaded to @@ -322,11 +322,11 @@ Lona.LonaContext = function(settings) { }; // shortcuts -------------------------------------------------------------- - this.get_default_window = function() { + get_default_window() { return this._windows[1]; }; - this.run_view = function(url, post_data) { + run_view(url, post_data) { var window = this.get_default_window(); return window.run_view(url, post_data); From 1c3f099503bec654a30988e8a9ff5adf198a1248 Mon Sep 17 00:00:00 2001 From: Florian Scherf Date: Fri, 6 May 2022 21:32:09 +0200 Subject: [PATCH 12/17] client: dom renderer: use class keyword instead of functions for classes Signed-off-by: Florian Scherf --- lona/client/_lona/dom-renderer.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/lona/client/_lona/dom-renderer.js b/lona/client/_lona/dom-renderer.js index 0567c46d..f709881d 100644 --- a/lona/client/_lona/dom-renderer.js +++ b/lona/client/_lona/dom-renderer.js @@ -1,9 +1,11 @@ -Lona.LonaDomRenderer = function(lona_context, lona_window) { - this.lona_context = lona_context; - this.lona_window = lona_window; +Lona.LonaDomRenderer = class LonaDomRenderer { + constructor(lona_context, lona_window) { + this.lona_context = lona_context; + this.lona_window = lona_window; + }; // html rendering --------------------------------------------------------- - this._render_node = function(node_spec) { + _render_node(node_spec) { var property_names = ['value', 'checked', 'selected']; var node_list = []; @@ -141,7 +143,7 @@ Lona.LonaDomRenderer = function(lona_context, lona_window) { return node_list; }; - this._render_nodes = function(node_specs) { + _render_nodes(node_specs) { // TODO: get rid of this method and move functionality // into _render_node() From 5e2ae0e28ca23aff43027acada022c8d35be4c0d Mon Sep 17 00:00:00 2001 From: Florian Scherf Date: Fri, 6 May 2022 21:38:48 +0200 Subject: [PATCH 13/17] client: dom updater: use class keyword instead of functions for classes Signed-off-by: Florian Scherf --- lona/client/_lona/dom-updater.js | 30 ++++++++++++++++-------------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/lona/client/_lona/dom-updater.js b/lona/client/_lona/dom-updater.js index 5e910b01..c6494599 100644 --- a/lona/client/_lona/dom-updater.js +++ b/lona/client/_lona/dom-updater.js @@ -1,23 +1,25 @@ -Lona.LonaDomUpdater = function(lona_context, lona_window) { - this.lona_context = lona_context; - this.lona_window = lona_window; +Lona.LonaDomUpdater = class LonaDomUpdater { + constructor(lona_context, lona_window) { + this.lona_context = lona_context; + this.lona_window = lona_window; + }; // helper ----------------------------------------------------------------- - this._add_id = function(node, id) { + _add_id(node, id) { var id_list = node.id.split(' '); id_list = id_list.concat(id); node.id = id_list.join(' ').trim(); }; - this._remove_id = function(node, id) { + _remove_id(node, id) { var id_list = node.id.split(' '); id_list.pop(id); node.id = id_list.join(' ').trim(); }; - this._get_widget_nodes = function(node_id) { + _get_widget_nodes(node_id) { var node_list = []; var widget_marker = this.lona_window._widget_marker[node_id]; var end_marker_text = 'end-lona-widget:' + node_id; @@ -54,7 +56,7 @@ Lona.LonaDomUpdater = function(lona_context, lona_window) { }; // methods ---------------------------------------------------------------- - this._apply_node_list = function(node, node_list) { + _apply_node_list(node, node_list) { for(var index=0; index Date: Fri, 6 May 2022 21:51:53 +0200 Subject: [PATCH 14/17] client: input events: use class keyword instead of functions for classes Signed-off-by: Florian Scherf --- lona/client/_lona/input-events.js | 41 ++++++++++++++++--------------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/lona/client/_lona/input-events.js b/lona/client/_lona/input-events.js index 23a1bac4..2f00585c 100644 --- a/lona/client/_lona/input-events.js +++ b/lona/client/_lona/input-events.js @@ -1,13 +1,17 @@ -Lona.LonaInputEventHandler = function(lona_context, lona_window) { - this.lona_context = lona_context; - this.lona_window = lona_window; +Lona.LonaInputEventHandler = class LonaInputEventHandler { + constructor(lona_context, lona_window) { + this.lona_context = lona_context; + this.lona_window = lona_window; - this.reset = function() { + this.reset(); + }; + + reset() { this._event_id = 1; this._timeouts = {}; }; - this.gen_event_id = function() { + gen_event_id() { var event_id = this._event_id; this._event_id += 1; @@ -15,13 +19,13 @@ Lona.LonaInputEventHandler = function(lona_context, lona_window) { return event_id; }; - this.clear_timeout = function(event_id) { + clear_timeout(event_id) { clearTimeout(this._timeouts[event_id]); delete this._timeouts[event_id]; }; - this._get_value = function(node) { + _get_value(node) { var value = node.value; // checkbox @@ -41,7 +45,7 @@ Lona.LonaInputEventHandler = function(lona_context, lona_window) { return value; }; - this._clear_input_events = function(node) { + _clear_input_events(node) { node.onclick = undefined; node.oninput = undefined; node.onchange = undefined; @@ -49,7 +53,7 @@ Lona.LonaInputEventHandler = function(lona_context, lona_window) { node.onblur = undefined; }; - this._patch_link = function(node) { + _patch_link(node) { var lona_window = this.lona_window; node.onclick = function(event) { @@ -67,7 +71,7 @@ Lona.LonaInputEventHandler = function(lona_context, lona_window) { }; }; - this._patch_onclick = function(node, event_type) { + _patch_onclick(node, event_type) { var input_event_handler = this; var lona_window = this.lona_window; @@ -101,7 +105,7 @@ Lona.LonaInputEventHandler = function(lona_context, lona_window) { }; }; - this._patch_onchange = function(node, event_type) { + _patch_onchange(node, event_type) { var input_event_handler = this; var lona_window = this.lona_window; @@ -160,7 +164,7 @@ Lona.LonaInputEventHandler = function(lona_context, lona_window) { }; }; - this._patch_onsubmit = function(node) { + _patch_onsubmit(node) { node.onsubmit = function(event) { event.preventDefault(); @@ -225,7 +229,7 @@ Lona.LonaInputEventHandler = function(lona_context, lona_window) { }; }; - this._patch_onfocus = function(node, event_type) { + _patch_onfocus(node, event_type) { var input_event_handler = this; var lona_window = this.lona_window; @@ -248,7 +252,7 @@ Lona.LonaInputEventHandler = function(lona_context, lona_window) { }; }; - this._patch_onblur = function(node, event_type) { + _patch_onblur(node, event_type) { var input_event_handler = this; var lona_window = this.lona_window; @@ -271,7 +275,7 @@ Lona.LonaInputEventHandler = function(lona_context, lona_window) { }; }; - this._parse_data_lona_events = function(node) { + _parse_data_lona_events(node) { var event_types = {}; if(!node.hasAttribute('data-lona-events')) { @@ -291,7 +295,7 @@ Lona.LonaInputEventHandler = function(lona_context, lona_window) { return event_types; }; - this.patch_input_events = function(node) { + patch_input_events(node) { if(node.nodeType != Node.ELEMENT_NODE) { return; }; @@ -343,7 +347,7 @@ Lona.LonaInputEventHandler = function(lona_context, lona_window) { }); }; - this.fire_input_event = function(node, event_type, data) { + fire_input_event(node, event_type, data) { if(this.lona_window._crashed) { return; }; @@ -400,7 +404,4 @@ Lona.LonaInputEventHandler = function(lona_context, lona_window) { this.lona_context._run_input_event_timeout_hooks(this); }, Lona.settings.INPUT_EVENT_TIMEOUT * 1000); }; - - // setup ------------------------------------------------------------------ - this.reset(); }; From 3a3e347ededbbdb104854ce385261a1ea664c53b Mon Sep 17 00:00:00 2001 From: Florian Scherf Date: Fri, 6 May 2022 22:09:34 +0200 Subject: [PATCH 15/17] client: widget data updater: use class keyword instead of functions for classes Signed-off-by: Florian Scherf --- lona/client/_lona/widget-data-updater.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/lona/client/_lona/widget-data-updater.js b/lona/client/_lona/widget-data-updater.js index f00d3674..be9841a3 100644 --- a/lona/client/_lona/widget-data-updater.js +++ b/lona/client/_lona/widget-data-updater.js @@ -1,8 +1,10 @@ -Lona.LonaWidgetDataUpdater = function(lona_context, lona_window) { - this.lona_context = lona_context; - this.lona_window = lona_window; +Lona.LonaWidgetDataUpdater = class LonaWidgetDataUpdater { + constructor(lona_context, lona_window) { + this.lona_context = lona_context; + this.lona_window = lona_window; + }; - this._apply_patch = function(patch) { + _apply_patch(patch) { var node_id = patch[0]; var patch_type = patch[1]; var operation = patch[2]; From 9392c90b3d5cb2360719f5da9680a55c95c0bff2 Mon Sep 17 00:00:00 2001 From: Florian Scherf Date: Fri, 6 May 2022 22:11:38 +0200 Subject: [PATCH 16/17] client: window shim: use class keyword instead of functions for classes Signed-off-by: Florian Scherf --- lona/client/_lona/window-shim.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/lona/client/_lona/window-shim.js b/lona/client/_lona/window-shim.js index b6beb0ee..e0c67cf5 100644 --- a/lona/client/_lona/window-shim.js +++ b/lona/client/_lona/window-shim.js @@ -1,10 +1,12 @@ -Lona.LonaWindowShim = function(lona_context, lona_window, widget_id) { - this.lona_context = lona_context; +Lona.LonaWindowShim = class LonaWindowShim { + constructor(lona_context, lona_window, widget_id) { + this.lona_context = lona_context; - this._lona_window = lona_window; - this._widget_id = widget_id; + this._lona_window = lona_window; + this._widget_id = widget_id; + }; - this.fire_input_event = function(node, event_type, data) { + fire_input_event(node, event_type, data) { return this._lona_window._input_event_handler.fire_input_event( node || this._widget_id, event_type, @@ -12,7 +14,7 @@ Lona.LonaWindowShim = function(lona_context, lona_window, widget_id) { ); }; - this.set_html = function(html) { + set_html(html) { if(this._lona_window._view_running) { throw('RuntimeError: cannot set HTML while a view is running'); }; From 506a8a02952cb5e4f7cca62db352cb36ecca9c05 Mon Sep 17 00:00:00 2001 From: Florian Scherf Date: Fri, 6 May 2022 22:18:59 +0200 Subject: [PATCH 17/17] client: window: use class keyword instead of functions for classes Signed-off-by: Florian Scherf --- lona/client/_lona/window.js | 102 ++++++++++++++++++------------------ 1 file changed, 52 insertions(+), 50 deletions(-) diff --git a/lona/client/_lona/window.js b/lona/client/_lona/window.js index 486c8fad..4c2a29dc 100644 --- a/lona/client/_lona/window.js +++ b/lona/client/_lona/window.js @@ -1,45 +1,47 @@ -Lona.LonaWindow = function(lona_context, root, window_id) { - this.lona_context = lona_context; - this._root = root; - this._window_id = window_id; - this._view_start_timeout = undefined; - - this._input_event_handler = new Lona.LonaInputEventHandler( - lona_context, - this, - ); - - this._dom_renderer = new Lona.LonaDomRenderer( - lona_context, - this, - ); - - this._dom_updater = new Lona.LonaDomUpdater( - lona_context, - this, - ); - - this._widget_data_updater = new Lona.LonaWidgetDataUpdater( - lona_context, - this, - ); - - // window state ----------------------------------------------------------- - this._crashed = false; - this._view_running = false; - this._view_runtime_id = undefined; - this._url = ''; - this._nodes = {}; - this._widget_marker = {}; - this._widget_data = {}; - this._widgets = {}; - this._widgets_to_setup = []; - this._widgets_to_update = []; +Lona.LonaWindow = class LonaWindow { + constructor(lona_context, root, window_id) { + this.lona_context = lona_context; + this._root = root; + this._window_id = window_id; + this._view_start_timeout = undefined; + + this._input_event_handler = new Lona.LonaInputEventHandler( + lona_context, + this, + ); + + this._dom_renderer = new Lona.LonaDomRenderer( + lona_context, + this, + ); + + this._dom_updater = new Lona.LonaDomUpdater( + lona_context, + this, + ); + + this._widget_data_updater = new Lona.LonaWidgetDataUpdater( + lona_context, + this, + ); + + this._crashed = false; + this._view_running = false; + this._view_runtime_id = undefined; + this._url = ''; + this._nodes = {}; + this._widget_marker = {}; + this._widget_data = {}; + this._widgets = {}; + this._widgets_to_setup = []; + this._widgets_to_update = []; + }; // urls ------------------------------------------------------------------- - this._set_url = function(raw_url) { + _set_url(raw_url) { // parse pathname, search and hash - _raw_url = new URL(raw_url, window.location.origin); + var _raw_url = new URL(raw_url, window.location.origin); + _raw_url = _raw_url.pathname + _raw_url.search + _raw_url.hash; if(raw_url.startsWith('..')) { @@ -74,17 +76,17 @@ Lona.LonaWindow = function(lona_context, root, window_id) { this._url = url.pathname + url.search + url.hash; }; - this.get_url = function() { + get_url() { return this._url; }; // html rendering helper -------------------------------------------------- - this._clear = function() { + _clear() { this._root.innerHTML = ''; this._input_event_handler.reset(); }; - this._clear_node_cache = function() { + _clear_node_cache() { // running widget deconstructors for(var key in this._widgets) { if(this._widgets[key].deconstruct !== undefined) { @@ -101,7 +103,7 @@ Lona.LonaWindow = function(lona_context, root, window_id) { this._widgets_to_update = []; }; - this._clean_node_cache = function() { + _clean_node_cache() { // nodes Object.keys(this._nodes).forEach(key => { var node = this._nodes[key]; @@ -152,7 +154,7 @@ Lona.LonaWindow = function(lona_context, root, window_id) { }; // hooks ------------------------------------------------------------------ - this._run_widget_hooks = function() { + _run_widget_hooks() { // setup this._widgets_to_setup.forEach(node_id => { var widget = this._widgets[node_id]; @@ -191,7 +193,7 @@ Lona.LonaWindow = function(lona_context, root, window_id) { this._widgets_to_update = []; }; - this._show_html = function (html) { + _show_html(html) { var message_type = html[0]; var data = html[1]; @@ -239,7 +241,7 @@ Lona.LonaWindow = function(lona_context, root, window_id) { }; // public api ------------------------------------------------------------- - this.crash = function(error) { + crash(error) { // encode message var error_string; @@ -265,7 +267,7 @@ Lona.LonaWindow = function(lona_context, root, window_id) { throw(error); }; - this._handle_websocket_message = function (message) { + _handle_websocket_message(message) { var window_id = message[0]; var view_runtime_id = message[1]; var method = message[2]; @@ -350,7 +352,7 @@ Lona.LonaWindow = function(lona_context, root, window_id) { }; }; - this.handle_websocket_message = function(message) { + handle_websocket_message(message) { if(this._crashed) { return; }; @@ -364,7 +366,7 @@ Lona.LonaWindow = function(lona_context, root, window_id) { }; }; - this.run_view = function(url, post_data) { + run_view(url, post_data) { // Save the requested url to only show HTML messages that are related // to this request. // This prevents glitches when switching urls fast. @@ -420,7 +422,7 @@ Lona.LonaWindow = function(lona_context, root, window_id) { }, Lona.settings.VIEW_START_TIMEOUT * 1000); }; - this.setup = function(url) { + setup(url) { this.run_view(url); }; };