Set ssr true at the start

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");

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;
 }
 

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) {

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}")
 }
 

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; 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);

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(),
             ))

ftd/src/js/ftd_test_helpers.rs

@@ -111,6 +111,8 @@ fn p(s: &str, t: &str, fix: bool, manual: bool, script: bool, file_location: &st
                         <script>
                         {dummy_package_data}
                         {all_js}
+                        ssr = true;
+                        hydrating = false;
                         {js_ftd_script}
                         {js_document_script}
                         fastn_virtual.ssr(main);

ftd/t/assets/test.js

@@ -5,3 +5,7 @@ function show(a) {
 function greeting(){
     return "Namaste!";
 }
+
+function number() {
+    return 12;
+}

ftd/t/js/70-external-js.ftd

@@ -0,0 +1,24 @@
+-- ftd.text: $greetingfn()
+
+-- integer num: $numberfn()
+
+-- ftd.integer: $num
+
+-- ftd.text: Hello if >= 10
+js: ../../t/assets/test.js
+if: { num > 10 }
+
+-- ftd.text: Hello
+
+
+
+-- string greetingfn():
+js: ../../t/assets/test.js
+
+greeting()
+
+
+-- integer numberfn():
+js: ../../t/assets/test.js
+
+number()