From f6ab278d433744570ef9bdfca881484d7b397af1 Mon Sep 17 00:00:00 2001 From: Arpita-Jaiswal Date: Mon, 30 Oct 2023 17:16:30 +0530 Subject: [PATCH 1/3] Set ssr true at the start --- fastn-js/src/ssr.rs | 5 +- ftd/src/js/ftd_test_helpers.rs | 1 + ftd/t/assets/test.js | 4 ++ ftd/t/js/70-external-js.ftd | 22 ++++++ ftd/t/js/70-external-js.html | 119 +++++++++++++++++++++++++++++++++ 5 files changed, 148 insertions(+), 3 deletions(-) create mode 100644 ftd/t/js/70-external-js.ftd create mode 100644 ftd/t/js/70-external-js.html diff --git a/fastn-js/src/ssr.rs b/fastn-js/src/ssr.rs index f4d6cba9e4..ea8cb8bcaa 100644 --- a/fastn-js/src/ssr.rs +++ b/fastn-js/src/ssr.rs @@ -30,14 +30,13 @@ pub fn ssr(ast: &[fastn_js::Ast]) -> String { parenti0.setProperty(fastn_dom.PropertyKind.Height, fastn_dom.Resizing.FillContainer, inherited); main(parenti0); }}; - fastn_virtual.ssr(main_wrapper);", fastn_js::to_js(ast, - "foo")); + fastn_virtual.ssr(main_wrapper);", fastn_js::to_js(ast,"foo")); ssr_str(&js) } pub fn ssr_with_js_string(package_name: &str, js: &str) -> String { let js = format!(" - let __fastn_package_name__ = \"{}\";\n{} + let __fastn_package_name__ = \"{}\";\nssr = true;\n{} let main_wrapper = function(parent) {{ let parenti0 = fastn_dom.createKernel(parent, fastn_dom.ElementKind.Column); parenti0.setProperty(fastn_dom.PropertyKind.Width, fastn_dom.Resizing.FillContainer, inherited); diff --git a/ftd/src/js/ftd_test_helpers.rs b/ftd/src/js/ftd_test_helpers.rs index e19e17403f..6eee4056a5 100644 --- a/ftd/src/js/ftd_test_helpers.rs +++ b/ftd/src/js/ftd_test_helpers.rs @@ -111,6 +111,7 @@ fn p(s: &str, t: &str, fix: bool, manual: bool, script: bool, file_location: &st + + + + + + +
undefined
+ + From abf712b27093b9d5cb8151e8671a0c25f40625a4 Mon Sep 17 00:00:00 2001 From: Arpita-Jaiswal Date: Mon, 30 Oct 2023 18:46:40 +0530 Subject: [PATCH 2/3] Working code --- fastn-js/js/dom.js | 1 + fastn-js/js/fastn.js | 6 ++++++ fastn-js/js/virtual.js | 12 ++++++++++-- fastn-js/src/lib.rs | 6 +++--- fastn-js/src/ssr.rs | 2 +- fastn-js/src/to_js.rs | 16 +++++++++++----- ftd/src/js/ftd_test_helpers.rs | 1 + ftd/t/js/70-external-js.ftd | 6 ++++-- 8 files changed, 37 insertions(+), 13 deletions(-) diff --git a/fastn-js/js/dom.js b/fastn-js/js/dom.js index d1f78713f9..813e3083bc 100644 --- a/fastn-js/js/dom.js +++ b/fastn-js/js/dom.js @@ -2198,6 +2198,7 @@ class Node2 { }; } addEventHandler(event, func) { + found_external_js = false; if (event === fastn_dom.Event.Click) { let onclickEvents = this.mergeFnCalls(this.#node.onclick, func); if (fastn_utils.isNull(this.#node.onclick)) this.attachCss("cursor", "pointer"); diff --git a/fastn-js/js/fastn.js b/fastn-js/js/fastn.js index f3d3c6ea44..814fc5204b 100644 --- a/fastn-js/js/fastn.js +++ b/fastn-js/js/fastn.js @@ -285,6 +285,8 @@ fastn.closureWithoutExecute = function (func) { } fastn.formula = function (deps, func) { + found_external_js = false; + let closure = fastn.closure(func); let mutable = new Mutable(closure.get()); for (let idx in deps) { @@ -297,6 +299,10 @@ fastn.formula = function (deps, func) { })); } + if (found_external_js) { + mutables_to_execute_after_hydrate.push([mutable, closure]); + } + return mutable; } diff --git a/fastn-js/js/virtual.js b/fastn-js/js/virtual.js index 167cd35ea4..4c0bea63db 100644 --- a/fastn-js/js/virtual.js +++ b/fastn-js/js/virtual.js @@ -1,9 +1,11 @@ let fastn_virtual = {} let id_counter = 0; -let hydrating = false; +let hydrating = true; let ssr = false; let rerender = false; +let found_external_js = false; +let mutables_to_execute_after_hydrate = []; class ClassList { #classes = []; @@ -153,7 +155,8 @@ fastn_virtual.hydrate = function(main) { let current_device = ftd.get_device(); let found_device = ftd.device.get(); if (current_device !== found_device) { - rerender = true + hydrating = false; + rerender = true; ftd.device = fastn.mutable(current_device); let styles = document.getElementById("styles"); styles.innerText = ""; @@ -176,6 +179,11 @@ fastn_virtual.hydrate = function(main) { main(body); id_counter = 0; hydrating = false; + for (mutable_with_closure of mutables_to_execute_after_hydrate) { + let [mutable, closure] = mutable_with_closure; + closure.update(); + mutable.set(closure.get()); + } } fastn_virtual.ssr = function(main) { diff --git a/fastn-js/src/lib.rs b/fastn-js/src/lib.rs index bcf8ae8477..b3fafa1708 100644 --- a/fastn-js/src/lib.rs +++ b/fastn-js/src/lib.rs @@ -41,7 +41,7 @@ pub use to_js::to_js; pub use udf::{udf_with_arguments, UDF}; pub use udf_statement::UDFStatement; -pub fn all_js_without_test_and_ftd_langugage_js() -> String { +pub fn all_js_without_test_and_ftd_language_js() -> String { let markdown_js = fastn_js::markdown_js(); let fastn_js = include_str!("../js/fastn.js"); let dom_js = include_str!("../js/dom.js"); @@ -54,14 +54,14 @@ pub fn all_js_without_test_and_ftd_langugage_js() -> String { } pub fn all_js_without_test() -> String { - let fastn_js = all_js_without_test_and_ftd_langugage_js(); + let fastn_js = all_js_without_test_and_ftd_language_js(); let ftd_language_js = include_str!("../js/ftd-language.js"); format!("{ftd_language_js}{fastn_js}\nwindow.ftd = ftd;\n") } pub fn all_js_with_test() -> String { let test_js = include_str!("../js/test.js"); - let all_js = all_js_without_test_and_ftd_langugage_js(); + let all_js = all_js_without_test_and_ftd_language_js(); format!("{all_js}{test_js}") } diff --git a/fastn-js/src/ssr.rs b/fastn-js/src/ssr.rs index ea8cb8bcaa..99b2f5c5a7 100644 --- a/fastn-js/src/ssr.rs +++ b/fastn-js/src/ssr.rs @@ -36,7 +36,7 @@ pub fn ssr(ast: &[fastn_js::Ast]) -> String { pub fn ssr_with_js_string(package_name: &str, js: &str) -> String { let js = format!(" - let __fastn_package_name__ = \"{}\";\nssr = true;\n{} + let __fastn_package_name__ = \"{}\";\nssr = true; hydrating = false;\n{} let main_wrapper = function(parent) {{ let parenti0 = fastn_dom.createKernel(parent, fastn_dom.ElementKind.Column); parenti0.setProperty(fastn_dom.PropertyKind.Width, fastn_dom.Resizing.FillContainer, inherited); diff --git a/fastn-js/src/to_js.rs b/fastn-js/src/to_js.rs index e31e3935ef..fdadaf22d2 100644 --- a/fastn-js/src/to_js.rs +++ b/fastn-js/src/to_js.rs @@ -467,19 +467,25 @@ fn func( "__fastn_package_name__ = \"{}\";", package_name ))) + .append(if add_catch_statement { + text("found_external_js = true;").append(pretty::RcDoc::softline_()) + } else { + pretty::RcDoc::nil() + }) .append(pretty::RcDoc::softline_()) .append(text("try {")) .append(pretty::RcDoc::softline_()) + .append(if add_catch_statement { + text("if (!ssr && !hydrating) {").append(pretty::RcDoc::softline_()) + } else { + pretty::RcDoc::nil() + }) .append(body.nest(4)) .append(pretty::RcDoc::softline_()) .append(text( format!( "}} {} finally {{ __fastn_package_name__ = __fastn_super_package_name__;}}", - if add_catch_statement { - "catch (e) {if(!ssr){throw e;}}" - } else { - "" - } + if add_catch_statement { "}" } else { "" } ) .as_str(), )) diff --git a/ftd/src/js/ftd_test_helpers.rs b/ftd/src/js/ftd_test_helpers.rs index 6eee4056a5..bb5b2feaf0 100644 --- a/ftd/src/js/ftd_test_helpers.rs +++ b/ftd/src/js/ftd_test_helpers.rs @@ -112,6 +112,7 @@ fn p(s: &str, t: &str, fix: bool, manual: bool, script: bool, file_location: &st {dummy_package_data} {all_js} ssr = true; + hydrating = false; {js_ftd_script} {js_document_script} fastn_virtual.ssr(main); diff --git a/ftd/t/js/70-external-js.ftd b/ftd/t/js/70-external-js.ftd index 2dd1e8f445..fd9d879ffa 100644 --- a/ftd/t/js/70-external-js.ftd +++ b/ftd/t/js/70-external-js.ftd @@ -4,10 +4,12 @@ -- ftd.integer: $num -/-- ftd.text: Hello if >= 10 +-- ftd.text: Hello if >= 10 js: ../../t/assets/test.js if: { num > 10 } +-- ftd.text: Hello + -- string greetingfn(): @@ -19,4 +21,4 @@ greeting() -- integer numberfn(): js: ../../t/assets/test.js -numbers() +number() From d8bb6a7279da944f3408d03e44369ee07b307749 Mon Sep 17 00:00:00 2001 From: Arpita-Jaiswal Date: Mon, 30 Oct 2023 18:51:35 +0530 Subject: [PATCH 3/3] Fix tests --- ftd/t/js/63-external-js.html | 33 +++++++++++++++------------------ ftd/t/js/70-external-js.html | 36 +++++++++++++++++++++++------------- 2 files changed, 38 insertions(+), 31 deletions(-) diff --git a/ftd/t/js/63-external-js.html b/ftd/t/js/63-external-js.html index 4596553fb7..48e8ef874e 100644 --- a/ftd/t/js/63-external-js.html +++ b/ftd/t/js/63-external-js.html @@ -52,13 +52,12 @@ { let __fastn_super_package_name__ = __fastn_package_name__; __fastn_package_name__ = "foo"; + found_external_js = true; try { - let __args__ = fastn_utils.getArgs({ - }, args); - return (show("Hello World!")); - } catch (e) { - if (!ssr) { - throw e; + if (!ssr && !hydrating) { + let __args__ = fastn_utils.getArgs({ + }, args); + return (show("Hello World!")); } } finally { __fastn_package_name__ = __fastn_super_package_name__; @@ -69,13 +68,12 @@ { let __fastn_super_package_name__ = __fastn_package_name__; __fastn_package_name__ = "foo"; + found_external_js = true; try { - let __args__ = fastn_utils.getArgs({ - }, args); - return (show("Hello World Again!")); - } catch (e) { - if (!ssr) { - throw e; + if (!ssr && !hydrating) { + let __args__ = fastn_utils.getArgs({ + }, args); + return (show("Hello World Again!")); } } finally { __fastn_package_name__ = __fastn_super_package_name__; @@ -86,13 +84,12 @@ { let __fastn_super_package_name__ = __fastn_package_name__; __fastn_package_name__ = "foo"; + found_external_js = true; try { - let __args__ = fastn_utils.getArgs({ - }, args); - return (greeting()); - } catch (e) { - if (!ssr) { - throw e; + if (!ssr && !hydrating) { + let __args__ = fastn_utils.getArgs({ + }, args); + return (greeting()); } } finally { __fastn_package_name__ = __fastn_super_package_name__; diff --git a/ftd/t/js/70-external-js.html b/ftd/t/js/70-external-js.html index bf05b8c327..897c6668a6 100644 --- a/ftd/t/js/70-external-js.html +++ b/ftd/t/js/70-external-js.html @@ -16,7 +16,7 @@ -
undefined
@@ -33,6 +33,18 @@ }), inherited); let parenti1 = fastn_dom.createKernel(parent, fastn_dom.ElementKind.Integer); parenti1.setProperty(fastn_dom.PropertyKind.IntegerValue, global.foo__num, inherited); + fastn_dom.conditionalDom(parent, [ + global.foo__num + ], function () { + return (fastn_utils.getter(global.foo__num) > 10); + }, function (root) { + let rooti0 = fastn_dom.createKernel(root, fastn_dom.ElementKind.Text); + rooti0.setProperty(fastn_dom.PropertyKind.StringValue, "Hello if >= 10", inherited); + rooti0.setProperty(fastn_dom.PropertyKind.Js, fastn.mutableList(["../../t/assets/test.js"]), inherited); + return rooti0; + }); + let parenti3 = fastn_dom.createKernel(parent, fastn_dom.ElementKind.Text); + parenti3.setProperty(fastn_dom.PropertyKind.StringValue, "Hello", inherited); } finally { __fastn_package_name__ = __fastn_super_package_name__; } @@ -41,13 +53,12 @@ let foo__greetingfn = function (args) { let __fastn_super_package_name__ = __fastn_package_name__; __fastn_package_name__ = "foo"; + found_external_js = true; try { - let __args__ = fastn_utils.getArgs({ - }, args); - return (greeting()); - } catch (e) { - if (!ssr) { - throw e; + if (!ssr && !hydrating) { + let __args__ = fastn_utils.getArgs({ + }, args); + return (greeting()); } } finally { __fastn_package_name__ = __fastn_super_package_name__; @@ -58,13 +69,12 @@ { let __fastn_super_package_name__ = __fastn_package_name__; __fastn_package_name__ = "foo"; + found_external_js = true; try { - let __args__ = fastn_utils.getArgs({ - }, args); - return (numbers()); - } catch (e) { - if (!ssr) { - throw e; + if (!ssr && !hydrating) { + let __args__ = fastn_utils.getArgs({ + }, args); + return (number()); } } finally { __fastn_package_name__ = __fastn_super_package_name__;