Melhorias Fundamentais na Versão 3

A evolução do framework de um modelo orientado por opções para uma arquitetura mais modular visa resolver limitações identificadas nas versões anteriores. As principais inovações abordam:

• Suporte Nativo ao TypeScript: Removendo a necessidade de dependências externas complexas para inferência de tipos, eliminando a dependência exclusiva do objeto this.
• Otimização de Bundles: Com APIs menos vinculadas diretamente aos protótipos globais, torna-se possível aplicar estratégias de tree-shaking eficientemente.
• Padrões Modernos de Código: Introdução da Composition API, inspirada em hooks do React, permitindo maior flexibilidade na organização lógica.
• Dominio e Compilação: Refatoração completa do kernel de renderização e otimização no processo de compilação de templates.

Arquitetura Monorepo

Para gerenciar múltiplos pacotes dentro de um único repositório versionado, utiliza-se o padrão Monorepo. Esta abordagem unifica o controle de versão, facilita o compartilhamento de código entre módulos internos e simplifica processos de integração contínua.

No contexto deste projeto, optou-se pela ferramenta yarn workspaces em conjunto com scripts customizados, evitando ferramentas excessivamente pesadas como o Lerna nativo, mas mantendo os princípios organizacionais semelhantes.

Inicialização do Projeto

A configuração inicial deve ser realizada preferencialmente via yarn, dado que este gerenciador oferece suporte mais robusto para operações de workspace comparado ao npm em cenários complexos.

Comece navegando até o diretório raiz e execute a seguinte ordem para gerar o arquivo manifest principal:

yarn init -y

Configuração do Manifesto

Edite o arquivo package.json estabelecendo configurações chave para habilitar o modo privado e definir as áreas de trabalho. É crucial adicionar o campo type definido como módulo para compatibilidade com ECMA modules recentes.

{
 "private": true,
 "name": "vue-internal-study",
 "version": "1.0.0",
 "workspaces": [
   "packages/*"
 ],
 "type": "module",
 "devDependencies": {
   "typescript": "^5.3.3",
   "rollup": "^4.9.6",
   "@rollup/plugin-json": "^6.1.0",
   "rollup-plugin-typescript2": "^0.36.0"
 }
}

Nesta configuração:

• private: Impede envio acidental do pacote ao registro público.
• workspaces: Indica que o gerenciador deve buscar subpastas sob packages/ para gerenciamento de dependências interligadas.

Organização dos Módulos

Crie a estrutura de diretórios seguindo o padrão esperado pelo manifesto acima. Dentro da pasta packages, estabeleça pastas separadas para componentes fundamentais, como reatividade e utilitários compartilhados.

Após criar as pastas, inicialize cada módulo individualmente executando o comando de bootstrap dentro de cada caminho específico:

mkdir packages/reactivity
cd packages/reactivity
yarn init -y

2. Repita o procedimento para módulos de infraestrutura:

mkdir packages/shared
cd packages/shared
yarn init -y

Em cada subpacote, desenvolva um arquivo principal de entrada na subpasta src. É necessário exportar algum conteúdo mínimo para evitar erros de bundling nos testes iniciais. Utilize variáveis descritivas para representar dados de exemplo:

// src/index.ts
export const FRAMEWORK_VERSION = 3;
export const ENABLE_REACTIVITY = true;

Gerenciamento de Dependências Transversais

Herramentas que são consumidas por todos os módulos, como compiladores de sintaxe, devem ser instaladas na raiz do projeto. Ao utilizar workspaces, é necessário especificar o escopo global através de flags específicas.

Para instalar o TypeScript como dependência de desenvolvimento afetando todos os pacotes do workspace:

yarn add typescript -D -W

O sinalizador -W instrui o gerenciador a atualizar o manifesto principal do workspace, garantindo que a instalação não fique restrita apenas ao pacote onde foi executada o comando.