SSR

.clj-kondo/config.edn

@@ -1,2 +1,4 @@
 {:config-paths ["../resources/clj-kondo.exports/lilactown/helix"]
- :lint-as {devcards.core/defcard clojure.core/def}}
+ :lint-as {devcards.core/defcard clojure.core/def
+           manifold.deferred/loop clojure.core/doseq
+           helix.server.dom/dfor clojure.core/for}}

.gitignore

@@ -2,8 +2,8 @@
 /public/benchmark/js
 /public/test/js
 node_modules
-/.shadow-cljs
-/package-lock.json
+.shadow-cljs
+package-lock.json
 /pom.xml
 /target
 .clj-kondo/.cache

bin/kaocha

@@ -1,2 +1,2 @@
 #!/usr/bin/env sh
-clojure -M:test "$@"
+clojure -M:test:ci "$@"

demo/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+.shadow-cljs
+.cpcache
+resources/public/js
+package-lock.json
+.nrepl-port

demo/deps.edn

@@ -0,0 +1,6 @@
+{:paths ["src" "resources"] ; include resources so that we have resources on classpath
+ :deps {lilactown/helix {:local/root "../"}
+        manifold/manifold {:mvn/version "0.2.3"}
+        aleph/aleph {:mvn/version "0.4.7"}
+        thheller/shadow-cljs {:mvn/version "2.19.0"}
+        metosin/reitit-ring {:mvn/version "0.5.5"}}}

demo/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "demo",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "shadow-cljs": "^2.19.0"
+  },
+  "dependencies": {
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
+  }
+}

demo/shadow-cljs.edn

@@ -0,0 +1,8 @@
+{:deps true
+ :builds
+ {:app {:target :browser
+        :output-dir "resources/public/js"
+        :asset-path "assets/js"
+        :modules {:main {:entries [helix.demo.ssr]
+                         :init-fn helix.demo.ssr/start-client!}}
+        :dev {:compiler-options {:output-feature-set :es6}}}}}

demo/src/helix/demo/ssr.cljc

