bring back macro & provide support for Rum, Reagent and Om

clj-commons · Jul 7, 2017 · 107d0f1 · 107d0f1
1 parent 6d433d8
commit 107d0f1
Show file tree

Hide file tree

Showing 12 changed files with 217 additions and 34 deletions.
diff --git a/example/.gitignore b/example/.gitignore
@@ -0,0 +1,13 @@
+/resources/public/js/compiled/**
+figwheel_server.log
+pom.xml
+*jar
+/lib/
+/classes/
+/out/
+/target/
+.lein-deps-sum
+.lein-repl-history
+.lein-plugins/
+.repl
+.nrepl-port
diff --git a/example/project.clj b/example/project.clj
@@ -0,0 +1,41 @@
+(defproject example "0.1.0-SNAPSHOT"
+  :description "FIXME: write this!"
+  :url "http://example.com/FIXME"
+  :license {:name "Eclipse Public License"
+            :url "http://www.eclipse.org/legal/epl-v10.html"}
+
+  :min-lein-version "2.7.1"
+
+  :dependencies [[org.clojure/clojure "1.8.0"]
+                 [org.clojure/clojurescript "1.9.671"]
+                 [rum "0.10.8"]
+                 [reagent "0.7.0"]
+                 [org.omcljs/om "1.0.0-beta1"]]
+
+  :plugins [[lein-cljsbuild "1.1.6" :exclusions [[org.clojure/clojure]]]]
+
+  :source-paths ["src"]
+
+  :cljsbuild {:builds
+              [{:id "dev"
+                :source-paths ["src" "../src"]
+                :compiler {:main example.core
+                           :asset-path "js/compiled/out"
+                           :output-to "resources/public/js/compiled/example.js"
+                           :output-dir "resources/public/js/compiled/out"
+                           :source-map-timestamp true
+                           :preloads [devtools.preload]}}
+
+               {:id "min"
+                :source-paths ["src" "../src"]
+                :compiler {:output-to "resources/public/js/compiled/example.js"
+                           :main example.core
+                           :optimizations :advanced
+                           :pretty-print false}}]}
+
+  :profiles {:dev {:dependencies [[binaryage/devtools "0.9.2"]
+                                  [com.cemerick/piggieback "0.2.1"]]
+                   :source-paths ["src"]
+                   :repl-options {:nrepl-middleware [cemerick.piggieback/wrap-cljs-repl]}
+                   :clean-targets ^{:protect false} ["resources/public/js/compiled"
+                                                     :target-path]}})
diff --git a/example/resources/public/index.html b/example/resources/public/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <div id="rum-app"></div>
+    <div id="reagent-app"></div>
+    <div id="om-app"></div>
+    <script src="js/compiled/example.js"></script>
+  </body>
+</html>
diff --git a/example/src/example/core.cljs b/example/src/example/core.cljs
@@ -0,0 +1,60 @@
+(ns example.core
+  (:require [rum.core :as rum]
+            [reagent.core :as r]
+            [om.dom :as dom]
+            [om.next :as om :refer [defui]]
+            [goog.dom :as gdom]
+            [cljss.core :refer [defstyles]]
+            [cljss.rum :as rumss]
+            [cljss.reagent :as rss]
+            [cljss.om :as omss]))
+
+(defstyles wrapper [width]
+  {:padding "8px 16px"
+   :margin "0 auto"
+   :text-align "center"
+   :font "normal 18px sans-serif"
+   :width width})
+
+;; Rum
+(rumss/defstyled RumH1 :h1
+  {:font-size "32px"
+   :color "#242424"
+   :margin-top :v-margin
+   :margin-bottom :v-margin})
+
+(rum/defc RumApp []
+  [:div {:class (wrapper "600px")}
+   (RumH1 {:v-margin "8px"} "Clojure Style Sheets for Rum")])
+
+(rum/mount (RumApp) (gdom/getElement "rum-app"))
+
+
+;; Reagent
+(rss/defstyled ReagentH1 :h1
+  {:font-size "32px"
+   :color "#242424"
+   :margin-top :v-margin
+   :margin-bottom :v-margin})
+
+(defn ReagentApp []
+  [:div {:class (wrapper "600px")}
+   (ReagentH1 {:v-margin "8px"} "Clojure Style Sheets for Reagent")])
+
+(r/render [ReagentApp] (gdom/getElement "reagent-app"))
+
+
+;; Om
+(omss/defstyled OmH1 :h1
+  {:font-size "32px"
+   :color "#242424"
+   :margin-top :v-margin
+   :margin-bottom :v-margin})
+
+(defui OmApp
+  Object
+  (render [this]
+    (dom/div #js {:className (wrapper "600px")}
+      (OmH1 {:v-margin "8px"} "Clojure Style Sheets for Om"))))
+
+(.render js/ReactDOM ((om/factory OmApp)) (gdom/getElement "om-app"))
diff --git a/src/cljss/core.clj b/src/cljss/core.clj
@@ -1,9 +1,5 @@
 (ns cljss.core
-  (:require [cljs.analyzer :as ana]
-            [cljss.utils :refer [build-css]]))
-
-; (let [var (ana/resolve-var &env y (ana/confirm-var-exists-throw))]
-;   (-> var :tag keyword))
+  (:require [cljss.utils :refer [build-css]]))
 
 (defn- varid [id idx [rule]]
   [rule (str "--css-" id "-" idx)])
@@ -16,7 +12,7 @@
   (and (re-matches #"&:.*" (name rule))
        (map? value)))
 
-(defn- build-styles [cls id idx styles]
+(defn- collect-styles [cls id idx styles]
   (let [dynamic (filterv dynamic? styles)
         static (filterv (comp not dynamic?) styles)
         vars (map-indexed #(varid id (+ idx %1) %2) dynamic)
@@ -27,23 +23,51 @@
                     (build-css cls))]
     [static vals (count vars)]))
 
-(defmacro defstyled [var tag styles]
-  (let [tag# (name tag)
-        pseudo (filterv pseudo? styles)
+(defn- build-styles [styles]
+  (let [pseudo (filterv pseudo? styles)
         styles (filterv (comp not pseudo?) styles)
-        id# (-> styles hash str)
-        cls (str "css-" id#)
-        attrs# (->> styles (map second) (filterv keyword?))
-        [static vals idx] (build-styles cls id# 0 styles)
+        id (-> styles hash str)
+        cls (str "css-" id)
+        [static vals idx] (collect-styles cls id 0 styles)
         pstyles (->> pseudo
                      (map (fn [[rule styles]]
-                            (build-styles (str cls (subs (name rule) 1)) id# idx styles))))
-        static# (->> pstyles
-                     (map first)
-                     (apply str)
-                     (str static))
-        vals# (->> pstyles
-                   (mapcat second)
-                   (into vals))]
-    `(def ~var
-       (cljss.core/styled ~tag# ~id# ~static# ~vals# ~attrs#))))
+                            (collect-styles (str cls (subs (name rule) 1)) id idx styles))))
+        static (->> pstyles
+                    (map first)
+                    (apply str)
+                    (str static))
+        vals (->> pstyles
+                  (mapcat second)
+                  (into vals))]
+    [id static vals]))
+
+(defmacro defstyles
+  "Takes var name, a vector of arguments and a hash map of styles definition.
+   Generates class name, static and dynamic parts of styles.
+   Returns a function that calls `cljss.core/css` to inject styles at runtime
+   and return generated class name."
+  [var args styles]
+  (let [[id# static# vals#] (build-styles styles)]
+    `(defn ~var ~args
+       (cljss.core/css ~id# ~static# ~vals#))))
+
+(defn ->styled
+  "Takes var name, HTML tag name and a hash map of styles definition.
+   Generates class name, static and dynamic parts of styles.
+   Returns a var bound to the result of calling `cljss.core/styled`,
+   which produces Hiccup-style element and injects styles."
+  [styles]
+  (let [attrs (->> styles (map second) (filterv keyword?))
+        [id static vals] (build-styles styles)]
+    [id static vals attrs]))
+
+(defmacro make-styled []
+  '(defn styled [cls static vars attrs create-element]
+    (fn [props & children]
+      (let [[props children] (if (map? props) [props children] [{} (into [props] children)])
+            varClass (->> vars (map (fn [[cls v]] (if (ifn? v) [cls (v props)] [cls v]))) (cljss.core/css cls static))
+            className (get props :className)
+            className (str (when className (str className " ")) varClass)
+            props (assoc props :className className)
+            props (apply dissoc props attrs)]
+        (create-element props children)))))
diff --git a/src/cljss/core.cljs b/src/cljss/core.cljs
@@ -4,21 +4,14 @@
 
 (defonce ^:private sheet (create-sheet))
 
-(defn- css [static cls vars]
+(defn css
+  "Takes class name, static styles and dynamic styles.
+   Injects styles and returns a string of generated class names."
+  [cls static vars]
   (when-not (empty? static)
     (insert! sheet static))
   (if (seq vars)
     (let [var-cls (str "vars-" (hash vars))]
       (insert! sheet (build-css var-cls vars))
       (str "css-" cls " " var-cls))
     (str "css-" cls)))
-
-(defn styled [tag cls static vars attrs]
-  (fn [props & children]
-    (let [[props children] (if (map? props) [props children] [{} (into [props] children)])
-          varClass (->> vars (map (fn [[cls v]] (if (ifn? v) [cls (v props)] [cls v]))) (css static cls))
-          className (get props :className)
-          className (str (when className (str className " ")) varClass)
-          props (assoc props :className className)
-          props (apply dissoc props attrs)]
-      (apply vector tag props children))))
diff --git a/src/cljss/om.clj b/src/cljss/om.clj
@@ -0,0 +1,9 @@
+(ns cljss.om
+  (:require [cljss.core :refer [->styled]]))
+
+(defmacro defstyled [var tag styles]
+  (let [tag# (name tag)
+        [id# static# vals# attrs#] (->styled styles)
+        create-element# `#(apply js/React.createElement ~tag# (cljs.core/clj->js %1) %2)]
+    `(def ~var
+       (cljss.rum/styled ~id# ~static# ~vals# ~attrs# ~create-element#))))
diff --git a/src/cljss/om.cljs b/src/cljss/om.cljs
@@ -0,0 +1,4 @@
+(ns cljss.om
+  (:require [cljss.core :refer [make-styled]]))
+
+(make-styled)
diff --git a/src/cljss/reagent.clj b/src/cljss/reagent.clj
@@ -0,0 +1,9 @@
+(ns cljss.reagent
+  (:require [cljss.core :refer [->styled]]))
+
+(defmacro defstyled [var tag styles]
+  (let [tag# tag
+        [id# static# vals# attrs#] (->styled styles)
+        create-element# `#(apply vector ~tag# %1 %2)]
+    `(def ~var
+       (cljss.rum/styled ~id# ~static# ~vals# ~attrs# ~create-element#))))
diff --git a/src/cljss/reagent.cljs b/src/cljss/reagent.cljs
@@ -0,0 +1,4 @@
+(ns cljss.reagent
+  (:require [cljss.core :refer [make-styled]]))
+
+(make-styled)
diff --git a/src/cljss/rum.clj b/src/cljss/rum.clj
@@ -0,0 +1,9 @@
+(ns cljss.rum
+  (:require [cljss.core :refer [->styled]]))
+
+(defmacro defstyled [var tag styles]
+  (let [tag# (name tag)
+        [id# static# vals# attrs#] (->styled styles)
+        create-element# `#(apply js/React.createElement ~tag# (cljs.core/clj->js %1) %2)]
+    `(def ~var
+       (cljss.rum/styled ~id# ~static# ~vals# ~attrs# ~create-element#))))
diff --git a/src/cljss/rum.cljs b/src/cljss/rum.cljs
@@ -0,0 +1,4 @@
+(ns cljss.rum
+  (:require [cljss.core :refer [make-styled]]))
+
+(make-styled)