From 4f84f124ef5c91e40f91ca174c7dd4d4f6417a10 Mon Sep 17 00:00:00 2001 From: Brendon Silva Date: Wed, 28 Jun 2023 23:15:02 -0300 Subject: [PATCH 1/4] typo fixed --- i18n/pt-BR/articles/refs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/i18n/pt-BR/articles/refs.md b/i18n/pt-BR/articles/refs.md index a8c1770e..7828dcdd 100644 --- a/i18n/pt-BR/articles/refs.md +++ b/i18n/pt-BR/articles/refs.md @@ -69,7 +69,7 @@ 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. From 5fd919360bf42b1e7ad6497a88c245b7a532c11e Mon Sep 17 00:00:00 2001 From: Brendon Silva Date: Thu, 29 Jun 2023 00:48:31 -0300 Subject: [PATCH 2/4] translated to pt-BR --- i18n/pt-BR/articles/proxy.md | 155 ++++++++++++++++++++++++ i18n/pt-BR/components/Documentation.yml | 2 + 2 files changed, 157 insertions(+) create mode 100644 i18n/pt-BR/articles/proxy.md 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/components/Documentation.yml b/i18n/pt-BR/components/Documentation.yml index c3540e0c..0ccef3bf 100644 --- a/i18n/pt-BR/components/Documentation.yml +++ b/i18n/pt-BR/components/Documentation.yml @@ -51,6 +51,8 @@ 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: "Componentes Funcionais" From 3b4cd3327561e7128eb7fb012acd3da5841c4b74 Mon Sep 17 00:00:00 2001 From: Brendon Silva Date: Thu, 29 Jun 2023 02:13:20 -0300 Subject: [PATCH 3/4] translated to pt-BR --- i18n/pt-BR/articles/script-runner.md | 55 +++++++++++++++++++++++++ i18n/pt-BR/components/Documentation.yml | 2 + 2 files changed, 57 insertions(+) create mode 100644 i18n/pt-BR/articles/script-runner.md 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 0ccef3bf..8eced1dc 100644 --- a/i18n/pt-BR/components/Documentation.yml +++ b/i18n/pt-BR/components/Documentation.yml @@ -55,6 +55,8 @@ topics: 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" From 77d72d8adb90eee9580e10bc83a6a97ea07cdfbe Mon Sep 17 00:00:00 2001 From: Brendon Silva Date: Wed, 5 Jul 2023 16:16:37 -0300 Subject: [PATCH 4/4] improving explanations --- i18n/pt-BR/articles/refs.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/i18n/pt-BR/articles/refs.md b/i18n/pt-BR/articles/refs.md index 7828dcdd..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. @@ -71,7 +71,7 @@ export default Toast; ## 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 }) {