fixing breakpoint

fastn-js/js/dom.js

@@ -1570,7 +1570,7 @@ class Node2 {
             if (fastn_utils.isNull(staticValue)) {
                 return;
             }
-            ftd.breakpoint_width.set("mobile", fastn_utils.getStaticValue(staticValue));
+            ftd.breakpoint_width.set(fastn_utils.getStaticValue(staticValue));
         } else if (kind === fastn_dom.PropertyKind.Css) {
             let css_list = staticValue.map(obj => fastn_utils.getStaticValue(obj.item));
             css_list.forEach((css) => {

fastn-js/js/fastn.js

@@ -360,8 +360,7 @@ class RecordInstance {
             }
 
             this.#fields = fields;
-        }
-        if (this.#fields[key] === undefined) {
+        }else if (this.#fields[key] === undefined) {
             this.#fields[key] = fastn.mutable(null);
             this.#fields[key].setWithoutUpdate(value);
         } else {

fastn-js/js/virtual.js

@@ -147,9 +147,22 @@ class Document2 {
 
 fastn_virtual.document = new Document2();
 
+function addClosureToBreakpointWidth() {
+    let closure = fastn.closureWithoutExecute(function() {
+        let current = ftd.get_device();
+        let lastDevice = ftd.device.get();
+        if (current === lastDevice) {
+            return;
+        }
+        console.log("last_device", lastDevice, "current_device", current);
+        ftd.device.set(current);
+    });
 
+    ftd.breakpoint_width.addClosure(closure);
+}
 
 fastn_virtual.hydrate = function(main) {
+    addClosureToBreakpointWidth();
     let current_device = ftd.get_device();
     let found_device = ftd.device.get();
     if (current_device !== found_device) {

ftd/t/js/72-document-breakpoint.ftd

@@ -0,0 +1,9 @@
+-- ftd.document:
+breakpoint: 800
+
+-- ftd.text:
+color: red
+text if { ftd.device == "mobile" }: Mobile text
+text if { ftd.device == "desktop" }: Desktop text
+
+-- end: ftd.document