Use cljsjs/react and require clojurescript >= 2740

This means that old style :preamble inclusion is deprecated.

.gitignore

@@ -9,3 +9,4 @@ outsite/public/js
 outsite/public/news
 outsite/public/css
 out
+figwheel_server.log

bin/cljs-load.js

@@ -3,34 +3,33 @@ var fs = require("fs");
 var vm = require("vm");
 var path = require("path");
 
+var run = function (src) {
+    global.require = require;
+    vm.runInThisContext(fs.readFileSync(src), src);
+}
+
 var loadSrc = function (mainFile, outputDir, devModule) {
-    var src = fs.readFileSync(mainFile);
     var googDir = path.join(outputDir, "goog");
     var optNone = false;
     if (outputDir) {
         optNone = fs.existsSync(path.join(googDir, "deps.js"));
     }
-
     if (optNone) {
         var cwd = process.cwd();
-        if (!global.goog) global.goog = {};
-
+        if (!global.goog) {
+            global.goog = {};
+        }
         global.CLOSURE_IMPORT_SCRIPT = function (src) {
-            require(path.resolve(path.resolve(
-                cwd, path.join(googDir, src))));
+            var s = path.resolve(path.resolve(cwd, path.join(googDir, src)));
+            run(s);
             return true;
         };
 
-        var f = path.join(googDir, "base.js");
-        vm.runInThisContext(fs.readFileSync(f), f);
-        require(path.resolve(cwd, mainFile));
+        run(path.join(googDir, "base.js"));
+        run(path.join(outputDir, "cljs_deps.js"));
         goog.require(devModule);
     } else {
-        global.globalNodeRequire = require;
-
-        vm.runInThisContext("(function (require) {"
-                            + src
-                            + "\n})(globalNodeRequire);", mainFile);
+        run(mainFile);
     }
     return optNone;
 };

demo/demo.cljs

@@ -8,8 +8,6 @@
             [reagentdemo.news :as news]
             [reagent.debug :refer-macros [dbg println]]))
 
-(i/import-react)
-
 (def test-results-comp (atom nil))
 
 (def github {:href "https://github.com/reagent-project/reagent"})
@@ -43,7 +41,6 @@
    [tools/page-content]
    [github-badge]])
 
-
 (defn start! [{:keys [test-results]}]
   (reset! test-results-comp test-results)
   (tools/start! {:body (fn [] [demo])

demo/sitetools.cljs

@@ -13,8 +13,6 @@
   (enable-console-print!))
 
 (declare page-content)
-(declare prefix)
-
 
 
 ;;; Configuration
@@ -56,7 +54,7 @@
     (assert (ifn? f) (str "couldn't resolve ppage " p))
     (assert (string? p))
     [:a (assoc props
-          :href (prefix p)
+          :href p
           :on-click (if (:has-history @page-state)
                       (fn [e]
                         (.preventDefault e)
@@ -166,9 +164,8 @@
 (defn html-template [{:keys [title body timestamp page-conf
                              opt-none req]}]
   (let [c @config
-        base (prefix (str (:js-dir c) "/goog/base.js"))
-        main (str (prefix (:js-file c)) timestamp)
-        css-file (prefix (:css-file c))
+        main (str (:js-file c) timestamp)
+        css-file (:css-file c)
         opt-none (:opt-none c)]
     (reagent/render-to-static-markup
      [:html
@@ -176,6 +173,7 @@
        [:meta {:charset "utf-8"}]
        [:meta {:name 'viewport
                :content "width=device-width, initial-scale=1.0"}]
+       [:base {:href (prefix "")}]
        [:link {:href (str css-file timestamp) :rel 'stylesheet}]
        [:title title]]
       [:body
@@ -184,11 +182,7 @@
        (danger :script (str "var pageConfig = " (-> page-conf
                                                     clj->js
                                                     js/JSON.stringify)))
-       (if opt-none
-         [:script {:src base :type "text/javascript"}])
-       [:script {:src main :type "text/javascript"}]
-       (if opt-none
-         (danger :script "goog.require('devsetup');"))]])))
+       [:script {:src main :type "text/javascript"}]]])))
 
 (defn gen-page [page-name timestamp]
   (reset! page page-name)

project.clj

@@ -5,8 +5,9 @@
   :description "A simple ClojureScript interface to React"
 
   :dependencies [[org.clojure/clojure "1.6.0"]
-                 [org.clojure/clojurescript "0.0-2342"]]
-  :plugins [[lein-cljsbuild "1.0.3"]]
+                 [org.clojure/clojurescript "0.0-2740"]
+                 [cljsjs/react "0.12.2-5"]]
+  :plugins [[lein-cljsbuild "1.0.4"]]
   :resource-paths ["vendor"]
   :source-paths ["src"]
   
@@ -24,15 +25,16 @@
                                 {:client {:source-paths ["test"]}}}}
 
              :dev-base {:dependencies
-                        [[figwheel "0.1.7-SNAPSHOT"]]
-                        :plugins [[lein-figwheel "0.1.7-SNAPSHOT"]]
+                        [[figwheel "0.2.2-SNAPSHOT"]]
+                        :plugins [[lein-figwheel "0.2.2-SNAPSHOT"]]
                         :source-paths ["demo"] ;; for lighttable
                         :resource-paths ["site" "outsite"]
                         :figwheel {:css-dirs ["site/public/css"]}
                         :cljsbuild {:builds
                                     {:client
                                      {:source-paths ["env/dev"]
-                                      :compiler {:source-map true
+                                      :compiler {:main "devsetup"
+                                                 :source-map true
                                                  :optimizations :none
                                                  :output-dir
                                                  "outsite/public/js/out"}}}}}
@@ -48,7 +50,8 @@
                     {:cljsbuild {:builds
                                  {:client
                                   {:source-paths ["env/prod"]
-                                   :compiler {:optimizations :advanced
+                                   :compiler {:main "prodsetup"
+                                              :optimizations :advanced
                                               :elide-asserts true
                                               :pretty-print false
                                               :output-dir "target/client"}}}}}]
@@ -65,7 +68,9 @@
 
   :cljsbuild {:builds
               {:client {:compiler
-                        {:output-to "outsite/public/js/main.js"}}}}
+                        {:output-to "outsite/public/js/main.js"
+                         :asset-path "js/out"}}}}
   
   :figwheel {:http-server-root "public" ;; assumes "resources"
+             :repl false
              :server-port 3449})

site/public/index.html

@@ -10,13 +10,9 @@
       <h1>Run "lein figwheel", and open
         <a href="http://localhost:3449">http://localhost:3449</a></h1>
     </div>
-    <script src="js/out/goog/base.js" type="text/javascript"></script>
-    <script src="js/main.js" type="text/javascript"></script>
     <script>
       var pageConfig = {"allow-html5-history": false};
-      if (typeof goog != 'undefined') {
-      goog.require('devsetup');
-      }
     </script>
+    <script src="js/main.js" type="text/javascript"></script>
   </body>
 </html>

src/reagent/core.cljs

@@ -1,7 +1,8 @@
 
 (ns reagent.core
   (:refer-clojure :exclude [partial atom flush])
-  (:require [reagent.impl.template :as tmpl]
+  (:require [cljsjs.react]
+            [reagent.impl.template :as tmpl]
             [reagent.impl.component :as comp]
             [reagent.impl.util :as util]
             [reagent.impl.batching :as batch]