Add global registry

[yann300]

No description provided.

[serapath]

Maybe in order to have an easier time debugging problems, we could:

1. set up standalone tests - they build fast, they run fast and we don't need the drag of running all the monstrosity that remix is just to see if it works ...and all the monstrocity of bundled app.js to load just to see the debugger.
2. set this up in a separate repository remix-registry so that it is public and the other repos remix-lib, remix-ide, remix-tests, remix-debugger or what we have - can easily require('remix-registry')
3. Yes, when we finally add the registry to the project we could have a nice way of refactoring it step by step without adding legacy hacks to the remix-registry

I spend now some time thinking about how we could have a pure registry and "refactor" the app slowly in a way that makes transitioning only some parts easy and it will immediately inform us if something went wrong...
My recommendation is another module that will help us refactor and which would be in essence a wrapped event handler - wrapped by the following module:

// ASSUMPTION or GOAL:
// any "event" will or has to trigger the "registry way" and "legacy way" before any next event can trigger anything again
var ms = 0
var x = ms ? `ms${ms}` : 'same tick'
var id, legacyEV, registryEV

module.exports = handler => function (event) {
  if (this === 'registry') registryHandler(event)
  else legacyHandler(event)
}
function registryHandler (event) {
  if (registryEV) return errDoubleRegistryCall()
  registryEV = event
  if (legacyEV && legacyEV === registryEV) return resolve()
  if (legacyEV && legacyEV !== registryEV) return errWrongEventRegistry()
  id = setTimeout(check, ms)
}
function legacyHandler (event) {
  if (legacyEV) return errDoubleLegacyCall()
  legacyEV = event
  if (registryEV && registryEV === legacyEV) return resolve()
  if (registryEV && registryEV !== legacyEV) return errWrongEventLegacy()
  handler(event)
}
// HELPER
const resolve = () => {
  id = registryEV = legacyEV = clearTimeout(id)
}
const check = () => {
  if (legacyEV && legacyEV === registryEV) return resolve()
  if (legacyEV && legacyEV !== registryEV) return errWrongEventRegistry()
  errSlowLegacyHandler()
}
const errDoubleRegistryCall = () => {
  console.error('errDoubleRegistryCall: unhandled event', legacyEV)
  throw new Error('registry triggered again before legacy handler')
}
const errDoubleLegacyCall = () => {
  console.error('errDoubleLegacyCall: unhandled event', legacyEV)
  throw new Error('Legacy triggered again before registry handler')
}
const errWrongEventLegacy = () => {
  console.error('errWrongEventLegacy: unhandled event', legacyEV)
  throw new Error('legacy triggered with wrong event')
}
const errWrongEventRegistry = () => {
  console.error('errWrongEventRegistry: unhandled event', registryEV)
  throw new Error('registry triggered with wrong event')
}
const errSlowLegacyHandler = () => {
  console.error('errSlowLegacyHandler: unhandled event', legacyEV)
  throw new Error(`legacy was not triggered within ${x}`)
}

const makeHandler = require('./global/make-handler.js')
const registry = require('./global/registry')

module.exports = Foobar {
  constructor (api, events, opts) {

    const { uid, events: eventsNew, api: apiNew } = registry.get('app/compiler')

    const handler = makeHandler(event => {
      console.log('event xxx:', event)
    })
    events.compiler.register('xxx', handler.bind('registry'))
    eventsNew.xxx(handler)

  }
}

[yann300]

I just looked at some documentations, seems using the Error.trace will be a bit tricky cause not standardized (current code does not work for Firefox) and subject to changes - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/Stack

[serapath]

(new Error()).stack is supported across browsers, it is just not standardised, so there will be slight differences depending on the browser a user uses. Services like browserstack.com and browserling.com and browsersnapshot.com (not sure if these are their exact names) offer to open a random URL in any browser you want and show you the rendered result.

A little test.html page that does document.body.innerHTML = (new Error('foobar')).stack could help to visualise exactly how stack traces differ in different browsers so the "module-id" module can change how it generates the ID based on the currently used browser.