where is gorset
unknown
plain_text
a year ago
1.6 kB
3
Indexable
import { registerApplication, start, mountRootParcel } from 'single-spa'; import singleSpaHtml from 'single-spa-html'; // Tworzenie szablonu HTML z kontenerem na react-app const htmlTemplate = ` <div> <h1>Welcome to My Single SPA Application</h1> <div id="react-app-container"></div> </div> `; // Tworzenie aplikacji HTML z szablonem const htmlLifecycles = singleSpaHtml({ template: htmlTemplate, domElementGetter: () => document.getElementById('html-app-container') }); // Funkcja do ładowania aplikacji React async function loadReactApp() { const React = await System.import('react'); const ReactDOM = await System.import('react-dom'); const App = () => <div>React App Content</div>; // Twój komponent React return { bootstrap: async () => {}, mount: async (props) => { ReactDOM.render(<App />, props.domElement); }, unmount: async (props) => { ReactDOM.unmountComponentAtNode(props.domElement); } }; } // Modyfikacja mount w html-app, aby zamontować react-app const originalMount = htmlLifecycles.mount; htmlLifecycles.mount = async (props) => { await originalMount(props); registerApplication({ name: 'react-app', app: loadReactApp, activeWhen: () => true, // Ustawiamy zawsze aktywne w ramach html-app customProps: { domElement: document.getElementById('react-app-container') } }); await mountRootParcel(loadReactApp, { domElement: document.getElementById('react-app-container') }); }; // Rejestracja aplikacji HTML registerApplication({ name: 'html-app', app: htmlLifecycles, activeWhen: ['/'] }); // Startowanie single-spa start();
Editor is loading...
Leave a Comment