@@ -0,0 +1,116 @@
+(ns helix.demo.ssr
+  (:require
+   #?@(:clj [[aleph.http :as http]
+             [helix.server.core :as hx :refer [defnc $ <> suspense]]
+             [helix.server.dom-test :as dom :refer [$d]]
+             [helix.server.hooks :as hooks]
+             [manifold.deferred :as d]
+             [manifold.stream :as s]
+             [reitit.ring :as ring]]
+       :cljs [[helix.core :as hx :refer [defnc $ <> suspense]]
+              [helix.dom :as dom :refer [$d]]
+              [helix.hooks :as hooks]
+              ["react-dom/client" :as rdom]]))
+  ;; makes shadow-cljs reload our clj ns
+  #?(:cljs (:require-macros [helix.demo.ssr])))
+
+
+(def *cached? (atom #{}))
+
+
+(defn fetch! [i]
+  (when-not (get @*cached? i)
+    (throw
+     #?(:clj (ex-info
+              "dunno"
+              {::hx/deferred (d/future
+                               (Thread/sleep (* 100 i))
+                               (swap! *cached? conj i))})
+        :cljs (js/Promise.
+               (fn [res _]
+                 (prn :suspending)
+                 (js/setTimeout
+                  (fn []
+                    (swap! *cached? conj i)
+                    (res))
+                  (* 100 i))))))))
+
+
+(defnc counter [_]
+  (let [[counter set-counter] (hooks/use-state 0)]
+    (<> ($d "button" {:on-click #(set-counter inc)} "+") counter)))
+
+
+(defnc item [{:keys [i]}]
+  (if (zero? (mod i 10))
+    (do (fetch! i)
+        ($d "div"
+            "hello" i
+            ($ counter)))
+    ($d "div" "hi" i)))
+
+
+(defnc app [{:keys [count] :or {count 10}}]
+  ($d "div"
+      ($ counter)
+      (suspense
+       {:fallback ($d "div" "Loading all....")}
+       (for [i (range 0 count)]
+         #_($ item {:i i :key i})
+         (suspense
+          {:fallback ($d "div" "Loading..")
+           :key i}
+          ($ item {:i i}))))))
+
+
+(defnc page [_]
+  ($d "html"
+      ($d "head"
+          ($d "title" "Streaming test"))
+      ($d "body" {:style {:color "blue"}}
+          ($d "div" {:id "app"}
+              ($ app {:count 30}))
+          #?(:clj "<script src=\"/assets/js/main.js\"></script>"
+             :cljs ($d "script" {:src "/assets/js/main.js"})))))
+
+(def client-root)
+
+#?(:cljs
+   (defn ^:dev/after-load render!
+     []
+     (.render client-root ($ page))
+     #_(.render client-root ($ app))))
+
+#?(:cljs
+   (defn start-client!
+     []
+     (set! client-root (rdom/hydrateRoot js/document
+                                           ($ page)))
+     #_(set! client-root (rdom/createRoot (js/document.getElementById "app")))
+     #_(render!)))
+
+
+
+#?(:clj
+   (defn page-handler [req]
+     {:status 200
+      :headers {"content-type" "text/html"}
+      :body (doto (dom/render-to-stream ($ page))
+              (s/on-closed #(reset! *cached? #{})))}))
+
+
+#?(:clj
+   (def router
+     (ring/router
+      [["/" {:get page-handler}]
+       ["/assets/*" (ring/create-resource-handler)]])))
+
+
+
+(comment
+  #?(:clj (def server (http/start-server
+                       (ring/ring-handler router)
+                       {:port 9090})))
+
+  #?(:clj (.close server)))
+

deps.edn

@@ -1,6 +1,8 @@
 {:paths ["src" "resources"]
- :deps {cljs-bean/cljs-bean {:mvn/version "1.5.0"}}
+ :deps {cljs-bean/cljs-bean {:mvn/version "1.5.0"}
+        manifold/manifold {:mvn/version "0.2.3"}
+        aleph/aleph {:mvn/version "0.4.7"}}
  :aliases {:test {:extra-paths ["test"]
-                  :extra-deps {lambdaisland/kaocha {:mvn/version "1.66.1034"}
-                               org.clojure/clojurescript {:mvn/version "LATEST"}}
-                  :main-opts ["-m" "kaocha.runner"]}}}
+                  :extra-deps {org.clojure/clojurescript {:mvn/version "1.11.51"}}}
+           :ci {:extra-deps {lambdaisland/kaocha {:mvn/version "1.66.1034"}}
+                :main-opts ["-m" "kaocha.runner"]}}}

package.json

@@ -9,6 +9,7 @@
   "author": "",
   "license": "EPL-2.0",
   "dependencies": {
+    "@cljs-oss/module-deps": "^1.1.1",
     "karma": "^5.0.2",
     "karma-chrome-launcher": "^3.1.0",
     "karma-cljs-test": "^0.1.0",

resources/clj-kondo.exports/lilactown/helix/config.edn

@@ -133,6 +133,8 @@
                           helix.dom/video          clj-kondo.lilactown.helix/dom
                           helix.dom/wbr            clj-kondo.lilactown.helix/dom}}
  :lint-as {helix.core/defhook clojure.core/defn
-           helix.core/fnc     clojure.core/fn}
+           helix.core/fnc     clojure.core/fn
+           helix.server.core/defnc clojure.core/defn
+           helix.server.core/fnc clojure.core/fn}
  :linters {:helix/invalid-children {:level :error}
            :helix/wrap-after-args {:level :warning}}}

src/helix/core.clj

@@ -82,10 +82,11 @@
 
 (defmacro suspense
   "Creates a React Suspense boundary."
-  [{:keys [fallback]} & children]
+  [{:keys [fallback key]} & children]
   `^js/React.Element ($ Suspense
                         ~@(when fallback
-                            `({:fallback ~fallback}))
+                            `({:fallback ~fallback
+                               :key ~key}))
                         ~@children))
 
 

src/helix/server/core.clj

@@ -0,0 +1,60 @@
+(ns helix.server.core)
+
+
+(defprotocol IRenderable
+  (-render [c props]))
+
+
+(extend-protocol IRenderable
+  clojure.lang.IFn
+  (-render [f props]
+    (f props)))
+
+
+(defrecord Element [type props key])
+
+
+(defn $
+  [type & args]
+  (if (and (map? (first args)) (not (instance? Element (first args))))
+    (let [props (first args)
+          children (rest args)
+          key (:key props)]
+      (->Element type (-> props (dissoc :key) (assoc :children children)) key))
+    (->Element type {:children args} nil)))
+
+
+(defn <>
+  [& children]
+  (->Element 'react/Fragment {:children children} nil))
+
+
+(defn provider
+  [{:keys [context value]} & children]
+  (->Element
+   'react/Provider
+   {:context context :value value :children children}
+   nil))
+
+
+(defn suspense
+  [{:keys [fallback]} & children]
+  (->Element
+   'react/Suspense
+   {:fallback fallback :children children}
+   nil))
+
+
+(defmacro fnc
+  [& body]
+  `(fn ~@body))
+
+
+(defmacro defnc
+  [& body]
+  `(defn ~@body))
+
+
+(defmacro defhook
+  [& body]
+  `(defn ~@body))