Keep Alive

If you have used Vue, you will be familiar with the KeepAlive component which implements a route cutting mechanism, but the DOM does not destroy.

Haploid.js provides a similar functionality, only hiding the DOM of the sub-application without destroying it. This is done by declaring the keepAlive option for the sub-application, the value of which is:

type KeepAlive =
  | boolean
  | {
      useHiddenAttribute?: boolean;
      useHiddenClass?: string;
      detachDOM?: boolean;
    };

container.registerApp({
  name: "foo",
  entry: "https://foo.com/entry",
  activeWhen: "/foo",
  keepAlive: {
    useHiddenAttribute: true,
  },
});

Depending on the value, the implementation of Haploid.js without destroying the DOM varies.

• If useHiddenAttribute=true is enabled, then the root element of the sub-application is hidden by adding the "hidden" attribute;
• If useHiddenClass is enabled, then the root element of the child application is added with the CSS class name of that value;
• If detachDOM=true is enabled, the root element of the child application is removed from its parent element;
• If keepAlive=true is enabled, it is equivalent to keepAlive={}, that is, the above three parameters are undefined;
• By default, the root element of a sub-application is hidden using style.display="none"

For a sub-application that is kept alive, you can declare two additional lifecycle functions for it: suspend and resume.

WARNING

It is important to note that even though sub-applications are hidden, they can still react to global events, such as "popstate", which you should handle carefully to avoid interfering with other applications

A strict practice is to cancel listening to global events in suspend, but this is difficult to do and may require sandboxed implementations.