[Feature Request] Support ES6 Symbol component names

[caseyWebb]

trafficstars

In larger apps, the ability to register a component using a Symbol would allow you to prevent name-collisions using a pattern as such:

const componentName = Symbol('hello-world')

ko.components.register(componentName, {
    template: 'Hello, World!'
})

ko.applyBindings({
    componentName
})

<div data-bind="component: componentName"></div>

This would be particularly helpful in a situation such as this, the relevant snippet being...

function componentPlugin(route) {
  return (ctx) => ({
    beforeRender() {
      ko.components.register(ctx.pathname, route.component)
      ctx.route.component = ctx.pathname
    },
    afterDispose() {
      ko.components.unregister(ctx.pathname)
    }
  })
}

Where ctx.pathname could be replaced with a unique symbol for that route, without having to use an incrementor.

It could also help break up larger components into sub-components (that won't be used standalone) without polluting the global registry and without the need to add a prefix.

Lastly, it could allow for a more verbose, but idiomatic way of modularizing components. I.E., you could import the symbol for a component instead of just using it's string id (in fairness, you could export the string ID and do the same, but you still run the risk of name-collisions). Having explicit imports for components could help tools like webpack more intelligently bundle, so that you don't have to include all of the components in your entry bundle.