From 95d9a9c3198dd89eefa799091c2fc0fa43997f63 Mon Sep 17 00:00:00 2001 From: Mortaro Date: Sun, 28 Nov 2021 22:03:14 -0300 Subject: [PATCH] :pushpin: 0.12.1 --- .env | 1 + docs/404.html | 14 +- docs/404/index.html | 14 +- docs/404/index.json | 2 +- docs/application-startup.html | 61 +++++--- docs/application-startup/index.html | 61 +++++--- docs/application-startup/index.json | 2 +- docs/ciclo-de-vida-full-stack.html | 14 +- docs/ciclo-de-vida-full-stack/index.html | 14 +- docs/ciclo-de-vida-full-stack/index.json | 2 +- docs/client.js | 2 +- docs/components.html | 10 +- docs/components/index.html | 10 +- docs/context-data.html | 14 +- docs/context-data/index.html | 14 +- docs/context-data/index.json | 2 +- docs/context-environment.html | 14 +- docs/context-environment/index.html | 14 +- docs/context-environment/index.json | 2 +- docs/context-instances.html | 14 +- docs/context-instances/index.html | 14 +- docs/context-instances/index.json | 2 +- docs/context-page.html | 14 +- docs/context-page/index.html | 14 +- docs/context-page/index.json | 2 +- docs/context-project.html | 94 +++++++------ docs/context-project/index.html | 94 +++++++------ docs/context-project/index.json | 2 +- docs/context-secrets.html | 51 +++---- docs/context-secrets/index.html | 51 +++---- docs/context-secrets/index.json | 2 +- docs/context-settings.html | 51 +++---- docs/context-settings/index.html | 51 +++---- docs/context-settings/index.json | 2 +- docs/context.html | 16 +-- docs/context/index.html | 16 +-- docs/context/index.json | 2 +- docs/contexto-page.html | 14 +- docs/contexto-page/index.html | 14 +- docs/contexto-page/index.json | 2 +- docs/contributors.html | 10 +- docs/contributors/index.html | 10 +- docs/documentation.html | 12 +- docs/documentation/index.html | 12 +- docs/documentation/index.json | 2 +- docs/full-stack-lifecycle.html | 14 +- docs/full-stack-lifecycle/index.html | 14 +- docs/full-stack-lifecycle/index.json | 2 +- docs/functional-components.html | 16 +-- docs/functional-components/index.html | 16 +-- docs/functional-components/index.json | 2 +- docs/getting-started.html | 24 ++-- docs/getting-started/index.html | 24 ++-- docs/getting-started/index.json | 2 +- ...how-to-deploy-a-nullstack-application.html | 14 +- .../index.html | 14 +- .../index.json | 2 +- ...-to-use-facebook-pixel-with-nullstack.html | 14 +- .../index.html | 14 +- .../index.json | 2 +- ...o-use-google-analytics-with-nullstack.html | 14 +- .../index.html | 14 +- .../index.json | 2 +- docs/how-to-use-mongodb-with-nullstack.html | 40 +++--- .../index.html | 40 +++--- .../index.json | 2 +- docs/index.html | 10 +- docs/instance-self.html | 24 ++-- docs/instance-self/index.html | 24 ++-- docs/instance-self/index.json | 2 +- docs/njs-file-extension.html | 14 +- docs/njs-file-extension/index.html | 14 +- docs/njs-file-extension/index.json | 2 +- docs/nullstack-logo.html | 14 +- docs/nullstack-logo/index.html | 14 +- docs/nullstack-logo/index.json | 2 +- .../offline.html | 14 +- .../offline/index.html | 14 +- .../offline/index.json | 0 docs/other-post.html | 14 +- docs/other-post/index.html | 14 +- docs/other-post/index.json | 2 +- docs/persistent-components.html | 131 ++++++++++++++++++ docs/persistent-components/index.html | 131 ++++++++++++++++++ docs/persistent-components/index.json | 1 + docs/pt-br.html | 10 +- docs/pt-br/aplicacao-de-pagina-unica.html | 14 +- .../aplicacao-de-pagina-unica/index.html | 14 +- .../aplicacao-de-pagina-unica/index.json | 2 +- docs/pt-br/ciclo-de-vida-full-stack.html | 14 +- .../pt-br/ciclo-de-vida-full-stack/index.html | 14 +- .../pt-br/ciclo-de-vida-full-stack/index.json | 2 +- docs/pt-br/comecando.html | 24 ++-- docs/pt-br/comecando/index.html | 24 ++-- docs/pt-br/comecando/index.json | 2 +- ...o-fazer-deploy-de-aplicacao-nullstack.html | 14 +- .../index.html | 14 +- .../index.json | 2 +- ...como-usar-facebook-pixel-no-nullstack.html | 14 +- .../index.html | 14 +- .../index.json | 2 +- ...mo-usar-google-analytics-no-nullstack.html | 14 +- .../index.html | 14 +- .../index.json | 2 +- .../como-usar-mongodb-com-nullstack.html | 40 +++--- .../index.html | 40 +++--- .../index.json | 2 +- docs/pt-br/componentes-com-estado.html | 14 +- docs/pt-br/componentes-com-estado/index.html | 14 +- docs/pt-br/componentes-com-estado/index.json | 2 +- docs/pt-br/componentes-funcionais.html | 16 +-- docs/pt-br/componentes-funcionais/index.html | 16 +-- docs/pt-br/componentes-funcionais/index.json | 2 +- docs/pt-br/componentes-persistentes.html | 131 ++++++++++++++++++ .../pt-br/componentes-persistentes/index.html | 131 ++++++++++++++++++ .../pt-br/componentes-persistentes/index.json | 1 + docs/pt-br/componentes-renderizaveis.html | 14 +- .../componentes-renderizaveis/index.html | 14 +- .../componentes-renderizaveis/index.json | 2 +- docs/pt-br/componentes.html | 10 +- docs/pt-br/componentes/index.html | 10 +- docs/pt-br/contexto-data.html | 14 +- docs/pt-br/contexto-data/index.html | 14 +- docs/pt-br/contexto-data/index.json | 2 +- docs/pt-br/contexto-environment.html | 14 +- docs/pt-br/contexto-environment/index.html | 14 +- docs/pt-br/contexto-environment/index.json | 2 +- docs/pt-br/contexto-instances.html | 14 +- docs/pt-br/contexto-instances/index.html | 14 +- docs/pt-br/contexto-instances/index.json | 2 +- docs/pt-br/contexto-page.html | 14 +- docs/pt-br/contexto-page/index.html | 14 +- docs/pt-br/contexto-page/index.json | 2 +- docs/pt-br/contexto-project.html | 92 ++++++------ docs/pt-br/contexto-project/index.html | 92 ++++++------ docs/pt-br/contexto-project/index.json | 2 +- docs/pt-br/contexto-secrets.html | 51 +++---- docs/pt-br/contexto-secrets/index.html | 51 +++---- docs/pt-br/contexto-secrets/index.json | 2 +- docs/pt-br/contexto-settings.html | 51 +++---- docs/pt-br/contexto-settings/index.html | 51 +++---- docs/pt-br/contexto-settings/index.json | 2 +- docs/pt-br/contexto.html | 16 +-- docs/pt-br/contexto/index.html | 16 +-- docs/pt-br/contexto/index.json | 2 +- docs/pt-br/contribuidores.html | 10 +- docs/pt-br/contribuidores/index.html | 10 +- docs/pt-br/documentacao.html | 12 +- docs/pt-br/documentacao/index.html | 12 +- docs/pt-br/documentacao/index.json | 2 +- docs/pt-br/estilos.html | 14 +- docs/pt-br/estilos/index.html | 14 +- docs/pt-br/estilos/index.json | 2 +- docs/pt-br/extensao-de-arquivo-njs.html | 14 +- docs/pt-br/extensao-de-arquivo-njs/index.html | 14 +- docs/pt-br/extensao-de-arquivo-njs/index.json | 2 +- .../extens\303\243o-de-arquivo-njs.html" | 14 +- .../index.html" | 14 +- .../index.json" | 2 +- docs/pt-br/funcoes-de-servidor.html | 14 +- docs/pt-br/funcoes-de-servidor/index.html | 14 +- docs/pt-br/funcoes-de-servidor/index.json | 2 +- docs/pt-br/geracao-de-sites-estaticos.html | 14 +- .../geracao-de-sites-estaticos/index.html | 14 +- .../geracao-de-sites-estaticos/index.json | 2 +- docs/pt-br/index.html | 10 +- docs/pt-br/inicializacao-da-aplicacao.html | 61 +++++--- .../inicializacao-da-aplicacao/index.html | 61 +++++--- .../inicializacao-da-aplicacao/index.json | 2 +- docs/pt-br/instancia-self.html | 24 ++-- docs/pt-br/instancia-self/index.html | 24 ++-- docs/pt-br/instancia-self/index.json | 2 +- docs/pt-br/nullstack-logo.html | 14 +- docs/pt-br/nullstack-logo/index.html | 14 +- docs/pt-br/nullstack-logo/index.json | 2 +- docs/pt-br/renderizacao-no-servidor.html | 14 +- .../pt-br/renderizacao-no-servidor/index.html | 14 +- .../pt-br/renderizacao-no-servidor/index.json | 2 +- docs/pt-br/renderizando-no-servidor.html | 14 +- .../pt-br/renderizando-no-servidor/index.html | 14 +- .../pt-br/renderizando-no-servidor/index.json | 2 +- .../requisicao-e-resposta-do-servidor.html | 59 ++++---- .../index.html | 59 ++++---- .../index.json | 2 +- docs/pt-br/rotas-e-parametros.html | 25 ++-- docs/pt-br/rotas-e-parametros/index.html | 25 ++-- docs/pt-br/rotas-e-parametros/index.json | 2 +- docs/pt-br/service-worker.html | 51 ++++--- docs/pt-br/service-worker/index.html | 51 ++++--- docs/pt-br/service-worker/index.json | 2 +- docs/pt-br/vinculo-bidirecional.html | 14 +- docs/pt-br/vinculo-bidirecional/index.html | 14 +- docs/pt-br/vinculo-bidirecional/index.json | 2 +- docs/pt-br/waifu.html | 10 +- docs/pt-br/waifu/index.html | 10 +- docs/renderable-components.html | 14 +- docs/renderable-components/index.html | 14 +- docs/renderable-components/index.json | 2 +- docs/routes-and-params.html | 25 ++-- docs/routes-and-params/index.html | 25 ++-- docs/routes-and-params/index.json | 2 +- docs/server-functions.html | 14 +- docs/server-functions/index.html | 14 +- docs/server-functions/index.json | 2 +- docs/server-request-and-response.html | 59 ++++---- docs/server-request-and-response/index.html | 59 ++++---- docs/server-request-and-response/index.json | 2 +- docs/server-side-rendering.html | 14 +- docs/server-side-rendering/index.html | 14 +- docs/server-side-rendering/index.json | 2 +- docs/service-worker.html | 49 ++++--- docs/service-worker.js | 58 +++----- docs/service-worker/index.html | 49 ++++--- docs/service-worker/index.json | 2 +- docs/single-page-applications.html | 14 +- docs/single-page-applications/index.html | 14 +- docs/single-page-applications/index.json | 2 +- docs/sitemap.xml | 2 +- docs/stateful-components.html | 14 +- docs/stateful-components/index.html | 14 +- docs/stateful-components/index.json | 2 +- docs/static-site-generation.html | 14 +- docs/static-site-generation/index.html | 14 +- docs/static-site-generation/index.json | 2 +- docs/styles.html | 14 +- docs/styles/index.html | 14 +- docs/styles/index.json | 2 +- docs/two-way-bindings.html | 14 +- docs/two-way-bindings/index.html | 14 +- docs/two-way-bindings/index.json | 2 +- docs/waifu.html | 10 +- docs/waifu/index.html | 10 +- server.js | 2 +- src/Home.njs | 23 +-- 234 files changed, 2407 insertions(+), 1785 deletions(-) create mode 100644 .env rename docs/nullstack/{dd981f7940e4d78bac6ca2abe788cc0438f7d9dc => 2ea000420cf0548997525127c55ca77c274d2dd0}/offline.html (92%) rename docs/nullstack/{dd981f7940e4d78bac6ca2abe788cc0438f7d9dc => 2ea000420cf0548997525127c55ca77c274d2dd0}/offline/index.html (92%) rename docs/nullstack/{dd981f7940e4d78bac6ca2abe788cc0438f7d9dc => 2ea000420cf0548997525127c55ca77c274d2dd0}/offline/index.json (100%) create mode 100644 docs/persistent-components.html create mode 100644 docs/persistent-components/index.html create mode 100644 docs/persistent-components/index.json create mode 100644 docs/pt-br/componentes-persistentes.html create mode 100644 docs/pt-br/componentes-persistentes/index.html create mode 100644 docs/pt-br/componentes-persistentes/index.json diff --git a/.env b/.env new file mode 100644 index 00000000..fefc515a --- /dev/null +++ b/.env @@ -0,0 +1 @@ +NULLSTACK_SERVER_PORT=5000 \ No newline at end of file diff --git a/docs/404.html b/docs/404.html index eb1d7b78..89e61af3 100644 --- a/docs/404.html +++ b/docs/404.html @@ -23,28 +23,28 @@ - + -
Nullstack

