Function to render components

Question

Many are the advantages of developing using the methodology of components, but here in the company, something that the team can not give up is jQuery, by several factors.

I’m looking to create a micro-framework that works directly on DOM, but also allows me to work with components. An intermediate between Vue and jQuery.

Each component will be an object with: name, data, template and components.

• name name of the component that will be registered and how it will be called
• data data and information on that component
• components methods he may have
• template Component template

Component example:

{
  name: 'componentePrincipal',

  template: `
    <h1>{{ titulo }}</h1>
    @outroComponente`,

  data: {
    titulo: 'Componente Bacana',
  },

  components: {
    outroComponente,
  },
}

And the function I used to render the main component was:

render(component) {
  Object.keys(component.data).map(
    data => {
      component.template = component.template.replace(
        `{{ ${data} }}`,
        component.data[data]
      )
    }
  );

  Object.keys(component.components).map(
    ic => {
      component.template = component.template.replace(
        `@${ic}`,
        // aqui que tá o problema
        this.render(component.components[ic])
      )
    }
  );

  return component.template;
}

With the elaborate idea, I had a huge problem face: not knowing how to make a component inside another component is rendered.

The error I’m having when rendering the component is:

Cannot Convert Undefined or null to Object

Code in Gist