danielbonifacio / minimalist-js

micro front-end framework

Hi there ✌

I'm a Brazillian developer that loves technology and education. I have discovered my passion with the development world with 9yo, so I'm coding since 😜

I have a pretty big knowledge of JavaScript and web environments, so I try to share it on the web via courses, videos, and articles.

• Tech lead @coldsmokecreative 👨‍💻

minimalist-js's Issues

Renderizando componentes

Cada componente será um objeto com: name, data, template e components.

• name nome do componente que será registrado e como será chamado
• data dados e informações daquele componente
• components métodos que ele poderá ter
• template Template do componente

Exemplo de componente:

{
  name: 'componentePrincipal',

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

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

  components: {
    outroComponente,
  },
}

E a função que usei para renderizar o componente principal foi:

minimalist-js/minimalist/index.js

Lines 1 to 22 in d2bcc0f

	const 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
	render(component.components[ic])
	)
	}
	);
	return component.template;
	}

Com a ideia elaborada, tive um enorme problema de cara: não saber fazer com que um componente dentro de outro componente seja renderizado.

O erro que estou tendo ao renderizar o componente é:

Cannot convert undefined or null to object