where is gorset

 avatar
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