diff --git a/i18n/pt-BR/articles/proxy.md b/i18n/pt-BR/articles/proxy.md new file mode 100644 index 00000000..4df75c63 --- /dev/null +++ b/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() { +
element
+ } + +} + +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
Conteúdo
; + } +} + +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; +``` \ No newline at end of file diff --git a/i18n/pt-BR/articles/refs.md b/i18n/pt-BR/articles/refs.md index a8c1770e..ad530388 100644 --- a/i18n/pt-BR/articles/refs.md +++ b/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 }) { diff --git a/i18n/pt-BR/articles/script-runner.md b/i18n/pt-BR/articles/script-runner.md new file mode 100644 index 00000000..e3b7603b --- /dev/null +++ b/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. \ No newline at end of file diff --git a/i18n/pt-BR/components/Documentation.yml b/i18n/pt-BR/components/Documentation.yml index c3540e0c..8eced1dc 100644 --- a/i18n/pt-BR/components/Documentation.yml +++ b/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"