gustavojs v1.0.0

GUSTAVOJS

GUSTAVOJS - O PIOR FRAMEWORK JS DOS CAMPOS GERAIS!!!

1-ESTRUTURA

O GustavoJS é composto por duas pastas principais: a base, que contém os arquivos referentes ao framework, e a src, que contém os arquivos do site (componentes, imagens, etc.). Na raiz, encontramos os arquivos app.js (nele é definido quais componentes vão ser carregados quando o usuário visitar a home) e index.html (onde o site será carregado).

Quando um site feito em GustavoJS é carregado, são chamadas as funções render e afterRender. A função render é responsável por renderizar os componentes na tela de acordo com a rota em que o usuário está. Já na função afterRender você pode definir as funções que serão chamadas somente após o site ter sido carregado (isso é útil para coisas como adicionar event listeners, por exemplo).

Ah, o GustavoJS já vem com o Schonheit, um framework CSS que eu estou desenvolvendo com a ajuda do Gustavo Tilpe e com base em algumas análises e pesquisas que fiz com alguns amigos sobre princípios de design e preferências quanto a interfaces.

2-SISTEMA DE ROTAS

Dentro do arquivo base/Render.ts, na função render, há um switch que contém as rotas do site. Elas podem ser adicionadas manualmente adicionando mais cases e em seguida atribuindo a função que retorna o componente à variável componentStr. Por exemplo, para renderizar o componente da página do blog quando o usuário visitar, por exemplo, localhost:5500?route=blog:

function render(){
	//...
	switch(AndrewRouter()){
		//...
		case "blog"
			componentStr = Blog()
	}
}

Na URL, as rotas são passadas por meio do parâmetro ?route=. Exemplo: https://gustavotilpe.com.br/?route=contatos.

3-COMPONENTES

Os componentes em GustavoJS nada mais são que funções que retornam fragmentos de HTML. Você pode passar para eles parâmetros, usar interpolação de variáveis, etc. Eis abaixo um exemplo de um componente:

type Props = {
  author: string;
  text: string;
  title: string;
}

const BlogPost = (props: Props) => {
  return `
    <div>
      <h1>${props.title}</h1>
      <h2>Escrito por: ${props.author}</h2>
      <p>${props.text}</p>
    </div>
  `;
}

4-EVENTOS

Você pode adicionar eventos a elementos HTML usando a função AddEventHandler, que recebe como parâmetros o ID do componente, o nome do evento e a função que vai ser chamada quando aquele evento for executado. Para adicionar o evento de clique a um botão:

export function afterRender() {
  AddEventHandler("increment", "click", increment);
}

5-ESTADOS

Por enquanto, as páginas em GustavoJS são completamente estáticas, ou seja, não são rerenderizadas e atualizadas conforme as variáveis e estados vão sendo alterados (diferentemente do React, por exemplo). Sendo assim, você pode implementar esse mecanismo manualmente, se preferir. Um mecanismo semelhante pode ou não ser implementado no GustavoJS futuramente. Tudo depende da boa vontade dos desenvolvedores!