├── README.md ├── project.clj ├── resources └── public │ ├── css │ └── style.css │ └── index.html └── src └── simplecomponent └── core.cljs /README.md: -------------------------------------------------------------------------------- 1 | # simplecomponent 2 | 3 | A simple compoenent to use Reagent/Re-frame with d3.js 4 | 5 | see http://zachcp.github.io/simplecomponent/ 6 | 7 | ## Overview 8 | 9 | If you want to use reagent with D3.js you need to use lifecycle methods. 10 | These can be very non-intuitive to use, somewhat defeating the otherwise 11 | easy-to-use [Reagent](https://holmsand.github.io/reagent/). 12 | 13 | This project follows the state-management pattern of [re-frame](https://github.com/Day8/re-frame). 14 | Its worth reading the documentationon that project because 15 | 16 | 1. it will get you up and running 17 | 2. it has great sections for more advanced topics. 18 | 19 | I also ended up using these following as references: 20 | 21 | 1. jszakmeister's [clojurescript, D3, and Reagent](http://www.szakmeister.net/blog/2015/nov/26/clojurescript-d3-and-reagent) 22 | 2. nils blum-oests [post on the same topic](http://nils-blum-oeste.net/clojurescripts-reagent-using-props-in-lifecycle-hooks/) 23 | 3. the discussion in [this thread](https://groups.google.com/forum/#!searchin/reagent-project/component-did-update/reagent-project/bDIiKdeDqj8/FdiaKRDJFcsJ) 24 | 25 | 26 | ## Setup 27 | 28 | To get an interactive development environment run: 29 | 30 | lein figwheel 31 | 32 | and open your browser at [localhost:3449](http://localhost:3449/). 33 | This will auto compile and send all changes to the browser without the 34 | need to reload. After the compilation process is complete, you will 35 | get a Browser Connected REPL. An easy way to try it is: 36 | 37 | (js/alert "Am I connected?") 38 | 39 | and you should see an alert in the browser window. 40 | 41 | To clean all compiled files: 42 | 43 | lein clean 44 | 45 | To create a production build run: 46 | 47 | lein cljsbuild once min 48 | 49 | And open your browser in `resources/public/index.html`. You will not 50 | get live reloading, nor a REPL. 51 | 52 | ## License 53 | 54 | Copyright © 2014 FIXME 55 | 56 | Distributed under the Eclipse Public License either version 1.0 or (at your option) any later version. 57 | -------------------------------------------------------------------------------- /project.clj: -------------------------------------------------------------------------------- 1 | (defproject simplecomponent "0.1.0-SNAPSHOT" 2 | :description "FIXME: write this!" 3 | :url "http://example.com/FIXME" 4 | :license {:name "Eclipse Public License" 5 | :url "http://www.eclipse.org/legal/epl-v10.html"} 6 | 7 | :dependencies [[org.clojure/clojure "1.7.0"] 8 | [org.clojure/clojurescript "1.7.170"] 9 | [org.clojure/core.async "0.2.374"] 10 | [reagent "0.5.0"] 11 | [re-frame "0.6.0"] 12 | [cljsjs/d3 "3.5.7-1"] 13 | ] 14 | 15 | :plugins [[lein-cljsbuild "1.1.1"] 16 | [lein-figwheel "0.5.0-1"]] 17 | 18 | :source-paths ["src"] 19 | 20 | :clean-targets ^{:protect false} ["resources/public/js/compiled" "target"] 21 | 22 | :cljsbuild {:builds 23 | [{:id "dev" 24 | :source-paths ["src"] 25 | 26 | :figwheel {:on-jsload "simplecomponent.core/on-js-reload"} 27 | 28 | :compiler {:main simplecomponent.core 29 | :asset-path "js/compiled/out" 30 | :output-to "resources/public/js/compiled/simplecomponent.js" 31 | :output-dir "resources/public/js/compiled/out" 32 | :source-map-timestamp true}} 33 | ;; This next build is an compressed minified build for 34 | ;; production. You can build this with: 35 | ;; lein cljsbuild once min 36 | {:id "min" 37 | :source-paths ["src"] 38 | :compiler {:output-to "resources/public/js/compiled/simplecomponent.js" 39 | :main simplecomponent.core 40 | :optimizations :advanced 41 | :pretty-print false}}]} 42 | 43 | :figwheel {;; :http-server-root "public" ;; default and assumes "resources" 44 | ;; :server-port 3449 ;; default 45 | ;; :server-ip "127.0.0.1" 46 | 47 | :css-dirs ["resources/public/css"] ;; watch and update CSS 48 | 49 | ;; Start an nREPL server into the running figwheel process 50 | ;; :nrepl-port 7888 51 | 52 | ;; Server Ring Handler (optional) 53 | ;; if you want to embed a ring handler into the figwheel http-kit 54 | ;; server, this is for simple ring servers, if this 55 | ;; doesn't work for you just run your own server :) 56 | ;; :ring-handler hello_world.server/handler 57 | 58 | ;; To be able to open files in your editor from the heads up display 59 | ;; you will need to put a script on your path. 60 | ;; that script will have to take a file path and a line number 61 | ;; ie. in ~/bin/myfile-opener 62 | ;; #! /bin/sh 63 | ;; emacsclient -n +$2 $1 64 | ;; 65 | ;; :open-file-command "myfile-opener" 66 | 67 | ;; if you want to disable the REPL 68 | ;; :repl false 69 | 70 | ;; to configure a different figwheel logfile path 71 | ;; :server-logfile "tmp/logs/figwheel-logfile.log" 72 | }) 73 | -------------------------------------------------------------------------------- /resources/public/css/style.css: -------------------------------------------------------------------------------- 1 | /* some style */ 2 | 3 | -------------------------------------------------------------------------------- /resources/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |Checkout your developer console.
14 |