Page Not Found

Perhaps you want to learn about how to make a 404 page with Nullstack?

+ + + \ No newline at end of file diff --git a/docs/persistent-components/index.html b/docs/persistent-components/index.html new file mode 100644 index 00000000..37cb0d41 --- /dev/null +++ b/docs/persistent-components/index.html @@ -0,0 +1,131 @@ + + + + + + Persistent Components - Nullstack + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nullstack

Persistent Components

Persistent Components are components that persists on memory.

+

It preserves the state even when moved out from DOM and is good for saving whole app parts in cache.

+

It runs prepare and initiate lifecycle hooks only once.

+

It always runs hydrate when entering DOM and terminate when exiting.

+
import Nullstack from 'nullstack';
+import Counter from './Counter';
+
+class Application extends Nullstack {
+
+  showCounter = true;
+  toogleCounter() {
+    this.showCounter = !this.showCounter;
+  }
+
+  render() {
+    return (
+      <div>
+        {this.showCounter && <Counter persistent key="Counter"/>}
+        <button onclick={this.toogleCounter}>Show/Hide Counter</button>
+      </div>
+    )
+  }
+
+}
+
+export default Application;
+
+

Whenever showCounter becomes false, Counter exits the tree but it's state keeps the same when re-entering.

+

It also mantains the component in instances listing, making possible to manage it's state even when outside DOM:

