-
-
Notifications
You must be signed in to change notification settings - Fork 68
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
React 18 introduces a new render API: https://react.dev/blog/2022/03/29/react-v18#react-dom-client The reagent.dom.client namespace wraps this new API. reagent.dom still wraps the old one. React throws a deprecation warning if you use the old API with React 18. If a user uses the new API in their project, they will still get the warning because of re-frame-10x using the old API. This is confusing. It looks as if their code is suspect, when actually ours is. re-frame-10x depends on the user's react version. That means we can't predict whether the user will use React 17 or React 18, or which API they will invoke. We can't just load reagent.dom.client, because it only works with React 18. We can't load it conditionally based on the react version, since it's a general limitation of cljs that we can't require a namespace at runtime. Added a second preload namespace. Since only the user can know which API to use, we let them declare it themselves. The original preload remains unchanged: {:preloads [day8.re-frame-10x.preload]} It calls the old API, which works in all cases. It throws the deprecation warning if the user has React 18. The new preload only works with React 18, using the new API properly: {:preloads [day8.re-frame-10x.preload.react-18]} Fixes #367
- Loading branch information
Showing
6 changed files
with
65 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| (ns day8.re-frame-10x.preload.react-17 | ||
| "Use this namespace with the :preloads compiler option to perform the necessary setup for enabling | ||
| re-frame-10x; e.g. | ||
| {:compiler {:preloads [day8.re-frame-10x.preload] ...}}" | ||
| (:require | ||
| ["react" :as react] | ||
| [clojure.string :as str] | ||
| [day8.re-frame-10x :as re-frame-10x] | ||
| [day8.re-frame-10x.inlined-deps.reagent.v1v2v0.reagent.dom :as rdom] | ||
| [day8.re-frame-10x.inlined-deps.re-frame.v1v3v0.re-frame.core :as rf] | ||
| [day8.re-frame-10x.events :as events])) | ||
|
|
||
| (let [react-major-version (first (str/split react/version #"\."))] | ||
| (when-not (= "17" react-major-version) | ||
| (js/console.warn "Re-frame-10x expects React 17, but React" | ||
| react-major-version | ||
| "is loaded. This causes deprecation warnings." | ||
| (when (= "18" react-major-version) | ||
| "To fix this, try declaring `day8.re-frame-10x.preload.react-18` in your shadow-cljs.edn (instead of `day8.re-frame-10x.preload`). See https://github.com/day8/re-frame-10x/README.md#compatibility-matrix")))) | ||
|
|
||
| (re-frame-10x/patch!) | ||
|
|
||
| (rf/dispatch-sync [::events/init {:debug? re-frame-10x/debug?}]) | ||
|
|
||
| (rf/clear-subscription-cache!) | ||
|
|
||
| (def shadow-root (re-frame-10x/create-shadow-root)) | ||
|
|
||
| (rdom/render (re-frame-10x/create-style-container shadow-root) | ||
| shadow-root) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| (ns day8.re-frame-10x.preload.react-18 | ||
| "Use this namespace with the :preloads compiler option to perform the necessary setup for enabling | ||
| re-frame-10x; e.g. | ||
| {:compiler {:preloads [day8.re-frame-10x.preload] ...}} | ||
| This namespace is intended for use with React 18. | ||
| It launches re-frame-10x with react's new dom client API. | ||
| See https://react.dev/blog/2022/03/29/react-v18#react-dom-client." | ||
| (:require | ||
| [day8.re-frame-10x :as re-frame-10x] | ||
| [day8.re-frame-10x.inlined-deps.re-frame.v1v3v0.re-frame.core :as rf] | ||
| [day8.re-frame-10x.inlined-deps.reagent.v1v2v0.reagent.dom.client :as rdc] | ||
| [day8.re-frame-10x.events :as events])) | ||
|
|
||
| (re-frame-10x/patch!) | ||
|
|
||
| (rf/dispatch-sync [::events/init {:debug? re-frame-10x/debug?}]) | ||
|
|
||
| (rf/clear-subscription-cache!) | ||
|
|
||
| (def shadow-root (re-frame-10x/create-shadow-root)) | ||
|
|
||
| (rdc/render (rdc/create-root shadow-root) | ||
| (re-frame-10x/create-style-container shadow-root)) |