From ee694308f435ff0dc8000cd377d8d2c984a0de19 Mon Sep 17 00:00:00 2001 From: andys8 Date: Thu, 7 Jul 2022 14:46:33 +0200 Subject: [PATCH 1/7] Update react dependency to v18 --- package-lock.json | 76 ++++++++++++++++++++++------------------------- package.json | 4 +-- 2 files changed, 38 insertions(+), 42 deletions(-) diff --git a/package-lock.json b/package-lock.json index e9b195a..87b19e0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,8 +9,8 @@ "version": "0.0.0", "license": "Apache-2.0", "dependencies": { - "react": "^17.0.1", - "react-dom": "^17.0.1" + "react": "^18.0.0", + "react-dom": "^18.0.0" }, "devDependencies": { "bower": "^1.8.12", @@ -2970,6 +2970,7 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "dev": true, "engines": { "node": ">=0.10.0" } @@ -3361,9 +3362,9 @@ "dev": true }, "node_modules/purescript": { - "version": "0.15.2", - "resolved": "https://registry.npmjs.org/purescript/-/purescript-0.15.2.tgz", - "integrity": "sha512-7pn9nMnLOA88Yl2khlF0Y3xOTRjFxPWMnY8OKVDakZciM2udBWgwtxFLXb+DMUequ88vT1+KeY1Z71Tq6g8Qfg==", + "version": "0.15.4", + "resolved": "https://registry.npmjs.org/purescript/-/purescript-0.15.4.tgz", + "integrity": "sha512-6Ge3IMcIxKkOUXg91cBgvjbqu5SxdfwbvWi1P4g+E2maxfvDv+roWAmLyOteTsxQE4SEa/wWoCZvnZ/AEjvrMw==", "dev": true, "hasInstallScript": true, "dependencies": { @@ -3488,28 +3489,26 @@ } }, "node_modules/react": { - "version": "17.0.1", - "resolved": "https://registry.npmjs.org/react/-/react-17.0.1.tgz", - "integrity": "sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" }, "engines": { "node": ">=0.10.0" } }, "node_modules/react-dom": { - "version": "17.0.1", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.1.tgz", - "integrity": "sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", "dependencies": { "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "scheduler": "^0.20.1" + "scheduler": "^0.23.0" }, "peerDependencies": { - "react": "17.0.1" + "react": "^18.2.0" } }, "node_modules/read": { @@ -3735,12 +3734,11 @@ } }, "node_modules/scheduler": { - "version": "0.20.1", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.1.tgz", - "integrity": "sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw==", + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" } }, "node_modules/semver": { @@ -7058,7 +7056,8 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "dev": true }, "object-inspect": { "version": "1.9.0", @@ -7384,9 +7383,9 @@ "dev": true }, "purescript": { - "version": "0.15.2", - "resolved": "https://registry.npmjs.org/purescript/-/purescript-0.15.2.tgz", - "integrity": "sha512-7pn9nMnLOA88Yl2khlF0Y3xOTRjFxPWMnY8OKVDakZciM2udBWgwtxFLXb+DMUequ88vT1+KeY1Z71Tq6g8Qfg==", + "version": "0.15.4", + "resolved": "https://registry.npmjs.org/purescript/-/purescript-0.15.4.tgz", + "integrity": "sha512-6Ge3IMcIxKkOUXg91cBgvjbqu5SxdfwbvWi1P4g+E2maxfvDv+roWAmLyOteTsxQE4SEa/wWoCZvnZ/AEjvrMw==", "dev": true, "requires": { "purescript-installer": "^0.2.6" @@ -7485,22 +7484,20 @@ } }, "react": { - "version": "17.0.1", - "resolved": "https://registry.npmjs.org/react/-/react-17.0.1.tgz", - "integrity": "sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" } }, "react-dom": { - "version": "17.0.1", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.1.tgz", - "integrity": "sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", "requires": { "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "scheduler": "^0.20.1" + "scheduler": "^0.23.0" } }, "read": { @@ -7688,12 +7685,11 @@ } }, "scheduler": { - "version": "0.20.1", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.1.tgz", - "integrity": "sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw==", + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" } }, "semver": { diff --git a/package.json b/package.json index 879061e..30f1064 100644 --- a/package.json +++ b/package.json @@ -14,8 +14,8 @@ }, "homepage": "https://github.com/lumihq/purescript-react-basic-dom#readme", "dependencies": { - "react": "^17.0.1", - "react-dom": "^17.0.1" + "react": "^18.0.0", + "react-dom": "^18.0.0" }, "devDependencies": { "bower": "^1.8.12", From 0b6cb542aa0b9833de7a98e14aae05204090b05e Mon Sep 17 00:00:00 2001 From: andys8 Date: Thu, 7 Jul 2022 15:08:24 +0200 Subject: [PATCH 2/7] ReactDOM: Deprecation notes, TODOs --- src/React/Basic/DOM.purs | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/React/Basic/DOM.purs b/src/React/Basic/DOM.purs index a5209cc..4f71b58 100644 --- a/src/React/Basic/DOM.purs +++ b/src/React/Basic/DOM.purs @@ -28,6 +28,7 @@ import Web.DOM (Element) -- | a DOM element. -- | -- | __*Note:* Relies on `ReactDOM.render`__ +-- | __*Note:* `render` has been replaced with `createRoot` in React 18 render :: JSX -> Element -> Effect Unit render jsx node = render' jsx node (pure unit) @@ -36,6 +37,7 @@ render jsx node = render' jsx node (pure unit) -- | DOM update is complete. -- | -- | __*Note:* Relies on `ReactDOM.render`__ +-- | __*Note:* `render` has been replaced with `createRoot` in React 18 render' :: JSX -> Element -> Effect Unit -> Effect Unit render' = renderThen @@ -48,6 +50,7 @@ foreign import renderThen :: JSX -> Element -> Effect Unit -> Effect Unit -- | __*Note:* Relies on `ReactDOM.hydrate`, generally only -- | used with `ReactDOMServer.renderToNodeStream` or -- | `ReactDOMServer.renderToString`__ +-- | __*Note:* `hydrate` has been replaced with `hydrateRoot` in React 18 hydrate :: JSX -> Element -> Effect Unit hydrate jsx node = hydrate' jsx node (pure unit) @@ -59,6 +62,7 @@ hydrate jsx node = hydrate' jsx node (pure unit) -- | __*Note:* Relies on `ReactDOM.hydrate`, generally only -- | used with `ReactDOMServer.renderToNodeStream` or -- | `ReactDOMServer.renderToString`__ +-- | __*Note:* `hydrate` has been replaced with `hydrateRoot` in React 18 hydrate' :: JSX -> Element -> Effect Unit -> Effect Unit hydrate' = hydrateThen @@ -69,6 +73,7 @@ foreign import hydrateThen :: JSX -> Element -> Effect Unit -> Effect Unit -- | if an app existed and was unmounted successfully. -- | -- | __*Note:* Relies on `ReactDOM.unmountComponentAtNode`__ +-- | __*Note:* `unmount` has been replaced with `Client.unmountRoot` in React 18 foreign import unmount :: Element -> Effect Boolean -- | Divert a render tree into a separate DOM node. The node's @@ -78,4 +83,4 @@ foreign import createPortal :: JSX -> Element -> JSX -- | Create a text node. text :: String -> JSX -text = unsafeCoerce +text = unsafeCoerce \ No newline at end of file From 2897188db69397478bad7814a1a788f5428cedc1 Mon Sep 17 00:00:00 2001 From: andys8 Date: Thu, 7 Jul 2022 15:08:43 +0200 Subject: [PATCH 3/7] ReactDOMServer: Export JS (refactor) --- src/React/Basic/DOM/Server.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/React/Basic/DOM/Server.js b/src/React/Basic/DOM/Server.js index 62b5750..f783adb 100644 --- a/src/React/Basic/DOM/Server.js +++ b/src/React/Basic/DOM/Server.js @@ -1,3 +1 @@ -import ReactDOMServer from "react-dom/server.js"; -export var renderToString = ReactDOMServer.renderToString; -export var renderToStaticMarkup = ReactDOMServer.renderToStaticMarkup; +export { renderToString, renderToStaticMarkup } from "react-dom/server"; From 777520056af25be87938f73ddd9814b9ae9f5165 Mon Sep 17 00:00:00 2001 From: andys8 Date: Thu, 7 Jul 2022 16:20:36 +0200 Subject: [PATCH 4/7] Add ReactDOMClient Containing createRoot, hydrateRoot. Instead of returning object, helper functions renderRoot and unmountRoot are used. HydrationOptions missing. --- src/React/Basic/DOM/Client.js | 18 ++++++++++++++++++ src/React/Basic/DOM/Client.purs | 23 +++++++++++++++++++++++ 2 files changed, 41 insertions(+) create mode 100644 src/React/Basic/DOM/Client.js create mode 100644 src/React/Basic/DOM/Client.purs diff --git a/src/React/Basic/DOM/Client.js b/src/React/Basic/DOM/Client.js new file mode 100644 index 0000000..4dfc936 --- /dev/null +++ b/src/React/Basic/DOM/Client.js @@ -0,0 +1,18 @@ +import ReactDOMClient from "react-dom/client"; + +export function createRoot(container) { + return () => ReactDOMClient.createRoot(container); +} + +export function hydrateRoot(container) { + return (initialChildren) => () => + ReactDOMClient.hydrateRoot(container, initialChildren); +} + +export function renderRoot(root) { + return (children) => () => root.render(children); +} + +export function unmountRoot(root) { + return () => root.unmount(root); +} diff --git a/src/React/Basic/DOM/Client.purs b/src/React/Basic/DOM/Client.purs new file mode 100644 index 0000000..7858a49 --- /dev/null +++ b/src/React/Basic/DOM/Client.purs @@ -0,0 +1,23 @@ +module React.Basic.DOM.Client where + +import Prelude +import React.Basic (JSX) +import Web.DOM (Element) +import Effect (Effect) + +foreign import data ReactRoot :: Type + +-- | Create a React root for the supplied container and return the root. +-- | The root can be used to render a React element into the DOM with `render.` +-- | Replaces `ReactDOM.render` when the `.render` method is called and enables Concurrent Mode. +foreign import createRoot :: Element -> Effect ReactRoot + +-- | Same as `createRoot`, but is used to hydrate a container whose HTML contents were rendered by ReactDOMServer. +-- | React will attempt to attach event listeners to the existing markup. +foreign import hydrateRoot :: Element -> JSX -> Effect ReactRoot + +-- | Render children in `ReactRoot` +foreign import renderRoot :: ReactRoot -> JSX -> Effect Unit + +-- | Unmount the react root +foreign import unmountRoot :: ReactRoot -> Effect Unit \ No newline at end of file From 359bbe9ce038c7de351ed5852b70e4235c9f9027 Mon Sep 17 00:00:00 2001 From: andys8 Date: Thu, 7 Jul 2022 16:22:11 +0200 Subject: [PATCH 5/7] Delete Concurrent (replaced by Client) --- src/React/Basic/DOM/Concurrent.js | 16 ---------------- src/React/Basic/DOM/Concurrent.purs | 16 ---------------- 2 files changed, 32 deletions(-) delete mode 100644 src/React/Basic/DOM/Concurrent.js delete mode 100644 src/React/Basic/DOM/Concurrent.purs diff --git a/src/React/Basic/DOM/Concurrent.js b/src/React/Basic/DOM/Concurrent.js deleted file mode 100644 index b693a89..0000000 --- a/src/React/Basic/DOM/Concurrent.js +++ /dev/null @@ -1,16 +0,0 @@ -import ReactDOM from "react-dom"; -const createRoot = ReactDOM.createRoot || ReactDOM.unstable_createRoot; -const createBlockingRoot = - ReactDOM.createBlockingRoot || ReactDOM.unstable_createBlockingRoot; - -export function createRoot(element) { - return () => createRoot(element); -} - -export function createBlockingRoot(element) { - return () => createBlockingRoot(element); -} - -export function renderRoot(root) { - return (jsx) => () => root.render(jsx); -} diff --git a/src/React/Basic/DOM/Concurrent.purs b/src/React/Basic/DOM/Concurrent.purs deleted file mode 100644 index 818bc84..0000000 --- a/src/React/Basic/DOM/Concurrent.purs +++ /dev/null @@ -1,16 +0,0 @@ --- Warning: The concurrent-mode API is experimental and not yet intended for --- use in production applications. See the React docs for more info. -module React.Basic.DOM.Concurrent where - -import Prelude -import Effect (Effect) -import React.Basic (JSX) -import Web.DOM (Element) - -foreign import data ReactRoot :: Type - -foreign import createRoot :: Element -> Effect ReactRoot - -foreign import createBlockingRoot :: Element -> Effect ReactRoot - -foreign import renderRoot :: ReactRoot -> JSX -> Effect Unit From fed412658fa64b918825457f5d8902fe73a5e154 Mon Sep 17 00:00:00 2001 From: andys8 Date: Thu, 7 Jul 2022 16:38:05 +0200 Subject: [PATCH 6/7] ReactDOMClient arrow functions --- src/React/Basic/DOM/Client.js | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/src/React/Basic/DOM/Client.js b/src/React/Basic/DOM/Client.js index 4dfc936..6300ddd 100644 --- a/src/React/Basic/DOM/Client.js +++ b/src/React/Basic/DOM/Client.js @@ -1,18 +1,11 @@ import ReactDOMClient from "react-dom/client"; -export function createRoot(container) { - return () => ReactDOMClient.createRoot(container); -} +export const createRoot = (container) => () => + ReactDOMClient.createRoot(container); -export function hydrateRoot(container) { - return (initialChildren) => () => - ReactDOMClient.hydrateRoot(container, initialChildren); -} +export const hydrateRoot = (container) => (initialChildren) => () => + ReactDOMClient.hydrateRoot(container, initialChildren); -export function renderRoot(root) { - return (children) => () => root.render(children); -} +export const renderRoot = (root) => (children) => () => root.render(children); -export function unmountRoot(root) { - return () => root.unmount(root); -} +export const unmountRoot = (root) => () => root.unmount(root); From 5031446d1613a50474306c4c5435613cd4e04516 Mon Sep 17 00:00:00 2001 From: andys8 Date: Thu, 7 Jul 2022 17:00:07 +0200 Subject: [PATCH 7/7] Use Warn for deprecation messages --- src/React/Basic/DOM.purs | 31 ++++++++++++++++++++++++------- 1 file changed, 24 insertions(+), 7 deletions(-) diff --git a/src/React/Basic/DOM.purs b/src/React/Basic/DOM.purs index 4f71b58..fc20ffb 100644 --- a/src/React/Basic/DOM.purs +++ b/src/React/Basic/DOM.purs @@ -17,7 +17,9 @@ module React.Basic.DOM ) where import Prelude + import Effect (Effect) +import Prim.TypeError (class Warn, Text) import React.Basic (JSX) import React.Basic.DOM.Generated (Props_a, Props_abbr, Props_address, Props_area, Props_article, Props_aside, Props_audio, Props_b, Props_base, Props_bdi, Props_bdo, Props_blockquote, Props_body, Props_br, Props_button, Props_canvas, Props_caption, Props_cite, Props_code, Props_col, Props_colgroup, Props_data, Props_datalist, Props_dd, Props_del, Props_details, Props_dfn, Props_dialog, Props_div, Props_dl, Props_dt, Props_em, Props_embed, Props_fieldset, Props_figcaption, Props_figure, Props_footer, Props_form, Props_h1, Props_h2, Props_h3, Props_h4, Props_h5, Props_h6, Props_head, Props_header, Props_hgroup, Props_hr, Props_html, Props_i, Props_iframe, Props_img, Props_input, Props_ins, Props_kbd, Props_keygen, Props_label, Props_legend, Props_li, Props_link, Props_main, Props_map, Props_mark, Props_math, Props_menu, Props_menuitem, Props_meta, Props_meter, Props_nav, Props_noscript, Props_object, Props_ol, Props_optgroup, Props_option, Props_output, Props_p, Props_param, Props_picture, Props_pre, Props_progress, Props_q, Props_rb, Props_rp, Props_rt, Props_rtc, Props_ruby, Props_s, Props_samp, Props_script, Props_section, Props_select, Props_slot, Props_small, Props_source, Props_span, Props_strong, Props_style, Props_sub, Props_summary, Props_sup, Props_table, Props_tbody, Props_td, Props_template, Props_textarea, Props_tfoot, Props_th, Props_thead, Props_time, Props_title, Props_tr, Props_track, Props_u, Props_ul, Props_var, Props_video, Props_wbr, a, a', a_, abbr, abbr', abbr_, address, address', address_, area, area', article, article', article_, aside, aside', aside_, audio, audio', audio_, b, b', b_, base, base', bdi, bdi', bdi_, bdo, bdo', bdo_, blockquote, blockquote', blockquote_, body, body', body_, br, br', button, button', button_, canvas, canvas', canvas_, caption, caption', caption_, cite, cite', cite_, code, code', code_, col, col', colgroup, colgroup', colgroup_, data', data'', data_, datalist, datalist', datalist_, dd, dd', dd_, del, del', del_, details, details', details_, dfn, dfn', dfn_, dialog, dialog', dialog_, div, div', div_, dl, dl', dl_, dt, dt', dt_, em, em', em_, embed, embed', fieldset, fieldset', fieldset_, figcaption, figcaption', figcaption_, figure, figure', figure_, footer, footer', footer_, form, form', form_, h1, h1', h1_, h2, h2', h2_, h3, h3', h3_, h4, h4', h4_, h5, h5', h5_, h6, h6', h6_, head, head', head_, header, header', header_, hgroup, hgroup', hgroup_, hr, hr', html, html', html_, i, i', i_, iframe, iframe', iframe_, img, img', input, input', ins, ins', ins_, kbd, kbd', kbd_, keygen, keygen', keygen_, label, label', label_, legend, legend', legend_, li, li', li_, link, link', main, main', main_, map, map', map_, mark, mark', mark_, math, math', math_, menu, menu', menu_, menuitem, menuitem', menuitem_, meta, meta', meter, meter', meter_, nav, nav', nav_, noscript, noscript', noscript_, object, object', object_, ol, ol', ol_, optgroup, optgroup', optgroup_, option, option', option_, output, output', output_, p, p', p_, param, param', picture, picture', picture_, pre, pre', pre_, progress, progress', progress_, q, q', q_, rb, rb', rb_, rp, rp', rp_, rt, rt', rt_, rtc, rtc', rtc_, ruby, ruby', ruby_, s, s', s_, samp, samp', samp_, script, script', script_, section, section', section_, select, select', select_, slot, slot', slot_, small, small', small_, source, source', span, span', span_, strong, strong', strong_, style, style', style_, sub, sub', sub_, summary, summary', summary_, sup, sup', sup_, table, table', table_, tbody, tbody', tbody_, td, td', td_, template, template', template_, textarea, textarea', textarea_, tfoot, tfoot', tfoot_, th, th', th_, thead, thead', thead_, time, time', time_, title, title', title_, tr, tr', tr_, track, track', u, u', u_, ul, ul', ul_, var, var', var_, video, video', video_, wbr, wbr') as Generated import React.Basic.DOM.Internal (CSS, css, mergeStyles, unsafeCreateDOMComponent) as Internal @@ -28,8 +30,11 @@ import Web.DOM (Element) -- | a DOM element. -- | -- | __*Note:* Relies on `ReactDOM.render`__ --- | __*Note:* `render` has been replaced with `createRoot` in React 18 -render :: JSX -> Element -> Effect Unit +render + :: Warn (Text "`render` has been replaced with `createRoot` in React 18") + => JSX + -> Element + -> Effect Unit render jsx node = render' jsx node (pure unit) -- | Render or update/re-render a component tree into @@ -38,7 +43,12 @@ render jsx node = render' jsx node (pure unit) -- | -- | __*Note:* Relies on `ReactDOM.render`__ -- | __*Note:* `render` has been replaced with `createRoot` in React 18 -render' :: JSX -> Element -> Effect Unit -> Effect Unit +render' + :: Warn (Text "`render` has been replaced with `createRoot` in React 18") + => JSX + -> Element + -> Effect Unit + -> Effect Unit render' = renderThen foreign import renderThen :: JSX -> Element -> Effect Unit -> Effect Unit @@ -50,8 +60,11 @@ foreign import renderThen :: JSX -> Element -> Effect Unit -> Effect Unit -- | __*Note:* Relies on `ReactDOM.hydrate`, generally only -- | used with `ReactDOMServer.renderToNodeStream` or -- | `ReactDOMServer.renderToString`__ --- | __*Note:* `hydrate` has been replaced with `hydrateRoot` in React 18 -hydrate :: JSX -> Element -> Effect Unit +hydrate + :: Warn (Text "`hydrate` has been replaced with `hydrateRoot` in React 18") + => JSX + -> Element + -> Effect Unit hydrate jsx node = hydrate' jsx node (pure unit) -- | Render or update/re-render a component tree into @@ -62,8 +75,12 @@ hydrate jsx node = hydrate' jsx node (pure unit) -- | __*Note:* Relies on `ReactDOM.hydrate`, generally only -- | used with `ReactDOMServer.renderToNodeStream` or -- | `ReactDOMServer.renderToString`__ --- | __*Note:* `hydrate` has been replaced with `hydrateRoot` in React 18 -hydrate' :: JSX -> Element -> Effect Unit -> Effect Unit +hydrate' + :: Warn (Text "`hydrate` has been replaced with `hydrateRoot` in React 18") + => JSX + -> Element + -> Effect Unit + -> Effect Unit hydrate' = hydrateThen foreign import hydrateThen :: JSX -> Element -> Effect Unit -> Effect Unit pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy