Skip to content

Support React 18's new client side rendering #1151

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Dec 19, 2021
Merged

Support React 18's new client side rendering #1151

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3636404
add detection for Reacts varying render functions
kylemellander Dec 15, 2021
828ee36
support React 18's client side render methods
kylemellander Dec 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 74 additions & 37 deletions lib/assets/javascripts/react_ujs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"), require("react-dom"), require("react-dom/server"));
module.exports = factory(require("react-dom"), require("react"), require("react-dom/server"));
else if(typeof define === 'function' && define.amd)
define(["react", "react-dom", "react-dom/server"], factory);
define(["react-dom", "react", "react-dom/server"], factory);
else if(typeof exports === 'object')
exports["ReactRailsUJS"] = factory(require("react"), require("react-dom"), require("react-dom/server"));
exports["ReactRailsUJS"] = factory(require("react-dom"), require("react"), require("react-dom/server"));
else
root["ReactRailsUJS"] = factory(root["React"], root["ReactDOM"], root["ReactDOMServer"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_5__) {
root["ReactRailsUJS"] = factory(root["ReactDOM"], root["React"], root["ReactDOMServer"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_5__, __WEBPACK_EXTERNAL_MODULE_6__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
Expand Down Expand Up @@ -73,7 +73,7 @@ return /******/ (function(modules) { // webpackBootstrap
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 6);
/******/ return __webpack_require__(__webpack_require__.s = 7);
/******/ })
/************************************************************************/
/******/ ([
Expand Down Expand Up @@ -106,13 +106,19 @@ module.exports = function(className) {

/***/ }),
/* 1 */
/***/ (function(module, exports) {

module.exports = __WEBPACK_EXTERNAL_MODULE_1__;

/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {

var nativeEvents = __webpack_require__(7)
var pjaxEvents = __webpack_require__(8)
var turbolinksEvents = __webpack_require__(9)
var turbolinksClassicDeprecatedEvents = __webpack_require__(11)
var turbolinksClassicEvents = __webpack_require__(10)
var nativeEvents = __webpack_require__(8)
var pjaxEvents = __webpack_require__(9)
var turbolinksEvents = __webpack_require__(10)
var turbolinksClassicDeprecatedEvents = __webpack_require__(12)
var turbolinksClassicEvents = __webpack_require__(11)

// see what things are globally available
// and setup event handlers to those things
Expand Down Expand Up @@ -164,14 +170,14 @@ module.exports = function(ujs) {


/***/ }),
/* 2 */
/* 3 */
/***/ (function(module, exports, __webpack_require__) {

// Make a function which:
// - First tries to require the name
// - Then falls back to global lookup
var fromGlobal = __webpack_require__(0)
var fromRequireContext = __webpack_require__(12)
var fromRequireContext = __webpack_require__(13)

module.exports = function(reqctx) {
var fromCtx = fromRequireContext(reqctx)
Expand All @@ -195,16 +201,41 @@ module.exports = function(reqctx) {


/***/ }),
/* 3 */
/***/ (function(module, exports) {
/* 4 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

module.exports = __WEBPACK_EXTERNAL_MODULE_3__;
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony export (immutable) */ __webpack_exports__["supportsHydration"] = supportsHydration;
/* harmony export (immutable) */ __webpack_exports__["reactHydrate"] = reactHydrate;
/* harmony export (immutable) */ __webpack_exports__["createReactRootLike"] = createReactRootLike;
const ReactDOM = __webpack_require__(1)

/***/ }),
/* 4 */
/***/ (function(module, exports) {
function supportsHydration() {
return typeof ReactDOM.hydrate === "function" || typeof ReactDOM.hydrateRoot === "function"
}

function reactHydrate(node, component) {
if (typeof ReactDOM.hydrateRoot === "function") {
return ReactDOM.hydrateRoot(node, component)
} else {
return ReactDOM.hydrate(component, node)
}
}

function createReactRootLike(node) {
return ReactDOM.createRoot ? ReactDOM.createRoot(node) : legacyReactRootLike(node)
}

function legacyReactRootLike(node) {
const root = {
render(component) {
return ReactDOM.render(component, node)
}
}
return root
}

module.exports = __WEBPACK_EXTERNAL_MODULE_4__;

/***/ }),
/* 5 */
Expand All @@ -214,15 +245,22 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_5__;

/***/ }),
/* 6 */
/***/ (function(module, exports) {

module.exports = __WEBPACK_EXTERNAL_MODULE_6__;

/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {

var React = __webpack_require__(3)
var ReactDOM = __webpack_require__(4)
var ReactDOMServer = __webpack_require__(5)
var React = __webpack_require__(5)
var ReactDOM = __webpack_require__(1)
var ReactDOMServer = __webpack_require__(6)

var detectEvents = __webpack_require__(1)
var detectEvents = __webpack_require__(2)
var constructorFromGlobal = __webpack_require__(0)
var constructorFromRequireContextWithGlobalFallback = __webpack_require__(2)
var constructorFromRequireContextWithGlobalFallback = __webpack_require__(3)
const { supportsHydration, reactHydrate, createReactRootLike } = __webpack_require__(4)

var ReactRailsUJS = {
// This attribute holds the name of component which should be mounted
Expand Down Expand Up @@ -329,13 +367,14 @@ var ReactRailsUJS = {
}
}

if (hydrate && typeof ReactDOM.hydrate === "function") {
component = ReactDOM.hydrate(component, node);
if (hydrate && supportsHydration()) {
component = reactHydrate(node, component);
} else {
component = ReactDOM.render(component, node);
const root = createReactRootLike(node)
component = root.render(component);
}
}
}
}
},

// Within `searchSelector`, find nodes which have React components
Expand Down Expand Up @@ -390,7 +429,7 @@ module.exports = ReactRailsUJS


/***/ }),
/* 7 */
/* 8 */
/***/ (function(module, exports) {

module.exports = {
Expand All @@ -413,7 +452,7 @@ module.exports = {


/***/ }),
/* 8 */
/* 9 */
/***/ (function(module, exports) {

module.exports = {
Expand All @@ -433,25 +472,23 @@ module.exports = {


/***/ }),
/* 9 */
/* 10 */
/***/ (function(module, exports) {

module.exports = {
// Turbolinks 5+ got rid of named events (?!)
setup: function(ujs) {
ujs.handleEvent('turbolinks:load', ujs.handleMount);
ujs.handleEvent('turbolinks:before-render', ujs.handleUnmount);
},

teardown: function(ujs) {
ujs.removeEvent('turbolinks:load', ujs.handleMount);
ujs.removeEvent('turbolinks:before-render', ujs.handleUnmount);
},
}


/***/ }),
/* 10 */
/* 11 */
/***/ (function(module, exports) {

module.exports = {
Expand All @@ -469,7 +506,7 @@ module.exports = {


/***/ }),
/* 11 */
/* 12 */
/***/ (function(module, exports) {

module.exports = {
Expand All @@ -490,7 +527,7 @@ module.exports = {


/***/ }),
/* 12 */
/* 13 */
/***/ (function(module, exports) {

// Load React components by requiring them from "components/", for example:
Expand Down
Loading