+
import Nullstack from 'nullstack';
+import Counter from './Counter';
+
+class Application extends Nullstack {
+  // ...
+  updateCounter({ instances }) {
+    instances.Counter.count += 1;
+  }
+
+  render() {
+    return (
+      <div>
+        ...
+        <button onclick={this.updateCounter}>
+          Update Counter even outside the DOM
+        </button>
+      </div>
+    )
+  }
+}
+
+export default Application;
+
+

When re-entering the tree, the state is shown according to the changes made.

+

You can even dynamically enable/disable persistency, bringing back the default behavior:

+
import Nullstack from 'nullstack';
+import Counter from './Counter';
+
+class Application extends Nullstack {
+  // ...
+  persistentCounter = true
+  tooglePersistency() {
+    this.persistentCounter = !this.persistentCounter;
+  }
+
+  render() {
+    return (
+      <div>
+        <Counter persistent={this.persistentCounter}/>
+        <button onclick={this.tooglePersistency}>
+          Toogle persistency in Counter
+        </button>
+      </div>
+    )
+  }
+}
+
+export default Application;
+
+

Next step

⚔ Learn about the context data.

+
+ + + \ No newline at end of file diff --git a/docs/persistent-components/index.json b/docs/persistent-components/index.json new file mode 100644 index 00000000..c40229ce --- /dev/null +++ b/docs/persistent-components/index.json @@ -0,0 +1 @@ +{"instances": {"application":{},"n-0-0-0-0":{"expanded":false,"locale":"en-US","i18n":{"home":{"title":"Nullstack","href":"/"},"links":[{"title":"Documentation","href":"/getting-started"},{"title":"Components","href":"/components"},{"title":"Contributors","href":"/contributors"},{"title":"Waifu","href":"/waifu"}],"action":{"title":"Get Started","href":"/getting-started"},"language":{"title":"Português","href":"/pt-br"},"mode":{"dark":"Night Mode","light":"Day Mode"}}},"n-0-0-0-12/persistent-components":{"title":"Persistent Components","html":"

Persistent Components are components that persists on memory.<\/p>\n

It preserves the state even when moved out from DOM and is good for saving whole app parts in cache.<\/p>\n

It runs prepare<\/code><\/a> and initiate<\/code><\/a> lifecycle hooks only once.<\/p>\n

It always runs hydrate<\/code><\/a> when entering DOM and terminate<\/code><\/a> when exiting.<\/p>\n

import<\/span> Nullstack from<\/span> 'nullstack'<\/span>;<\/span>\nimport<\/span> Counter from<\/span> './Counter'<\/span>;<\/span>\n\nclass<\/span> Application<\/span> extends<\/span> Nullstack<\/span> {<\/span>\n\n  showCounter =<\/span> true<\/span>;<\/span>\n  toogleCounter<\/span>(<\/span>)<\/span> {<\/span>\n    this<\/span>.<\/span>showCounter =<\/span> !<\/span>this<\/span>.<\/span>showCounter;<\/span>\n  }<\/span>\n\n  render<\/span>(<\/span>)<\/span> {<\/span>\n    return<\/span> (<\/span>\n      <<\/span>div<\/span>><\/span><\/span>\n        {<\/span>this<\/span>.<\/span>showCounter &&<\/span> <<\/span>Counter<\/span><\/span> persistent<\/span> key<\/span>=<\/span>\"<\/span>Counter\"<\/span><\/span>/><\/span><\/span>}<\/span>\n        <<\/span>button<\/span> onclick<\/span>=<\/span>{<\/span>this<\/span>.<\/span>toogleCounter}<\/span><\/span>><\/span><\/span>Show/<\/span>Hide Counter</<\/span>button<\/span>><\/span><\/span>\n      </<\/span>div<\/span>><\/span><\/span>\n    )<\/span>\n  }<\/span>\n\n}<\/span>\n\nexport<\/span> default<\/span> Application;<\/span>\n<\/code><\/pre>\n
Whenever showCounter<\/code> becomes false<\/code>, Counter<\/code> exits the tree but it's state keeps the same when re-entering.<\/p>\n
import<\/span> Nullstack from<\/span> 'nullstack'<\/span>;<\/span>\nimport<\/span> Counter from<\/span> './Counter'<\/span>;<\/span>\n\nclass<\/span> Application<\/span> extends<\/span> Nullstack<\/span> {<\/span>\n  // ...<\/span>\n  updateCounter<\/span>(<\/span>{<\/span> instances }<\/span><\/span>)<\/span> {<\/span>\n    instances.<\/span>Counter.<\/span>count +=<\/span> 1<\/span>;<\/span>\n  }<\/span>\n\n  render<\/span>(<\/span>)<\/span> {<\/span>\n    return<\/span> (<\/span>\n      <<\/span>div<\/span>><\/span><\/span>\n        ...<\/span>\n        <<\/span>button<\/span> onclick<\/span>=<\/span>{<\/span>this<\/span>.<\/span>updateCounter}<\/span><\/span>><\/span><\/span>\n          Update Counter even outside the DOM<\/span>\n        </<\/span>button<\/span>><\/span><\/span>\n      </<\/span>div<\/span>><\/span><\/span>\n    )<\/span>\n  }<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> Application;<\/span>\n<\/code><\/pre>\n
When re-entering the tree, the state is shown according to the changes made.<\/p>\n
You can even dynamically enable/disable persistency, bringing back the default behavior:<\/p>\n
import<\/span> Nullstack from<\/span> 'nullstack'<\/span>;<\/span>\nimport<\/span> Counter from<\/span> './Counter'<\/span>;<\/span>\n\nclass<\/span> Application<\/span> extends<\/span> Nullstack<\/span> {<\/span>\n  // ...<\/span>\n  persistentCounter =<\/span> true<\/span>\n  tooglePersistency<\/span>(<\/span>)<\/span> {<\/span>\n    this<\/span>.<\/span>persistentCounter =<\/span> !<\/span>this<\/span>.<\/span>persistentCounter;<\/span>\n  }<\/span>\n\n  render<\/span>(<\/span>)<\/span> {<\/span>\n    return<\/span> (<\/span>\n      <<\/span>div<\/span>><\/span><\/span>\n        <<\/span>Counter<\/span><\/span> persistent<\/span>=<\/span>{<\/span>this<\/span>.<\/span>persistentCounter}<\/span><\/span>/><\/span><\/span>\n        <<\/span>button<\/span> onclick<\/span>=<\/span>{<\/span>this<\/span>.<\/span>tooglePersistency}<\/span><\/span>><\/span><\/span>\n          Toogle persistency in<\/span> Counter\n        </<\/span>button<\/span>><\/span><\/span>\n      </<\/span>div<\/span>><\/span><\/span>\n    )<\/span>\n  }<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> Application;<\/span>\n<\/code><\/pre>\n
Next step<\/a><\/h2>
⚔ Learn about the context data<\/code><\/a>.<\/p>\n","description":"Persistent Components are components that persists on memory","topics":[{"title":"Core concepts","links":[{"title":"Getting started","href":"/getting-started"},{"title":"Renderable components","href":"/renderable-components"},{"title":"Stateful components","href":"/stateful-components"},{"title":"Full-stack lifecycle","href":"/full-stack-lifecycle"},{"title":"Server functions","href":"/server-functions"},{"title":"Context","href":"/context"},{"title":"Routes and params","href":"/routes-and-params"},{"title":"Two-way bindings","href":"/two-way-bindings"}]},{"title":"Advanced concepts","links":[{"title":"Application Startup","href":"/application-startup"},{"title":"Functional Components","href":"/functional-components"},{"title":"Persistent Components","href":"/persistent-components"},{"title":"Context data","href":"/context-data"},{"title":"Context instances","href":"/context-instances"},{"title":"Context environment","href":"/context-environment"},{"title":"Context page","href":"/context-page"},{"title":"Context project","href":"/context-project"},{"title":"Context settings","href":"/context-settings"},{"title":"Context secrets","href":"/context-secrets"},{"title":"Instance self","href":"/instance-self"},{"title":"Server request and response","href":"/server-request-and-response"},{"title":"Styles","href":"/styles"},{"title":"NJS file extension","href":"/njs-file-extension"},{"title":"Service Worker","href":"/service-worker"},{"title":"How to deploy","href":"/how-to-deploy-a-nullstack-application"}]},{"title":"Build Modes","links":[{"title":"Server-side rendering","href":"/server-side-rendering"},{"title":"Static site generation","href":"/static-site-generation"},{"title":"Single page applications","href":"/single-page-applications"}]},{"title":"Examples","links":[{"title":"How to use MongoDB","href":"/how-to-use-mongodb-with-nullstack"},{"title":"How to use Google Analytics","href":"/how-to-use-google-analytics-with-nullstack"},{"title":"How to use Facebook Pixel","href":"/how-to-use-facebook-pixel-with-nullstack"}]}]},"n-0-0-0-13":{},"n-0-0-0-15":{},"n-0-0-0-16":{"locale":"en-US","i18n":{"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}],"star":{"story":"Want to show your love and help us spread the word?","action":"Leave a star on GitHub"}}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Persistent Components - Nullstack","description":"Persistent Components are components that persists on memory"}}
\ No newline at end of file
diff --git a/docs/pt-br.html b/docs/pt-br.html
index a97d7a1d..1bb6674a 100644
--- a/docs/pt-br.html
+++ b/docs/pt-br.html
@@ -23,7 +23,7 @@
     
     
     
-    
+    
     
     
     
@@ -119,15 +119,15 @@
     
+  
+
\ No newline at end of file
diff --git a/docs/pt-br/componentes-persistentes/index.html b/docs/pt-br/componentes-persistentes/index.html
new file mode 100644
index 00000000..bfe014fc
--- /dev/null
+++ b/docs/pt-br/componentes-persistentes/index.html
@@ -0,0 +1,131 @@
+
+
+  
+    
+    
+    Componentes Persistentes - Nullstack
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+  
+  
+    
 Nullstack 
 Componentes Persistentes 
Componentes Persistentes são componentes que persistem na memória.

+
Ele preserva seu estado mesmo quando removido do DOM e é bom para salvar partes inteiras do aplicativo em cache.

+
Executa os gatilhos de ciclo de vida prepare e initiate apenas uma vez.

+
Sempre executa os gatilhos hydrate ao entrar no DOM e terminate ao sair.

+
import Nullstack from 'nullstack';
+import Counter from './Counter';
+
+class Application extends Nullstack {
+
+  showCounter = true;
+  toogleCounter() {
+    this.showCounter = !this.showCounter;
+  }
+
+  render() {
+    return (
+      <div>
+        {this.showCounter && <Counter persistent key="Counter"/>}
+        <button onclick={this.toogleCounter}>Exibe/Esconde Counter</button>
+      </div>
+    )
+  }
+
+}
+
+export default Application;
+

+
Sempre que showCounter se torna false, Counter sai da árvore, mas seu estado permanece o mesmo ao entrar novamente.

+
Ele também mantém o componente na listagem instances, tornando possível gerenciar seu estado mesmo quando fora do DOM:

+
import Nullstack from 'nullstack';
+import Counter from './Counter';
+
+class Application extends Nullstack {
+  // ...
+  updateCounter({ instances }) {
+    instances.Counter.count += 1;
+  }
+
+  render() {
+    return (
+      <div>
+        ...
+        <button onclick={this.updateCounter}>
+          Modificar Counter mesmo fora do DOM
+        </button>
+      </div>
+    )
+  }
+}
+
+export default Application;
+

+
Ao entrar novamente na árvore, o estado é mostrado de acordo com as alterações feitas.

+
Você pode até ativar/desativar dinamicamente a persistência, trazendo de volta o comportamento padrão:

+
import Nullstack from 'nullstack';
+import Counter from './Counter';
+
+class Application extends Nullstack {
+  // ...
+  persistentCounter = true
+  tooglePersistency() {
+    this.persistentCounter = !this.persistentCounter;
+  }
+
+  render() {
+    return (
+      <div>
+        <Counter persistent={this.persistentCounter}/>
+        <button onclick={this.tooglePersistency}>
+          Alternar persistência do Counter
+        </button>
+      </div>
+    )
+  }
+}
+
+export default Application;
+

+
Próxima Etapa
⚔ Aprenda sobre a chave data do contexto.

+

+    
+  
+
\ No newline at end of file
diff --git a/docs/pt-br/componentes-persistentes/index.json b/docs/pt-br/componentes-persistentes/index.json
new file mode 100644
index 00000000..70b1bc17
--- /dev/null
+++ b/docs/pt-br/componentes-persistentes/index.json
@@ -0,0 +1 @@
+{"instances": {"application":{},"n-0-0-0-0":{"expanded":false,"locale":"pt-BR","i18n":{"home":{"title":"Nullstack","href":"/pt-br"},"links":[{"title":"Documentação","href":"/pt-br/comecando"},{"title":"Componentes","href":"/pt-br/componentes"},{"title":"Contribuidores","href":"/pt-br/contribuidores"},{"title":"Waifu","href":"/pt-br/waifu"}],"action":{"title":"Começar","href":"/pt-br/comecando"},"language":{"title":"English","href":"/"},"mode":{"dark":"Modo Noite","light":"Modo Dia"}}},"n-0-0-0-11/pt-br/componentes-persistentes":{"title":"Componentes Persistentes","html":"
Componentes Persistentes são componentes que persistem na memória.<\/p>\n
Ele preserva seu estado mesmo quando removido do DOM e é bom para salvar partes inteiras do aplicativo em cache.<\/p>\n
Executa os gatilhos de ciclo de vida prepare<\/code><\/a> e initiate<\/code><\/a> apenas uma vez.<\/p>\n
Sempre executa os gatilhos hydrate<\/code><\/a> ao entrar no DOM e terminate<\/code><\/a> ao sair.<\/p>\n
import<\/span> Nullstack from<\/span> 'nullstack'<\/span>;<\/span>\nimport<\/span> Counter from<\/span> './Counter'<\/span>;<\/span>\n\nclass<\/span> Application<\/span> extends<\/span> Nullstack<\/span> {<\/span>\n\n  showCounter =<\/span> true<\/span>;<\/span>\n  toogleCounter<\/span>(<\/span>)<\/span> {<\/span>\n    this<\/span>.<\/span>showCounter =<\/span> !<\/span>this<\/span>.<\/span>showCounter;<\/span>\n  }<\/span>\n\n  render<\/span>(<\/span>)<\/span> {<\/span>\n    return<\/span> (<\/span>\n      <<\/span>div<\/span>><\/span><\/span>\n        {<\/span>this<\/span>.<\/span>showCounter &&<\/span> <<\/span>Counter<\/span><\/span> persistent<\/span> key<\/span>=<\/span>\"<\/span>Counter\"<\/span><\/span>/><\/span><\/span>}<\/span>\n        <<\/span>button<\/span> onclick<\/span>=<\/span>{<\/span>this<\/span>.<\/span>toogleCounter}<\/span><\/span>><\/span><\/span>Exibe/<\/span>Esconde Counter</<\/span>button<\/span>><\/span><\/span>\n      </<\/span>div<\/span>><\/span><\/span>\n    )<\/span>\n  }<\/span>\n\n}<\/span>\n\nexport<\/span> default<\/span> Application;<\/span>\n<\/code><\/pre>\n
Sempre que showCounter<\/code> se torna false<\/code>, Counter<\/code> sai da árvore, mas seu estado permanece o mesmo ao entrar novamente.<\/p>\n
import<\/span> Nullstack from<\/span> 'nullstack'<\/span>;<\/span>\nimport<\/span> Counter from<\/span> './Counter'<\/span>;<\/span>\n\nclass<\/span> Application<\/span> extends<\/span> Nullstack<\/span> {<\/span>\n  // ...<\/span>\n  updateCounter<\/span>(<\/span>{<\/span> instances }<\/span><\/span>)<\/span> {<\/span>\n    instances.<\/span>Counter.<\/span>count +=<\/span> 1<\/span>;<\/span>\n  }<\/span>\n\n  render<\/span>(<\/span>)<\/span> {<\/span>\n    return<\/span> (<\/span>\n      <<\/span>div<\/span>><\/span><\/span>\n        ...<\/span>\n        <<\/span>button<\/span> onclick<\/span>=<\/span>{<\/span>this<\/span>.<\/span>updateCounter}<\/span><\/span>><\/span><\/span>\n          Modificar Counter mesmo fora do<\/span> DOM<\/span>\n        </<\/span>button<\/span>><\/span><\/span>\n      </<\/span>div<\/span>><\/span><\/span>\n    )<\/span>\n  }<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> Application;<\/span>\n<\/code><\/pre>\n
Ao entrar novamente na árvore, o estado é mostrado de acordo com as alterações feitas.<\/p>\n
Você pode até ativar/desativar dinamicamente a persistência, trazendo de volta o comportamento padrão:<\/p>\n
import<\/span> Nullstack from<\/span> 'nullstack'<\/span>;<\/span>\nimport<\/span> Counter from<\/span> './Counter'<\/span>;<\/span>\n\nclass<\/span> Application<\/span> extends<\/span> Nullstack<\/span> {<\/span>\n  // ...<\/span>\n  persistentCounter =<\/span> true<\/span>\n  tooglePersistency<\/span>(<\/span>)<\/span> {<\/span>\n    this<\/span>.<\/span>persistentCounter =<\/span> !<\/span>this<\/span>.<\/span>persistentCounter;<\/span>\n  }<\/span>\n\n  render<\/span>(<\/span>)<\/span> {<\/span>\n    return<\/span> (<\/span>\n      <<\/span>div<\/span>><\/span><\/span>\n        <<\/span>Counter<\/span><\/span> persistent<\/span>=<\/span>{<\/span>this<\/span>.<\/span>persistentCounter}<\/span><\/span>/><\/span><\/span>\n        <<\/span>button<\/span> onclick<\/span>=<\/span>{<\/span>this<\/span>.<\/span>tooglePersistency}<\/span><\/span>><\/span><\/span>\n          Alternar persistência do<\/span> Counter\n        </<\/span>button<\/span>><\/span><\/span>\n      </<\/span>div<\/span>><\/span><\/span>\n    )<\/span>\n  }<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> Application;<\/span>\n<\/code><\/pre>\n
Próxima Etapa<\/a><\/h2>
⚔ Aprenda sobre a chave data<\/code> do contexto<\/a>.<\/p>\n","description":"Componentes Persistentes são componentes que persistem na memória","topics":[{"title":"Principais conceitos","links":[{"title":"Começando","href":"/pt-br/comecando"},{"title":"Componentes renderizáveis","href":"/pt-br/componentes-renderizaveis"},{"title":"Componentes com estado","href":"/pt-br/componentes-com-estado"},{"title":"Ciclo de vida full-stack","href":"/pt-br/ciclo-de-vida-full-stack"},{"title":"Funções de servidor","href":"/pt-br/funcoes-de-servidor"},{"title":"Contexto","href":"/pt-br/contexto"},{"title":"Rotas e parâmetros","href":"/pt-br/rotas-e-parametros"},{"title":"Vínculo bidirecional","href":"/pt-br/vinculo-bidirecional"}]},{"title":"Conceitos avançados","links":[{"title":"Inicialização da aplicação","href":"/pt-br/inicializacao-da-aplicacao"},{"title":"Componentes Funcionais","href":"/pt-br/componentes-funcionais"},{"title":"Componentes Persistentes","href":"/pt-br/componentes-persistentes"},{"title":"Contexto data","href":"/pt-br/contexto-data"},{"title":"Contexto Instances","href":"/pt-br/contexto-instances"},{"title":"Contexto Environment","href":"/pt-br/contexto-environment"},{"title":"Contexto Page","href":"/pt-br/contexto-page"},{"title":"Contexto Project","href":"/pt-br/contexto-project"},{"title":"Contexto Settings","href":"/pt-br/contexto-settings"},{"title":"Contexto Secrets","href":"/pt-br/contexto-secrets"},{"title":"self da Instância","href":"/pt-br/instancia-self"},{"title":"Requisição e resposta do servidor","href":"/pt-br/requisicao-e-resposta-do-servidor"},{"title":"Estilos","href":"/pt-br/estilos"},{"title":"Extensão de arquivo NJS","href":"/pt-br/extensao-de-arquivo-njs"},{"title":"Service Worker","href":"/pt-br/service-worker"},{"title":"Como fazer deploy","href":"/pt-br/como-fazer-deploy-de-aplicacao-nullstack"}]},{"title":"Modos de Construção","links":[{"title":"Renderizando no servidor","href":"/pt-br/renderizando-no-servidor"},{"title":"Geração de sites estáticos","href":"/pt-br/geracao-de-sites-estaticos"},{"title":"Single page applications","href":"/pt-br/aplicacao-de-pagina-unica"}]},{"title":"Exemplos","links":[{"title":"Como usar MongoDB","href":"/pt-br/como-usar-mongodb-com-nullstack"},{"title":"Como usar Google Analytics","href":"/pt-br/como-usar-google-analytics-no-nullstack"},{"title":"Como usar Facebook Pixel","href":"/pt-br/como-usar-facebook-pixel-no-nullstack"}]}]},"n-0-0-0-13":{},"n-0-0-0-15":{},"n-0-0-0-16":{"locale":"pt-BR","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Waifu oficial do Nullstack"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}],"star":{"story":"Quer mostrar o seu amor e nos ajudar a espalhar a palavra?","action":"Deixe uma estrela no GitHub"}}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Componentes Persistentes - Nullstack","description":"Componentes Persistentes são componentes que persistem na memória"}}
\ No newline at end of file
diff --git a/docs/pt-br/componentes-renderizaveis.html b/docs/pt-br/componentes-renderizaveis.html
index b0c96d3f..b74de8c7 100644
--- a/docs/pt-br/componentes-renderizaveis.html
+++ b/docs/pt-br/componentes-renderizaveis.html
@@ -23,14 +23,14 @@
     
     
     
-    
+    
     
     
     
     
   
   
-    
 Nullstack 
 Componentes renderizáveis 
O componente mais simples que você pode fazer é um componente renderizável, com exceção de componentes funcionais.

+    
 Nullstack 
 Componentes renderizáveis 
O componente mais simples que você pode fazer é um componente renderizável, com exceção de componentes funcionais.

 
Componentes renderizáveis são muito semelhantes aos componentes da Web que fornecem a capacidade de criar novas tags HTML que atalham um grupo de outras tags HTML.

 
Crie um arquivo em sua pasta src com o nome de seu componente e com a extensão .njs.

 
Neste exemplo, vai ser chamado helloworld.njs.

@@ -306,16 +306,16 @@ 
Próxima Etapa
⚔ Ad
 

     
Ele também mantém o componente na listagem instances<\/code><\/a>, tornando possível gerenciar seu estado mesmo quando fora do DOM:<\/p>\n
It also mantains the component in instances<\/code><\/a> listing, making possible to manage it's state even when outside DOM:<\/p>\n