Skip to content

Proof of concept: Remix + shadow-cljs

Notifications You must be signed in to change notification settings

huygn/remix-cljs

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Minimal example showing how shadow-cljs could be used together with Remix to create SSR website in CLJS.

Inspired by https://github.com/thheller/next-cljs.

Sneak-peak:

;; Remix loader
(defn page-index-loader
  {:export true}
  []
  (js/Promise.resolve #js {:hello "world"}))

;; Remix route component
(defn page-index
  {:export true
   :remix/page "index"
   :remix/loader page-index-loader}
  []
  (r/as-element
   (let [data (useLoaderData)]
     [:div
      [:h1 "Hello from Remix"]
      [:p "loader data:"
       [:pre (js/JSON.stringify data nil 2)]]
      [:> NavLink {:to "/about"} "About page"]])))

Note: remix is a directory used by Remix, all .js files will be generated by shadow-cljs, except for entries & root.tsx.

Run shadow-cljs

npm install
npx shadow-cljs watch remix
# or
npx shadow-cljs release remix

Run remix separately

cd remix
npm install
npm run dev

When done open in browser

open http://localhost:3000

Languages

  • Clojure 73.5%
  • TypeScript 22.2%
  • JavaScript 4.3%