vitral 0.7.1 → 0.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +72 -14
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -22,7 +22,16 @@
22
22
 
23
23
  Junte micro-frontends de qualquer framework numa página só, sem configuração de build no host.
24
24
 
25
- Cada equipe publica o próprio pedaço da página (um remote) com `vite build`. O host recebe a URL de cada remote e monta tudo no navegador. Não há plugin no host, não há versão de React para combinar entre equipes e um remote fora do ar não derruba a página.
25
+ Cada equipe publica o próprio pedaço da página (um remote) com `vite build`. O host recebe a URL de cada remote e monta tudo no navegador.
26
+
27
+ **Por que usar:**
28
+
29
+ - **Zero configuração no host.** Sem plugin de build: só `configure({ remotes })` com a URL de cada remote.
30
+ - **Qualquer framework.** React, Next, Vue, Nuxt, Angular, Svelte, Solid, Preact, Lit e JS puro na mesma página. Sem combinar versão de React entre equipes.
31
+ - **Deploy independente.** Cada equipe publica quando quiser. O host vê a versão nova sem novo build.
32
+ - **CSS e erros isolados.** O CSS de um remote não muda o resto da página. Um remote fora do ar mostra o próprio erro, e o resto continua funcionando.
33
+ - **Seguro.** O JS só roda se vier de uma origem permitida e se o hash SHA-384 bater.
34
+ - **Leve e rápido.** 3,4 kB de host. Primeira visita 57% mais rápida que o Module Federation e troca de área 4,6 vezes mais rápida que o Next.js Multi-Zones.
26
35
 
