├── .gitignore ├── README.md ├── project.clj ├── resources └── public │ ├── css │ └── style.css │ └── index.html └── src ├── clj └── thirdpartyjs │ └── core.clj └── cljs └── thirdpartyjs └── core.cljs /.gitignore: -------------------------------------------------------------------------------- 1 | /target 2 | /classes 3 | /checkouts 4 | pom.xml 5 | pom.xml.asc 6 | *.jar 7 | *.class 8 | /.lein-* 9 | /.nrepl-port 10 | .hgignore 11 | .hg/ 12 | /resources/public/js/compiled 13 | /figwheel_server.log 14 | .#* -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # thirdpartyjs 2 | 3 | A demonstration of the various ways to consume a third party library from 4 | ClojureScript. 5 | 6 | For the full background on these approaches, watch out for the upcoming [Lambda 7 | Island](https://lambdaisland.com) episode, "Using JavaScript libraries from ClojureScript". 8 | 9 | ## Usage 10 | 11 | Check out the relevant branch, then build the project 12 | 13 | ``` 14 | lein cljsbuild once dev 15 | ``` 16 | 17 | and open `resources/public/index.html` in your browser. 18 | 19 | You can also try advanced compilation, which works for some setups, but not for others. 20 | 21 | ``` 22 | lein clean 23 | lein cljsbuild once prod 24 | ``` 25 | 26 | ## Branches 27 | 28 | - [cljsjs-d3](https://github.com/lambdaisland/thirdpartyjs/tree/cljsjs-d3) 29 | 30 | Use D3 from http://cljsjs.github.io . Works for both dev and prod builds 31 | 32 | - [script-d3](https://github.com/lambdaisland/thirdpartyjs/tree/script-d3) 33 | 34 | Use D3 from by loading it from a CDN. Works only for the dev build. 35 | 36 | - [script-d3-externs](https://github.com/lambdaisland/thirdpartyjs/tree/script-d3-externs) 37 | 38 | Liks `script-d3`, but add externs for the features we're using. Advanced compilation works again. 39 | 40 | - [script-d3-generated-externs](https://github.com/lambdaisland/thirdpartyjs/tree/script-d3-generated-externs) 41 | 42 | Like `script-d3-externs`, but with auto-generated externs. 43 | 44 | - [closure-leftpad](https://github.com/lambdaisland/thirdpartyjs/tree/closure-leftpad) 45 | 46 | Implements leftPad as a Google Closure module, loads it by putting it on the classpath. 47 | 48 | - [es6-d3](https://github.com/lambdaisland/thirdpartyjs/tree/es6-d3) 49 | 50 | Compile D3 to a single ES6 file with Rollup, then use that directly with `:module-type :es6`. Broken for advanced compilation, probably because D3 violates some of the Closure assumptions. (Lots of warnings on advanced compilation). 51 | 52 | - [foreign-libs-d3](https://github.com/lambdaisland/thirdpartyjs/tree/foreign-libs-d3) 53 | 54 | Include D3 with `:foreign-libs` and `:externs`. This is what CLJSJS currently does. Works for advanced compilation. 55 | 56 | - [es6-leftPad](https://github.com/lambdaisland/thirdpartyjs/tree/es6-leftPad) 57 | 58 | Another example of using the ES6 module support, but with a twist: the ES6 module in turns depends on a CLJS namespace. Full ES6/ClojureScript interop, how cool is that? 59 | 60 | 61 | ## License 62 | 63 | Copyright © 2016 Arne Brasseur 64 | 65 | Distributed under the Mozilla Public License 2.0 66 | -------------------------------------------------------------------------------- /project.clj: -------------------------------------------------------------------------------- 1 | (defproject thirdpartyjs "0.1.0-SNAPSHOT" 2 | :license {:name "Mozilla Public License 2.0" :url "https://www.mozilla.org/en-US/MPL/2.0/"} 3 | 4 | :dependencies [[org.clojure/clojure "1.8.0"] 5 | [org.clojure/clojurescript "1.9.229"]] 6 | 7 | :source-paths ["src/clj"] 8 | 9 | :plugins [[lein-cljsbuild "1.1.4"]] 10 | 11 | :clean-targets ^{:protect false} [:target-path :compile-path "resources/public/js/compiled"] 12 | 13 | :cljsbuild {:builds 14 | {:dev {:source-paths ["src/cljs"] 15 | :compiler {:main thirdpartyjs.core 16 | :optimizations :none 17 | :output-to "resources/public/js/compiled/thirdpartyjs.js" 18 | :output-dir "resources/public/js/compiled/dev" 19 | :asset-path "js/compiled/dev" 20 | :source-map-timestamp true}} 21 | 22 | :prod {:source-paths ["src/cljs"] 23 | :jar true 24 | :compiler {:main thirdpartyjs.core 25 | :optimizations :advanced 26 | :output-to "resources/public/js/compiled/thirdpartyjs.js" 27 | :source-map "resources/public/js/compiled/thirdpartyjs.js.map" 28 | :output-dir "resources/public/js/compiled/prod" 29 | :source-map-timestamp true 30 | :pretty-print false}}}}) 31 | -------------------------------------------------------------------------------- /resources/public/css/style.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | height: 100%; 3 | color: #002000; 4 | background-color: #f9f5f0; 5 | font-family: Lato, Helvetica, Arial, sans-serif; 6 | } 7 | -------------------------------------------------------------------------------- /resources/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/clj/thirdpartyjs/core.clj: -------------------------------------------------------------------------------- 1 | (ns thirdpartyjs.core) 2 | 3 | (defn foo 4 | "I don't do a whole lot." 5 | [x] 6 | (println x "Hello, World!")) 7 | -------------------------------------------------------------------------------- /src/cljs/thirdpartyjs/core.cljs: -------------------------------------------------------------------------------- 1 | (ns thirdpartyjs.core) 2 | 3 | (enable-console-print!) 4 | 5 | (set! (.-innerHTML (.getElementById js/document "app")) "

Let's do this

") 6 | --------------------------------------------------------------------------------