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" pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy