TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-24 14:43:08 +03:00
Code Issues Projects Releases Wiki Activity

Dropped app.import for react/react-dom in favor of ember-auto-import

Browse Source 
refs a4a4136c2f (commitcomment-79676720)

- `ember-auto-import` does the right thing automatically so manual `app.import` is not necessary and avoids potential pitfalls with multiple copies of react being bundled
- added the `window.*` global attachments after importing so that our async loaded UMD components have access to our bundled React and ReactDOM instances
This commit is contained in:
Kevin Ansfield 2022-08-02 09:42:25 +01:00
parent 1c36b93949
commit 50aa6f4877
2 changed files with 10 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ghost/admin/app/modifiers/react-render.js vendored
View File

@ -1,6 +1,12 @@
/* global ReactDOM */
import Modifier from 'ember-modifier';
import {createElement} from 'react';
import React from 'react';
import ReactDOM from 'react-dom';
import {createRoot} from 'react-dom/client';
// make globals available for any pulled in UMD components
// - avoids external components needing to bundle React and running into multiple version errors
window.React = React;
window.ReactDOM = ReactDOM;
export default class ReactRenderModifier extends Modifier {
didInstall() {
@ -8,9 +14,9 @@ export default class ReactRenderModifier extends Modifier {
const props = this.args.named;
if (!this.root) {
this.root = ReactDOM.createRoot(this.element);
this.root = createRoot(this.element);
}
this.root.render(createElement(reactComponent, {...props}));
this.root.render(React.createElement(reactComponent, {...props}));
}
willDestroy() {

11
ghost/admin/ember-cli-build.js
View File

@ -265,16 +265,5 @@ module.exports = function (defaults) {
app.import('vendor/simplemde/debug/simplemde.js', {type: 'test'});
}
// Support react components
// adds React and ReactDOM to window.
app.import({
development: 'node_modules/react/umd/react.development.js',
production: 'node_modules/react/umd/react.production.min.js'
});
app.import({
development: 'node_modules/react-dom/umd/react-dom.development.js',
production: 'node_modules/react-dom/umd/react-dom.production.min.js'
});
return app.toTree();
};