27
36
  ```bash
28
37
  npm install vitral
@@ -35,25 +44,25 @@ npm install vitral
35
44
  </picture>
36
45
  </p>
37
46
 
38
- ## Por que o vitral
47
+ ## Comparação
39
48
 
40
- | | Module Federation / single-spa | vitral |
41
- |---|---|---|
42
- | Build do host | Config combinada com cada remote | Nenhuma. Só `configure()` |
43
- | Versões de React/Vue | `shared` e singletons, conflitos de versão | Cada remote leva a sua. Compartilhar é opcional |
44
- | Remote fora do ar | Pode derrubar a página | Só aquele remote mostra erro |
45
- | CSS | Vaza entre apps | Escopo automático ou Shadow DOM |
46
- | Deploy novo | `ChunkLoadError` com cache velho | Arquivos com hash; só o `vitral.json` revalida |
47
- | Conceitos | Containers, exposes, lifecycles, root config | `mount(el, props, ctx)` → `{ update, unmount }` |
49
+ | | Module Federation | single-spa | Next.js Multi-Zones | vitral |
50
+ |---|---|---|---|---|
51
+ | Configuração no host | Plugin no build, combinado com cada remote | Root config e import map | Um app Next por zona e rewrites | Nenhuma. Só `configure()` |
52
+ | Frameworks | Combinar versões em `shared` | Um adaptador e um ciclo de vida por framework | Só Next | Qualquer um, sem combinar versão |
53
+ | Divide a página em | Pedaços | Apps por rota | Rotas (cada zona é uma página) | Pedaços ou rotas |
54
+ | Trocar de área | Sem recarregar | Sem recarregar | Recarrega a página e baixa Next e React de novo | Sem recarregar |
55
+ | Isolamento de CSS | Nenhum | Nenhum | Por página | Escopo automático ou Shadow DOM |
56
+ | Remote fora do ar | Erro sem tratamento derruba a página | A tela de erro é com você | A zona inteira fica fora | Só aquele remote mostra erro, com `retry` |
57
+ | Código de host (brotli) | 19,4 kB | 5,8 kB | Runtime do Next em cada zona | 3,4 kB |
48
58
 
49
59
  Medido no [benchmark público](https://joaogabriel15.github.io/vitral/aprender/benchmark) (Chromium, rede Slow 4G, mediana de 7 visitas):
50
60
 
51
- - **3,4 kB** de código de host mínimo, com brotli. O host do Module Federation tem 19,4 kB.
52
61
  - **57% menos tempo** na primeira visita que o Module Federation com React compartilhado (1157 ms contra 2673 ms, 1 remote).
53
- - **4,6 vezes mais rápido** para trocar de área que o Next.js Multi-Zones (184 ms contra 850 ms).
62
+ - **4,6 vezes mais rápido** para trocar de área que o Next.js Multi-Zones (184 ms contra 850 ms), com 63% menos bytes para abrir duas áreas.
54
63
  - **10 frameworks** cobertos por testes de ponta a ponta no CI, com host e remote de frameworks diferentes, em Chromium, Firefox, WebKit e mobile.
55
64
 
56
- A página do benchmark também lista onde o vitral perde.
65
+ O método e as versões usadas estão na página do benchmark.
57
66
 
58
67
  ## Começo rápido
59
68
 
@@ -111,6 +120,55 @@ Sem build no host, numa página HTML qualquer:
111
120
 
112
121
  Todos os componentes de host aceitam `src` no lugar de `name`.
113
122
 
123
+ ## Rodar local
124
+
125
+ Cada remote roda no próprio `vite dev`, numa porta. O host aponta para essas portas:
126
+
127
+ ```bash
128
+ cd carrinho && npm run dev # vite --port 5174
129
+ cd busca && npm run dev # vite --port 5175
130
+ cd loja && npm run dev # vite --port 3000
131
+ ```
132
+
133
+ ```json
134
+ // loja/public/remotes.json
135
+ {
136
+ "carrinho": "http://localhost:5174/vitral.json",
137
+ "busca": "http://localhost:5175/vitral.json"
138
+ }
139
+ ```
140
+
141
+ ```js
142
+ // loja/src/main.jsx
143
+ configure({ remotes: '/remotes.json' })
144
+ ```
145
+
146
+ Editar o remote atualiza o host sem recarregar a página (HMR). Para rodar só um remote local e pegar os outros de homologação, abra o host com `?vitral=carrinho@http://localhost:5174`.
147
+
148
+ ## Docker e Kubernetes
149
+
150
+ Cada remote vira uma imagem nginx com o `dist`. O host lê a lista de remotes de uma variável de ambiente quando o contêiner sobe, então a mesma imagem serve em qualquer ambiente.
151
+
152
+ ```yaml
153
+ # compose.yaml
154
+ services:
155
+ loja: # host: http://localhost:8080
156
+ build: ./loja
157
+ ports: ["8080:80"]
158
+ environment:
159
+ VITRAL_REMOTES: '{"carrinho":"/mf/carrinho/vitral.json","busca":"/mf/busca/vitral.json"}'
160
+ carrinho: # remote React
161
+ build: ./carrinho
162
+ busca: # remote Vue
163
+ build: ./busca
164
+ ```
165
+
166
+ O nginx do host repassa `/mf/carrinho/` para o contêiner `carrinho`. Tudo fica na mesma origem: sem CORS e com uma porta só. Parar o contêiner `carrinho` mostra o erro só no lugar do carrinho.
167
+
168
+ No Kubernetes, as mesmas imagens funcionam com um Service por remote; o Ingress pode fazer o papel do nginx do host. Se os remotes ficam num CDN, troque `VITRAL_REMOTES` pelas URLs do CDN.
169
+
170
+ Exemplo completo, com Dockerfiles e configuração do nginx: [`examples/docker`](https://github.com/joaogabriel15/vitral/tree/main/examples/docker).
171
+
114
172
  ## Frameworks
115
173
 
116
174
  | Framework | Remote | Host | Import |
@@ -378,4 +436,4 @@ failingRemote('recomendacoes') // testa a tela de erro
378
436
 
379
437
  - [Exemplos](https://github.com/joaogabriel15/vitral/tree/main/examples): o mesmo remote em 8 frameworks e 9 hosts.
380
438
  - [Como contribuir](https://github.com/joaogabriel15/vitral/blob/main/CONTRIBUTING.md)
381
- - Licença [MIT](https://github.com/joaogabriel15/vitral/blob/main/LICENSE)
439
+ - Licença [MIT](https://github.com/joaogabriel15/vitral/blob/main/LICENSE). Feito por [Pacheco Codes](https://pacheco.dev.br/).
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vitral",
3
- "version": "0.7.1",
3
+ "version": "0.7.2",
4
4
  "description": "Micro-frontends de qualquer framework numa página só, sem configuração de build no host. React, Next, Vue, Nuxt, Angular, Svelte, Solid, Preact, Lit e JS puro.",
5
5
  "keywords": [
6
6
  "micro-frontend",