Write style for once in rerender mode

fastn-stack · Oct 25, 2023 · 8a67a67 · 8a67a67
1 parent c4dcc73
commit 8a67a67
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 16 deletions.
diff --git a/fastn-js/js/dom.js b/fastn-js/js/dom.js
@@ -1,5 +1,7 @@
 let fastn_dom = {};
 
+fastn_dom.styleClasses = "";
+
 fastn_dom.codeData = {
     availableThemes: {},
     addedCssFile: []
@@ -937,14 +939,7 @@ class Node2 {
             if (!!className) {
                 if (!fastn_dom.classes[cssClass]) {
                     fastn_dom.classes[cssClass] = fastn_dom.classes[cssClass] || obj;
-                    let styles = document.getElementById('styles');
-                    let newClasses = getClassAsString(cssClass, obj);
-                    let textNode = document.createTextNode(newClasses);
-                    if (styles.styleSheet) {
-                        styles.styleSheet.cssText = newClasses;
-                    } else {
-                        styles.appendChild(textNode);
-                    }
+                    fastn_utils.createStyle(cssClass, obj);
                 }
                 return cls;
             }
@@ -958,14 +953,7 @@ class Node2 {
             if (createClass) {
                 if (!fastn_dom.classes[cssClass]) {
                     fastn_dom.classes[cssClass] = fastn_dom.classes[cssClass] || obj;
-                    let styles = document.getElementById('styles');
-                    let newClasses = getClassAsString(cssClass, obj);
-                    let textNode = document.createTextNode(newClasses);
-                    if (styles.styleSheet) {
-                        styles.styleSheet.cssText = newClasses;
-                    } else {
-                        styles.appendChild(textNode);
-                    }
+                    fastn_utils.createStyle(cssClass, obj);
                 }
                 this.#node.style.removeProperty(property);
                 this.#node.classList.add(cls);

diff --git a/fastn-js/js/utils.js b/fastn-js/js/utils.js
@@ -45,6 +45,20 @@ let fastn_utils = {
         }
         return [node, css, attributes];
     },
+    createStyle(cssClass, obj) {
+        if (rerender) {
+            fastn_dom.styleClasses = `${fastn_dom.styleClasses}${getClassAsString(cssClass, obj)}\n`;
+        } else {
+            let styles = document.getElementById('styles');
+            let newClasses = getClassAsString(cssClass, obj);
+            let textNode = document.createTextNode(newClasses);
+            if (styles.styleSheet) {
+                styles.styleSheet.cssText = newClasses;
+            } else {
+                styles.appendChild(textNode);
+            }
+        }
+    },
     getStaticValue(obj) {
         if (obj instanceof fastn.mutableClass) {
            return this.getStaticValue(obj.get());

diff --git a/fastn-js/js/virtual.js b/fastn-js/js/virtual.js
@@ -3,6 +3,7 @@ let fastn_virtual = {}
 let id_counter = 0;
 let hydrating = false;
 let ssr = false;
+let rerender = false;
 
 class ClassList {
     #classes = [];
@@ -152,6 +153,7 @@ fastn_virtual.hydrate = function(main) {
     let current_device = ftd.get_device();
     let found_device = ftd.device.get();
     if (current_device !== found_device) {
+        rerender = true
         ftd.device = fastn.mutable(current_device);
         let styles = document.getElementById("styles");
         styles.innerText = "";
@@ -165,6 +167,8 @@ fastn_virtual.hydrate = function(main) {
         }
 
         main(document.body);
+        rerender = false;
+        styles.innerHTML = fastn_dom.styleClasses;
         return;
     }
     hydrating = true;