translate to pt-br

i18n/pt-BR/articles/proxy.md

@@ -0,0 +1,155 @@
+---
+title: Proxy
+description: Proxy é o mecanismo básico que permite ao Nullstack implementar renderização e contexto.
+---
+
+Proxy é o mecanismo básico que permite ao Nullstack implementar renderização e contexto.
+
+## Entendendo Proxy
+
+O Nullstack possui algumas convenções sobre quando fazer proxy de um objeto.
+
+Qualquer mutação em um proxy acionará um ciclo de renderização.
+
+As instâncias da classe Nullstack são sempre proxied.
+
+```jsx
+import Nullstack from 'nullstack';
+
+class Component extends Nullstack {
+
+// Objetos JavaScript padrão são alvo de proxies
+standardObjects = { key: 'value' }
+
+// Objetos JavaScript nested também são alvo de proxies
+nestedObjects = {nested: { key: 'value' }}
+
+// Arrays JavaScript padrão são alvo de proxies
+standardArray = [1, 2, 3]
+
+// Arrays JavaScript nested também são alvo de proxies
+nestedArray = [[1, 2, 3]]
+
+// Instâncias de classes personalizadas não são alvo de proxies
+customClassInstance = new CustomClass()
+
+// Propriedades com sublinhado nunca são alvo de proxies
+_underscoredArray = []
+_underscoredObject = {}
+
+// Referências ao DOM não são alvo de proxies
+element = null
+
+  render() {
+    <div ref={this.element}> element </div>
+  }
+
+}
+
+export default Component;
+```
+
+## Entendendo o escopo das funções
+
+Nullstack possui algumas convenções sobre quando expor o contexto para uma função
+
+```jsx
+import Nullstack from 'nullstack';
+
+class Component extends Nullstack {
+
+  static async staticAsyncFunction(serverContext) {
+// Funções estáticas e assíncronas têm acesso ao contexto do servidor
+// Um método de instância refletido dessa função é criado
+// Isso será vinculado à class Component
+  }
+
+  static async _underscoredStaticAsyncFunction() {
+// Funções estáticas, assíncronas e com sublinhado não têm acesso ao contexto
+// Isso será vinculado à class Component
+}
+
+static staticFunction() {
+// Funções estáticas não têm acesso ao contexto
+// Isso será vinculado à class Component
+}
+
+static _underscoredStaticFunction() {
+// Funções estáticas com sublinhado não têm acesso ao contexto
+// Isso será vinculado à class Component
+}
+
+method(clientContext) {
+// Métodos têm acesso ao contexto do cliente
+// Isso será vinculado à instância
+}
+
+_underscoredMethod() {
+// Métodos com sublinhado não têm acesso ao contexto do cliente
+// Isso será vinculado à instância
+}
+
+async asyncMethod(clientContext) {
+// Métodos assíncronos têm acesso ao contexto do cliente
+// Isso será vinculado à instância
+}
+
+async _underscoredAsyncMethod() {
+// Métodos assíncronos com sublinhado não têm acesso ao contexto do cliente
+// Isso será vinculado à instância
+}
+
+}
+
+export default Component;
+```
+
+## Truques sublinhados
+
+Você pode criar um método começando com `_`, isso significa que você está criando um código JavaScript puro que ignora proxies.
+
+Com isso, você poderá adicionar ou remover o listener de eventos.
+
+```jsx
+import Nullstack from "Nullstack";
+
+class Application extends Nullstack {
+  _listener() {
+    // faça alguma coisa
+  }
+
+  async hydrate() {
+    window.addEventListener("resize", this._listener, false);
+  }
+
+  async terminate() {
+    window.removeEventListener("resize", this._listener, false);
+  }
+
+  render() {
+    return <main>Conteúdo</main>;
+  }
+}
+
+export default Application;
+```
+
+Você também pode usar isto para ignorar o contexto
+
+```jsx
+import Nullstack from "Nullstack";
+
+class Application extends Nullstack {
+  _method(prop) {
+    // faça alguma coisa
+  }
+
+  async hydrate() {
+    // Observe que não está passando um objeto como o contexto normalmente requer
+    this._method(true)
+  }
+
+}
+
+export default Application;
+```

