Skip to content

Instantly share code, notes, and snippets.

@zehnpaard

zehnpaard/figwheel-garden.core.cljs

Created November 22, 2016 08:34
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save zehnpaard/05accdd38e18294028eacb246cb9fff9 to your computer and use it in GitHub Desktop.
Save zehnpaard/05accdd38e18294028eacb246cb9fff9 to your computer and use it in GitHub Desktop.
Download ZIP
Minimal setup to get lein-garden auto-compile and Figwheel auto-load working with Reagent
Raw
figwheel-garden.core.cljs
(ns figwheel-garden.core
(:require
[reagent.core :as r]))
(defn my-app []
[:div
[:h1 "Hello Reagent!"]
[:p "Hello Garden!"]
[:p.my-class "Hello My-Class!"]])
(r/render
[my-app]
(js/document.getElementById "app"))
Raw
figwheel-garden.directories.txt
.
├── project.clj
├── resources
│   └── public
│   └── index.html
└── src
└── figwheel_garden
├── core.cljs
└── styles.clj
Raw
figwheel-garden.index.html
<html>
<head>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app"></div>
<script src="js/out/goog/base.js"></script>
<script src="js/main.js"></script>
<script>goog.require('figwheel_garden.core')</script>
</body>
</html>
Raw
figwheel-garden.project.clj
(defproject figwheel-garden "0.0.1"
:dependencies [[org.clojure/clojure "1.8.0"]
[org.clojure/clojurescript "1.9.293"]
[reagent "0.6.0"]
[garden "1.3.2"]]
:plugins [[lein-cljsbuild "1.1.4"]
[lein-figwheel "0.5.7"]
[lein-garden "0.3.0"]]
:garden
{:builds [{:source-paths ["src"]
:stylesheet figwheel-garden.styles/style
:compiler {:output-to "resources/public/css/main.css"}}]}
:figwheel
{:css-dirs ["resources/public/css"]}
:cljsbuild
{:builds {:dev {:source-paths ["src"]
:figwheel true
:compiler {:output-to "resources/public/js/main.js"
:output-dir "resources/public/js/out/"}}}})
Raw
figwheel-garden.styles.clj
(ns figwheel-garden.styles
(:require
[garden.def :refer [defstyles]]))
(defstyles style
[:body {:background "#ddd"}]
[:h1 {:color "#f00"}]
[:p {:font "18px \"Century Gothic\", Futura, sans-serif"}]
[:.my-class {:font-size "20px" :background "#ddf"}])
@souenzzo
Copy link

souenzzo commented Jan 13, 2018 •
edited

I'm using this to start from the repl

(ns user
  (:require [clojure.core.async :as async]
            [clojure.edn :as edn]
            [clojure.java.io :as io]
            [clojure.spec.test.alpha :as stest]
            [figwheel-sidecar.repl-api :as f]
            [garden.core :as garden]
            [ns-tracker.core :as ns-tracker]))

(defonce garden-timeout (atom nil))

(defn stop-garden!
  []
  (let [timeout @garden-timeout]
    (reset! garden-timeout nil)
    (when (number? timeout)
      (Thread/sleep timeout))))

(defn start-garden!
  []
  (reset! garden-timeout 1000)
  (let [{{:keys [builds]} :garden} (->> (slurp "project.clj")
                                        (edn/read-string)
                                        (drop 1)
                                        (apply hash-map))
        source-paths (mapcat :source-paths builds)
        nss (map (comp symbol namespace :stylesheet) builds)
        builds (for [{:keys [stylesheet]
                      :as   build} builds]
                 (assoc build :stylesheet (resolve stylesheet)))]
    (run! (comp io/make-parents :output-to :compiler) builds)
    (let [modified-namespaces (ns-tracker/ns-tracker source-paths)]
      (async/go
        (loop [nss nss]
          (when-not (empty? nss)
            (doseq [{{:keys [output-to]} :compiler
                     :keys               [stylesheet compiler]} builds]
              (try
                (run! #(require % :reload) nss)
                (let [stylesheet- @stylesheet]
                  (println (str "Compiling " (pr-str output-to) "..."))
                  (garden/css compiler stylesheet-)
                  (println "Successful"))
                (catch Exception e
                  (println "Error:" (or (.getMessage e) e))))))
          (flush)
          (when-let [interval @garden-timeout]
            (Thread/sleep interval)
            (recur (modified-namespaces))))))))

Isn't tested. Works on my simple case.
*edit1: a bit tested ;)
*edit2: working!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment