import { Microfe } from '@harpsealjs/microfe';

const app = new Microfe();

app
  .register({
    title: 'Child APP 1',
    assets: [
      '/my/child/app/1.js',
      '/my/child/app/1.css'
    ],
    base: '/',
    exact: true,
    path: '/'
  })
  .register({
    title: 'Child APP 2',
    assets: [
      '/my/child/app/2.js',
      '/my/child/app/2.css'
    ],
    base: '/child2',
    path: [
      '/child2'
    ]
  })
  .register({
    title: 'Child APP 3',
    assets: [
      '/my/child/app/3.js',
      '/my/child/app/3.css'
    ],
    base: '/child3',
    path: [
      '/child3'
    ]
  })
  .root(document.getElementById('root') as HTMLElement)
  .start();

import { getChildContext } from '@harpsealjs/microfe';
const { root, base, hashType, onAppLeave } = getChildContext();

onAppLeave(() => {
  ReactDOM.unmountComponentAtNode(root);
});

// react
ReactDOM.render((
  <App />
), root);

// with react-router
ReactDOM.render((
  <Router basename={base} hashType={hashType}>
    {/* ... */}
  </Router>
), root);

import { pushState, replaceState } from '@harpsealjs/microfe';

export default function (props) {
  return (
    <div>
      <button onClick={() => pushState('/child1')}>Child1</button>
      <button onClick={() => pushState('/child2')}>Child2</button>
      <button onClick={() => replaceState('/child3')}>Child3</button>
    </div>
  );
}

interface MicrofeAPI {
  constructor(plugins: Plugin[], globalSpace: string); // plugins for custom hijack, globalSpace for custom namespace
  on(action: string, callback: EventListener): this;
  off(action: string, callback: EventListener): this;
  pushState(pathname: string, state: any): this; // jump to a path, like history.pushState
  replaceState(pathname: string, state: any): this; // jump to a path, like history.repalceState
  register(child: ChildAppData): this; // register child apps
  root(dom: HTMLElement): this; // set the child app mount root element
  start(): this; // start host app and snapshot the global environment
  exit(): this; // exit host app and restore the global environment
  clear(): this; // clear child app side effects manually
};

type Chainable = {chain: (...args: any[]) => Chainable};

interface Plugin {
  create: () => Chainable,
  hijack?: () => Chainable,
  clear?: () => Chainable,
  unhijack?: () => Chainable,
  setGlobal?: (global: Window | null) => () => Chainable
};

interface ChildContext {
  root: HTMLElement | null, // 
  base: string | null | undefined,
  hashType: HashType,
  onAppLeave(cb: EventListener): void
};

getChildContext(globalSpace: string = GLOBAL_PATH): ChildContext;
pushState(pathname: string, globalSpace: string = GLOBAL_PATH): void;
replaceState(pathname: string, globalSpace: string = GLOBAL_PATH): void;