Make it easier to use with webpack and node

Demo and tests now can run with webpack-generated React

Use js/require, to make Reagent work better with node

.gitignore

@@ -14,3 +14,7 @@ figwheel_server.log
 reagent.iml
 .idea
 .lein-failures
+
+outsite/bundle.js
+outsite/bundle.min.js
+node_modules

Makefile

@@ -17,6 +17,10 @@ run: figwheel
 runsite:
 	@$(MAKE) run PROF=+site,$(PROF)
 
+# development build with auto-reloading and webpacked source
+runpack: target/webpack/bundle.js
+	@$(MAKE) run PROF=+webpack,$(PROF)
+
 # development build with figwheel, but no tests
 runnotest:
 	@$(MAKE) run PROF=+dev-notest,$(PROF)
@@ -25,6 +29,10 @@ runnotest:
 runprod: clean
 	@$(MAKE) serve-site PROF=prod,$(PROF)
 
+# production build with auto-rebuild and webpacked source
+runprodpack: clean target/webpack/bundle.js
+	@$(MAKE) serve-site PROF=prod,webpack,$(PROF)
+
 # production build with auto-rebuild and testing
 runprodtest: clean
 	@$(MAKE) serve-site PROF=prod-test,$(PROF)
@@ -90,6 +98,16 @@ gh-pages-add:
 	git push && rm -rf .git tmp
 
 
+## Webpack
+##########
+
+target/webpack/bundle.js: node_modules lib/modules.js package.json Makefile
+	npm run bundle
+
+node_modules:
+	npm install
+
+
 ## Misc utilities
 #################
 

bin/gen-site.js

@@ -12,7 +12,6 @@ if (typeof location === "undefined") {
     // for some reason
     global.location = {};
 }
-
 var gensite = function () {
     console.log("Loading " + srcFile);
     var optNone = cljsLoad.load(srcFile, outputDirectory, devFile);
@@ -27,6 +26,8 @@ var compileFail = function () {
   }
 };
 
+process.env.NODE_ENV = "production";
+
 if (!compileFail()) {
   try {
     gensite();

lib/modules.js

@@ -0,0 +1,15 @@
+
+
+function exported_require (name) {
+    switch (name) {
+    case "react":            return require("react");
+    case "react-dom":        return require("react-dom");
+    case "react-dom/server": return require("react-dom/server");
+    default:
+        console.error("Unknown module: ", name);
+    }
+}
+
+if (!global.require) {
+    global.require = exported_require;
+}

package.json

@@ -0,0 +1,13 @@
+{
+    "dependencies": {
+        "react": "^0.14.0",
+        "react-dom": "^0.14.0"
+    },
+    "scripts": {
+        "bundle": "webpack && NODE_ENV=production webpack -p"
+    },
+    "devDependencies": {
+        "babel-core": "^5.8.25",
+        "webpack": "^1.12.2"
+    }
+}

project.clj

@@ -50,6 +50,15 @@
                                            ;; :pseudo-names true
                                            :output-dir "target/client"}}}}}]
 
+             :webpack {:cljsbuild
+                       {:builds {:client
+                                 {:compiler
+                                  {:foreign-libs
+                                   [{:file "target/webpack/bundle.js"
+                                     :file-min "target/webpack/bundle.min.js"
+                                     :provides ["cljsjs.react.dom"
+                                                "cljsjs.react"]}]}}}}}
+
              :prod-test [:test :prod]
              
              :dev-notest [:dev

src/reagent/dom.cljs

@@ -5,7 +5,10 @@
             [reagent.debug :refer-macros [dbg]]
             [reagent.interop :refer-macros [.' .!]]))
 
-(def react-dom js/ReactDOM)
+(defonce react-dom (or (and (exists? js/ReactDOM)
+                            js/ReactDOM)
+                       (and (exists? js/require)
+                            (js/require "react-dom"))))
 (assert react-dom)
 
 (defonce ^:private roots (atom {}))

src/reagent/dom/server.cljs

@@ -5,7 +5,11 @@
             [reagent.interop :refer-macros [.' .!]]))
 
 ;; TODO: Where the hell is ReactDOMServer?
-(def react-dom-server js/React)
+(defonce react-dom-server (or (and (exists? js/ReactDOMServer)
+                                   js/ReactDOMServer)
+                              (and (exists? js/require)
+                                   (js/require "react-dom/server"))
+                              js/React))
 (assert react-dom-server)
 
 (defn render-to-string

src/reagent/impl/component.cljs

@@ -250,6 +250,7 @@
                name)
         fmap (assoc fmap
                     :displayName name
+                    :autobind false
                     :cljsLegacyRender legacy-render
                     :reagentRender render-fun
                     :render (:render static-fns))]

src/reagent/impl/util.cljs

@@ -4,7 +4,10 @@
             [reagent.interop :refer-macros [.' .!]]
             [clojure.string :as string]))
 
-(def react js/React)
+(defonce react (or (and (exists? js/React)
+                        js/React)
+                   (and (exists? js/require)
+                        (js/require "react"))))
 (assert react)
 
 (def is-client (and (exists? js/window)

webpack.config.js

@@ -0,0 +1,23 @@
+var path = require('path');
+var webpack = require('webpack');
+
+var prod = process.env.NODE_ENV === "production";
+
+
+
+module.exports = {
+    entry: './lib/modules.js',
+    output: {
+        path: "./target/webpack/",
+        filename: prod ? 'bundle.min.js' : 'bundle.js'
+    },
+    module: {
+        loaders: [
+            { test: /.jsx?$/, loader: 'babel-loader', include: "./lib" }
+        ]
+    },
+    plugins: [
+        new webpack.DefinePlugin(
+            {'process.env': { 'NODE_ENV': prod ? '"production"' : '"development"'}})
+    ]
+}