fix: observe slidev-layout for updated font size (#21)

* Watching changes in .slidev-layout

* Add debug msg to useInjectStyle.ts

* Only read font size when layout loaded

* Inject base font sizes through config provider

* Add a comment

* Remove useBaseFontSizes from naive.ts

* Directly import base font size

* Use isDark as a singleton

* Rename base font hook

* Add a comment in useBaseFontSize

* Bump version

* Update latest changes

* Extract observeSlidevLayout

* Use ResizeObserver for font sizes

* Bump version to 0.8.1

Author: sghng

package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-addon-naive",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "An addon that brings Naive UI components to Slidev.",
   "keywords": [
     "naive-ui",

src/useBaseFontSize.ts

@@ -16,29 +16,50 @@ const setBaseFontSize = () => {
   }
 };
 
-if (typeof window === "undefined") {
-  console.error(
-    `[Naive] Window is undefined, can't observe DOM to set base font size`,
-  );
-} else {
-  // Setup observer for DOM changes
-  const observer = new MutationObserver(() => {
-    const slidevLayout = document.querySelector(".slidev-layout");
-
-    if (slidevLayout) {
-      console.debug("[Naive] Found .slidev-layout");
-      observer.disconnect(); // stop observing the document body
-      setBaseFontSize();
+const observeBaseFontSize = () => {
+  // Setup observer for DOM changes and font size changes
+  const layoutObserver = new MutationObserver(() => {
+    const layout = document.querySelector(".slidev-layout");
+    if (!layout) {
+      return;
     }
+
+    console.debug("[Naive] Found .slidev-layout, switching to style observer");
+    layoutObserver.disconnect(); // stop observing the document body
+
+    // Create new observers to get updated font size
+    const sizeObserver = new ResizeObserver(setBaseFontSize);
+    // somehow needed to get styles from UnoCSS @apply directives
+    sizeObserver.observe(layout);
+
+    const styleObserver = new MutationObserver(setBaseFontSize);
+    // needed to get styles update in runtime
+    styleObserver.observe(layout, {
+      attributes: true,
+      attributeFilter: ["style"],
+    });
+
+    // TODO: this won't change font size in runtime. a polling approach can be
+    // used, but I'm hesitating because of performance concerns
+
+    setBaseFontSize(); // make an attempt to set the font size
   });
 
   // Start observing the document body for layout appearance
-  observer.observe(document.body, {
+  layoutObserver.observe(document.body, {
     childList: true,
     subtree: true,
   });
 
   console.debug("[Naive] Watching for .slidev-layout element to show up");
+};
+
+if (typeof window === "undefined") {
+  console.error(
+    `[Naive] Window is undefined, can't observe DOM to set base font size`,
+  );
+} else {
+  observeBaseFontSize();
 }
 
 export default fontSize;