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
This commit is contained in:
Dan Holmsand 2015-10-10 12:37:58 +02:00
parent d30ef3aedb
commit d9ad7740ec
11 changed files with 99 additions and 5 deletions

6
.gitignore vendored
View File

@ -13,4 +13,8 @@ figwheel_server.log
reagent.iml
.idea
.lein-failures
.lein-failures
outsite/bundle.js
outsite/bundle.min.js
node_modules

View File

@ -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
#################

View File

@ -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();

15
lib/modules.js Normal file
View File

@ -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;
}

13
package.json Normal file
View File

@ -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"
}
}

View File

@ -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

View File

@ -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 {}))

View File

@ -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

View File

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

View File

@ -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)

23
webpack.config.js Normal file
View File

@ -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"'}})
]
}