Merge remote-tracking branch 'origin/main' into tutor_3

fastn-stack · Nov 6, 2023 · e661daf · e661daf
2 parents a1db437 + 984674e
commit e661daf
Show file tree

Hide file tree

Showing 8 changed files with 324 additions and 154 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/fastn-js/js/dom.js b/fastn-js/js/dom.js
@@ -1566,6 +1566,11 @@ class Node2 {
             }
         } else if (kind === fastn_dom.PropertyKind.Id) {
             this.#node.id = staticValue;
+        } else if (kind === fastn_dom.PropertyKind.BreakpointWidth) {
+            if (fastn_utils.isNull(staticValue)) {
+                return;
+            }
+            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) => {

diff --git a/fastn-js/js/fastn.js b/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 {

diff --git a/fastn-js/js/virtual.js b/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) {

diff --git a/fastn-js/src/property.rs b/fastn-js/src/property.rs
@@ -307,6 +307,7 @@ impl Value {
 
 #[derive(Debug)]
 pub enum PropertyKind {
+    BreakpointWidth,
     Children,
     StringValue,
     IntegerValue,
@@ -433,6 +434,7 @@ pub enum PropertyKind {
 impl PropertyKind {
     pub(crate) fn to_js(&self) -> &'static str {
         match self {
+            PropertyKind::BreakpointWidth => "fastn_dom.PropertyKind.BreakpointWidth",
             PropertyKind::Children => "fastn_dom.PropertyKind.Children",
             PropertyKind::Id => "fastn_dom.PropertyKind.Id",
             PropertyKind::Css => "fastn_dom.PropertyKind.Css",

diff --git a/ftd/src/js/element.rs b/ftd/src/js/element.rs
@@ -1420,6 +1420,16 @@ impl Document {
         let kernel = create_element(fastn_js::ElementKind::Document, parent, index, rdata);
         component_statements.push(fastn_js::ComponentStatement::CreateKernel(kernel.clone()));
 
+        if let Some(ref breakpoint_width) = self.breakpoint_width {
+            component_statements.push(fastn_js::ComponentStatement::SetProperty(
+                breakpoint_width.to_set_property(
+                    fastn_js::PropertyKind::BreakpointWidth,
+                    doc,
+                    kernel.name.as_str(),
+                    rdata,
+                ),
+            ));
+        }
         component_statements.extend(self.container.to_component_statements(
             doc,
             rdata,

diff --git a/ftd/t/js/72-document-breakpoint.ftd b/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
diff --git a/ftd/t/js/72-document-breakpoint.html b/ftd/t/js/72-document-breakpoint.html