status-im
/
reagent
mirror of https://github.com/status-im/reagent.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update 0.8-upgrade.md

This commit is contained in:
Juho Teperi 2018-06-16 01:01:15 +03:00 committed by GitHub
parent d9150856c0
commit f9723aab43
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
doc/0.8-upgrade.md
View File

@ -7,20 +7,8 @@ how you want to provide React.
|---|---|---|---| |---|---|---|---|
| Cljsjs | `:none` | Supported | Requires Cljs 1.10.238+ | | Cljsjs | `:none` | Supported | Requires Cljs 1.10.238+ |
| Cljsjs | `:advanced` | Supported | Requires Cljs 1.10.238+ | | Cljsjs | `:advanced` | Supported | Requires Cljs 1.10.238+ |
| `node modules` | `:none` | Known problems (1) | Supported | | `node modules` | `:none` | Requires Cljs 1.10.312 | Supported |
| `node modules` | `:advanced` | Known problems (2) | Supported | | `node modules` | `:advanced` | Requires Cljs 1.10.312 | Supported |
While Reagent 0.8 supports use with React from npm, there are known problems:
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.
## Browser - Cljsjs ## Browser - Cljsjs
@ -55,28 +43,23 @@ will in these cases rename the statically object properties, which will break
dynamically accessing the objects. Externs fix this by defining which properties dynamically accessing the objects. Externs fix this by defining which properties
must not be renamed. must not be renamed.
## Browser - loading React from CDNJS or custom Webpack bundle ## Browser - Webpack
**TODO: Not tested properly** https://clojurescript.org/guides/webpack
If you want to load React.js yourself from external JS file (CDN) or from custom bundle, 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: 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 ```clj
:foreign-libs :foreign-libs
[{:file "empty.js", [{:file "bundje.js",
:provides ["react" "react-dom" "create-react-class" "react-dom/server"], :provides ["react" "react-dom" "create-react-class" "react-dom/server"],
:requires [],
:global-exports {react React :global-exports {react React
react-dom ReactDOM react-dom ReactDOM
create-react-class createReactClass create-react-class createReactClass
react-dom/server ReactDOMServer}}] react-dom/server ReactDOMServer}}]
``` ```
You'll also need to create the mentioned `empty.js` file (FIXME: relative to `project.clj`?).
If your bundle provides other libraries, you could extern `:provides` and `:global-exports` (e.g. `prop-types`).
## NodeJS - Cljsjs ## NodeJS - Cljsjs
Requires https://github.com/clojure/clojurescript/commit/f7d611d87f6ea8a605eae7c0339f30b79a840b49 Requires https://github.com/clojure/clojurescript/commit/f7d611d87f6ea8a605eae7c0339f30b79a840b49
@ -107,3 +90,17 @@ If you have one npm package installed, e.g. `react`, you also need
to provide others (`react-dom` and `create-react-class`), else to provide others (`react-dom` and `create-react-class`), else
Cljsjs packages would be used for these, and packages from different sources Cljsjs packages would be used for these, and packages from different sources
don't work together. 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.