Skip to content

Instantly share code, notes, and snippets.

@sgrove
Created September 9, 2015 16:40
Show Gist options
  • Save sgrove/117c8df0841719d26782 to your computer and use it in GitHub Desktop.
Save sgrove/117c8df0841719d26782 to your computer and use it in GitHub Desktop.
ReactMotion + ClojureScript
(ns motionable.core
(:require [om.core :as om]
[om.dom :as dom]
[React :as r :refer [createElement createClass render]]
[ReactMotion :as rm]))
(enable-console-print!)
(def app-state
(atom {:text "Hello world!"}))
(def demo
(r/createClass
#js{:getInitialState (fn []
#js{:blocks #js{:a "I am A"
:b "I am B"
:c "I am C"}})}))
(om/root
(fn [app owner]
(reify om/IRender
(render [_]
(dom/h1 nil (:text app)))))
app-state
{:target (. js/document (getElementById "app"))})
$ rm -rf out/; lein clean; lein cljsbuild auto
Compiling ClojureScript.
Compiling "out/motionable.js" from ["src"]...
ERROR: JSC_ES6_MODULE_LOAD_ERROR. Failed to load module "performance-now" at node_modules/raf/index.js line 1 : 10
ERROR: JSC_ES6_MODULE_LOAD_ERROR. Failed to load module "react" at node_modules/react-motion/lib/Spring.js line 5 : 13
ERROR: JSC_ES6_MODULE_LOAD_ERROR. Failed to load module "performance-now" at node_modules/react-motion/lib/animationLoop.js line 8 : 22
ERROR: JSC_ES6_MODULE_LOAD_ERROR. Failed to load module "raf" at node_modules/react-motion/lib/animationLoop.js line 12 : 11
ERROR: JSC_ES6_MODULE_LOAD_ERROR. Failed to load module "lodash.isplainobject" at node_modules/react-motion/lib/compareTrees.js line 8 : 27
ERROR: JSC_ES6_MODULE_LOAD_ERROR. Failed to load module "lodash.isplainobject" at node_modules/react-motion/lib/mapTree.js line 8 : 27
ERROR: JSC_ES6_MODULE_LOAD_ERROR. Failed to load module "lodash.isplainobject" at node_modules/react-motion/lib/noVelocity.js line 8 : 27
ERROR: JSC_ES6_MODULE_LOAD_ERROR. Failed to load module "lodash.isplainobject" at node_modules/react-motion/lib/updateTree.js line 10 : 27
Reading analysis cache for jar:file:/Users/s/.m2/repository/org/clojure/clojurescript/1.7.107/clojurescript-1.7.107.jar!/cljs/core.cljs
Compiling src/motionable/core.cljs
Analyzing jar:file:/Users/s/.m2/repository/org/omcljs/om/0.8.8/om-0.8.8.jar!/om/dom.cljs
Analyzing jar:file:/Users/s/.m2/repository/org/omcljs/om/0.8.8/om-0.8.8.jar!/om/core.cljs
Compiling out/om/dom.cljs
Compiling out/om/core.cljs
Compiling out/cljs/core.cljs
Using cached cljs.core out/cljs/core.cljs
Successfully compiled "out/motionable.js" in 4.047 seconds.
(defproject motionable "0.1.0-SNAPSHOT"
:description "FIXME: write this!"
:url "http://example.com/FIXME"
:dependencies [;; Pull in latest closure-compiler release to hopefully get https://github.com/google/closure-compiler/pull/1043
[com.google.javascript/closure-compiler "v20150901"]
[org.clojure/clojure "1.7.0"]
[org.clojure/clojurescript "1.7.107" :exclusions [org.clojure/clojure org.clojure/tools.reader org.clojure/clojurescript
org.clojure/google-closure-library-third-party
com.google.javascript/closure-compiler]]
[org.clojure/tools.reader "0.10.0-alpha3"]
[org.omcljs/om "0.8.8"]]
:plugins [[lein-cljsbuild "1.0.5"]
[lein-npm "0.6.1"]]
:npm {:dependencies [[lodash.isplainobject "^3.2.0"]
[performance-now "^0.2.0"]
[react-motion "0.2.7"]
;; Manually adding the transitive deps for
;; react-motion here, otherwise they're marked
;; as missing
[raf "^3.1.0"]]}
:source-paths ["src" "target/classes"]
:clean-targets ["out/motionable" "out/motionable.js"]
:cljsbuild {:builds [{:id "motionable"
:source-paths ["src"]
:compiler {:main motionable.core
:output-to "out/motionable.js"
:output-dir "out"
:optimizations :none
:verbose true
;; Manually including each file
;; from npm install, as otherwise
;; we get an error re: "Failed to
;; load module". Not sure if order
;; matters (it's a vector, not a
;; set, so implies that it does
;; matter)
:foreign-libs [{:file "node_modules/react/dist/react.min.js"
:provides ["react" "React"]
:module-type :commonjs}
{:file "node_modules/performance-now/lib/performance-now.js"
:provides ["performance-now"]
:module-type :commonjs}
{:file "node_modules/raf/index.js"
:provides ["raf"]
:module-type :commonjs}
{:file "node_modules/lodash.isplainobject/index.js"
:provides ["lodash.isplainobject"]
:module-type :commonjs}
{:file "node_modules/react-motion/lib/Spring.js"
:module-type :commonjs}
{:file "node_modules/react-motion/lib/animationLoop.js"
:module-type :commonjs}
{:file "node_modules/react-motion/lib/compareTrees.js"
:module-type :commonjs}
{:file "node_modules/react-motion/lib/components.js"
:module-type :commonjs}
{:file "node_modules/react-motion/lib/mapTree.js"
:module-type :commonjs}
{:file "node_modules/react-motion/lib/mergeDiff.js"
:module-type :commonjs}
{:file "node_modules/react-motion/lib/noVelocity.js"
:module-type :commonjs}
{:file "node_modules/react-motion/lib/presets.js"
:module-type :commonjs}
{:file "node_modules/react-motion/lib/reorderKeys.js"
:module-type :commonjs}
{:file "node_modules/react-motion/lib/stepper.js"
:module-type :commonjs}
{:file "node_modules/react-motion/lib/updateTree.js"
:module-type :commonjs}
{:file "node_modules/react-motion/lib/zero.js"
:module-type :commonjs}
{:file "node_modules/react-motion/lib/react-motion.js"
:provides ["ReactMotion"]
:module-type :commonjs}]}}]})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment