where is gorset
unknown
plain_text
a year ago
1.6 kB
7
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