Example for integrating React NPM dependencies with Clojurescript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dev Init Jun 5, 2017
resources/public WIP Jun 5, 2017
src Revert "Use react surrogates" Jun 22, 2017
.gitignore Add React Jun 5, 2017
README.md Deprecate Aug 29, 2018
library.js WIP Jun 5, 2017
package.json Update dep Aug 29, 2018
project.clj Revert "Use react surrogates" Jun 22, 2017
webpack.config.js Add React Jun 5, 2017
yarn.lock WIP Jun 5, 2017

README.md

double-bundle

Demonstration of the "double-bundle" approach to integrating NPM dependencies into ClojureScript projects

PLEASE NOTE

This repository is no longer maintained. Please refer to the cljs-spa-example project instead.

Overview

You can integrate NPM dependencies in a Clojurescript project by building a separate bundle using webpack. The resulting application contains two bundles:

  • js/npm-bundle.js, built by webpack
  • js/compiled/double_bundle.js, built by the Clojurescript compiler (and Google Closure)

Hence the name - the double bundle approach.

Details

This project is built on Reagent and Figwheel. Note, however, that neither of these are essential - a similar approach would work for any browser-based Clojurescript project that consumes NPM dependencies.

To show how to include third party React dependencies, this project includes the react-datetime calendar component.

Setup

To see the demo, run this:

yarn install
yarn build
lein figwheel

Then open your browser at localhost:3449.

Discussion

This project is based on fighweel-template. To see the changes from an empty fighwheel template, see this diff view.

For simplicity, we're not making use of the npm-deps feature included in recent versions of the Clojurescript compiler here. The Google Closure compiler is not involved. The upside of this choice is that any NPM packages should work, as long as it is added to library.js.

Similarly, for the sake of operational simplicity, we don't provide an externs files for an external component. Instead, we use goog.object/get to retrieve the component while avoiding minification during Advanced Compilation.

TODO

  • Show how to build a single prod bundle
  • Does Reagent require externs in advanced compilation?

License

Copyright © 2017 Paulus Esterhazy

Distributed under the Eclipse Public License either version 1.0 or (at your option) any later version.