├── .gitignore
├── README.md
├── jstransform-simple.bundle.js
├── project.clj
├── resources
└── public
│ ├── css
│ └── style.css
│ ├── index.html
│ └── js
│ └── libs
│ ├── Circle.js
│ └── react.js
├── scripts
├── build
├── build.clj
├── repl
├── repl.clj
├── watch
└── watch.clj
└── src
└── circle_color
└── core.cljs
/.gitignore:
--------------------------------------------------------------------------------
1 | pom.xml
2 | *jar
3 | /lib/
4 | /classes/
5 | /out/
6 | /release/
7 | /target/
8 | /resources/public/js/out/
9 | .lein-deps-sum
10 | .lein-repl-history
11 | .lein-plugins/
12 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # circle-color
2 |
3 | A small ClojureScript project to try out JS transforms and JS module support.
4 |
5 | ## Description
6 |
7 | This ClojureScript project uses React to change the color of a circle via an input field.
8 |
9 | ## Setup
10 |
11 | Build the project with:
12 |
13 | ```
14 | $ ./scripts/build
15 | $ open resources/public/index.html
16 | ```
17 |
18 | ## License
19 |
20 | Distributed under the Eclipse Public License either version 1.0 or (at your option) any later version.
21 |
--------------------------------------------------------------------------------
/project.clj:
--------------------------------------------------------------------------------
1 | (defproject circle-color "0.1.0-SNAPSHOT"
2 | :description "FIXME: write this!"
3 | :url "http://example.com/FIXME"
4 | :dependencies [[org.clojure/clojure "1.7.0"]
5 | [org.clojure/clojurescript "1.7.145"
6 | :exclusion [org.clojure/data.json]]
7 | [org.clojure/data.json "0.2.6" :classifier "aot"]]
8 | :jvm-opts ^:replace ["-Xmx1g" "-server"]
9 | :plugins [[lein-npm "0.6.1"]]
10 | :npm {:dependencies [[source-map-support "0.3.2"]]}
11 | :source-paths ["src" "target/classes"]
12 | :clean-targets ["out" "release"]
13 | :target-path "target")
14 |
--------------------------------------------------------------------------------
/resources/public/css/style.css:
--------------------------------------------------------------------------------
1 | .center {
2 | margin: 10px auto;
3 | display: block;
4 | }
5 |
6 | input {
7 | width: 200px;
8 | }
9 |
--------------------------------------------------------------------------------
/resources/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | circle-color
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/resources/public/js/libs/Circle.js:
--------------------------------------------------------------------------------
1 | var React = require('./react');
2 |
3 | var Circle = React.createClass({
4 | render: function() {
5 | return(
6 |
10 | );
11 | }
12 | });
13 |
14 | module.exports = Circle;
15 |
--------------------------------------------------------------------------------
/scripts/build:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | rlwrap lein trampoline run -m clojure.main scripts/build.clj
3 |
--------------------------------------------------------------------------------
/scripts/build.clj:
--------------------------------------------------------------------------------
1 | (require '[cljs.build.api :as b]
2 | '[clojure.java.io :as io])
3 | (refer 'cljs.closure :only '[js-transforms])
4 | (import 'javax.script.ScriptEngineManager)
5 |
6 | (defmethod js-transforms :jsx [ijs opts]
7 | (let [engine (doto (.getEngineByName (ScriptEngineManager.) "nashorn")
8 | (.eval (io/reader (io/file "jstransform-simple.bundle.js")))
9 | (.put "originalCode" (:source ijs)))]
10 | (assoc ijs :source
11 | (.eval engine (str "simple.transform(originalCode, {react: true}).code")))))
12 |
13 | (println "Building ...")
14 |
15 | (let [start (System/nanoTime)]
16 | (b/build "src"
17 | {:main 'circle-color.core
18 | :asset-path "js/out"
19 | :output-to "resources/public/js/out/circle_color.js"
20 | :output-dir "resources/public/js/out"
21 | :verbose true
22 | :pretty-print true
23 | :foreign-libs [{:file "resources/public/js/libs/react.js"
24 | :provides ["React"]
25 | :module-type :commonjs}
26 | {:file "resources/public/js/libs/Circle.js"
27 | :provides ["Circle"]
28 | :module-type :commonjs
29 | :preprocess :jsx}]
30 | :closure-warnings {:non-standard-jsdoc :off}})
31 | (println "... done. Elapsed" (/ (- (System/nanoTime) start) 1e9) "seconds"))
32 |
--------------------------------------------------------------------------------
/scripts/repl:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | rlwrap lein trampoline run -m clojure.main scripts/repl.clj
3 |
--------------------------------------------------------------------------------
/scripts/repl.clj:
--------------------------------------------------------------------------------
1 | (require
2 | '[cljs.repl :as repl]
3 | '[cljs.repl.node :as node])
4 |
5 | (repl/repl (node/repl-env))
6 |
--------------------------------------------------------------------------------
/scripts/watch:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | rlwrap lein trampoline run -m clojure.main scripts/watch.clj
3 |
--------------------------------------------------------------------------------
/scripts/watch.clj:
--------------------------------------------------------------------------------
1 | (require '[cljs.build.api :as b]
2 | '[clojure.java.io :as io])
3 | (refer 'cljs.closure :only '[js-transforms])
4 | (import 'javax.script.ScriptEngineManager)
5 |
6 | (defmethod js-transforms :jsx [ijs opts]
7 | (let [engine (doto (.getEngineByName (ScriptEngineManager.) "nashorn")
8 | (.eval (io/reader (io/file "jstransform-simple.bundle.js")))
9 | (.put "originalCode" (:source ijs)))]
10 | (assoc ijs :source
11 | (.eval engine (str "simple.transform(originalCode, {react: true}).code")))))
12 |
13 | (b/watch "src"
14 | {:main 'circle-color.core
15 | :asset-path "js/out"
16 | :output-to "resources/public/js/out/circle_color.js"
17 | :output-dir "resources/public/js/out"
18 | :verbose true
19 | :pretty-print true
20 | :foreign-libs [{:file "resources/public/js/libs/react.js"
21 | :provides ["React"]
22 | :module-type :commonjs}
23 | {:file "resources/public/js/libs/Circle.js"
24 | :provides ["Circle"]
25 | :module-type :commonjs
26 | :preprocess :jsx}]
27 | :closure-warnings {:non-standard-jsdoc :off}})
28 |
--------------------------------------------------------------------------------
/src/circle_color/core.cljs:
--------------------------------------------------------------------------------
1 | (ns circle-color.core
2 | (:require [clojure.browser.repl :as repl]
3 | [React :refer [createElement createClass render]]
4 | [Circle :as Circle]))
5 |
6 | (def ColorInput
7 | (createClass
8 | #js {:render
9 | (fn []
10 | (this-as this
11 | (createElement "div" nil
12 | (createElement "input" #js {:type "text"
13 | :className "center"
14 | :onChange (.. this -props -onChange)}))))}))
15 |
16 | (def Container
17 | (createClass
18 | #js {:getInitialState (fn [] #js {:color ""})
19 | :handleColorChange (fn [event]
20 | (this-as this
21 | (.setState this #js {:color (.. event -target -value)})))
22 | :render (fn []
23 | (this-as this
24 | (createElement "div" nil
25 | (createElement ColorInput #js {:onChange (. this -handleColorChange)})
26 | (createElement js/Circle #js {:color (.. this -state -color)}))))}))
27 |
28 | (render
29 | (createElement Container)
30 | (.getElementById js/document "app"))
31 |
--------------------------------------------------------------------------------