workaround for server and client sometimes gives different result

Author: imakira

src/net/coruscation/cerulean/common/pages.cljc

@@ -12,7 +12,7 @@
    [net.coruscation.cerulean.router :as router]
    [net.coruscation.cerulean.utils :refer
     [#?@(:cljs [obj->clj]) use-asset use-context use-orgx
-     use-user-config] :as utils]
+     use-precalculated use-user-config] :as utils]
    [uix.core :as uix :refer
     [$ #?@(:cljs [lazy suspense]) defui use-effect use-memo
      use-ref use-state]]))
@@ -222,16 +222,17 @@
                      published-date description
                      orgx] :as blog-asset}
         (use-asset (str "blog/" id))
-
-        toc-content (use-memo
-                     (fn []
-                       #?(:cljs (if show-toc? (let [dummy (.createElement js/document "html")]
-                                                (set! (.-innerHTML dummy)
-                                                      content)
-                                                (generate-toc-from-element dummy))
-                                    nil)
-                          :clj (generate-toc-from-html-string content)))
-                     [content show-toc?])
+		toc-content (use-precalculated id
+                      ;; In some case, `generate-toc-from-html-string` (in clj) and
+                      ;;   `generate-toc-from-element` in cljs produces slightly different results.
+                      ;; The following code will choose clj, if server rendered, and cljs version if client rendered.
+                      ;; Thus workaround the problem.
+                      (fn [] #?(:clj (generate-toc-from-html-string content)))
+                      (fn [] #?(:cljs (if show-toc? (let [dummy (.createElement js/document "html")]
+                                                      (set! (.-innerHTML dummy)
+                                                            content)
+                                                      (generate-toc-from-element dummy))
+                                          nil))))
         doc-ref (use-ref nil)
         [current-header-id set-current-header-id!] (use-state nil)]
     (utils/set-title! (str title " | " (use-user-config :title)))

src/net/coruscation/cerulean/render/context.clj

@@ -1,5 +1,7 @@
 (ns net.coruscation.cerulean.render.context
-  (:require [net.coruscation.cerulean.render.context-commons :refer :all]))
+  (:require
+   [clojure.edn :as edn]
+   [net.coruscation.cerulean.render.context-commons :refer :all]))
 
 (def ^:dynamic *context* (atom {}))
 
@@ -14,6 +16,13 @@
          assoc-in [:assets k]
          v))
 
+;; TODO: unify put-edn! and add-asset!
+(defn put-edn! [k v]
+  (add-assets! k (prn-str v)))
+
+(defn get-edn [k]
+  (edn/read-string (get @*context* k)))
+
 (defn add-extra-script! [id module]
   (swap! *context* update-in
          [:extra-scripts]

src/net/coruscation/cerulean/utils.cljc

@@ -7,13 +7,15 @@
    #?@(:clj [[net.coruscation.cerulean.server.assets :as assets]
              [reitit.core :as r]
              [hickory.zip :as hzip]
-             [net.coruscation.cerulean.orgx.orgx :as orgx]
-             [net.coruscation.cerulean.render.context :as render-context]])
+             [net.coruscation.cerulean.render.context :as render-context]
+             [clojure.tools.logging :as logging]])
    [clojure.core.async :as a]
+   [clojure.edn :as edn]
+   [clojure.string :as str]
    [clojure.zip :as zip]
    [net.coruscation.cerulean.orgx.orgx-commons :as orgx-commons]
    [net.coruscation.cerulean.render.context-commons :as render-context-commons])
-  #?(:cljs (:require-macros [net.coruscation.cerulean.utils :refer [use-context context-binding defcontext if-cljs cljc-case]]))
+  #?(:cljs (:require-macros [net.coruscation.cerulean.utils :refer [use-context context-binding defcontext if-cljs cljc-case ident-clj-cljs use-precalculated]]))
   #?(:cljs (:import
             [goog.async Debouncer Throttle])))
 
@@ -233,3 +235,23 @@
                (.-documentElement)
                (.-style)
                (.setProperty var value))))
+
+#?(:clj (defn get-ident [env form]
+          (let [ns (or (-> env :ns :name) (ns-name *ns*))
+                {:keys [line column]} (meta form)
+                ident (str (-> ns (str/replace "." "-")) "-" line "-" column)]
+            ident)))
+
+#?(:clj (defmacro use-precalculated
+          [id & [calculate fallback]]
+          (let [ident (get-ident &env &form)]
+            (if (cljs-env? &env)
+              `(let [calculated# (aget js/globalThis (str ~ident ~id))]
+                 (if (~'undefined? calculated#)
+                   (~fallback)
+                   (edn/read-string calculated#)))
+              `(do
+                 (let [result# (~calculate)]
+                   (render-context/put-edn! (str ~ident ~id) result#)
+                   result#))))))
+

test/net/coruscation/cerulean/utils_test.clj

@@ -0,0 +1,17 @@
+(ns net.coruscation.cerulean.utils-test
+  (:require
+   [clojure.edn :as edn]
+   [clojure.test :refer [deftest is]]
+   [net.coruscation.cerulean.render.context :as render-context]
+   [net.coruscation.cerulean.utils :as subject]))
+
+(deftest use-precalculated-test
+  (render-context/with-new-context
+    (subject/use-precalculated "abc"
+      (fn [] (+ 1 1))
+      (fn []))
+    (let [assets (:assets @render-context/*context*)
+          [key value] (first assets)]
+      (is (= 1 (count assets)))
+      (is (.endsWith key "abc"))
+      (is (= 2 (edn/read-string value))))))