Add support for local components

[Gr8Gatsby]

SOMA#188

Migrated issue

notes:

We should follow the same principles used by ember/glimmer when it comes to private components, basically, for a filesystem structure like the following:

└── src
    └── ui
        └── components
            └── x-foo
                ├── x-bar
                │   ├── component.js
                │   └── template.html
                ├── component.js
                └── template.html

there are two components defined, <x-foo> and <x-bar>. Where <x-foo> is global, can be used by other components, while <x-bar> can only be used by <x-foo> on its own markup.

In our case, the compiler will complete fold <x-bar> in the bundle generated for <x-foo>, so "bar" will never be added to the global registry. That translate into a simple import in foo's template:

import Bar from "./x-bar/component.js";

Everything else remains the same. The only detail here is that somehow, the compiler will have to know that <x-bar> is a "local component" instead of a global one, so it can use "./x-bar/component.js" as the module specifier instead of just "x-bar".

Note: this is the link to the glimmer doc: https://glimmerjs.com/guides/filesystem-layout

[caridy]

New information here:

local components are going to be an interesting addition that matches well with the concept of scoped registries, do we need a registry per template? or per component definition? How are local components added to the registry? manually? when? and where?