init

src/example/main.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import ReactDom from 'react-dom';
+
+export default () => (<div>Наше приложение1</div>);
+
+
+
+export const mount = (Сomponent) => {
+    // console.log('component', component);
+    ReactDom.render(
+        <Сomponent/>,
+        document.getElementById('app')
+    );
+}
+
+
+export const unmount = () => {
+    ReactDom.unmountComponentAtNode(document.getElementById('app'))
+}
+
+
+
+

src/example2/main.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import ReactDom from 'react-dom';
+
+export default () => (<div>Наше приложение2</div>);
+
+export const mount = (Сomponent) => {
+    ReactDom.render(
+        <Сomponent/>,
+        document.getElementById('app')
+    );
+}
+
+
+export const unmount = () => {
+    ReactDom.unmountComponentAtNode(document.getElementById('app'))
+}
+
+
+
+

src/main.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import ReactDom from 'react-dom';
+import { loadApp } from './utils';
+
+class Bootstrap extends React.PureComponent <any, any> {
+    App: any;
+    currentBundle: string = '';
+
+    async downloader(bundleName: string) {
+        let _bundleName = bundleName;
+        this.currentBundle = bundleName;
+        this.App = await loadApp(_bundleName);
+        this.forceUpdate();
+    }
+
+    mountApp = async(nameApp) => {
+       await this.downloader(nameApp);
+       this.App.mount(this.App.default)
+    }
+
+    unmountApp = () => {
+        this.App.unmount();
+    }
+
+    render () {
+        return (
+            <div>
+                <button onClick={() => this.mountApp('example')}>
+                    загрузить приложение 1
+                </button>
+                <button onClick={() => this.unmountApp()}>
+                    выгрузить приложение 1
+                </button>
+                <button onClick={() => this.mountApp('example2')}>
+                    загрузить приложение 2
+                </button>
+                <button onClick={() => this.unmountApp()}>
+                    выгрузить приложение 2
+                </button>
+            </div>
+        );
+    }
+}
+
+ReactDom.render(
+    <Bootstrap/>,
+    document.getElementById('bootstrap')
+);
+
+

src/typings/import.d.ts

@@ -0,0 +1,19 @@
+declare module '*.jpg' {
+    const value: any;
+    export = value;
+}
+
+declare module '*.svg' {
+    const value: any;
+    export = value;
+}
+
+declare module '*.png' {
+    const value: any;
+    export = value;
+}
+
+declare module '*.mp4' {
+    const value: any;
+    export = value;
+}

src/utils.ts

@@ -0,0 +1,10 @@
+export async function loadApp(bundleName) {
+  return await System.import(`./${bundleName}.js`)
+        .then(result => {
+            return result.default;
+        })
+        .catch(error => {
+            console.info(`Загрузить ${bundleName} не удалось!`);
+            console.info(`error in ${bundleName}`, error);
+        });
+}