mirror of https://github.com/status-im/reagent.git
107 lines
4.3 KiB
Markdown
107 lines
4.3 KiB
Markdown
# 0.8 Upgrade guide
|
|
|
|
The necessary changes depend on what environment you target, and
|
|
how you want to provide React.
|
|
|
|
| | Build | Browser | Node |
|
|
|---|---|---|---|
|
|
| Cljsjs | `:none` | Supported | Requires Cljs 1.10.238+ |
|
|
| Cljsjs | `:advanced` | Supported | Requires Cljs 1.10.238+ |
|
|
| `node modules` | `:none` | Requires Cljs 1.10.312 | Supported |
|
|
| `node modules` | `:advanced` | Requires Cljs 1.10.312 | Supported |
|
|
|
|
## Browser - Cljsjs
|
|
|
|
**This is the recommended setup.**
|
|
|
|
Using Reagent with Cljsjs packages doesn't require changes,
|
|
other than making sure you update Cljsjs React dependencies,
|
|
if you have direct dependencies to them.
|
|
|
|
To ensure Cljsjs libs are used instead of Node Modules, you can add `:npm-deps false`, which will make sure ClojureScript compiler doesn't look into `node_modules` directory if it exists.
|
|
|
|
## Browser - node modules
|
|
|
|
If `react`, `react-dom` and `create-react-class` are available in `node_modules`
|
|
directory, ClojureScript compiler will use these with Reagent.
|
|
|
|
If you don't want to call `npm` and manage `package.json`, you can use `:npm-deps` and `:install-deps` compiler options to
|
|
have ClojureScript install the packages automatically.
|
|
|
|
You can use `:process-shim` compiler option to provide `process.env.NODE_ENV`
|
|
constant which is used by JS code to enable development and production
|
|
builds. ClojureScript compiler will automatically set this constant to
|
|
`production` value when using `:advanced` optimizations. This enables
|
|
the React production build.
|
|
|
|
When using module processing, it should be possible to split output into several
|
|
[modules](https://clojurescript.org/reference/compiler-options#modules).
|
|
|
|
**Externs are required for use with node modules also!** React created objects
|
|
statically in several places and then accesses those dynamically. Closure-compiler
|
|
will in these cases rename the statically object properties, which will break
|
|
dynamically accessing the objects. Externs fix this by defining which properties
|
|
must not be renamed.
|
|
|
|
## Browser - Webpack
|
|
|
|
https://clojurescript.org/guides/webpack
|
|
|
|
If you want to load React.js yourself from external JS file (CDN) or from custom bundle,
|
|
it should be possible to override the Cljsjs foreign-libs, while still using externs from Cljsjs packages. To override the foreign-libs, you can provide following compiler option:
|
|
|
|
```clj
|
|
:foreign-libs
|
|
[{:file "bundje.js",
|
|
:provides ["react" "react-dom" "create-react-class" "react-dom/server"],
|
|
:global-exports {react React
|
|
react-dom ReactDOM
|
|
create-react-class createReactClass
|
|
react-dom/server ReactDOMServer}}]
|
|
```
|
|
|
|
## NodeJS - Cljsjs
|
|
|
|
Requires https://github.com/clojure/clojurescript/commit/f7d611d87f6ea8a605eae7c0339f30b79a840b49
|
|
|
|
Available in 1.10.238
|
|
|
|
Reagent should use Cljsjs libraries by default even when running on Node.
|
|
|
|
## NodeJS - node modules
|
|
|
|
Install `react`, `react-dom` and `create-react-class` npm packages,
|
|
and ClojureScript should automatically use `require` to
|
|
load React for Reagent.
|
|
|
|
## Electron
|
|
|
|
???
|
|
|
|
## React-native
|
|
|
|
https://github.com/drapanjanas/re-natal/issues/128
|
|
|
|
## Common Problems
|
|
|
|
### Mismatch with Cljsjs and npm packages
|
|
|
|
If you have one npm package installed, e.g. `react`, you also need
|
|
to provide others (`react-dom` and `create-react-class`), else
|
|
Cljsjs packages would be used for these, and packages from different sources
|
|
don't work together.
|
|
|
|
### Previous problems
|
|
|
|
Before ClojureScript 1.10.312 there were couple of problems with npm support:
|
|
|
|
1. Closure can't properly handle React 16 CommonJS module pattern: https://github.com/google/closure-compiler/issues/2841
|
|
This causes the production React code being loaded even for development builds.
|
|
Using Chrome React Developer Tools with this setup will break Reagent. Fixed by `[com.google.javascript/closure-compiler-unshaded "v20180610"]` ([PR](https://github.com/google/closure-compiler/pull/2963)), will be
|
|
the included in next the ClojureScript release.
|
|
|
|
2. Closure optimization currently breaks certain statically created objects which are
|
|
accessed dynamically in `ReactDOM/server`: https://github.com/facebook/react/issues/12368
|
|
Fixed by using `[com.google.javascript/closure-compiler-unshaded "v20180319"]` ([fix commit](https://github.com/google/closure-compiler/commit/c13cf48b98477e44409dba6359246bffa95b1c7b)), will be
|
|
the default in next ClojureScript release.
|