#spa-combinator

Can switch SPA web apps at iframe (if you were crazy enough to write half of your app on Angular and another half on React). You click menu in one app and it opens page in another app.

Problem

It sounds quite simple (yeah, just create new iframe on every click), but there are some technical problems that given library is able to solve:

• if url was changed at app at iframe (i.e. user went to another page of SPA) then it should be displayed at main window (and vice versa, url from main window should select app and route within app)

• avoid double scrollbars (i.e. if size of iframe is wrong (bigger then screen size but smaller then actual size of content), then scrollbar at main window will appear together with scrollbar at iframe)

Usage

If have two SPAs:

1. deploy it at /app1 and /app2 respectivly (names are arbitrary)
2. create /index.html that calls $o('app1') to start with first app
3. switch to second app by calling $g('app2') at first app (if is was Angular app you'd have to add somewhere near )
4. switch to first app by calling $g('app1') at second app

You can pass complex urls like app2/page2 (to open special page at second app), this lib will treat substring before slash as app name ('app2' in this case).

There are two use cases:

  ----------       ----------
  |        |       |        |
  |  app1  |   ->  |  app2  |
  |        |       |        |
  ----------       ----------

(i.e. app1 with its own menu will be replaced by app2 with its own menu. Both menus can have links that causes app switching)

or

  ----------       ----------
  |  menu  |       |  menu  |
  ----------       ----------
  |        |       |        |
  |  app1  |   ->  |  app2  |
  |        |       |        |
  ----------       ----------

(i.e. menu is standalone app that can manage state or routes of app1 and app2, and therefore apps should include adapters to be able recieve commands)

Side effects(for parent window):

1. creates DOM elements #app-combinator(if not exists)
2. adds window.$o and window.$set to global scope

Side effects(for iframe):

1. need ResizeObserver polyfill for MSIE
2. adds window.$g, window.$urlSet to global scope