i18n/pt-BR/articles/refs.md

@@ -34,9 +34,9 @@ export default Player;
 
 ## Refs funcionais
 
-Refs pode ser a referência a uma função que será acionada quando o nó entrar no DOM
+Você pode passar uma função ao atributo ref de um elemento e ela é chamada quando o elemento entrar no DOM.
 
-Uma tecla `element` será adicionada ao contexto quando a função for chamada
+Uma chave `element` com uma referência ao elemento é adicionada ao contexto da função
 
 Todas props desse enredo serão mescladas no contexto dessa função.
 
@@ -69,9 +69,9 @@ class Toast extends Nullstack {
 export default Toast;
 ```
 
-## Simples components refáveis
+## Simples componentes refáveis
 
-Ref pode ser propagada apenas passando a referência do contexto.
+Você também pode simplesmente passar uma variável para o ref, e essa variável vai se tornar uma referência ao elemento quando ele entrar no DOM.
 
 ```jsx
 export default function CustomPlayer({ label, ref }) {

i18n/pt-BR/articles/script-runner.md

@@ -0,0 +1,55 @@
+---
+title: Script Runner
+description: O contexto é um objeto JavaScript simples que está completamente desacoplado do próprio framework e pode ser aproveitado para usar o mesmo contexto da aplicação principal para executar scripts.
+---
+
+O contexto é um objeto JavaScript simples que está completamente desacoplado do próprio framework e pode ser aproveitado para usar o mesmo contexto da aplicação principal para executar scripts.
+
+Após a compilação, você pode acessar as chaves do contexto executando um script em outro arquivo que simplesmente importa o pacote de ambiente.
+
+Esse padrão é muito mais conveniente do que ter que duplicar sua lógica para scripts pontuais.
+
+Você deve iniciar manualmente a aplicação para garantir que o contexto seja populado.
+
+Você também deve encerrar manualmente o processo, a menos que deseje ter um script que esteja em execução contínua.
+
+O exemplo abaixo é um arquivo JavaScript simples em **scripts/seed.js** usado com [banco de dados MongoDB](/examples/como-usar-mongodb-com-nullstack) registrado no contexto:
+
+```jsx
+// Importe de .production em vez disso se você estiver executando em modo de produção.
+const { default: context } = require('../.development/server.js');
+const Faker = require('@faker-js/faker');
+
+// registrar 5 usuários falsos
+async function seed() {
+  await context.start();
+  const { database, project } = context;
+  for (let id = 0; id < 5; id++) {
+    await database.collection('users').insertOne({
+      id,
+      username: Faker.name.firstName()
+    });
+  }
+  console.log(`5 users seeded to ${project.name}`);
+  process.exit(0);
+}
+
+seed()
+```
+
+Para executá-lo, você pode simplesmente executá-lo como um comando node normal.
+
+> 🔥 Você sempre deve executá-lo a partir da raiz para pegar o arquivo .env correto
+
+```bash
+> node scripts/seed.js
+5 users seeded
+```
+
+Os script runners são ótimos para várias coisas como:
+- Preencher um banco de dados em um ambiente específico
+- Testar comportamentos do `contexto`
+- Tarefas pontuais
+- Tarefas agendadas (cron jobs)
+
+E você não está limitado às opções acima, você pode ser criativo e usá-lo para coisas mais complexas, como observar eventos de blockchain ou tarefas que precisam ter acesso ao mesmo contexto da sua aplicação.

i18n/pt-BR/components/Documentation.yml

@@ -51,8 +51,12 @@ topics:
         href: "/pt-br/service-worker"
   - title: "Conceitos avançados"
     links:
+      - title: "Proxy"
+        href: "/pt-br/proxy"
       - title: "Inicialização da aplicação"
         href: "/pt-br/inicializacao-da-aplicacao"
+      - title: "Script Runner"
+        href: "/pt-br/script-runner"
       - title: "Componentes Funcionais"
         href: "/pt-br/componentes-funcionais"
       - title: "Componentes Persistentes"