Function to render components

There are many advantages to developing using component methodology, but here in the company, something the team can not give up is jQuery, due to several factors.

I want to create a micro-framework that works directly in the 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 to be registered and how it will be called
• data data and information for that component
• components methods it might 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 idea worked out, I had a huge face problem: not knowing how to make a component inside another component rendered.

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

  

Can not convert undefined or null to object

Code in the Gist