@elementor/editor 0.4.0 → 0.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/dist/index.js +16 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +16 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +8 -8
- package/src/init.tsx +23 -1
- package/src/sync/__tests__/use-color-scheme.test.ts +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.5.1](https://github.com/elementor/elementor-packages/compare/@elementor/editor@0.5.0...@elementor/editor@0.5.1) (2023-06-05)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @elementor/editor
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
# [0.5.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor@0.4.0...@elementor/editor@0.5.0) (2023-06-01)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Features
|
|
18
|
+
|
|
19
|
+
* add support for React 18 [ED-10905] ([#46](https://github.com/elementor/elementor-packages/issues/46)) ([c8915c6](https://github.com/elementor/elementor-packages/commit/c8915c6ea62550bcdeb5c8a576f311bedc35bcad))
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
# [0.4.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor@0.3.0...@elementor/editor@0.4.0) (2023-05-30)
|
|
7
26
|
|
|
8
27
|
|
package/dist/index.js
CHANGED
|
@@ -45,6 +45,7 @@ var {
|
|
|
45
45
|
// src/init.tsx
|
|
46
46
|
var React3 = __toESM(require("react"));
|
|
47
47
|
var ReactDOM = __toESM(require("react-dom"));
|
|
48
|
+
var import_client = require("react-dom/client");
|
|
48
49
|
var import_i18n2 = require("@wordpress/i18n");
|
|
49
50
|
|
|
50
51
|
// src/components/shell.tsx
|
|
@@ -138,7 +139,21 @@ function ThemeProvider({ children }) {
|
|
|
138
139
|
function init(domElement) {
|
|
139
140
|
const store = (0, import_store.createStore)();
|
|
140
141
|
(0, import_editor_v1_adapters2.dispatchReadyEvent)();
|
|
141
|
-
|
|
142
|
+
render2(/* @__PURE__ */ React3.createElement(import_store.StoreProvider, { store }, /* @__PURE__ */ React3.createElement(import_ui2.DirectionProvider, { rtl: (0, import_i18n2.isRTL)() }, /* @__PURE__ */ React3.createElement(ThemeProvider, null, /* @__PURE__ */ React3.createElement(Shell, null)))), domElement);
|
|
143
|
+
}
|
|
144
|
+
function render2(app, domElement) {
|
|
145
|
+
let renderFn;
|
|
146
|
+
try {
|
|
147
|
+
const root = (0, import_client.createRoot)(domElement);
|
|
148
|
+
renderFn = () => {
|
|
149
|
+
root.render(app);
|
|
150
|
+
};
|
|
151
|
+
} catch (e) {
|
|
152
|
+
renderFn = () => {
|
|
153
|
+
ReactDOM.render(app, domElement);
|
|
154
|
+
};
|
|
155
|
+
}
|
|
156
|
+
renderFn();
|
|
142
157
|
}
|
|
143
158
|
// Annotate the CommonJS export names for ESM import in node:
|
|
144
159
|
0 && (module.exports = {
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/locations.ts","../src/init.tsx","../src/components/shell.tsx","../src/hooks/use-sync-document-title.ts","../src/hooks/use-sync-document-query-params.ts","../src/components/theme-provider.tsx","../src/sync/use-color-scheme.ts"],"sourcesContent":["export { injectIntoTop } from './locations';\nexport { default as init } from './init';\n","import { createLocation } from '@elementor/locations';\n\nexport const {\n\tSlot: TopSlot,\n\tinject: injectIntoTop,\n} = createLocation();\n","import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { isRTL } from '@wordpress/i18n';\nimport Shell from './components/shell';\nimport { DirectionProvider } from '@elementor/ui';\nimport { StoreProvider, createStore } from '@elementor/store';\nimport { dispatchReadyEvent } from '@elementor/editor-v1-adapters';\nimport ThemeProvider from './components/theme-provider';\n\nexport default function init( domElement: Element ): void {\n\tconst store = createStore();\n\n\tdispatchReadyEvent();\n\n\
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/locations.ts","../src/init.tsx","../src/components/shell.tsx","../src/hooks/use-sync-document-title.ts","../src/hooks/use-sync-document-query-params.ts","../src/components/theme-provider.tsx","../src/sync/use-color-scheme.ts"],"sourcesContent":["export { injectIntoTop } from './locations';\nexport { default as init } from './init';\n","import { createLocation } from '@elementor/locations';\n\nexport const {\n\tSlot: TopSlot,\n\tinject: injectIntoTop,\n} = createLocation();\n","import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { JSX } from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { isRTL } from '@wordpress/i18n';\nimport Shell from './components/shell';\nimport { DirectionProvider } from '@elementor/ui';\nimport { StoreProvider, createStore } from '@elementor/store';\nimport { dispatchReadyEvent } from '@elementor/editor-v1-adapters';\nimport ThemeProvider from './components/theme-provider';\n\nexport default function init( domElement: Element ): void {\n\tconst store = createStore();\n\n\tdispatchReadyEvent();\n\n\trender( (\n\t\t<StoreProvider store={ store }>\n\t\t\t<DirectionProvider rtl={ isRTL() }>\n\t\t\t\t<ThemeProvider>\n\t\t\t\t\t<Shell />\n\t\t\t\t</ThemeProvider>\n\t\t\t</DirectionProvider>\n\t\t</StoreProvider>\n\t), domElement );\n}\n\n// Support conditional rendering based on the React version.\n// We use `createRoot` when available, but fallback to `ReactDOM.render` for older versions.\nfunction render( app: JSX.Element, domElement: Element ) {\n\tlet renderFn: () => void;\n\n\ttry {\n\t\tconst root = createRoot( domElement );\n\n\t\trenderFn = () => {\n\t\t\troot.render( app );\n\t\t};\n\t} catch ( e ) {\n\t\trenderFn = () => {\n\t\t\tReactDOM.render( app, domElement );\n\t\t};\n\t}\n\n\trenderFn();\n}\n","import * as React from 'react';\nimport useSyncDocumentTitle from '../hooks/use-sync-document-title';\nimport useSyncDocumentQueryParams from '../hooks/use-sync-document-query-params';\nimport { TopSlot } from '../locations';\n\nexport default function Shell() {\n\tuseSyncDocumentTitle();\n\tuseSyncDocumentQueryParams();\n\n\treturn (\n\t\t<TopSlot />\n\t);\n}\n","import { useEffect } from 'react';\nimport { useActiveDocument, useHostDocument } from '@elementor/editor-documents';\nimport { __ } from '@wordpress/i18n';\n\nexport default function useSyncDocumentTitle() {\n\tconst activeDocument = useActiveDocument();\n\tconst hostDocument = useHostDocument();\n\n\tconst document = activeDocument && activeDocument.type.value !== 'kit'\n\t\t? activeDocument\n\t\t: hostDocument;\n\n\tuseEffect( () => {\n\t\t// Allow empty string as title.\n\t\tif ( document?.title === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// translators: %s: Document title.\n\t\tconst title = __( 'Edit \"%s\" with Elementor', 'elementor' )\n\t\t\t.replace( '%s', document.title );\n\n\t\twindow.document.title = title;\n\t}, [ document?.title ] );\n}\n","import { useEffect } from 'react';\nimport { useHostDocument } from '@elementor/editor-documents';\n\nexport default function useSyncDocumentQueryParams() {\n\tconst hostDocument = useHostDocument();\n\n\tuseEffect( () => {\n\t\tif ( ! hostDocument?.id ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst url = new URL( window.location.href );\n\n\t\turl.searchParams.set( 'post', hostDocument.id.toString() );\n\t\turl.searchParams.delete( 'active-document' );\n\n\t\thistory.replaceState( {}, '', url );\n\t}, [ hostDocument?.id ] );\n}\n","import * as React from 'react';\nimport { ThemeProvider as ThemeProviderBase } from '@elementor/ui';\nimport { useColorScheme } from '../sync/use-color-scheme';\n\nexport default function ThemeProvider( { children }: { children: React.ReactNode } ) {\n\tconst colorScheme = useColorScheme();\n\n\treturn (\n\t\t<ThemeProviderBase colorScheme={ colorScheme }>\n\t\t\t{ children }\n\t\t</ThemeProviderBase>\n\t);\n}\n","import { useEffect, useState } from 'react';\nimport { commandEndEvent, CommandEvent, listenTo, v1ReadyEvent } from '@elementor/editor-v1-adapters';\n\nexport type ColorScheme = 'auto' | 'dark' | 'light';\n\nexport type ExtendedWindow = Window & {\n\telementor: {\n\t\tgetPreferences: ( key: 'ui_theme' ) => ColorScheme,\n\t}\n}\n\nexport function useColorScheme() {\n\tconst [ colorScheme, setColorScheme ] = useState<ColorScheme>( () => getV1ColorScheme() );\n\n\tuseEffect( () => {\n\t\treturn listenTo(\n\t\t\tv1ReadyEvent(),\n\t\t\t() => setColorScheme( getV1ColorScheme() )\n\t\t);\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn listenTo(\n\t\t\tcommandEndEvent( 'document/elements/settings' ),\n\t\t\t( e ) => {\n\t\t\t\tconst event = e as CommandEvent<{\n\t\t\t\t\tsettings: {\n\t\t\t\t\t\tui_theme?: ColorScheme,\n\t\t\t\t\t},\n\t\t\t\t}>;\n\n\t\t\t\t// The User-Preferences settings object has a key named `ui_theme` that controls the color scheme.\n\t\t\t\tconst isColorScheme = event.args?.settings && 'ui_theme' in event.args.settings;\n\n\t\t\t\tif ( isColorScheme ) {\n\t\t\t\t\tsetColorScheme( getV1ColorScheme() );\n\t\t\t\t}\n\t\t\t}\n\t\t);\n\t}, [] );\n\n\treturn colorScheme;\n}\n\nfunction getV1ColorScheme() {\n\treturn ( window as unknown as ExtendedWindow ).elementor?.getPreferences?.( 'ui_theme' ) || 'auto';\n}\n"],"mappings":"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","names":["React","import_i18n","import_react","import_editor_documents","import_ui","import_editor_v1_adapters","React","import_react","ThemeProviderBase","render"]}
|
package/dist/index.mjs
CHANGED
|
@@ -8,6 +8,7 @@ var {
|
|
|
8
8
|
// src/init.tsx
|
|
9
9
|
import * as React3 from "react";
|
|
10
10
|
import * as ReactDOM from "react-dom";
|
|
11
|
+
import { createRoot } from "react-dom/client";
|
|
11
12
|
import { isRTL } from "@wordpress/i18n";
|
|
12
13
|
|
|
13
14
|
// src/components/shell.tsx
|
|
@@ -101,7 +102,21 @@ function ThemeProvider({ children }) {
|
|
|
101
102
|
function init(domElement) {
|
|
102
103
|
const store = createStore();
|
|
103
104
|
dispatchReadyEvent();
|
|
104
|
-
|
|
105
|
+
render2(/* @__PURE__ */ React3.createElement(StoreProvider, { store }, /* @__PURE__ */ React3.createElement(DirectionProvider, { rtl: isRTL() }, /* @__PURE__ */ React3.createElement(ThemeProvider, null, /* @__PURE__ */ React3.createElement(Shell, null)))), domElement);
|
|
106
|
+
}
|
|
107
|
+
function render2(app, domElement) {
|
|
108
|
+
let renderFn;
|
|
109
|
+
try {
|
|
110
|
+
const root = createRoot(domElement);
|
|
111
|
+
renderFn = () => {
|
|
112
|
+
root.render(app);
|
|
113
|
+
};
|
|
114
|
+
} catch (e) {
|
|
115
|
+
renderFn = () => {
|
|
116
|
+
ReactDOM.render(app, domElement);
|
|
117
|
+
};
|
|
118
|
+
}
|
|
119
|
+
renderFn();
|
|
105
120
|
}
|
|
106
121
|
export {
|
|
107
122
|
init,
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/locations.ts","../src/init.tsx","../src/components/shell.tsx","../src/hooks/use-sync-document-title.ts","../src/hooks/use-sync-document-query-params.ts","../src/components/theme-provider.tsx","../src/sync/use-color-scheme.ts"],"sourcesContent":["import { createLocation } from '@elementor/locations';\n\nexport const {\n\tSlot: TopSlot,\n\tinject: injectIntoTop,\n} = createLocation();\n","import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { isRTL } from '@wordpress/i18n';\nimport Shell from './components/shell';\nimport { DirectionProvider } from '@elementor/ui';\nimport { StoreProvider, createStore } from '@elementor/store';\nimport { dispatchReadyEvent } from '@elementor/editor-v1-adapters';\nimport ThemeProvider from './components/theme-provider';\n\nexport default function init( domElement: Element ): void {\n\tconst store = createStore();\n\n\tdispatchReadyEvent();\n\n\
|
|
1
|
+
{"version":3,"sources":["../src/locations.ts","../src/init.tsx","../src/components/shell.tsx","../src/hooks/use-sync-document-title.ts","../src/hooks/use-sync-document-query-params.ts","../src/components/theme-provider.tsx","../src/sync/use-color-scheme.ts"],"sourcesContent":["import { createLocation } from '@elementor/locations';\n\nexport const {\n\tSlot: TopSlot,\n\tinject: injectIntoTop,\n} = createLocation();\n","import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { JSX } from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { isRTL } from '@wordpress/i18n';\nimport Shell from './components/shell';\nimport { DirectionProvider } from '@elementor/ui';\nimport { StoreProvider, createStore } from '@elementor/store';\nimport { dispatchReadyEvent } from '@elementor/editor-v1-adapters';\nimport ThemeProvider from './components/theme-provider';\n\nexport default function init( domElement: Element ): void {\n\tconst store = createStore();\n\n\tdispatchReadyEvent();\n\n\trender( (\n\t\t<StoreProvider store={ store }>\n\t\t\t<DirectionProvider rtl={ isRTL() }>\n\t\t\t\t<ThemeProvider>\n\t\t\t\t\t<Shell />\n\t\t\t\t</ThemeProvider>\n\t\t\t</DirectionProvider>\n\t\t</StoreProvider>\n\t), domElement );\n}\n\n// Support conditional rendering based on the React version.\n// We use `createRoot` when available, but fallback to `ReactDOM.render` for older versions.\nfunction render( app: JSX.Element, domElement: Element ) {\n\tlet renderFn: () => void;\n\n\ttry {\n\t\tconst root = createRoot( domElement );\n\n\t\trenderFn = () => {\n\t\t\troot.render( app );\n\t\t};\n\t} catch ( e ) {\n\t\trenderFn = () => {\n\t\t\tReactDOM.render( app, domElement );\n\t\t};\n\t}\n\n\trenderFn();\n}\n","import * as React from 'react';\nimport useSyncDocumentTitle from '../hooks/use-sync-document-title';\nimport useSyncDocumentQueryParams from '../hooks/use-sync-document-query-params';\nimport { TopSlot } from '../locations';\n\nexport default function Shell() {\n\tuseSyncDocumentTitle();\n\tuseSyncDocumentQueryParams();\n\n\treturn (\n\t\t<TopSlot />\n\t);\n}\n","import { useEffect } from 'react';\nimport { useActiveDocument, useHostDocument } from '@elementor/editor-documents';\nimport { __ } from '@wordpress/i18n';\n\nexport default function useSyncDocumentTitle() {\n\tconst activeDocument = useActiveDocument();\n\tconst hostDocument = useHostDocument();\n\n\tconst document = activeDocument && activeDocument.type.value !== 'kit'\n\t\t? activeDocument\n\t\t: hostDocument;\n\n\tuseEffect( () => {\n\t\t// Allow empty string as title.\n\t\tif ( document?.title === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// translators: %s: Document title.\n\t\tconst title = __( 'Edit \"%s\" with Elementor', 'elementor' )\n\t\t\t.replace( '%s', document.title );\n\n\t\twindow.document.title = title;\n\t}, [ document?.title ] );\n}\n","import { useEffect } from 'react';\nimport { useHostDocument } from '@elementor/editor-documents';\n\nexport default function useSyncDocumentQueryParams() {\n\tconst hostDocument = useHostDocument();\n\n\tuseEffect( () => {\n\t\tif ( ! hostDocument?.id ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst url = new URL( window.location.href );\n\n\t\turl.searchParams.set( 'post', hostDocument.id.toString() );\n\t\turl.searchParams.delete( 'active-document' );\n\n\t\thistory.replaceState( {}, '', url );\n\t}, [ hostDocument?.id ] );\n}\n","import * as React from 'react';\nimport { ThemeProvider as ThemeProviderBase } from '@elementor/ui';\nimport { useColorScheme } from '../sync/use-color-scheme';\n\nexport default function ThemeProvider( { children }: { children: React.ReactNode } ) {\n\tconst colorScheme = useColorScheme();\n\n\treturn (\n\t\t<ThemeProviderBase colorScheme={ colorScheme }>\n\t\t\t{ children }\n\t\t</ThemeProviderBase>\n\t);\n}\n","import { useEffect, useState } from 'react';\nimport { commandEndEvent, CommandEvent, listenTo, v1ReadyEvent } from '@elementor/editor-v1-adapters';\n\nexport type ColorScheme = 'auto' | 'dark' | 'light';\n\nexport type ExtendedWindow = Window & {\n\telementor: {\n\t\tgetPreferences: ( key: 'ui_theme' ) => ColorScheme,\n\t}\n}\n\nexport function useColorScheme() {\n\tconst [ colorScheme, setColorScheme ] = useState<ColorScheme>( () => getV1ColorScheme() );\n\n\tuseEffect( () => {\n\t\treturn listenTo(\n\t\t\tv1ReadyEvent(),\n\t\t\t() => setColorScheme( getV1ColorScheme() )\n\t\t);\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn listenTo(\n\t\t\tcommandEndEvent( 'document/elements/settings' ),\n\t\t\t( e ) => {\n\t\t\t\tconst event = e as CommandEvent<{\n\t\t\t\t\tsettings: {\n\t\t\t\t\t\tui_theme?: ColorScheme,\n\t\t\t\t\t},\n\t\t\t\t}>;\n\n\t\t\t\t// The User-Preferences settings object has a key named `ui_theme` that controls the color scheme.\n\t\t\t\tconst isColorScheme = event.args?.settings && 'ui_theme' in event.args.settings;\n\n\t\t\t\tif ( isColorScheme ) {\n\t\t\t\t\tsetColorScheme( getV1ColorScheme() );\n\t\t\t\t}\n\t\t\t}\n\t\t);\n\t}, [] );\n\n\treturn colorScheme;\n}\n\nfunction getV1ColorScheme() {\n\treturn ( window as unknown as ExtendedWindow ).elementor?.getPreferences?.( 'ui_theme' ) || 'auto';\n}\n"],"mappings":"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","names":["React","useEffect","useHostDocument","React","useEffect","render"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elementor/editor",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Elementor Team",
|
|
6
6
|
"homepage": "https://elementor.com/",
|
|
@@ -32,19 +32,19 @@
|
|
|
32
32
|
"dev": "tsup --config=../../tsup.dev.ts"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@elementor/editor-documents": "^0.
|
|
36
|
-
"@elementor/editor-v1-adapters": "^0.
|
|
37
|
-
"@elementor/locations": "^0.
|
|
38
|
-
"@elementor/store": "^0.
|
|
35
|
+
"@elementor/editor-documents": "^0.7.0",
|
|
36
|
+
"@elementor/editor-v1-adapters": "^0.3.0",
|
|
37
|
+
"@elementor/locations": "^0.4.0",
|
|
38
|
+
"@elementor/store": "^0.4.0",
|
|
39
39
|
"@elementor/ui": "^1.4.50",
|
|
40
40
|
"@wordpress/i18n": "^4.31.0"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
|
-
"react": "17.x",
|
|
44
|
-
"react-dom": "17.x"
|
|
43
|
+
"react": "17.x || 18.x",
|
|
44
|
+
"react-dom": "17.x || 18.x"
|
|
45
45
|
},
|
|
46
46
|
"elementor": {
|
|
47
47
|
"type": "app"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "753851e1a5003eb1ea5349b76d96c75f70e0a594"
|
|
50
50
|
}
|
package/src/init.tsx
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import * as ReactDOM from 'react-dom';
|
|
3
|
+
import { JSX } from 'react';
|
|
4
|
+
import { createRoot } from 'react-dom/client';
|
|
3
5
|
import { isRTL } from '@wordpress/i18n';
|
|
4
6
|
import Shell from './components/shell';
|
|
5
7
|
import { DirectionProvider } from '@elementor/ui';
|
|
@@ -12,7 +14,7 @@ export default function init( domElement: Element ): void {
|
|
|
12
14
|
|
|
13
15
|
dispatchReadyEvent();
|
|
14
16
|
|
|
15
|
-
|
|
17
|
+
render( (
|
|
16
18
|
<StoreProvider store={ store }>
|
|
17
19
|
<DirectionProvider rtl={ isRTL() }>
|
|
18
20
|
<ThemeProvider>
|
|
@@ -22,3 +24,23 @@ export default function init( domElement: Element ): void {
|
|
|
22
24
|
</StoreProvider>
|
|
23
25
|
), domElement );
|
|
24
26
|
}
|
|
27
|
+
|
|
28
|
+
// Support conditional rendering based on the React version.
|
|
29
|
+
// We use `createRoot` when available, but fallback to `ReactDOM.render` for older versions.
|
|
30
|
+
function render( app: JSX.Element, domElement: Element ) {
|
|
31
|
+
let renderFn: () => void;
|
|
32
|
+
|
|
33
|
+
try {
|
|
34
|
+
const root = createRoot( domElement );
|
|
35
|
+
|
|
36
|
+
renderFn = () => {
|
|
37
|
+
root.render( app );
|
|
38
|
+
};
|
|
39
|
+
} catch ( e ) {
|
|
40
|
+
renderFn = () => {
|
|
41
|
+
ReactDOM.render( app, domElement );
|
|
42
|
+
};
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
renderFn();
|
|
46
|
+
}
|