diff --git a/index.js b/client.js
similarity index 52%
rename from index.js
rename to client.js
index a0760caf..e251a2a3 100644
--- a/index.js
+++ b/client.js
@@ -1,6 +1,6 @@
-import "./src/tailwind.css";
-
 import Nullstack from "nullstack";
 import Application from "./src/Application";
 
-export default Nullstack.start(Application);
+const context = Nullstack.start(Application);
+
+export default context
\ No newline at end of file
diff --git a/docs/404.html b/docs/404.html
index 97a909e9..eb1d7b78 100644
--- a/docs/404.html
+++ b/docs/404.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -36,15 +36,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":404,"title":"Page Not Found - Nullstack","description":"Sorry, this is not the page you are looking for."};
       window.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/404":{"title":"Page Not Found","html":"<p>Perhaps you want to learn about <a href=\"/context-page\">how to make a 404 page with Nullstack<\/a>?<\/p>\n<p>If you are looking for something else, you should <a href=\"/documentation\">read the documentation<\/a>.<\/p>\n","description":"Sorry, this is not the page you are looking for.","status":404,"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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"404"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/404/index.html b/docs/404/index.html
index 97a909e9..eb1d7b78 100644
--- a/docs/404/index.html
+++ b/docs/404/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -36,15 +36,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":404,"title":"Page Not Found - Nullstack","description":"Sorry, this is not the page you are looking for."};
       window.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/404":{"title":"Page Not Found","html":"<p>Perhaps you want to learn about <a href=\"/context-page\">how to make a 404 page with Nullstack<\/a>?<\/p>\n<p>If you are looking for something else, you should <a href=\"/documentation\">read the documentation<\/a>.<\/p>\n","description":"Sorry, this is not the page you are looking for.","status":404,"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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"404"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/application-startup.html b/docs/application-startup.html
index 42521ad9..1a78a987 100644
--- a/docs/application-startup.html
+++ b/docs/application-startup.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -68,15 +68,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about <a
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Application Startup - Nullstack","description":"The start function will run only once when your application is booted and is a good place for setting up your server context"};
       window.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/application-startup":{"title":"Application Startup","html":"<p>The <strong>index.js<\/strong> file at your application root is responsible for starting your application.<\/p>\n<p>When you run the application with <code>npm start<\/code> or <code>node .production/server.js<\/code> the <strong>index<\/strong> will call the <code>start<\/code> function in your <strong>src/Application.js<\/strong>.<\/p>\n<p>The <code>start<\/code> function will run only once when your application is booted and is a good place for setting up your <a href=\"/context\">server context<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> database <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./database'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>database <span class=\"token operator\">=<\/span> database<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"dependency-startup-pattern\"><a href=\"#dependency-startup-pattern\">Dependency startup pattern<\/a><\/h2><p>A nice pattern to work with dependencies that require startup time configurations is to define a <code>start<\/code> function in the dependency and call it in the Application <code>start<\/code> function passing the <a href=\"/context\">server context<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Dependency <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Dependency'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    Dependency<span class=\"token punctuation\">.<\/span><span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span>context<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>🔒 Server functions with the name starting with &quot;start&quot; (and optionally followed by an uppercase letter) do not generate an API endpoint to avoid malicious context flooding.<\/p>\n<\/blockquote>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about <a href=\"/functional-components\">functional components<\/a>.<\/p>\n","description":"The start function will run only once when your application is booted and is a good place for setting up your server context","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"application-startup"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/application-startup/index.html b/docs/application-startup/index.html
index 42521ad9..1a78a987 100644
--- a/docs/application-startup/index.html
+++ b/docs/application-startup/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -68,15 +68,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about <a
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Application Startup - Nullstack","description":"The start function will run only once when your application is booted and is a good place for setting up your server context"};
       window.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/application-startup":{"title":"Application Startup","html":"<p>The <strong>index.js<\/strong> file at your application root is responsible for starting your application.<\/p>\n<p>When you run the application with <code>npm start<\/code> or <code>node .production/server.js<\/code> the <strong>index<\/strong> will call the <code>start<\/code> function in your <strong>src/Application.js<\/strong>.<\/p>\n<p>The <code>start<\/code> function will run only once when your application is booted and is a good place for setting up your <a href=\"/context\">server context<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> database <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./database'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>database <span class=\"token operator\">=<\/span> database<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"dependency-startup-pattern\"><a href=\"#dependency-startup-pattern\">Dependency startup pattern<\/a><\/h2><p>A nice pattern to work with dependencies that require startup time configurations is to define a <code>start<\/code> function in the dependency and call it in the Application <code>start<\/code> function passing the <a href=\"/context\">server context<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Dependency <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Dependency'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    Dependency<span class=\"token punctuation\">.<\/span><span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span>context<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>🔒 Server functions with the name starting with &quot;start&quot; (and optionally followed by an uppercase letter) do not generate an API endpoint to avoid malicious context flooding.<\/p>\n<\/blockquote>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about <a href=\"/functional-components\">functional components<\/a>.<\/p>\n","description":"The start function will run only once when your application is booted and is a good place for setting up your server context","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"application-startup"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/ciclo-de-vida-full-stack.html b/docs/ciclo-de-vida-full-stack.html
index 62a30649..f8748b7a 100644
--- a/docs/ciclo-de-vida-full-stack.html
+++ b/docs/ciclo-de-vida-full-stack.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -36,15 +36,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":404,"title":"Page Not Found - Nullstack","description":"Sorry, this is not the page you are looking for."};
       window.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/ciclo-de-vida-full-stack":{"title":"Page Not Found","html":"<p>Perhaps you want to learn about <a href=\"/context-page\">how to make a 404 page with Nullstack<\/a>?<\/p>\n<p>If you are looking for something else, you should <a href=\"/documentation\">read the documentation<\/a>.<\/p>\n","description":"Sorry, this is not the page you are looking for.","status":404,"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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"ciclo-de-vida-full-stack"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/ciclo-de-vida-full-stack/index.html b/docs/ciclo-de-vida-full-stack/index.html
index 62a30649..f8748b7a 100644
--- a/docs/ciclo-de-vida-full-stack/index.html
+++ b/docs/ciclo-de-vida-full-stack/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -36,15 +36,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":404,"title":"Page Not Found - Nullstack","description":"Sorry, this is not the page you are looking for."};
       window.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/ciclo-de-vida-full-stack":{"title":"Page Not Found","html":"<p>Perhaps you want to learn about <a href=\"/context-page\">how to make a 404 page with Nullstack<\/a>?<\/p>\n<p>If you are looking for something else, you should <a href=\"/documentation\">read the documentation<\/a>.<\/p>\n","description":"Sorry, this is not the page you are looking for.","status":404,"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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"ciclo-de-vida-full-stack"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/client.css b/docs/client.css
new file mode 100644
index 00000000..c01e3b95
--- /dev/null
+++ b/docs/client.css
@@ -0,0 +1,2 @@
+@font-face{font-family:"Roboto";font-style:normal;font-weight:300;src:local(""),url("/roboto-v20-latin-300.woff2") format("woff2");font-display:swap}@font-face{font-family:"Roboto";font-style:normal;font-weight:500;src:local(""),url("/roboto-v20-latin-500.woff2") format("woff2");font-display:swap}@font-face{font-family:"Crete Round";font-style:normal;font-weight:400;src:local(""),url("/crete-round-v9-latin-regular.woff2") format("woff2");font-display:swap}body{font-family:var(--secondary-font-family);--primary-font-family: "Crete Round", serif;--secondary-font-family: "Roboto", sans-serif;font-weight:300;overflow-y:scroll}h1,h2,h3,h4,h5{font-family:var(--primary-font-family);font-weight:700;letter-spacing:1px}blockquote{line-height:140%}section a img{transition:.1s}section a img:hover{transform:scale(1.1);z-index:1;transition:.3s}main{min-height:100vh;padding-top:61px}pre{color:#ddbc72;font-size:1rem;width:100%;background-color:#282c34;line-height:1.5;padding:.5rem;color:#ddbc72;overflow-x:auto}@-moz-document url-prefix(){pre{font-size:1.1rem}}@media(max-width: 768px){pre{overflow-x:auto}}.token.selector,.token.tag{color:#ff5d9a !important}.token.comment{color:#9dbcf7 !important}.token.string,.token.attr-value{color:#99c47a !important}.token.atrule,.token.keyword{color:#e89bff !important}.token.property,.token.boolean,.token.number,.token.constant,.token.symbol,.token.attr-name,.token.deleted{color:#e9ac72 !important}.token.function,.token.operator{color:#71bfff !important}.token.punctuation{color:#b1b8c6 !important}article :target::before{content:"";display:block;height:calc(80px + 1rem);margin-top:calc(-80px - 1rem)}@media(max-width: 768px){article pre code.language-jsx{overflow-x:scroll}}
+/*! tailwindcss v2.1.1 | MIT License | https://tailwindcss.com *//*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */*,*::before,*::after{box-sizing:border-box}:root{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"}b{font-weight:bolder}code,pre{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;font-size:1em}button{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{text-transform:none}button,[type=button]{-webkit-appearance:button}blockquote,h1,h2,h3,h4,h5,p,pre{margin:0}button{background-color:transparent;background-image:none}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}ul{list-style:none;margin:0;padding:0}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}body{font-family:inherit;line-height:inherit}*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}img{border-style:solid}button,[role=button]{cursor:pointer}h1,h2,h3,h4,h5{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button{padding:0;line-height:inherit;color:inherit}pre,code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}img,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}.prose{color:#374151;max-width:65ch}.prose a{color:#111827;text-decoration:underline;font-weight:500}.prose ul>li{position:relative;padding-left:1.75em}.prose ul>li::before{content:"";position:absolute;background-color:#d1d5db;border-radius:50%;width:.375em;height:.375em;top:.6875em;left:.25em}.prose blockquote{font-weight:500;font-style:normal;color:#111827;border-left-width:.25rem;border-left-color:#e5e7eb;quotes:"“" "”" "‘" "’";margin-top:1.6em;margin-bottom:1.6em;padding-left:1em}.prose blockquote p:last-of-type::after{content:close-quote}.prose h1{color:#111827;font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111}.prose h2{color:#111827;font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333}.prose h3{color:#111827;font-weight:600;font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose h4{color:#111827;font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.prose code{color:#111827;font-weight:600;font-size:.875em;background-color:#f3f4f6}.prose a code{color:#111827}.prose pre{color:#e5e7eb;background-color:#1f2937;overflow-x:auto;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding-top:.8571429em;padding-right:1.1428571em;padding-bottom:.8571429em;padding-left:1.1428571em}.prose pre code{background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:400;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose pre code::before{content:none}.prose pre code::after{content:none}.prose{font-size:1rem;line-height:1.75}.prose p{margin-top:1.25em;margin-bottom:1.25em}.prose img{margin-top:2em;margin-bottom:2em}.prose video{margin-top:2em;margin-bottom:2em}.prose h2 code{font-size:.875em}.prose h3 code{font-size:.9em}.prose ul{margin-top:1.25em;margin-bottom:1.25em}.prose li{margin-top:.5em;margin-bottom:.5em}.prose>ul>li p{margin-top:.75em;margin-bottom:.75em}.prose>ul>li>*:first-child{margin-top:1.25em}.prose>ul>li>*:last-child{margin-bottom:1.25em}.prose ul ul{margin-top:.75em;margin-bottom:.75em}.prose h2+*{margin-top:0}.prose h3+*{margin-top:0}.prose h4+*{margin-top:0}.prose>:first-child{margin-top:0}.prose>:last-child{margin-bottom:0}.prose h2,.prose h3,.prose h4{scroll-margin-top:8rem}.dark .dark\:prose-dark{color:#d1d5db}.dark .dark\:prose-dark blockquote{border-left-color:#374151;color:#d1d5db}.dark .dark\:prose-dark a{color:#d1d5db}.dark .dark\:prose-dark code{background-color:#1f2937;color:#d1d5db}.dark .dark\:prose-dark h2,.dark .dark\:prose-dark h3,.dark .dark\:prose-dark h4{color:#f3f4f6;scroll-margin-top:8rem}.dark .dark\:prose-dark ul li:before{background-color:#6b7280}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.25rem*var(--tw-space-x-reverse));margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)))}.bg-white{--tw-bg-opacity: 1;background-color:rgba(255, 255, 255, var(--tw-bg-opacity))}.bg-gray-800{--tw-bg-opacity: 1;background-color:rgba(31, 41, 55, var(--tw-bg-opacity))}.bg-yellow-300{--tw-bg-opacity: 1;background-color:rgba(252, 211, 77, var(--tw-bg-opacity))}.bg-pink-600{--tw-bg-opacity: 1;background-color:rgba(219, 39, 119, var(--tw-bg-opacity))}.hover\:bg-transparent:hover{background-color:transparent}.dark .dark\:bg-gray-800{--tw-bg-opacity: 1;background-color:rgba(31, 41, 55, var(--tw-bg-opacity))}.dark .dark\:bg-gray-900{--tw-bg-opacity: 1;background-color:rgba(17, 24, 39, var(--tw-bg-opacity))}.bg-bottom{background-position:bottom}.bg-center{background-position:center}.bg-no-repeat{background-repeat:no-repeat}.bg-repeat-y{background-repeat:repeat-y}.bg-0{background-size:0%}.bg-70{background-size:70%}.hover\:bg-100:hover{background-size:100%}.border-gray-100{--tw-border-opacity: 1;border-color:rgba(243, 244, 246, var(--tw-border-opacity))}.border-gray-200{--tw-border-opacity: 1;border-color:rgba(229, 231, 235, var(--tw-border-opacity))}.border-pink-600{--tw-border-opacity: 1;border-color:rgba(219, 39, 119, var(--tw-border-opacity))}.dark .dark\:border-gray-800{--tw-border-opacity: 1;border-color:rgba(31, 41, 55, var(--tw-border-opacity))}.rounded-md{border-radius:.375rem}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-t-4{border-top-width:4px}.border-t{border-top-width:1px}.border-b{border-bottom-width:1px}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.font-light{font-weight:300}.h-5{height:1.25rem}.h-24{height:6rem}.h-80{height:20rem}.h-screen{height:100vh}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.my-3{margin-top:.75rem;margin-bottom:.75rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.mt-3{margin-top:.75rem}.mb-3{margin-bottom:.75rem}.mt-4{margin-top:1rem}.mb-4{margin-bottom:1rem}.mt-6{margin-top:1.5rem}.mb-8{margin-bottom:2rem}.mt-12{margin-top:3rem}.mb-12{margin-bottom:3rem}.max-w-none{max-width:none}.max-w-full{max-width:100%}.max-w-screen-xl{max-width:1280px}.min-w-32{min-width:8rem}.dark .dark\:opacity-10{opacity:.1}.overflow-y-auto{overflow-y:auto}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.px-8{padding-left:2rem;padding-right:2rem}.py-12{padding-top:3rem;padding-bottom:3rem}.pt-1{padding-top:.25rem}.pb-12{padding-bottom:3rem}.pb-24{padding-bottom:6rem}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.top-0{top:0px}.bottom-0{bottom:0px}.left-0{left:0px}.right-10{right:2.5rem}.bottom-10{bottom:2.5rem}*{--tw-shadow: 0 0 #0000}.shadow{--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}*{--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgba(59, 130, 246, 0.5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000}.ring-0{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.text-center{text-align:center}.text-white{--tw-text-opacity: 1;color:rgba(255, 255, 255, var(--tw-text-opacity))}.text-gray-300{--tw-text-opacity: 1;color:rgba(209, 213, 219, var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity: 1;color:rgba(156, 163, 175, var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity: 1;color:rgba(107, 114, 128, var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity: 1;color:rgba(31, 41, 55, var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity: 1;color:rgba(17, 24, 39, var(--tw-text-opacity))}.text-pink-500{--tw-text-opacity: 1;color:rgba(236, 72, 153, var(--tw-text-opacity))}.text-pink-600{--tw-text-opacity: 1;color:rgba(219, 39, 119, var(--tw-text-opacity))}.hover\:text-white:hover{--tw-text-opacity: 1;color:rgba(255, 255, 255, var(--tw-text-opacity))}.hover\:text-pink-600:hover{--tw-text-opacity: 1;color:rgba(219, 39, 119, var(--tw-text-opacity))}.dark .dark\:text-white{--tw-text-opacity: 1;color:rgba(255, 255, 255, var(--tw-text-opacity))}.dark .dark\:text-gray-300{--tw-text-opacity: 1;color:rgba(209, 213, 219, var(--tw-text-opacity))}.dark .dark\:text-pink-500{--tw-text-opacity: 1;color:rgba(236, 72, 153, var(--tw-text-opacity))}.dark .dark\:hover\:text-pink-400:hover{--tw-text-opacity: 1;color:rgba(244, 114, 182, var(--tw-text-opacity))}.underline{text-decoration:underline}.w-24{width:6rem}.w-full{width:100%}.z-20{z-index:20}.z-40{z-index:40}.z-50{z-index:50}.gap-4{gap:1rem}.gap-8{gap:2rem}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.transform{--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-105:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05}.rotate-180{--tw-rotate: 180deg}.translate-y-0{--tw-translate-y: 0px}.translate-y-full{--tw-translate-y: 100%}.transition{transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.delay-100{transition-delay:100ms}.delay-300{transition-delay:300ms}.delay-500{transition-delay:500ms}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,100%{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8, 0, 1, 1)}50%{transform:none;animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}}@media(min-width: 640px){.sm\:space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}}@media(min-width: 640px){.sm\:bg-yellow-200{--tw-bg-opacity: 1;background-color:rgba(253, 230, 138, var(--tw-bg-opacity))}}@media(min-width: 640px){.dark .sm\:dark\:bg-gray-700{--tw-bg-opacity: 1;background-color:rgba(55, 65, 81, var(--tw-bg-opacity))}}@media(min-width: 640px){.sm\:border-0{border-width:0px}}@media(min-width: 640px){.sm\:flex{display:flex}}@media(min-width: 640px){.sm\:hidden{display:none}}@media(min-width: 640px){.sm\:flex-nowrap{flex-wrap:nowrap}}@media(min-width: 640px){.sm\:justify-self-start{justify-self:start}}@media(min-width: 640px){.sm\:order-2{order:2}}@media(min-width: 640px){.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media(min-width: 640px){.sm\:text-2xl{font-size:1.5rem;line-height:2rem}}@media(min-width: 640px){.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media(min-width: 640px){.sm\:text-5xl{font-size:3rem;line-height:1}}@media(min-width: 640px){.sm\:text-6xl{font-size:3.75rem;line-height:1}}@media(min-width: 640px){.sm\:mt-0{margin-top:0px}}@media(min-width: 640px){.sm\:mb-0{margin-bottom:0px}}@media(min-width: 640px){.sm\:mb-3{margin-bottom:.75rem}}@media(min-width: 640px){.sm\:mb-24{margin-bottom:6rem}}@media(min-width: 640px){.sm\:px-0{padding-left:0px;padding-right:0px}}@media(min-width: 640px){.sm\:px-20{padding-left:5rem;padding-right:5rem}}@media(min-width: 640px){.sm\:py-24{padding-top:6rem;padding-bottom:6rem}}@media(min-width: 640px){.sm\:py-36{padding-top:9rem;padding-bottom:9rem}}@media(min-width: 640px){.sm\:pb-0{padding-bottom:0px}}@media(min-width: 640px){.sm\:pl-3{padding-left:.75rem}}@media(min-width: 640px){.sm\:pt-12{padding-top:3rem}}@media(min-width: 640px){.sm\:pb-24{padding-bottom:6rem}}@media(min-width: 640px){.sm\:pt-36{padding-top:9rem}}@media(min-width: 640px){.sm\:text-left{text-align:left}}@media(min-width: 640px){.sm\:w-auto{width:auto}}@media(min-width: 640px){.sm\:w-1\/3{width:33.333333%}}@media(min-width: 640px){.sm\:w-5\/12{width:41.666667%}}@media(min-width: 640px){.sm\:w-6\/12{width:50%}}@media(min-width: 640px){.sm\:w-10\/12{width:83.333333%}}@media(min-width: 640px){.sm\:grid-cols-5{grid-template-columns:repeat(5, minmax(0, 1fr))}}@media(min-width: 640px){.sm\:transition-none{transition-property:none}}@media(min-width: 768px){.md\:hidden{display:none}}@media(min-width: 768px){.md\:h-auto{height:auto}}@media(min-width: 768px){.md\:p-0{padding:0px}}@media(min-width: 768px){.md\:pr-4{padding-right:1rem}}@media(min-width: 768px){.md\:relative{position:relative}}@media(min-width: 768px){.md\:w-80{width:20rem}}@media(min-width: 768px){.md\:z-auto{z-index:auto}}@media(min-width: 768px){.md\:translate-y-0{--tw-translate-y: 0px}}
diff --git a/docs/client.js b/docs/client.js
new file mode 100644
index 00000000..aa08d95c
--- /dev/null
+++ b/docs/client.js
@@ -0,0 +1 @@
+!function(e){var t={};function __webpack_require__(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,__webpack_require__),r.l=!0,r.exports}__webpack_require__.m=e,__webpack_require__.c=t,__webpack_require__.d=function(e,t,n){__webpack_require__.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},__webpack_require__.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},__webpack_require__.t=function(e,t){if(1&t&&(e=__webpack_require__(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(__webpack_require__.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)__webpack_require__.d(n,r,function(t){return e[t]}.bind(null,r));return n},__webpack_require__.n=function(e){var t=e&&e.__esModule?function getDefault(){return e.default}:function getModuleExports(){return e};return __webpack_require__.d(t,"a",t),t},__webpack_require__.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},__webpack_require__.p="",__webpack_require__(__webpack_require__.s=4)}([function(e,t){},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){"use strict";n.r(t);const r=/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*))(?:Z|(\+|-)([\d|:]*))?$/,i=/^\/Date\((d|-|.*)\)[\/|\\]$/;function dateParser(e,t){if("string"==typeof t){let e=r.exec(t);if(e)return new Date(t);if(e=i.exec(t),e){const t=e[1].split(/[-+,.]/);return new Date(t[0]?+t[0]:0-+t[1])}}return t}function deserialize(e){return JSON.parse(e,dateParser)}function fragment({children:e}){return e}function element_element(e,t,...n){n=function flattenChildren(e){return e=[].concat.apply([],e).map(e=>null!=e&&e),[].concat.apply([],e)}(n),"textarea"===e&&(n=[n.join("")]);const r={...t,children:n};return"element"===e&&(e=r.tag||fragment,delete r.tag),"function"==typeof e&&void 0!==e.render?{type:e,attributes:r,children:null}:{type:e,attributes:r,children:n}}function isFalse(e){return null==e||!1===e||"object"==typeof e&&(void 0===e.type||null===e.type||!1===e.type)}function isText(e){return void 0===e.children}function extractLocation(e){let[t,n]=e.split("#"),[r,i]=t.split("?");"/"!==r&&r.endsWith("/")&&(r=r.substring(0,r.length-1));let l=r;i&&(l+="?"+i);let a=l;return n&&(a+="#"+n),void 0===n&&(n=""),{path:r,search:i,url:l,urlWithHash:a,hash:n}}function extractParamValue(e){return"true"===e||"false"!==e&&(e?decodeURIComponent(e.replace(/\+/g," ")):"")}function erase(e){e.type=!1,delete e.attributes,delete e.children}function camelize(e){return e.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g,(e,t)=>t.toUpperCase())}function kebabize(e){return e.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase()}function serializeParam(e){return e&&void 0!==e.toJSON?e.toJSON():e}function serializeSearch(e){return Object.keys(e).map(t=>!1===e[t]||e[t]?`${t}=${e[t]}`:"").filter(e=>!!e).join("&")}let l=[{transform:function objectable_transform({node:e}){if(function objectable_match(e){return e&&void 0!==e.attributes}(e))for(const t in e.attributes)if(t.startsWith("on")&&"object"==typeof e.attributes[t]){const n=e.attributes.source,r=e.attributes[t];e.attributes[t]=function(){Object.assign(n,r)}.bind(n)}},client:!0},{transform:function parameterizable_transform({node:e,router:t,params:n}){if(!function parameterizable_match(e){return e&&e.attributes&&(e.attributes.params||e.attributes.path)}(e))return;let r;if(e.attributes.params){r={};for(const t in e.attributes.params)r[t]=serializeParam(e.attributes.params[t])}else r=n;const i=serializeSearch(r),l=e.attributes.path||t.path;e.attributes.href=l+(i?"?":"")+i,delete e.attributes.path,delete e.attributes.params},client:!0,server:!0},{transform:function anchorable_transform({node:e,router:t}){if(!function anchorable_match(e){return e&&"a"===e.type&&e.attributes.href&&e.attributes.href.startsWith("/")&&!e.attributes.target}(e))return;const n=e.attributes.onclick;e.attributes.onclick=({event:r})=>{r.preventDefault(),t.url=e.attributes.href,n&&setTimeout(()=>{n({...e.attributes,event:r})},0)}},client:!0},{load:function load({router:e}){e._routes={},e._oldSegments?(e._oldSegments=e._newSegments,e._newSegments={}):(e._oldSegments={},e._newSegments={})},transform:function routable_transform({node:e,depth:t,router:n}){if(!function match(e){return e&&void 0!==e.attributes&&void 0!==e.attributes.route}(e))return;const r=t.slice(0,-1).join(".");if(void 0!==n._routes[r])erase(e);else{const t=function routeMatches(e,t){let{path:n}=extractLocation(e);const r=n.split("/"),i=t.split("/"),l={},a=Math.max(r.length,i.length);let s=!1;for(let e=0;e<a;e++)if(!s)if("*"===i[e])s=!0;else if(i[e]&&i[e].startsWith(":")){l[i[e].replace(":","")]=extractParamValue(r[e])}else if(i[e]!==r[e])return!1;return l}(n.url,e.attributes.route);t?(n._routes[r]=!0,n._newSegments[r]=t,Object.assign(n._segments,t)):erase(e)}},client:!0,server:!0},{transform:function datable_transform({node:e}){if(function datable_match(e){return e&&void 0!==e.attributes}(e)){e.attributes.data=e.attributes.data||{};for(const t in e.attributes)if(t.startsWith("data-")){const n=camelize(t.slice(5));e.attributes.data[n]=e.attributes[t]}for(const t in e.attributes.data){const n="data-"+kebabize(t);e.attributes[n]=e.attributes.data[t]}}},client:!0,server:!0},{transform:function bindable_transform({node:e,environment:t}){if(!function bindable_match(e){return void 0!==e&&void 0!==e.attributes&&void 0!==e.attributes.bind&&void 0!==e.attributes.source}(e))return;const n=e.attributes.source;"textarea"===e.type?e.children=[n[e.attributes.bind]]:"input"===e.type&&"checkbox"===e.attributes.type?e.attributes.checked=n[e.attributes.bind]:e.attributes.value=n[e.attributes.bind],e.attributes.name=e.attributes.name||e.attributes.bind,t.client&&function attachEvent(e){const t=e.attributes.source;let n="oninput",r="value";"checkbox"===e.attributes.type||"radio"===e.attributes.type?(n="onclick",r="checked"):"input"!==e.type&&"textarea"!==e.type&&(n="onchange");const i=e.attributes[n];e.attributes[n]=({event:n,value:l})=>{"checked"==r?t[e.attributes.bind]=n.target[r]:!0===t[e.attributes.bind]||!1===t[e.attributes.bind]?t[e.attributes.bind]=n?"true"==n.target[r]:l:"number"==typeof t[e.attributes.bind]?t[e.attributes.bind]=parseFloat(n?n.target[r]:l)||0:t[e.attributes.bind]=n?n.target[r]:l,void 0!==i&&setTimeout(()=>{i({...e.attributes,event:n,value:l})},0)}}(e)},client:!0,server:!0}];function loadPlugins(e){for(const t of l)t.load&&t.load(e.context);return l}async function generateBranch(e,t,n,r){if(function transformNodes(e,t,n){for(const r of l)r.transform({...e.context,node:t,depth:n})}(r,t,n),isFalse(t))e.children.push(!1);else if(function isClass(e){return"function"==typeof e.type&&e.type.prototype&&"function"==typeof e.type.prototype.render}(t)){const i=t.attributes.key?t.attributes.key:function generateKey(e){return 1===e.length?"application":"n-"+e.join("-")}(n)+(t.attributes.route?r.context.router.url:"");if(r.context.environment.client&&r.context.router._changed&&t.attributes&&t.attributes.route&&"ssg"!==r.context.environment.mode){const e=n.slice(0,-1).join("."),t=r.context.router._newSegments[e];if(t){const n=r.context.router._oldSegments[e];for(const e in t)n[e]!==t[e]&&delete r.memory[i]}}const l=r.instances[i]||new t.type(r);let a;l._self.persistent=!!t.attributes.persistent,l._self.key=i,l._attributes=t.attributes,l._scope=r,r.memory&&(a=r.memory[i],a&&(l._self.initiated=!0,Object.assign(l,a),delete r.memory[i]));let s=!1;l._self.terminated&&(s=!0,l._self.terminated=!1);const o=void 0===r.instances[i];r.instances[i]=l,o&&(void 0===a&&(l.prepare&&l.prepare(),r.context.environment.server?(l.initiate&&await l.initiate(),l._self.initiated=!0):r.initiationQueue.push(l)),s=!0),r.hydrationQueue&&(s?r.hydrationQueue.push(l):1==l._self.initiated&&l.update&&l.update()),r.context.environment.client&&r.renewalQueue.push(l);const c=l.render();c&&c.type&&(c.instance=l),t.children=[].concat(c);for(let i=0;i<t.children.length;i++)await generateBranch(e,t.children[i],[...n,i],r)}else if(function isFunction(e){return"function"==typeof e.type}(t)){const i=t.type.name?r.generateContext(t.attributes):t.attributes,l=t.type(i);t.children=[].concat(l);for(let i=0;i<t.children.length;i++)await generateBranch(e,t.children[i],[...n,i],r)}else if(t.type){const i={type:t.type,attributes:t.attributes||{},instance:t.instance,children:[]};if(t.children)for(let e=0;e<t.children.length;e++)await generateBranch(i,t.children[e],[...n,e],r);e.children.push(i)}else e.children.push(t)}async function generateTree(e,t){const n={type:"div",attributes:{id:"application"},children:[]};return await generateBranch(n,e,[0],t),n}const a={};var s=a;const o={set(e,t,n){const r=serializeParam(n);e[t]=r;const i=serializeSearch(e);return _.url=_.path+(i?"?":"")+i,!0},get:(e,t)=>!1!==e[t]&&(!1!==s[t]&&(e[t]||s[t]||""))},c={...window.params};delete window.params;const u=new Proxy(c,o);function updateParams(e){!function resetSegments(){for(const e in a)delete a[e]}();const t=function getQueryStringParams(e){const[t,n]=e.split("?");return n?n.split("&").reduce((e,t)=>{let[n,r]=t.split("=");return e[n]=extractParamValue(r),e},{}):{}}(e);for(const e of Object.keys({...t,...c}))c[e]=t[e];return u}var d=u;const m={...window.environment,client:!0,server:!1};Object.freeze(m);var h=m;const p={...window.worker};p.online=navigator.onLine,delete window.worker;const f=Object.freeze([]),b={set:(e,t,n)=>(e[t]=n,S.update(),!0),get:(e,t)=>e[t]||f};p.queues=new Proxy({},b);const g=new Proxy(p,{set:(e,t,n)=>(e[t]!==n&&(e[t]=n,S.update()),!0)});if(p.enabled){window.addEventListener("beforeinstallprompt",(function(e){e.preventDefault(),g.installation=e})),async function register(){if("serviceWorker"in navigator){const e="/service-worker.js";try{g.registration=await navigator.serviceWorker.register(e,{scope:"/"})}catch(e){console.log(e)}}}()}window.addEventListener("online",()=>{g.online=!0,"ssg"===h.mode?_._update(_.url):g.responsive=!0}),window.addEventListener("offline",()=>{g.online=!1});var x=g;function windowEvent(e){clearTimeout(null),setTimeout(()=>{const t=new Event("nullstack."+e);window.dispatchEvent(t)},0)}const y={...window.page,event:"nullstack.page"};delete window.page;var w=new Proxy(y,{set(e,t,n){"title"===t&&(document.title=n);const r=Reflect.set(...arguments);return"title"===t&&windowEvent("page"),S.update(),r}});function _defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}let v=null;var _=new class router_Router{constructor(){_defineProperty(this,"event","nullstack.router"),_defineProperty(this,"_changed",!1),_defineProperty(this,"_segments",s);const{hash:e,url:t}=extractLocation(window.location.pathname+window.location.search);this._url=t,this._hash=e}async _popState(){const{urlWithHash:e}=extractLocation(window.location.pathname+window.location.search);await this._update(e,!1)}async _update(e,t){const{url:n,path:r,hash:i,urlWithHash:l}=extractLocation(e);clearTimeout(v),v=setTimeout(async()=>{if(w.status=200,"ssg"===h.mode){x.fetching=!0;const e="/index.json",t="/"===r?e:r+e;try{const e=await fetch(t),r=await e.json(n);S.memory=r.instances;for(const e in r.page)w[e]=r.page[e];x.responsive=!0}catch(e){x.responsive=!1}x.fetching=!1}t&&history.pushState({},document.title,l),this._url=n,this._hash=i,this._changed=!0,updateParams(n),S.update(),windowEvent("router")},0)}async _redirect(e){if(e.startsWith("http"))return window.location.href=e;const{url:t,hash:n,urlWithHash:r}=extractLocation(e);t===this._url&&this._hash===n||await this._update(r,!0),n||window.scroll(0,0)}get url(){return this._url}set url(e){this._redirect(e)}get path(){return extractLocation(this._url).path}set path(e){this._redirect(e+window.location.search)}};function anchorableElement(e){const t=e.querySelectorAll('a[href^="/"]:not([target])');for(const e of t)e.onclick=t=>{t.preventDefault(),_.url=e.getAttribute("href")}}function render(e,t){if(isFalse(e)||"head"===e.type)return document.createComment("");if(isText(e))return document.createTextNode(e);const n=t&&t.svg||"svg"===e.type;let r;r=n?document.createElementNS("http://www.w3.org/2000/svg",e.type):document.createElement(e.type),e.instance&&(e.instance._self.element=r);for(let t in e.attributes)if("html"===t)r.innerHTML=e.attributes[t],anchorableElement(r);else if(t.startsWith("on")){const n=t.replace("on",""),i="_event."+n;e[i]=n=>{!0!==e.attributes.default&&n.preventDefault(),e.attributes[t]({...e.attributes,event:n})},r.addEventListener(n,e[i])}else{const n=typeof e.attributes[t];"object"!==n&&"function"!==n&&("value"!=t&&!0===e.attributes[t]?r.setAttribute(t,""):("value"==t||!1!==e.attributes[t]&&null!==e.attributes[t]&&void 0!==e.attributes[t])&&r.setAttribute(t,e.attributes[t]))}if(!e.attributes.html){for(let t=0;t<e.children.length;t++){const i=render(e.children[t],{svg:n});r.appendChild(i)}"select"==e.type&&(r.value=e.attributes.value)}return r}function rerender(e,t,n){if(t=void 0===t?S.virtualDom:t,(n=void 0===n?S.nextVirtualDom:n).instance&&(n.instance._self.element=e),!S.hydrated&&e)for(const t of e.childNodes)t.tagName&&"textarea"==t.tagName.toLowerCase()&&0==t.childNodes.length&&t.appendChild(document.createTextNode("")),8===t.COMMENT_NODE&&"#"===t.textContent&&e.removeChild(t);if(!isFalse(t)||!isFalse(n)){if((isFalse(t)||isFalse(n))&&t!=n){const t=render(n);return e.replaceWith(t)}if("head"!=t.type||"head"!=n.type){if("head"==t.type||"head"==n.type){const t=render(n);return e.replaceWith(t)}if(t.type!==n.type){const t=render(n);return e.replaceWith(t)}if(isText(t)&&isText(n))t!=n&&(e.nodeValue=n);else if(t.type===n.type){const r=Object.keys({...t.attributes,...n.attributes});for(const i of r)if("html"===i)n.attributes[i]!==t.attributes[i]&&(e.innerHTML=n.attributes[i],anchorableElement(e));else if("checked"===i)n.attributes[i]!==e.value&&(e.checked=n.attributes[i]);else if("value"===i)n.attributes[i]!==e.value&&(e.value=n.attributes[i]);else if(i.startsWith("on")){const r=i.replace("on",""),l="_event."+r;e.removeEventListener(r,t[l]),n.attributes[i]&&(n[l]=e=>{!0!==n.attributes.default&&e.preventDefault(),n.attributes[i]({...n.attributes,event:e})},e.addEventListener(r,n[l]))}else{const r=typeof n.attributes[i];"object"!==r&&"function"!==r&&(void 0!==t.attributes[i]&&void 0===n.attributes[i]?e.removeAttribute(i):t.attributes[i]!==n.attributes[i]&&("value"!=i&&!1===n.attributes[i]||null===n.attributes[i]||void 0===n.attributes[i]?e.removeAttribute(i):"value"!=i&&!0===n.attributes[i]?e.setAttribute(i,""):e.setAttribute(i,n.attributes[i])))}if(n.attributes.html)return;const i=Math.max(t.children.length,n.children.length);if(n.children.length>t.children.length){for(let r=0;r<t.children.length;r++)rerender(e.childNodes[r],t.children[r],n.children[r]);for(let r=t.children.length;r<n.children.length;r++){const t=render(n.children[r]);e.appendChild(t)}}else if(t.children.length>n.children.length){for(let r=0;r<n.children.length;r++)rerender(e.childNodes[r],t.children[r],n.children[r]);for(let r=t.children.length-1;r>=n.children.length;r--)e.removeChild(e.childNodes[r])}else for(let r=i-1;r>-1;r--){if(void 0===e.childNodes[r])return void console.error(`Virtual DOM does not match the DOM. Expected tag ${t.type} but instead found undefined. This error usually happens because of an invalid HTML hierarchy like nested forms or tables without tr.`);rerender(e.childNodes[r],t.children[r],n.children[r])}"textarea"==n.type&&(e.value=n.children.join("")),"select"==n.type&&(e.value=n.attributes.value)}}}}const k={set(e,t,n){return isProxyable(t,n)?(n._isProxy=!0,e[t]=new Proxy(n,this)):e[t]=n,t.startsWith("_")||S.update(),!0},get(e,t){return"_isProxy"===t||Reflect.get(...arguments)}};function isProxyable(e,t){return!(e.startsWith("_")||null===t||"object"!=typeof t||void 0!==t._isProxy||t instanceof Date)}function generateObjectProxy(e,t){if(isProxyable(e,t)){if("object"==typeof t)for(const e of Object.keys(t))t[e]=generateObjectProxy(e,t[e]);return new Proxy(t,k)}return t}const C={},P=deserialize(JSON.stringify(window.context));for(const e of Object.keys(P))C[e]=generateObjectProxy(e,P[e]);const j={set:(e,t,n)=>(C[t]=generateObjectProxy(t,n),S.update(),!0),get:(e,t)=>"_isProxy"===t||(void 0===e[t]?C[t]:e[t])};function generateContext(e){return new Proxy(e,j)}var L=C;const M={initialized:!1,hydrated:!1,initializer:null,instances:{}};L.instances=M.instances,M.initiationQueue=[],M.renewalQueue=[],M.hydrationQueue=[],M.virtualDom={},M.selector=null,M.events={},M.generateContext=generateContext,M.renderQueue=null,M.update=async function(){M.initialized&&(clearInterval(M.renderQueue),M.renderQueue=setTimeout(async()=>{const e=M;e.context=L,e.plugins=loadPlugins(e),M.initialized=!1,M.initiationQueue=[],M.renewalQueue=[],M.hydrationQueue=[],M.nextVirtualDom=await generateTree(M.initializer(),e),rerender(M.selector),M.virtualDom=M.nextVirtualDom,M.nextVirtualDom=null,M.processLifecycleQueues()},16))},M.processLifecycleQueues=async function(){M.initialized||(M.initialized=!0,M.hydrated=!0);const e=M.initiationQueue,t=M.hydrationQueue;for(const t of e)t.initiate&&await t.initiate(),t._self.initiated=!0;e.length&&M.update();for(const e of t)e.hydrate&&await e.hydrate(),e._self.hydrated=!0;t.length&&M.update();for(const e in M.instances){const t=M.instances[e];M.renewalQueue.includes(t)||t._self.terminated||(t.terminate&&await t.terminate(),t._self.persistent?t._self.terminated=!0:delete M.instances[e])}_._changed=!1};var S=M;var z={get(e,t){var n,r;if("_isProxy"===t)return!0;if(!(null!==(n=e[t])&&void 0!==n&&null!==(r=n.name)&&void 0!==r&&r.startsWith("_")||t.startsWith("_")||"function"!=typeof e[t]||"constructor"===t)){const{[t]:n}={[t]:n=>{const r=generateContext({...e._attributes,...n,self:e._self});return e[t](r)}};return n}return Reflect.get(...arguments)},set(e,t,n){var r;return null!=n&&null!==(r=n.name)&&void 0!==r&&r.startsWith("_")||t.startsWith("_")?e[t]=n:(e[t]=generateObjectProxy(t,n),S.update()),!0}};n(0);const T={...window.project};delete window.project,Object.freeze(T);var O=T;const A={...window.settings};delete window.settings,Object.freeze(A);var q=A;function client_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}L.page=w,L.router=_,L.settings=q,L.worker=x,L.params=d,L.project=O,L.environment=window.environment,S.memory=deserialize(JSON.stringify(window.instances));const H=S;H.generateContext=generateContext,H.context=L,S.plugins=loadPlugins(H);class client_Nullstack{static start(e){return setTimeout(async()=>{if(window.addEventListener("popstate",()=>{_._popState()}),S.routes={},updateParams(_.url),S.currentInstance=null,S.initializer=()=>element_element(e),S.selector=document.querySelector("#application"),"spa"===h.mode){H.plugins=loadPlugins(H),"function"==typeof L.start&&await L.start(L),L.environment=h,S.virtualDom=await generateTree(S.initializer(),H);const e=render(S.virtualDom);S.selector.replaceWith(e),S.selector=e}else S.virtualDom=await generateTree(S.initializer(),H),L.environment=h,H.plugins=loadPlugins(H),"function"==typeof L.start&&await L.start(L),S.nextVirtualDom=await generateTree(S.initializer(),H),rerender(S.selector),S.virtualDom=S.nextVirtualDom,S.nextVirtualDom=null;S.processLifecycleQueues(),delete window.context},0),generateContext({})}constructor(){client_defineProperty(this,"_self",{prerendered:!1,initiated:!1,hydrated:!1,terminated:!1});const e=function getProxyableMethods(e){let t=new Set,n=e;do{Object.getOwnPropertyNames(n).map(e=>t.add(e))}while((n=Object.getPrototypeOf(n))&&n!=Object.prototype);return[...t.keys()].filter(t=>"constructor"!==t&&"function"==typeof e[t])}(this),t=new Proxy(this,z);for(const n of e)this[n]=this[n].bind(t);return t}render(){return!1}}client_defineProperty(client_Nullstack,"element",element_element),client_defineProperty(client_Nullstack,"invoke",(function invoke(e,t){return async function _invoke(n={}){var r;let i;x.fetching=!0,Object.isFrozen(x.queues[e])?x.queues[e]=[n]:x.queues[e]=[...x.queues[e],n];const l=t===this.constructor.hash?t:`${t}-${this.constructor.hash}`;let a=`${x.api}/nullstack/${l}/${e}.json`;try{const e=await fetch(a,{method:"POST",headers:x.headers,mode:"cors",cache:"no-cache",credentials:"same-origin",redirect:"follow",referrerPolicy:"no-referrer",body:JSON.stringify(n||{})});w.status=e.status;i=deserialize(await e.text()).result,x.responsive=!0}catch(e){x.responsive=!1}return 1===(null===(r=x.queues[e])||void 0===r?void 0:r.length)?delete x.queues[e]:x.queues[e]=x.queues[e].filter(e=>e!==n),x.fetching=!!Object.keys(x.queues).length,i}})),client_defineProperty(client_Nullstack,"fragment",fragment),client_defineProperty(client_Nullstack,"use",function usePlugins(e){return async(...t)=>{l=[...new Set([...t.flat(),...l])].filter(t=>t[e])}}("client"));var D=client_Nullstack;class GoogleAnalytics_GoogleAnalytics extends D{hydrate({router:e,page:t,id:n}){function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config",n,{page_title:t.title,page_path:e.url}),window.addEventListener(t.event,()=>{gtag("event","page_view",{page_title:t.title,page_path:e.url})})}render({id:e,self:t}){const n="https://www.googletagmanager.com";return t.hydrated?D.element("script",{async:!0,src:`${n}/gtag/js?id=${e}`}):D.element("head",null,D.element("link",{rel:"preconnect",href:n}))}}!function GoogleAnalytics_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}(GoogleAnalytics_GoogleAnalytics,"hash","f6eb2002bffbe4d1d528bc45653ff256");var B=GoogleAnalytics_GoogleAnalytics;n(1),n(2);function Close({size:e}){return D.element("svg",{width:e,height:e,viewBox:"0 0 482 482"},D.element("path",{d:"M316.552 203H163.552C149 203 138 212 149 228C160 244 190.5 278 218.052 298C234.5 309.94 250.552 306.304 260.552 298C279.218 282.5 319.352 246.8 330.552 228C341.752 209.2 325.885 203.5 316.552 203Z",fill:"currentColor"}))}function Article_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}class Article_Article extends D{constructor(...e){super(...e),Article_defineProperty(this,"title",""),Article_defineProperty(this,"html",""),Article_defineProperty(this,"getArticleByKey",D.invoke("getArticleByKey","a4edd2952897ef3f7e238f0297a10258")),Article_defineProperty(this,"getArticlesList",D.invoke("getArticlesList","a4edd2952897ef3f7e238f0297a10258"))}async initiate({project:e,page:t,locale:n,params:r}){const i=await this.getArticleByKey({key:r.slug,locale:n});Object.assign(this,i);const{topics:l}=await this.getArticlesList({locale:n});this.topics=l,t.title=`${i.title} - ${e.name}`,t.description=i.description,i.status&&(t.status=404)}renderLink({title:e,href:t,router:n}){const r=n.url===t;return D.element("a",{href:t,class:(r?"text-pink-500 dark:text-pink-500":"text-gray-500 dark:text-gray-300")+" hover:text-pink-600 dark:hover:text-pink-400 block w-full",source:this,onclick:{expanded:!0}}," ",e," ")}renderTopic({title:e,links:t}){const n=this.renderLink;return D.element("div",{class:"mb-3"},D.element("h5",null," ",e," "),D.element("nav",null,t.map(e=>D.element(n,e))))}render(){var e;const t=this.renderTopic;return D.element("section",{class:"max-w-screen-xl mx-auto px-4 flex flex-wrap sm:flex-nowrap py-12 sm:py-24"},D.element("button",{source:this,onclick:{expanded:!this.expanded},class:"transition delay-300 fixed bottom-10 right-10 bg-pink-600 text-white shadow-xl rounded-full py-2 px-4 z-50 md:hidden ring-0 transform "+(this.expanded?"rotate-180 transform":"")},D.element(Close,{size:20})),D.element("aside",{class:"w-full md:w-80 fixed top-0 left-0 md:relative z-40 md:z-auto bg-white dark:bg-gray-900 h-screen md:h-auto p-4 overflow-y-auto md:p-0 md:pr-4 transform pb-24 sm:pb-0 transition sm:transition-none delay-500 delay-0 "+(this.expanded?"translate-y-0":"translate-y-full md:translate-y-0")},null===(e=this.topics)||void 0===e?void 0:e.map(e=>D.element(t,e))),D.element("article",{class:"w-full pb-24"},D.element("h1",{class:"text-pink-600 text-4xl font-light block mb-8"}," ",this.title," "),D.element("div",{html:this.html,class:"prose dark:prose-dark max-w-none"})))}}Article_defineProperty(Article_Article,"hash","a4edd2952897ef3f7e238f0297a10258");var Z=Article_Article;function Translatable_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}class Translatable_Translatable extends D{constructor(...e){super(...e),Translatable_defineProperty(this,"geti18nByLocale",D.invoke("geti18nByLocale","56b29579668c161418055db93fdd2691"))}async initiate({project:e,page:t,locale:n}){this.locale=n,this.i18n=await this.geti18nByLocale({locale:n}),this.i18n.title&&(t.title=`${this.i18n.title} - ${e.name}`,t.description=this.i18n.description,t.locale=n||"en-US")}update({locale:e}){this.locale!==e&&this.initiate()}}Translatable_defineProperty(Translatable_Translatable,"hash","56b29579668c161418055db93fdd2691");var W=Translatable_Translatable;class Components_Components extends W{prepare({page:e}){e.priority=.3}renderProject({title:e,repository:t}){return D.element("a",{href:t,target:0===t.indexOf("http")&&"_blank",rel:"noopener",class:"block text-pink-600 dark:text-pink-500 border-t border-gray-100 dark:border-gray-800 py-2 mt-2"},e)}renderTopic({title:e,projects:t,tagline:n}){const r=this.renderProject;return D.element("div",{class:"w-full my-6"},D.element("h2",{class:"w-full text-xl sm:text-4xl font-light mb-4"}," ",e," "),n&&D.element("p",{class:"my-3",title:n.title}," ",n.text," "),D.element("nav",{class:"w-full"},t.map(e=>D.element(r,e))))}render(){const e=this.renderTopic;return!!this.i18n&&D.element("section",{class:"max-w-screen-xl mx-auto px-4 flex justify-between items-center flex-wrap py-12 sm:py-24"},D.element("h1",{class:"w-full text-xl sm:text-4xl font-light mb-4"}," ",this.i18n.heading," "),D.element("p",{class:"w-full text-xl"}," ",this.i18n.tagline," "),D.element("p",{class:"w-full prose dark:prose-dark max-w-none",html:this.i18n.contribute}),D.element("div",{class:"w-full"},this.i18n.topics.map(t=>D.element(e,t))))}}!function Components_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}(Components_Components,"hash","2f4773e237a19e3b6c883b2b9685addd");var N=Components_Components;function _extends(){return(_extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function Contributors_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}class Contributors_Contributors extends W{constructor(...e){super(...e),Contributors_defineProperty(this,"documentation",[]),Contributors_defineProperty(this,"packages",[])}async fetchContributors({repository:e}){const t=await fetch(`https://api.github.com/repos/nullstack/${e}/contributors`);return await t.json()}async hydrate(){this.documentation=await this.fetchContributors({repository:"nullstack.github.io"});const e=[...await this.fetchContributors({repository:"nullstack"}),...await this.fetchContributors({repository:"create-nullstack-app"}),...await this.fetchContributors({repository:"create-nullstatic-app"})],t=new Set(e.map(({login:e})=>e));this.packages=[...t].map(t=>e.find(e=>e.login==t))}renderTopic({title:e,paragraphs:t,main:n,children:r}){return D.element("div",{class:"w-full mb-12"},D.element("element",{tag:n?"h1":"h2",class:"text-xl sm:text-4xl font-light mb-4"},e),t&&D.element("div",{class:"text-xl"},t.map(e=>D.element("p",{class:"w-full mb-1",html:e}))),D.element("div",{class:"xl x12"},r))}renderState(){const e=this.renderTopic,{state:t}=this.i18n;return D.element(e,_extends({},t,{main:!0}))}renderRoadmap(){const e=this.renderTopic,{roadmap:t}=this.i18n;return D.element(e,t)}renderCoreContributor({github:e,name:t,role:n,description:r,contribution:i}){return D.element("div",{class:"border border-gray-100 dark:border-gray-800 p-2 mt-2 flex flex-wrap"},D.element("img",{src:`https://github.com/${e}.png`,alt:t,width:"90",height:"90",class:"w-24 h-24 mb-2 sm:mb-0"}),D.element("div",{class:"w-full sm:w-10/12 sm:pl-3"},D.element("h3",null,D.element("a",{href:"https://github.com/"+e,target:"_blank",rel:"noopener",class:"text-pink-600"},t)),D.element("h4",{html:n}),D.element("p",null," ",r," "),D.element("p",null," ",i," ")))}renderCoreTeam(){const e=this.renderCoreContributor,t=this.renderTopic,{core:n}=this.i18n;return D.element(t,n,n.team.map(t=>D.element(e,t)))}renderInstructions(){const e=this.renderTopic,{instructions:t}=this.i18n;return D.element(e,t)}renderContributor({login:e,avatar_url:t,html_url:n}){return D.element("a",{href:n,title:e,target:"_blank",rel:"noopener",class:"ci1"},D.element("img",{src:t,alt:e,width:"90",height:"90",class:"h-24 w-24"}))}renderGithubContributors({title:e,key:t}){const n=this.renderContributor,r=this.renderTopic;return D.element(r,{title:e},D.element("div",{class:"flex justify-start flex-wrap"},this[t].map(e=>D.element(n,e))),D.element("p",{class:"w-full mt-2"},this.i18n.githubCacheWarning))}render(){const e=this.renderInstructions,t=this.renderGithubContributors,n=this.renderCoreTeam,r=this.renderRoadmap,i=this.renderState;return!!this.i18n&&D.element("section",{class:"max-w-screen-xl mx-auto px-4 flex justify-between items-center flex-wrap py-12 sm:py-24"},D.element(i,null),D.element(r,null),D.element(n,null),D.element(t,{title:this.i18n.packages.title,key:"packages"}),D.element(t,{title:this.i18n.documentation.title,key:"documentation"}),D.element(e,null))}}Contributors_defineProperty(Contributors_Contributors,"hash","63bf3ec44cc9e5682171f0dad238d317");var F=Contributors_Contributors;class Documentation_Documentation extends W{hydrate({router:e,page:t}){"pt-BR"===t.locale?e.url="/pt-br/comecando":e.url="/getting-started"}}!function Documentation_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}(Documentation_Documentation,"hash","45cf5090d7d5af44940480cf9ef3dc19");var V=Documentation_Documentation;function GitHub({size:e}){return D.element("svg",{width:e,height:e,viewBox:"0 0 482 482"},D.element("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M241.5 80C150.104 80 76 153.919 76 245.087C76 318.021 123.411 379.912 189.183 401.727C197.46 403.257 200.502 398.145 200.502 393.772C200.502 389.835 200.337 376.823 200.283 363.045C154.214 373.023 144.513 343.581 144.513 343.581C136.977 324.5 126.152 319.416 126.152 319.416C111.133 309.164 127.275 309.383 127.275 309.383C143.883 310.558 152.652 326.386 152.652 326.386C167.424 351.618 191.376 344.319 200.803 340.109C202.283 329.448 206.586 322.149 211.299 318.021C174.549 313.839 135.908 299.678 135.908 236.448C135.908 218.433 142.375 203.699 152.954 192.135C151.227 187.98 145.582 171.196 154.543 148.451C154.543 148.451 168.438 144.023 200.063 165.373C213.273 161.71 227.414 159.878 241.5 159.823C255.559 159.878 269.727 161.71 282.964 165.373C314.562 144.023 328.429 148.451 328.429 148.451C337.446 171.196 331.773 187.98 330.046 192.135C340.652 203.699 347.065 218.433 347.065 236.448C347.065 299.842 308.341 313.812 271.509 317.912C277.456 323.024 282.745 333.084 282.745 348.475C282.745 370.563 282.553 388.332 282.553 393.772C282.553 398.173 285.54 403.312 293.926 401.699C359.644 379.857 407 317.994 407 245.087C407 153.919 332.896 80 241.5 80Z",fill:"currentColor"}),D.element("path",{d:"M138.676 317.01C138.319 317.83 137.004 318.076 135.826 317.502C134.62 316.955 133.962 315.834 134.346 315.014C134.702 314.167 135.99 313.948 137.196 314.495C138.402 315.069 139.087 316.19 138.676 317.01Z",fill:"currentColor"}),D.element("path",{d:"M145.39 324.473C144.595 325.211 143.061 324.856 142.019 323.708C140.923 322.559 140.731 321.029 141.526 320.29C142.348 319.552 143.828 319.908 144.924 321.056C145.993 322.204 146.212 323.735 145.39 324.473Z",fill:"currentColor"}),D.element("path",{d:"M151.912 333.986C150.898 334.697 149.227 334.04 148.213 332.564C147.199 331.088 147.199 329.339 148.24 328.628C149.254 327.917 150.898 328.546 151.94 330.022C152.954 331.498 152.954 333.275 151.912 333.986Z",fill:"currentColor"}),D.element("path",{d:"M160.846 343.171C159.942 344.183 157.996 343.909 156.599 342.542C155.146 341.203 154.762 339.317 155.667 338.333C156.599 337.321 158.517 337.622 159.942 338.961C161.367 340.274 161.806 342.187 160.846 343.171Z",fill:"currentColor"}),D.element("path",{d:"M173.179 348.502C172.768 349.787 170.904 350.388 169.041 349.841C167.177 349.267 165.944 347.764 166.328 346.452C166.711 345.139 168.575 344.538 170.466 345.112C172.357 345.686 173.563 347.19 173.179 348.502Z",fill:"currentColor"}),D.element("path",{d:"M186.717 349.486C186.772 350.853 185.182 351.973 183.209 352.001C181.236 352.055 179.619 350.935 179.619 349.595C179.619 348.228 181.181 347.107 183.154 347.08C185.1 347.053 186.717 348.146 186.717 349.486Z",fill:"currentColor"}),D.element("path",{d:"M199.323 347.354C199.57 348.693 198.2 350.033 196.227 350.416C194.308 350.771 192.527 349.951 192.28 348.639C192.034 347.272 193.431 345.905 195.35 345.55C197.323 345.194 199.077 346.014 199.323 347.354Z",fill:"currentColor"}))}function YouTube({size:e}){return D.element("svg",{width:e,height:e,viewBox:"0 0 482 482"},D.element("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M242.949 353.27C272.252 353.27 360.16 350.815 360.16 350.815C382.859 350.815 401.432 332.243 401.432 309.544C401.432 309.544 403.886 257.94 403.886 240.641C403.886 223.342 401.432 171.738 401.432 171.738C401.432 149.027 382.847 130.455 360.148 130.455C360.148 130.455 272.24 128 242.937 128C213.634 128 125.726 130.455 125.726 130.455C103.016 130.455 84.4429 149.027 84.4546 171.726C84.4546 171.726 82 223.377 82 240.629C82 257.881 84.4546 309.532 84.4546 309.532C84.4546 332.243 103.039 350.815 125.738 350.815C125.738 350.815 213.646 353.27 242.949 353.27ZM212.116 190.299V290.971L293.443 240.629L212.116 190.299Z",fill:"currentColor"}))}function Twitter({size:e}){return D.element("svg",{width:e,height:e,viewBox:"0 0 482 482"},D.element("path",{d:"M359.651 159.865C353.651 161.521 348.897 161.259 348.897 161.259L349.1 160.126C354.694 155.653 368.811 141.885 370.666 135.436C371.478 132.648 370.521 131.689 370.521 131.602L352.491 139.27L337.418 146.096C327.012 135.029 311.243 128 293.619 128C262.284 128 236.862 150.25 236.862 177.7C236.862 182.725 237.616 191.875 239.181 196.464C239.181 197.917 239.239 195.012 239.181 196.464C219.006 195.912 193.121 187.605 170.076 175.899C124.624 152.835 121.784 136.859 121.784 136.859C114.653 144.47 110.971 169.625 118.189 189.319C122.827 201.954 138.741 213.283 138.741 213.283C138.741 213.283 131.61 213.428 124.161 210.901C116.711 208.374 113.87 205.876 113.87 205.876C109.435 216.71 118.334 236.085 133.726 249.94C142.683 258.045 159.061 263.128 159.061 263.128L133.494 263.854C132.045 288.777 185.642 303.562 185.642 303.562C169.931 315.674 151.727 323.023 132.19 323.023C122.073 323.023 112.276 321.513 103 318.724C128.798 340.045 161.96 354.743 198.019 352.855C293.677 347.83 347.679 265.423 350.259 184.497L350.375 184.671C350.375 184.671 354.868 182.435 364.434 172.82C374 163.205 379.971 151.993 379.971 151.993C379.971 151.993 365.651 158.209 359.651 159.865Z",fill:"currentColor"}))}function Discord({size:e}){return D.element("svg",{width:e,height:e,viewBox:"0 0 482 482"},D.element("path",{d:"M350.027 75H127.973C109.248 75 94 90.228 94 109.088V332.847C94 351.718 109.248 366.934 127.973 366.934H315.895L307.116 336.32L328.322 356.017L348.373 374.548L384 406V109.088C384 90.228 368.752 75 350.027 75ZM286.068 291.145C286.068 291.145 280.098 284.029 275.137 277.738C296.841 271.618 305.134 258.042 305.134 258.042C298.337 262.51 291.88 265.656 286.08 267.805C277.799 271.278 269.835 273.598 262.053 274.921C246.148 277.897 231.557 277.071 219.13 274.752C209.683 272.93 201.561 270.283 194.775 267.636C190.969 266.142 186.823 264.321 182.677 262.013C182.178 261.685 181.68 261.515 181.181 261.187C180.853 261.017 180.683 260.859 180.513 260.689C177.534 259.037 175.868 257.872 175.868 257.872C175.868 257.872 183.821 271.109 204.868 277.399C199.895 283.689 193.767 291.134 193.767 291.134C157.143 289.98 143.221 265.972 143.221 265.972C143.221 212.686 167.089 169.491 167.089 169.491C190.957 151.615 213.659 152.113 213.659 152.113L215.313 154.104C185.486 162.714 171.734 175.781 171.734 175.781C171.734 175.781 175.381 173.79 181.51 170.984C199.238 163.2 213.33 161.051 219.13 160.553C220.127 160.383 220.954 160.225 221.951 160.225C232.056 158.901 243.497 158.573 255.426 159.897C271.172 161.718 288.073 166.357 305.304 175.781C305.304 175.781 292.208 163.37 264.035 154.76L266.357 152.113C266.357 152.113 289.059 151.615 312.927 169.491C312.927 169.491 336.796 212.686 336.796 265.972C336.773 265.984 322.681 289.991 286.068 291.145ZM209.003 213.851C199.555 213.851 192.102 222.121 192.102 232.224C192.102 242.316 199.725 250.597 209.003 250.597C218.451 250.597 225.905 242.327 225.905 232.224C226.075 222.132 218.451 213.851 209.003 213.851ZM269.495 213.851C260.048 213.851 252.594 222.121 252.594 232.224C252.594 242.316 260.218 250.597 269.495 250.597C278.943 250.597 286.397 242.327 286.397 232.224C286.397 222.132 278.932 213.851 269.495 213.851Z",fill:"currentColor"}))}class Footer_Footer extends W{renderLink({href:e,icon:t,title:n}){return D.element("a",{href:e,title:n,target:"_blank",rel:"noopener",class:"text-pink-600 hover:text-white inline-block"},D.element(t,{size:45}))}render(){const e=this.renderLink;return D.element("footer",{class:"flex flex-wrap w-full justify-center relative"},D.element("div",{class:"w-full relative flex justify-center h-80 bg-70 hover:bg-100 bg-bottom bg-no-repeat",style:"background-image: url(/stars.webp); transition: background-size 3s;"},D.element("img",{src:"/footer.webp",alt:"Nulla-Chan",class:"absolute bottom-0"})),D.element("div",{class:"bg-gray-800 w-full py-4 flex-wrap"},D.element("nav",{class:"w-full flex items-center justify-center space-x-1"},D.element(e,{href:"https://twitter.com/nullstackapp",title:"Twitter",icon:Twitter}),D.element(e,{href:"https://github.com/nullstack/nullstack",title:"Github",icon:GitHub}),D.element(e,{href:"https://discord.gg/eDZfKz264v",title:"Discord",icon:Discord}),D.element(e,{href:"https://www.youtube.com/nullstack",title:"Youtube",icon:YouTube})),D.element("nav",{class:"w-full flex flex-wrap items-center justify-center space-x-1"},D.element("p",{class:"text-center mt-3 w-full text-gray-400 px-6"},this.i18n.star.story),D.element("a",{href:"https://github.com/nullstack/nullstack/stargazers",class:"text-white flex flex-wrap text-xl text-center",target:"_blank",rel:"noopener"},D.element("span",{class:"block w-full"},this.i18n.star.action)))))}}!function Footer_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}(Footer_Footer,"hash","bd736cc02a490d831849ba4f1f870ba1");var E=Footer_Footer;function Logo({light:e,height:t,monotone:n}){const r=e?"#fff":"#2d3748",i=n?r:"#d22365";return D.element("svg",{xmlns:"http://www.w3.org/2000/svg",height:t,viewBox:"0 0 511.5039 113.7368"},D.element("title",null," Nullstack "),D.element("path",{d:"M13.2736,39.964H28.7009v9.8922a20.3919,20.3919,0,0,1,7.743-8.479,21.2792,21.2792,0,0,1,11.2172-3.0031q7.36,0,11.3349,4.1218t3.9745,11.6588a48.9655,48.9655,0,0,1-1.06,8.8913l-8.3025,42.8665H36.3556L44.187,65.7546a31.2306,31.2306,0,0,0,.5888-5.5939q0-7.6542-6.3593-7.6547a10.7348,10.7348,0,0,0-8.4791,4.3278q-3.5922,4.328-5.0639,12.0415l-7.1248,37.0372H.4961Z",transform:"translate(-0.4961)",fill:r}),D.element("path",{d:"M81.4691,107.62q-7.2426,0-11.2466-4.1807t-4.004-11.8943a46.3965,46.3965,0,0,1,1.001-8.6557L75.64,39.964H92.7746L85.0609,80.24a29.8175,29.8175,0,0,0-.5888,5.5938q0,7.6551,6.4771,7.6548A10.3547,10.3547,0,0,0,99.2811,89.19q3.4446-4.2978,4.9756-12.0709L111.44,39.964h17.1348l-12.7775,65.9485H100.37V96.138a18.7565,18.7565,0,0,1-7.4781,8.3908A21.4849,21.4849,0,0,1,81.4691,107.62Z",transform:"translate(-0.4961)",fill:r}),D.element("path",{d:"M150.2958,113.7368q-11.4821,0-16.7815-3.3563t-5.2995-10.5989a43.049,43.049,0,0,1,1.1188-8.3613l11.9532-56.6451H123.2687l2.532-13.2486h35.2118L146.2918,92.4213q-.1767.825-.3238,1.7371a10.5763,10.5763,0,0,0-.1473,1.6781q0,4.6521,8.2436,4.6517h16.3694l-2.65,13.2486Z",transform:"translate(-0.4961)",fill:i}),D.element("path",{d:"M181.897,92.21q-11.4822,0-16.7816-3.3563T159.816,78.255a43.0455,43.0455,0,0,1,1.1187-8.3613l11.9532-56.6451H154.87L157.4018,0h35.2118L177.8929,70.8947q-.1765.8248-.3238,1.737a10.5766,10.5766,0,0,0-.1472,1.6782q0,4.6519,8.2435,4.6517h16.3694l-2.65,13.2486Z",transform:"translate(-0.4961)",fill:i}),D.element("path",{d:"M228.3106,107.62a72.47,72.47,0,0,1-23.6119-4.1218l3.003-15.0739q10.5988,6.7717,21.6688,6.7715,6.4176,0,10.0983-2.2965a7.1387,7.1387,0,0,0,3.68-6.3593,4.4873,4.4873,0,0,0-1.8253-3.8273q-2.3556-1.884-9.5979-3.9452l-5.1817-1.4132q-13.8969-3.8271-13.8963-16.9582a18.9819,18.9819,0,0,1,8.0375-16.0455q8.0374-5.976,22.4637-5.9766a60.6829,60.6829,0,0,1,10.1573.8538,63.0434,63.0434,0,0,1,10.5105,2.797L260.8727,56.981a33.7,33.7,0,0,0-19.3724-6.3q-5.9478,0-9.3623,2.09a6.2659,6.2659,0,0,0-3.4152,5.5056,5.102,5.102,0,0,0,2.2375,4.2984q2.4731,1.7082,9.6568,3.7685l4.3573,1.2365q7.4775,2.12,10.9816,6.271t3.5035,10.805q0,10.7172-8.2436,16.84T228.3106,107.62Z",transform:"translate(-0.4961)",fill:r}),D.element("path",{d:"M297.9546,106.2069q-11.3055,0-16.6932-3.3857t-5.3878-10.57a47.7847,47.7847,0,0,1,1.06-8.3613l5.9472-30.6778H265.9813l2.532-13.2486h16.8993l3.5918-18.7247h17.2527L302.6063,39.964h22.5521l-2.532,13.2486h-22.552l-6.1827,31.6788A20.2915,20.2915,0,0,0,293.48,88.13a3.9534,3.9534,0,0,0,1.9431,3.68q1.9433,1.1482,6.2416,1.1482h13.2486l-2.532,13.2486Z",transform:"translate(-0.4961)",fill:r}),D.element("path",{d:"M338.2138,107.62q-9.4224,0-14.6029-5.1228-5.1828-5.1228-5.1816-14.25,0-12.2469,9.3034-18.99t26.2617-6.7421h11.3643l.4711-2.8852a3.6427,3.6427,0,0,1,.1177-.7066v-1.001A5.6271,5.6271,0,0,0,362.974,52.8q-2.9748-1.7666-8.5086-1.7665a41.5275,41.5275,0,0,0-10.8933,1.59,85.9338,85.9338,0,0,0-13.3074,5.0639l2.7675-14.7206a74.3941,74.3941,0,0,1,24.6129-4.5929q12.07,0,18.6363,4.6518,6.5643,4.652,6.5655,13.72a36.323,36.323,0,0,1-.4711,5.5939q-.4716,3.003-1.1188,5.9471l-7.2425,37.626H358.47v-7.36A26.3115,26.3115,0,0,1,338.2138,107.62Zm7.1837-11.8354q6.476,0,11.2466-5.6822t6.3-15.3978h-6.6537q-19.9029,0-19.9023,12.13a8.3352,8.3352,0,0,0,9.009,8.95Z",transform:"translate(-0.4961)",fill:r}),D.element("path",{d:"M415.1828,107.62q-13.72,0-21.1683-7.4192t-7.4486-21.4333a42.63,42.63,0,0,1,5.005-20.8444,36.7663,36.7663,0,0,1,13.9257-14.338,40.3978,40.3978,0,0,1,20.7562-5.2111A39.0215,39.0215,0,0,1,445.8607,43.32l-3.1208,15.78a22.7112,22.7112,0,0,0-16.075-6.7126,21.2393,21.2393,0,0,0-11.8059,3.2974A22.52,22.52,0,0,0,406.88,64.783a29.416,29.416,0,0,0-2.8853,13.278q0,8.0083,3.4741,11.7765T417.95,93.606q8.8324,0,19.3724-6.1238l-3.2974,16.2516A45.998,45.998,0,0,1,415.1828,107.62Z",transform:"translate(-0.4961)",fill:r}),D.element("path",{d:"M458.1224,14.2911H475.375l-8.95,46.0463L490.2134,39.964H512L482.2643,64.5769l18.43,41.3356H482.382L469.31,75.058l-6.83,5.6527-4.8284,25.2018H440.3987Z",transform:"translate(-0.4961)",fill:r}))}function Hamburger({size:e}){return D.element("svg",{width:e,height:e,viewBox:"0 0 482 482"},D.element("path",{d:"M92.5 150H386.5",stroke:"currentColor","stroke-width":"42","stroke-linecap":"round","stroke-linejoin":"round"}),D.element("path",{d:"M92.5 241H386.5",stroke:"currentColor","stroke-width":"42","stroke-linecap":"round","stroke-linejoin":"round"}),D.element("path",{d:"M92.5 332H386.5",stroke:"currentColor","stroke-width":"42","stroke-linecap":"round","stroke-linejoin":"round"}))}function Close_Close({size:e}){return D.element("svg",{width:e,height:e,viewBox:"0 0 482 482"},D.element("path",{d:"M124 124L358 358",stroke:"currentColor","stroke-width":"70.2055","stroke-linecap":"round","stroke-linejoin":"round"}),D.element("path",{d:"M358 124L124 358",stroke:"currentColor","stroke-width":"70.2055","stroke-linecap":"round","stroke-linejoin":"round"}))}function DayMode({size:e}){return D.element("svg",{width:e,height:e,viewBox:"0 0 482 482"},D.element("circle",{cx:"234",cy:"234",r:"104",fill:"#1f2937",opacity:"0.2"}),D.element("path",{d:"M237.5 45.5V97.5",stroke:"#DB2777","stroke-width":"16","stroke-linecap":"round","stroke-linejoin":"round"}),D.element("path",{d:"M237.5 379V431",stroke:"#DB2777","stroke-width":"16","stroke-linecap":"round","stroke-linejoin":"round"}),D.element("path",{d:"M430.25 238.25L378.25 238.25",stroke:"#DB2777","stroke-width":"16","stroke-linecap":"round","stroke-linejoin":"round"}),D.element("path",{d:"M96.75 238.25L44.75 238.25",stroke:"#DB2777","stroke-width":"16","stroke-linecap":"round","stroke-linejoin":"round"}),D.element("path",{d:"M373.795 374.545L337.025 337.775",stroke:"#DB2777","stroke-width":"16","stroke-linecap":"round","stroke-linejoin":"round"}),D.element("path",{d:"M137.975 138.725L101.205 101.955",stroke:"#DB2777","stroke-width":"16","stroke-linecap":"round","stroke-linejoin":"round"}),D.element("path",{d:"M101.205 374.545L137.975 337.775",stroke:"#DB2777","stroke-width":"16","stroke-linecap":"round","stroke-linejoin":"round"}),D.element("path",{d:"M337.025 138.725L373.795 101.955",stroke:"#DB2777","stroke-width":"16","stroke-linecap":"round","stroke-linejoin":"round"}))}function Brasil({size:e}){return D.element("svg",{width:e,height:e,viewBox:"0 0 683 482"},D.element("path",{d:"M581.479 466.955C581.479 466.955 401.504 472 341.512 472C281.52 472 101.545 466.955 101.545 466.955C55.0735 466.955 17.0252 428.782 17.0252 382.105C17.0252 382.105 12 275.946 12 240.488C12 205.03 17.0252 98.871 17.0252 98.871C17.0013 52.2178 55.0256 14.0449 101.521 14.0449C101.521 14.0449 281.496 9 341.488 9C401.48 9 581.455 14.0449 581.455 14.0449C627.927 14.0449 665.975 52.2178 665.975 98.895C665.975 98.895 671 204.958 671 240.512C671 276.066 665.975 382.129 665.975 382.129C665.975 428.782 627.951 466.955 581.479 466.955Z",fill:"#1f2937",opacity:"0.2"}),D.element("path",{d:"M48 240.98L340.366 28L630 240.98L340.366 453L48 240.98Z",fill:"currentColor"}),D.element("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M279.817 137.236C238.724 158.889 210.709 202.023 210.709 251.7C210.709 323.111 268.598 381 340.008 381C411.418 381 469.308 323.111 469.308 251.7C469.308 202.927 442.302 160.461 402.429 138.439V158.855C432.255 178.947 451.874 213.033 451.874 251.7C451.874 313.482 401.79 363.566 340.008 363.566C278.226 363.566 228.142 313.482 228.142 251.7C228.142 212.077 248.742 177.266 279.817 157.391V137.236Z",fill:"white"}),D.element("rect",{x:"326.632",y:"115.713",width:"28.9809",height:"89.1721",fill:"white"}))}function Gringo({size:e}){return D.element("svg",{width:e,height:e,viewBox:"0 0 683 482"},D.element("path",{d:"M0 46.3333C0 20.7441 20.7441 0 46.3333 0H636.667C662.256 0 683 20.7441 683 46.3333V241V435.667C683 461.256 662.256 482 636.667 482H46.3334C20.7442 482 0 461.256 0 435.667V46.3333Z",fill:"#1f2937",opacity:"0.2"}),D.element("path",{d:"M48 240.98L340.366 28L630 240.98L340.366 453L48 240.98Z",fill:"currentColor"}),D.element("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M342 371C413.797 371 472 312.797 472 241C472 169.203 413.797 111 342 111C270.203 111 212 169.203 212 241C212 312.797 270.203 371 342 371ZM342 345C399.438 345 446 298.438 446 241C446 183.562 399.438 137 342 137C284.562 137 238 183.562 238 241C238 298.438 284.562 345 342 345Z",fill:"white"}))}function Header_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}class Header_Header extends W{constructor(...e){super(...e),Header_defineProperty(this,"expanded",!1)}renderLink({title:e,href:t,target:n,mobile:r,onclick:i}){return D.element("element",{tag:i?"button":"a",href:t,target:n,source:this,onclick:i||{expanded:!1},class:"w-full sm:w-auto border-b sm:border-0 border-gray-100 dark:border-gray-800 p-2 font-lg hover:text-pink-600 items-center flex font-light "+(r?"sm:hidden":"")},e)}toggleMode(e){const t=e.mode;e.mode=e.oppositeMode,e.oppositeMode=t,window.localStorage.setItem("mode",e.mode)}render({mode:e,oppositeMode:t,locale:n}){const r=this.renderLink;return!!this.i18n&&D.element("header",{class:"fixed w-full bg-white dark:bg-gray-900 shadow top-0 left-0 z-20"},D.element("div",{class:"max-w-screen-xl mx-auto px-4 flex justify-between items-center flex-wrap py-4"},D.element("div",{class:"w-full sm:w-auto justify-between sm:justify-self-start sm:px-0 items-center flex"},D.element("a",this.i18n.home,D.element(Logo,{height:"30",light:"dark"===e})),D.element("span",{source:this,onclick:{expanded:!this.expanded},class:"flex items-center sm:hidden"},this.expanded&&D.element(Close_Close,{size:20,class:"text-gray-900 dark:text-white"}),!this.expanded&&D.element(Hamburger,{size:20,class:"text-gray-900 dark:text-white"}))),D.element("nav",{class:"flex items-center flex-wrap sm:px-0 mt-2 sm:mt-0 "+(!this.expanded&&"hidden sm:flex")},this.i18n.links.map(e=>D.element(r,e)),D.element(r,{href:this.i18n.language.href,title:this.i18n.language.title,mobile:!0}),D.element(r,{source:this,onclick:this.toggleMode,title:this.i18n.mode[t],mobile:!0})),D.element("div",{class:"flex w-full sm:w-auto mt-4 sm:mt-0 sm:space-x-2 items-center "+(!this.expanded&&"hidden sm:flex")},D.element("a",{href:this.i18n.language.href,title:this.i18n.language.title,class:"hidden sm:flex text-pink-600"},"pt-BR"===n&&D.element(Gringo,{size:30}),"pt-BR"!==n&&D.element(Brasil,{size:30})),D.element("button",{source:this,onclick:this.toggleMode,title:this.i18n.mode[t],class:"hidden sm:flex text-pink-600 dark:text-white"},D.element(DayMode,{size:25})),D.element("a",{href:this.i18n.action.href,source:this,onclick:{expanded:!1},class:"bg-pink-600 text-white px-4 py-2 border border-pink-600 hover:bg-transparent hover:text-pink-600 w-full sm:w-auto min-w-32 text-center"},this.i18n.action.title))))}}Header_defineProperty(Header_Header,"hash","f5fb24cd2e1c063a68727c9d800077da");var $=Header_Header;function Snippet_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}class Snippet_Snippet extends D{constructor(...e){super(...e),Snippet_defineProperty(this,"html",""),Snippet_defineProperty(this,"getSnippetByKey",D.invoke("getSnippetByKey","86f3540e7f07dba49bd268d81f29b781"))}async initiate({key:e,locale:t}){this.html=await this.getSnippetByKey({key:e,locale:t})}render(){return D.element("pre",{class:"p-4 w-full rounded-md shadow-2xl bg-gray-800"},D.element("code",{html:this.html}))}}Snippet_defineProperty(Snippet_Snippet,"hash","86f3540e7f07dba49bd268d81f29b781");var R=Snippet_Snippet;class Home_Home extends W{async getStarted({router:e,href:t}){if("clipboard"in navigator){const e="npx create-nullstack-app";await navigator.clipboard.writeText(e)}clearTimeout(this.gettingStarted),this.gettingStarted=setTimeout(()=>{e.url=t},3e3)}renderHero({page:e}){return D.element("section",{class:"max-w-screen-xl mx-auto px-4 flex justify-between items-center flex-wrap sm:pt-12"},D.element("div",{class:"sm:w-5/12 grid gap-8 mt-12 sm:mt-0"},D.element("h1",{class:"w-full"},D.element("span",{class:`text-pink-600 ${"pt-BR"===e.locale?"text-2xl sm:text-4xl":"text-4xl sm:text-6xl"} font-light block sm:mb-3 text-center sm:text-left`},this.i18n.hero.heading),D.element("span",{class:`text-pink-600 ${"pt-BR"!==e.locale?"text-3xl sm:text-5xl":"text-4xl sm:text-6xl"} font-light block sm:mb-3 text-center sm:text-left`},this.i18n.hero.subHeading),D.element("span",{class:"text-2xl sm:text-4xl font-light block text-center sm:text-left"},this.i18n.hero.tagline)),D.element(D.fragment,null,this.i18n.hero.descriptions.map(e=>D.element("p",{class:"text-xl sm:text-2xl text-center sm:text-left"},e))),D.element("div",null,D.element("button",{class:"bg-pink-600 text-white px-6 py-4 border border-pink-600 hover:bg-transparent hover:text-pink-600 inline-block w-full sm:w-auto",source:this,onclick:this.getStarted,href:this.i18n.hero.actionLink},this.gettingStarted?this.i18n.hero.actionCallback:this.i18n.hero.callToAction))),D.element("div",{class:"bg-center bg-0 hover:bg-100 bg-repeat-y mt-6",style:"background-image: url(/stars.webp); transition: background-size 3s;"},D.element("img",{src:"/illustrations/nulla-hero.webp",alt:"Nulla-Chan",class:"max-w-full",width:"627",height:"765",loading:"lazy"})))}renderRole({image:e,title:t,text:n}){return D.element("div",{class:"sm:w-1/3 px-8 flex flex-wrap justify-center text-center mb-8 sm:mb-0"},D.element("div",{class:"bg-center bg-0 hover:bg-100",style:"background-image: url(/stars.webp); transition: background-size 3s;"},D.element("img",{src:e,alt:t,width:"192",height:"192",class:"transform hover:scale-105 transition delay-100",loading:"lazy"})),D.element("h2",{class:"w-full text-center text-pink-600 dark:text-pink-500 text-xl sm:text-2xl font-light mb-4 sm:px-20"},t),D.element("p",{class:"w-full text-center text-xl font-gray-600"},n))}renderTrinity(){const e=this.renderRole;return D.element("section",{class:"max-w-screen-xl mx-auto px-4 flex justify-between items-center flex-wrap py-12 sm:py-36"},D.element("h2",{class:"w-full text-center mb-8 sm:mb-24"},D.element("span",{class:"w-full text-pink-600 text-4xl sm:text-6xl font-light block sm:mb-3"},this.i18n.trinity.heading),D.element("span",{class:"sm:text-xl block"},this.i18n.trinity.subHeading)),this.i18n.trinity.roles.map(t=>D.element(e,t)))}renderFeature({snippet:e,image:t,title:n,text:r,inverted:i,locale:l}){return D.element("section",{class:"max-w-screen-xl mx-auto px-4 flex justify-between items-center flex-wrap py-12 sm:py-36"},D.element("div",{class:"w-full sm:w-5/12 "+(i?"sm:order-2":"")},D.element(R,{key:e,locale:l})),D.element("div",{class:"mt-12 sm:mt-0 sm:w-5/12"},D.element("h3",{class:"text-pink-600 dark:text-pink-500 text-xl sm:text-4xl font-light mb-4"},n),D.element("p",{class:"text-xl font-gray-600"},r),D.element("img",{src:t,alt:n,class:"mt-6",width:"520",height:"272",loading:"lazy"})))}renderVideo({link:e,title:t,thumbnail:n}){return D.element("div",{class:"w-full sm:w-auto p-1 flex justify-center"},D.element("a",{href:e,title:t,target:"_blank",rel:"noopener"},D.element("img",{src:n,alt:t,height:"209",width:"372",loading:"lazy"})))}renderPlaylist(){const e=this.renderVideo;return D.element("div",null,D.element("section",{class:"max-w-screen-xl mx-auto px-4 flex justify-center items-center flex-wrap py-12 sm:pt-36"},D.element("h2",{class:"text-xl sm:text-4xl font-light mb-4"},this.i18n.playlist.heading,D.element("del",null,this.i18n.playlist.slang),D.element("span",{class:"text-pink-600 dark:text-pink-500"},this.i18n.playlist.realWord)),D.element("div",{class:"sm:flex items-center justify-center w-full mt-12 flex-wrap"},this.i18n.playlist.videos.map(t=>D.element(e,t)))))}renderSeparator(){return D.element("div",{class:"h-5 bg-center bg-no-repeat w-full max-w-screen-xl mx-auto flex justify-center items-start flex-wrap border-t-4 border-gray-200 text-center dark:opacity-10 text-gray-300"},D.element(Close,{size:30}))}render(){const e=this.renderPlaylist,t=this.renderFeature,n=this.renderTrinity,r=this.renderSeparator,i=this.renderHero;return!!this.i18n&&D.element("div",null,D.element(i,null),D.element(r,null),D.element(n,null),D.element(r,null),this.i18n.features.map(e=>D.element(D.fragment,null,D.element(t,e),D.element(r,null))),D.element(e,null))}}!function Home_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}(Home_Home,"hash","2ae9e9d0324e3cf6b619783fea86061c");var Q=Home_Home;class stroke_Icon extends D{render({width:e,height:t,length:n,title:r,rotation:i,animation:l,speed:a,class:s,color:o="currentColor"}){const c=!!i&&`rotate(${i})`,u={slow:"1.5s",fast:"0.5s"}[a]||"1.0s";return D.element("svg",{width:e,height:t,transform:c,class:s,viewBox:"0 0 512 512"},r&&D.element("title",null,r),"spin"===l&&D.element("animateTransform",{attributeType:"xml",attributeName:"transform",type:"rotate",from:"360 0 0",to:"0 0 0",dur:u,additive:"sum",repeatCount:"indefinite"}),D.element("path",{d:"M501.9984,279.0708a16.0691,16.0691,0,0,1-13.4278,15.8986l-35.9968,5.9988A17.6011,17.6011,0,0,0,438.58,313.2018a190.8568,190.8568,0,0,1-13.0446,31.4643A17.5918,17.5918,0,0,0,426.82,363.09l21.2127,29.7891a16.0776,16.0776,0,0,1-1.7514,20.7457l-32.6594,32.6583a16.0432,16.0432,0,0,1-20.72,1.77l-29.6617-21.2007a17.59,17.59,0,0,0-18.5045-1.2931,192.38,192.38,0,0,1-31.5078,13.0457,17.6007,17.6007,0,0,0-12.1433,13.9121l-6.1141,36.0359a16.07,16.07,0,0,1-15.903,13.4484H232.82a16.0653,16.0653,0,0,1-15.8975-13.4277l-6-35.9967a17.6049,17.6049,0,0,0-12.1182-13.9633,191.0666,191.0666,0,0,1-30.5031-12.54,17.62,17.62,0,0,0-18.399,1.2888L119.709,448.852a15.4291,15.4291,0,0,1-9.2011,2.9509A15.7635,15.7635,0,0,1,99.1461,447.05l-32.7182-32.715a15.9459,15.9459,0,0,1-1.7394-20.626l21.0854-29.3308a17.5751,17.5751,0,0,0,1.255-18.6569,186.7013,186.7013,0,0,1-13.2112-31.3456A17.637,17.637,0,0,0,59.935,302.2907l-36.49-6.2208A16.0752,16.0752,0,0,1,10,280.168V234.0254a16.0757,16.0757,0,0,1,13.4571-15.902l35.5549-6a17.5854,17.5854,0,0,0,13.9763-12.2794,188.24,188.24,0,0,1,12.828-31.5448,17.6135,17.6135,0,0,0-1.2877-18.3989L63.09,119.78A16.0645,16.0645,0,0,1,64.82,99.0512l32.77-32.6584.1187-.124a15.6331,15.6331,0,0,1,11.2594-4.6469,15.8133,15.8133,0,0,1,9.3122,2.951l29.457,21.2039a17.5634,17.5634,0,0,0,18.6536,1.2507,186.6559,186.6559,0,0,1,31.3326-13.2068,17.6346,17.6346,0,0,0,12.0921-13.887l6.2252-36.49A16.0692,16.0692,0,0,1,231.9433,9.9987h46.1426a16.0748,16.0748,0,0,1,15.902,13.4571l6,35.5678a17.5926,17.5926,0,0,0,12.2968,13.9721,189.9907,189.9907,0,0,1,32.6888,13.4528,17.612,17.612,0,0,0,18.45-1.2714L393.28,63.9132a15.41,15.41,0,0,1,9.2011-2.9509,15.7748,15.7748,0,0,1,11.3618,4.7546l32.7138,32.7138a15.95,15.95,0,0,1,1.7144,20.6608L427.05,148.7826a17.6069,17.6069,0,0,0-1.2714,18.48,192.2247,192.2247,0,0,1,13.049,31.511,17.6,17.6,0,0,0,13.9121,12.139l36.0055,6.11.03.0043A15.6605,15.6605,0,0,1,501.9984,232.7Z",transform:"translate(0 0.0013)",fill:"none",stroke:o,"stroke-miterlimit":"10","stroke-width":n||20}),D.element("circle",{cx:"256",cy:"256.0013",r:"101",fill:"none",stroke:o,"stroke-miterlimit":"10","stroke-width":n||20}))}}!function stroke_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}(stroke_Icon,"hash","fc9e1bed5737d04f2ad977b1c4cdb408");var G=stroke_Icon;class Loader_Loader extends D{render({worker:e}){return!!e.fetching&&D.element("div",{class:"w-full z-50 fixed top-0 left-0 h-screen flex items-center justify-center bg-white dark:bg-gray-900"},D.element(G,{animation:"spin",speed:"slow",height:40,class:"text-gray-800 dark:text-white"}))}}!function Loader_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}(Loader_Loader,"hash","55395ecdc930e6a3ee5e046bf02e575f");var U=Loader_Loader;n(3);function Waifu_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}class Waifu_Waifu extends W{constructor(...e){super(...e),Waifu_defineProperty(this,"fanarts",[]),Waifu_defineProperty(this,"getFanarts",D.invoke("getFanarts","80a2696547bef91f652f412a25c3a464"))}async initiate(e){super.initiate(e),this.fanarts=await this.getFanarts()}hydrate(){this.fanarts.sort(()=>Math.random()>.5?1:-1)}renderAttribute({label:e,value:t}){return D.element("li",null,D.element("b",null,e),": ",t)}renderProfile(){const e=this.renderAttribute;return D.element("section",{class:"max-w-screen-xl mx-auto px-4 flex justify-between items-center flex-wrap py-12 sm:py-24"},D.element("div",{class:"w-full mb-8"},D.element("h2",{class:"w-full text-pink-600 text-4xl sm:text-6xl font-light block sm:mb-3"},this.i18n.title),D.element("span",{class:"text-2xl sm:text-4xl font-light block mb-3"},this.i18n.description),D.element("blockquote",null,this.i18n.descriptions.map(e=>D.element("p",{class:"text-xl"}," ",e," ")))),D.element("div",{class:"flex flex-wrap justify-between w-full"},D.element("div",{class:"flex w-full sm:w-6/12 bg-yellow-300 dark:bg-gray-800 justify-center py-8"},D.element("img",{src:"/illustrations/nulla-fullbody.png",alt:"Nulla-Chan",class:"max-w-full",width:"319",height:"587",loading:"lazy"})),D.element("div",{class:"flex w-full sm:w-6/12 sm:bg-yellow-200 sm:dark:bg-gray-700 justify-center py-8 items-center"},D.element("ul",{class:"sm:w-6/12 grid gap-4 sm:mt-0"},this.i18n.attributes.map(t=>D.element(e,t)),D.element("li",null,D.element("b",null," ",this.i18n.artist.label," "),D.element("a",{href:this.i18n.artist.href,target:"_blank",rel:"noopener",class:"underline"},this.i18n.artist.text)),D.element("li",null,D.element("b",null," ",this.i18n.concept.label," "),D.element("a",{href:this.i18n.concept.href,target:"_blank",rel:"noopener",class:"underline"},this.i18n.concept.text))))))}renderFanart({image:e}){const t=e.slice(0,-5).replace(/\[dot\]/g,".").replace(/\[u\]/g,"."),n="/fanarts/"+e;return D.element("div",{class:"flex flex-col p-3 shadow items-center space-y-1"},D.element("img",{src:n,alt:t,title:"Nulla-chan by "+t}),D.element("a",{href:"https://www.instagram.com/"+t,target:"_blank",rel:"noopener",class:"hover:text-pink-600 block pt-1"},"@",t))}renderFanarts({self:e}){const t=this.renderFanart;return!!e.hydrated&&D.element("section",{class:"max-w-screen-xl mx-auto px-4 flex justify-between items-center flex-wrap pb-12 sm:pb-24"},D.element("h2",{class:"w-full text-pink-600 text-4xl sm:text-6xl font-light block sm:mb-3"},this.i18n.fanarts.heading),D.element("span",{class:"text-2xl sm:text-4xl font-light block mb-8"},this.i18n.fanarts.tagline),D.element("div",{class:"grid grid-cols-2 sm:grid-cols-5 gap-8 w-full"},this.fanarts.map(e=>D.element(t,{image:e}))))}render({}){const e=this.renderFanarts,t=this.renderProfile;return!!this.i18n&&D.element("div",null,D.element(t,null),D.element(e,null))}}Waifu_defineProperty(Waifu_Waifu,"hash","80a2696547bef91f652f412a25c3a464");var I=Waifu_Waifu;class Application_Application extends D{renderPreloader(){return D.element("head",null,D.element("link",{rel:"preload",href:"/roboto-v20-latin-300.woff2",as:"font",type:"font/woff2",crossorigin:!0}),D.element("link",{rel:"preload",href:"/roboto-v20-latin-500.woff2",as:"font",type:"font/woff2",crossorigin:!0}),D.element("link",{rel:"preload",href:"/crete-round-v9-latin-regular.woff2",as:"font",type:"font/woff2",crossorigin:!0}))}prepare(e){e.mode="light",e.oppositeMode="dark"}hydrate(e){localStorage.mode&&(e.mode=localStorage.mode,"dark"===e.mode&&(e.oppositeMode="light"))}render({router:e,mode:t}){const n=this.renderPreloader,r=e.url.startsWith("/pt-br")?"pt-BR":"en-US";return D.element("main",{class:t},D.element("div",{class:"dark:bg-gray-900 dark:text-white"},D.element($,{locale:r}),D.element(Q,{route:"/",locale:"en-US"}),D.element(Q,{route:"/pt-br",locale:"pt-BR"}),D.element(V,{route:"/documentation",locale:"en-US"}),D.element(V,{route:"/pt-br/documentacao",locale:"pt-BR"}),D.element(N,{route:"/components",locale:"en-US"}),D.element(N,{route:"/pt-br/componentes",locale:"pt-BR"}),D.element(F,{route:"/contributors",locale:"en-US"}),D.element(F,{route:"/pt-br/contribuidores",locale:"pt-BR"}),D.element(I,{route:"/waifu",locale:"en-US"}),D.element(I,{route:"/pt-br/waifu",locale:"pt-BR"}),D.element(Z,{route:"/pt-br/:slug",locale:"pt-BR"}),D.element(Z,{route:"/:slug",locale:"en-US"}),D.element(B,{id:"G-E7GZ5Z4MLN"}),D.element(n,null),D.element(U,null),D.element(E,{locale:r})))}}!function Application_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}(Application_Application,"hash","f57539945c6b085271d4cf2059a29211");var K=Application_Application;const J=D.start(K);t.default=J}]);
\ No newline at end of file
diff --git a/docs/components.html b/docs/components.html
index ae13fe69..bbbb68be 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -34,15 +34,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"priority":0.3,"title":"Community Components - Nullstack","description":"A curated list of Nullstack components made by the community","locale":"en-US"};
       window.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-5/components":{"locale":"en-US","i18n":{"title":"Community Components","description":"A curated list of Nullstack components made by the community","heading":"Community Components","tagline":"A curated list of Nullstack components made by the community.","contribute":"If you want to add a component to this list <a href='https://github.com/nullstack/nullstack.github.io/issues'> open an issue on github<\/a>.","topics":[{"title":"Integrations","projects":[{"title":"Google Analytics","repository":"https://github.com/Mortaro/nullstack-google-analytics"},{"title":"Facebook Pixel","repository":"https://github.com/Mortaro/nullstack-facebook-pixel"}]},{"title":"General Inputs","projects":[{"title":"Currency Input","repository":"https://github.com/Mortaro/nullstack-currency-input"},{"title":"Date Input","repository":"https://github.com/Mortaro/nullstack-date-input"},{"title":"CKEditor Adapter","repository":"https://github.com/Mortaro/nullstack-ckeditor-adapter"},{"title":"Upload Input","repository":"https://github.com/Mortaro/nullstack-upload-input"}]},{"title":"Brazilian Inputs","tagline":{"title":"Nullstack is a Brazilian Framework","text":"🤘 Nullstack é BR porr@!"},"projects":[{"title":"CPF and CNPJ Inputs","repository":"https://github.com/Mortaro/nullstack-cpf-cnpj-input"},{"title":"CEP Input","repository":"https://github.com/Mortaro/nullstack-cep-input"},{"title":"Phone Input","repository":"https://github.com/Mortaro/nullstack-phone-input"}]},{"title":"Assets","projects":[{"title":"Nullstack Logo","repository":"/nullstack-logo"}]}]}},"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/components/index.html b/docs/components/index.html
index ae13fe69..bbbb68be 100644
--- a/docs/components/index.html
+++ b/docs/components/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -34,15 +34,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"priority":0.3,"title":"Community Components - Nullstack","description":"A curated list of Nullstack components made by the community","locale":"en-US"};
       window.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-5/components":{"locale":"en-US","i18n":{"title":"Community Components","description":"A curated list of Nullstack components made by the community","heading":"Community Components","tagline":"A curated list of Nullstack components made by the community.","contribute":"If you want to add a component to this list <a href='https://github.com/nullstack/nullstack.github.io/issues'> open an issue on github<\/a>.","topics":[{"title":"Integrations","projects":[{"title":"Google Analytics","repository":"https://github.com/Mortaro/nullstack-google-analytics"},{"title":"Facebook Pixel","repository":"https://github.com/Mortaro/nullstack-facebook-pixel"}]},{"title":"General Inputs","projects":[{"title":"Currency Input","repository":"https://github.com/Mortaro/nullstack-currency-input"},{"title":"Date Input","repository":"https://github.com/Mortaro/nullstack-date-input"},{"title":"CKEditor Adapter","repository":"https://github.com/Mortaro/nullstack-ckeditor-adapter"},{"title":"Upload Input","repository":"https://github.com/Mortaro/nullstack-upload-input"}]},{"title":"Brazilian Inputs","tagline":{"title":"Nullstack is a Brazilian Framework","text":"🤘 Nullstack é BR porr@!"},"projects":[{"title":"CPF and CNPJ Inputs","repository":"https://github.com/Mortaro/nullstack-cpf-cnpj-input"},{"title":"CEP Input","repository":"https://github.com/Mortaro/nullstack-cep-input"},{"title":"Phone Input","repository":"https://github.com/Mortaro/nullstack-phone-input"}]},{"title":"Assets","projects":[{"title":"Nullstack Logo","repository":"/nullstack-logo"}]}]}},"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/context-data.html b/docs/context-data.html
index f8b74941..5272695c 100644
--- a/docs/context-data.html
+++ b/docs/context-data.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -88,15 +88,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about the
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Context Data - Nullstack","description":"The data object is a proxy in the Component Context available in client and gives you information about the element dataset"};
       window.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/context-data":{"title":"Context Data","html":"<ul>\n<li>Type: <code>object<\/code><\/li>\n<li>Origin: <a href=\"/context#----component-context\">Component Context<\/a><\/li>\n<li>Availability: <strong>client<\/strong><\/li>\n<li><strong>readonly<\/strong> in <strong>client<\/strong> context<\/li>\n<\/ul>\n<p>It gives you information about the element dataset.<\/p>\n<p>You can use this key to avoid polluting your DOM with invalid attributes.<\/p>\n<blockquote>\n<p>💡 This helps Nullstack set attributes without wasting time validating them.<\/p>\n<\/blockquote>\n<p>Any <code>data-*<\/code> attributes will receive a respective camelized key on the <code>data<\/code> object.<\/p>\n<p>You can assign <code>data<\/code> attributes both via <code>data-*<\/code> and a <code>data<\/code> key that accepts an object with camelized keys.<\/p>\n<p>The kebab version is also available in the context.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">ContextData<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  count <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">calculate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>data<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">=<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">*<\/span> data<span class=\"token punctuation\">.<\/span>multiply <span class=\"token operator\">+<\/span> data<span class=\"token punctuation\">.<\/span>sum<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">renderInner<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span>data<span class=\"token punctuation\">}<\/span> <span class=\"token operator\">=<\/span> context<span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">data<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>data<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token punctuation\">{<\/span>data<span class=\"token punctuation\">.<\/span>frameworkName<span class=\"token punctuation\">}<\/span>\n        is same <span class=\"token keyword\">as<\/span>\n        <span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">[<\/span><span class=\"token string\">'data-framework-name'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>data<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span> \n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>calculate<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">data-multiply<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">3<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">data<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span>sum<span class=\"token operator\">:<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n          Calculate\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Inner<\/span><\/span> <span class=\"token attr-name\">data-framework-name<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>Nullstack<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> ContextData<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 Camelized keys from the <code>data<\/code> object will result in kebab attributes in the DOM.<\/p>\n<\/blockquote>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about the <a href=\"/context-instances\">context <code>instances<\/code><\/a>.<\/p>\n","description":"The data object is a proxy in the Component Context available in client and gives you information about the element dataset","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"context-data"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/context-data/index.html b/docs/context-data/index.html
index f8b74941..5272695c 100644
--- a/docs/context-data/index.html
+++ b/docs/context-data/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -88,15 +88,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about the
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Context Data - Nullstack","description":"The data object is a proxy in the Component Context available in client and gives you information about the element dataset"};
       window.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/context-data":{"title":"Context Data","html":"<ul>\n<li>Type: <code>object<\/code><\/li>\n<li>Origin: <a href=\"/context#----component-context\">Component Context<\/a><\/li>\n<li>Availability: <strong>client<\/strong><\/li>\n<li><strong>readonly<\/strong> in <strong>client<\/strong> context<\/li>\n<\/ul>\n<p>It gives you information about the element dataset.<\/p>\n<p>You can use this key to avoid polluting your DOM with invalid attributes.<\/p>\n<blockquote>\n<p>💡 This helps Nullstack set attributes without wasting time validating them.<\/p>\n<\/blockquote>\n<p>Any <code>data-*<\/code> attributes will receive a respective camelized key on the <code>data<\/code> object.<\/p>\n<p>You can assign <code>data<\/code> attributes both via <code>data-*<\/code> and a <code>data<\/code> key that accepts an object with camelized keys.<\/p>\n<p>The kebab version is also available in the context.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">ContextData<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  count <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">calculate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>data<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">=<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">*<\/span> data<span class=\"token punctuation\">.<\/span>multiply <span class=\"token operator\">+<\/span> data<span class=\"token punctuation\">.<\/span>sum<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">renderInner<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span>data<span class=\"token punctuation\">}<\/span> <span class=\"token operator\">=<\/span> context<span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">data<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>data<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token punctuation\">{<\/span>data<span class=\"token punctuation\">.<\/span>frameworkName<span class=\"token punctuation\">}<\/span>\n        is same <span class=\"token keyword\">as<\/span>\n        <span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">[<\/span><span class=\"token string\">'data-framework-name'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>data<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span> \n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>calculate<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">data-multiply<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">3<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">data<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span>sum<span class=\"token operator\">:<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n          Calculate\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Inner<\/span><\/span> <span class=\"token attr-name\">data-framework-name<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>Nullstack<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> ContextData<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 Camelized keys from the <code>data<\/code> object will result in kebab attributes in the DOM.<\/p>\n<\/blockquote>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about the <a href=\"/context-instances\">context <code>instances<\/code><\/a>.<\/p>\n","description":"The data object is a proxy in the Component Context available in client and gives you information about the element dataset","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"context-data"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/context-environment.html b/docs/context-environment.html
index 09fd3e6d..326191da 100644
--- a/docs/context-environment.html
+++ b/docs/context-environment.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -73,15 +73,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about the
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Context Environment - Nullstack","description":"The environment object is a proxy in the Nullstack Context available in both client and server and gives you information about the current environment"};
       window.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/context-environment":{"title":"Context Environment","html":"<ul>\n<li>Type: <code>object<\/code><\/li>\n<li>Origin: <a href=\"/context#----nullstack-context\">Nullstack Context<\/a><\/li>\n<li>Availability: server/client<\/li>\n<li><strong>readonly<\/strong> in server/client context<\/li>\n<\/ul>\n<p>It gives you information about the current environment.<\/p>\n<p>The following keys are available in the object:<\/p>\n<ul>\n<li><strong>client<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>server<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>development<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>production<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>static<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>key<\/strong>: <code>string<\/code><\/li>\n<\/ul>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Page<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>environment<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span> \n        <span class=\"token punctuation\">{<\/span>environment<span class=\"token punctuation\">.<\/span>client <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token constant\">I<\/span>'m <span class=\"token keyword\">in<\/span> the client<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token punctuation\">{<\/span>environment<span class=\"token punctuation\">.<\/span>server <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token constant\">I<\/span>'m <span class=\"token keyword\">in<\/span> the server<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token punctuation\">{<\/span>environment<span class=\"token punctuation\">.<\/span>development <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token constant\">I<\/span>'m <span class=\"token keyword\">in<\/span> development mode<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token punctuation\">{<\/span>environment<span class=\"token punctuation\">.<\/span>production <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token constant\">I<\/span>'m <span class=\"token keyword\">in<\/span> production mode<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token punctuation\">{<\/span>environment<span class=\"token punctuation\">.<\/span>static <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token constant\">I<\/span>'m <span class=\"token keyword\">in<\/span> a <span class=\"token keyword\">static<\/span> site<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> My key is <span class=\"token punctuation\">{<\/span>environment<span class=\"token punctuation\">.<\/span>key<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Page<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>The environment <em>key<\/em> is an md5 hash of the current environment folder outputs. The key is appended to <a href=\"/styles\">assets<\/a> and <a href=\"/static-site-generation\">static API<\/a> path to assist cache control.<\/p>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about the <a href=\"/context-page\">context <code>page<\/code><\/a>.<\/p>\n","description":"The environment object is a proxy in the Nullstack Context available in both client and server and gives you information about the current environment","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"context-environment"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/context-environment/index.html b/docs/context-environment/index.html
index 09fd3e6d..326191da 100644
--- a/docs/context-environment/index.html
+++ b/docs/context-environment/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -73,15 +73,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about the
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Context Environment - Nullstack","description":"The environment object is a proxy in the Nullstack Context available in both client and server and gives you information about the current environment"};
       window.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/context-environment":{"title":"Context Environment","html":"<ul>\n<li>Type: <code>object<\/code><\/li>\n<li>Origin: <a href=\"/context#----nullstack-context\">Nullstack Context<\/a><\/li>\n<li>Availability: server/client<\/li>\n<li><strong>readonly<\/strong> in server/client context<\/li>\n<\/ul>\n<p>It gives you information about the current environment.<\/p>\n<p>The following keys are available in the object:<\/p>\n<ul>\n<li><strong>client<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>server<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>development<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>production<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>static<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>key<\/strong>: <code>string<\/code><\/li>\n<\/ul>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Page<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>environment<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span> \n        <span class=\"token punctuation\">{<\/span>environment<span class=\"token punctuation\">.<\/span>client <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token constant\">I<\/span>'m <span class=\"token keyword\">in<\/span> the client<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token punctuation\">{<\/span>environment<span class=\"token punctuation\">.<\/span>server <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token constant\">I<\/span>'m <span class=\"token keyword\">in<\/span> the server<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token punctuation\">{<\/span>environment<span class=\"token punctuation\">.<\/span>development <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token constant\">I<\/span>'m <span class=\"token keyword\">in<\/span> development mode<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token punctuation\">{<\/span>environment<span class=\"token punctuation\">.<\/span>production <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token constant\">I<\/span>'m <span class=\"token keyword\">in<\/span> production mode<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token punctuation\">{<\/span>environment<span class=\"token punctuation\">.<\/span>static <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token constant\">I<\/span>'m <span class=\"token keyword\">in<\/span> a <span class=\"token keyword\">static<\/span> site<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> My key is <span class=\"token punctuation\">{<\/span>environment<span class=\"token punctuation\">.<\/span>key<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Page<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>The environment <em>key<\/em> is an md5 hash of the current environment folder outputs. The key is appended to <a href=\"/styles\">assets<\/a> and <a href=\"/static-site-generation\">static API<\/a> path to assist cache control.<\/p>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about the <a href=\"/context-page\">context <code>page<\/code><\/a>.<\/p>\n","description":"The environment object is a proxy in the Nullstack Context available in both client and server and gives you information about the current environment","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"context-environment"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/context-instances.html b/docs/context-instances.html
index 09e8701b..fe04ae7b 100644
--- a/docs/context-instances.html
+++ b/docs/context-instances.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -111,15 +111,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about the
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Context Instances - Nullstack","description":"The instances object is a proxy in the Nullstack Context available in the client and gives you all active instances in the application"};
       window.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/context-instances":{"title":"Context Instances","html":"<ul>\n<li>Type: <code>object<\/code><\/li>\n<li>Origin: <a href=\"/context#----nullstack-context\">Nullstack Context<\/a><\/li>\n<li>Availability: <strong>client<\/strong><\/li>\n<li><strong>readwrite<\/strong> in <strong>client<\/strong> context<\/li>\n<\/ul>\n<p>It gives you all active instances of the application.<\/p>\n<blockquote>\n<p>💡 Active instances are the ones created and not yet <a href=\"/full-stack-lifecycle#terminate\">terminated<\/a><\/p>\n<\/blockquote>\n<p>As explained in <a href=\"/instance-self#instance-key\">instance <code>key<\/code><\/a>, keys play a big role in defining a unique identifier for components.<\/p>\n<blockquote>\n<p>🔥 Nullstack trusts its developers to know what they are doing and exposes as much internal behavior for the programmer to do as it wishes, use with caution.<\/p>\n<\/blockquote>\n<p>Adding an unique <code>key<\/code> to <strong>Counter<\/strong> makes it available on <code>instances<\/code> list:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Counter <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Counter'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> AnyOtherComponent <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./AnyOtherComponent'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Counter<\/span><\/span> <span class=\"token attr-name\">key<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>counter<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">AnyOtherComponent<\/span><\/span><span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  value <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">increment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>value<span class=\"token operator\">++<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> Count<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">}<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>You can access any methods and instance variables from <strong>counter<\/strong> instance on <strong>AnyOtherComponent<\/strong>:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">AnyOtherComponent<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> instances <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>instances<span class=\"token punctuation\">.<\/span>counter<span class=\"token punctuation\">.<\/span>increment<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        Add <span class=\"token number\">1<\/span> to <span class=\"token punctuation\">{<\/span>instances<span class=\"token punctuation\">.<\/span>counter<span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> AnyOtherComponent<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>The use of <code>instances<\/code> unlocks unlimited custom behaviors like:<\/p>\n<ul>\n<li>A notification icon at the navbar that can be updated from other components at certain actions<\/li>\n<li>A <em>toast<\/em> component that can be invoked from anywhere in your application<\/li>\n<li>A <em>store<\/em> system with custom dispatch methods similar to Redux<\/li>\n<li>Something we haven't even imagined, dream on and post your ideas on GitHub!<\/li>\n<\/ul>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about the <a href=\"/context-environment\">context <code>environment<\/code><\/a>.<\/p>\n","description":"The instances object is a proxy in the Nullstack Context available in the client and gives you all active instances in the application","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"context-instances"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/context-instances/index.html b/docs/context-instances/index.html
index 09e8701b..fe04ae7b 100644
--- a/docs/context-instances/index.html
+++ b/docs/context-instances/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -111,15 +111,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about the
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Context Instances - Nullstack","description":"The instances object is a proxy in the Nullstack Context available in the client and gives you all active instances in the application"};
       window.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/context-instances":{"title":"Context Instances","html":"<ul>\n<li>Type: <code>object<\/code><\/li>\n<li>Origin: <a href=\"/context#----nullstack-context\">Nullstack Context<\/a><\/li>\n<li>Availability: <strong>client<\/strong><\/li>\n<li><strong>readwrite<\/strong> in <strong>client<\/strong> context<\/li>\n<\/ul>\n<p>It gives you all active instances of the application.<\/p>\n<blockquote>\n<p>💡 Active instances are the ones created and not yet <a href=\"/full-stack-lifecycle#terminate\">terminated<\/a><\/p>\n<\/blockquote>\n<p>As explained in <a href=\"/instance-self#instance-key\">instance <code>key<\/code><\/a>, keys play a big role in defining a unique identifier for components.<\/p>\n<blockquote>\n<p>🔥 Nullstack trusts its developers to know what they are doing and exposes as much internal behavior for the programmer to do as it wishes, use with caution.<\/p>\n<\/blockquote>\n<p>Adding an unique <code>key<\/code> to <strong>Counter<\/strong> makes it available on <code>instances<\/code> list:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Counter <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Counter'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> AnyOtherComponent <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./AnyOtherComponent'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Counter<\/span><\/span> <span class=\"token attr-name\">key<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>counter<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">AnyOtherComponent<\/span><\/span><span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  value <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">increment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>value<span class=\"token operator\">++<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> Count<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">}<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>You can access any methods and instance variables from <strong>counter<\/strong> instance on <strong>AnyOtherComponent<\/strong>:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">AnyOtherComponent<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> instances <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>instances<span class=\"token punctuation\">.<\/span>counter<span class=\"token punctuation\">.<\/span>increment<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        Add <span class=\"token number\">1<\/span> to <span class=\"token punctuation\">{<\/span>instances<span class=\"token punctuation\">.<\/span>counter<span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> AnyOtherComponent<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>The use of <code>instances<\/code> unlocks unlimited custom behaviors like:<\/p>\n<ul>\n<li>A notification icon at the navbar that can be updated from other components at certain actions<\/li>\n<li>A <em>toast<\/em> component that can be invoked from anywhere in your application<\/li>\n<li>A <em>store<\/em> system with custom dispatch methods similar to Redux<\/li>\n<li>Something we haven't even imagined, dream on and post your ideas on GitHub!<\/li>\n<\/ul>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about the <a href=\"/context-environment\">context <code>environment<\/code><\/a>.<\/p>\n","description":"The instances object is a proxy in the Nullstack Context available in the client and gives you all active instances in the application","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"context-instances"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/context-page.html b/docs/context-page.html
index 2c09308a..1ab19680 100644
--- a/docs/context-page.html
+++ b/docs/context-page.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -147,15 +147,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about the
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Context Page - Nullstack","description":"The page object is a proxy in the Nullstack Context available in both client and server and gives you information about the document head metatags"};
       window.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/context-page":{"title":"Context Page","html":"<ul>\n<li>Type: <code>object<\/code><\/li>\n<li>Origin: <a href=\"/context#----nullstack-context\">Nullstack Context<\/a><\/li>\n<li>Availability: server/client<\/li>\n<li><strong>readwrite<\/strong> in server/client context<\/li>\n<\/ul>\n<p>It gives you information about the document <code>head<\/code> metatags.<\/p>\n<p><code>page<\/code> keys will be used to generate metatags during <a href=\"/server-side-rendering\">server-side rendering<\/a> and must be assigned before <a href=\"/full-stack-lifecycle\"><code>initiate<\/code><\/a> while this resolved.<\/p>\n<p>The following keys are available in the object:<\/p>\n<ul>\n<li><strong>title<\/strong>: <code>string<\/code><\/li>\n<li><strong>image<\/strong>: <code>string<\/code> (absolute or relative URL)<\/li>\n<li><strong>description<\/strong>: <code>string<\/code><\/li>\n<li><strong>canonical<\/strong>: <code>string<\/code> (absolute or relative URL)<\/li>\n<li><strong>locale<\/strong>: <code>string<\/code><\/li>\n<li><strong>robots<\/strong>: <code>string<\/code><\/li>\n<li><strong>schema<\/strong>: <code>object<\/code><\/li>\n<li><strong>changes<\/strong>: <code>string<\/code><\/li>\n<li><strong>priority<\/strong>: <code>number<\/code><\/li>\n<li><strong>status<\/strong>: <code>number<\/code><\/li>\n<\/ul>\n<p>When the <code>title<\/code> key is assigned on the client-side, the document title will be updated.<\/p>\n<p>Nullstack uses the <code>changes<\/code> and <code>priority<\/code> keys to generate the <strong>sitemap.xml<\/strong>.<\/p>\n<p>The sitemap is generated automatically only when using <a href=\"/static-site-generation\">static site generation<\/a> and must be manually generated in <a href=\"/server-side-rendering\">server-side rendered<\/a> applications.<\/p>\n<p>The <code>changes<\/code> key represents the <code>changefreq<\/code> key in the <strong>sitemap.xml<\/strong> and if assigned must be one of the following values:<\/p>\n<ul>\n<li><strong>always<\/strong><\/li>\n<li><strong>hourly<\/strong><\/li>\n<li><strong>daily<\/strong><\/li>\n<li><strong>weekly<\/strong><\/li>\n<li><strong>monthly<\/strong><\/li>\n<li><strong>yearly<\/strong><\/li>\n<li><strong>never<\/strong><\/li>\n<\/ul>\n<p>The <code>priority<\/code> key is a number between <code>0.0<\/code> and <code>1.0<\/code> that represents the <code>priority<\/code> key in the <strong>sitemap.xml<\/strong>.<\/p>\n<p>Nullstack does not set a default priority, however, sitemaps assume a <code>0.5<\/code> priority when not explicitly set.<\/p>\n<p>Besides <code>title<\/code> and <code>locale<\/code> all other keys have sensible defaults generated based on the application scope.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Page<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>project<span class=\"token punctuation\">,<\/span> page<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    page<span class=\"token punctuation\">.<\/span>title <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>project<span class=\"token punctuation\">.<\/span>name<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\"> - Page Title<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>image <span class=\"token operator\">=<\/span> <span class=\"token string\">'/image.jpg'<\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>description <span class=\"token operator\">=<\/span> <span class=\"token string\">'Page meta description'<\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>canonical <span class=\"token operator\">=<\/span> <span class=\"token string\">'http://absolute.url/canonical-link'<\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>locale <span class=\"token operator\">=<\/span> <span class=\"token string\">'pt-BR'<\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>robots <span class=\"token operator\">=<\/span> <span class=\"token string\">'index, follow'<\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>schema <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>changes <span class=\"token operator\">=<\/span> <span class=\"token string\">'weekly'<\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>priority <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h1<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">.<\/span>title<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>h1<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">.<\/span>description<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Page<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"custom-events\"><a href=\"#custom-events\">Custom Events<\/a><\/h2><p>Updating <code>page.title<\/code> will raise a custom event.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Analytics<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">hydrate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    window<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span>page<span class=\"token punctuation\">.<\/span>event<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n      console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">New title: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>page<span class=\"token punctuation\">.<\/span>title<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Analytics<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>🔥 <code>page.event<\/code> is only available in client functions/lifecycles.<\/p>\n<\/blockquote>\n<h2 id=\"error-pages\"><a href=\"#error-pages\">Error pages<\/a><\/h2><p>If during the <a href=\"/server-side-rendering\">server-side render<\/a> process the <code>page.status<\/code> has any value besides <code>200<\/code>, your application will receive another render pass that gives you the chance to adjust the interface according to the status.<\/p>\n<p>The <code>status<\/code> key will be raised with the HTTP response.<\/p>\n<p>The page status will be modified to <code>500<\/code> and receive another render pass if the page raise an exception while rendering.<\/p>\n<p>The status of <a href=\"/server-functions\">server functions<\/a> responses will be set to the <code>page.status<\/code>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> ErrorPage <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./ErrorPage'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> HomePage <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./HomePage'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">.<\/span>status <span class=\"token operator\">!==<\/span> <span class=\"token number\">200<\/span> <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">ErrorPage<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>*<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">HomePage<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>🔥 Assigning to the <code>status<\/code> key during the <a href=\"/full-stack-lifecycle\">single-page application<\/a> mode will have no effect.<\/p>\n<\/blockquote>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about the <a href=\"/context-project\">context <code>project<\/code><\/a>.<\/p>\n","description":"The page object is a proxy in the Nullstack Context available in both client and server and gives you information about the document head metatags","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"context-page"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/context-page/index.html b/docs/context-page/index.html
index 2c09308a..1ab19680 100644
--- a/docs/context-page/index.html
+++ b/docs/context-page/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -147,15 +147,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about the
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Context Page - Nullstack","description":"The page object is a proxy in the Nullstack Context available in both client and server and gives you information about the document head metatags"};
       window.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/context-page":{"title":"Context Page","html":"<ul>\n<li>Type: <code>object<\/code><\/li>\n<li>Origin: <a href=\"/context#----nullstack-context\">Nullstack Context<\/a><\/li>\n<li>Availability: server/client<\/li>\n<li><strong>readwrite<\/strong> in server/client context<\/li>\n<\/ul>\n<p>It gives you information about the document <code>head<\/code> metatags.<\/p>\n<p><code>page<\/code> keys will be used to generate metatags during <a href=\"/server-side-rendering\">server-side rendering<\/a> and must be assigned before <a href=\"/full-stack-lifecycle\"><code>initiate<\/code><\/a> while this resolved.<\/p>\n<p>The following keys are available in the object:<\/p>\n<ul>\n<li><strong>title<\/strong>: <code>string<\/code><\/li>\n<li><strong>image<\/strong>: <code>string<\/code> (absolute or relative URL)<\/li>\n<li><strong>description<\/strong>: <code>string<\/code><\/li>\n<li><strong>canonical<\/strong>: <code>string<\/code> (absolute or relative URL)<\/li>\n<li><strong>locale<\/strong>: <code>string<\/code><\/li>\n<li><strong>robots<\/strong>: <code>string<\/code><\/li>\n<li><strong>schema<\/strong>: <code>object<\/code><\/li>\n<li><strong>changes<\/strong>: <code>string<\/code><\/li>\n<li><strong>priority<\/strong>: <code>number<\/code><\/li>\n<li><strong>status<\/strong>: <code>number<\/code><\/li>\n<\/ul>\n<p>When the <code>title<\/code> key is assigned on the client-side, the document title will be updated.<\/p>\n<p>Nullstack uses the <code>changes<\/code> and <code>priority<\/code> keys to generate the <strong>sitemap.xml<\/strong>.<\/p>\n<p>The sitemap is generated automatically only when using <a href=\"/static-site-generation\">static site generation<\/a> and must be manually generated in <a href=\"/server-side-rendering\">server-side rendered<\/a> applications.<\/p>\n<p>The <code>changes<\/code> key represents the <code>changefreq<\/code> key in the <strong>sitemap.xml<\/strong> and if assigned must be one of the following values:<\/p>\n<ul>\n<li><strong>always<\/strong><\/li>\n<li><strong>hourly<\/strong><\/li>\n<li><strong>daily<\/strong><\/li>\n<li><strong>weekly<\/strong><\/li>\n<li><strong>monthly<\/strong><\/li>\n<li><strong>yearly<\/strong><\/li>\n<li><strong>never<\/strong><\/li>\n<\/ul>\n<p>The <code>priority<\/code> key is a number between <code>0.0<\/code> and <code>1.0<\/code> that represents the <code>priority<\/code> key in the <strong>sitemap.xml<\/strong>.<\/p>\n<p>Nullstack does not set a default priority, however, sitemaps assume a <code>0.5<\/code> priority when not explicitly set.<\/p>\n<p>Besides <code>title<\/code> and <code>locale<\/code> all other keys have sensible defaults generated based on the application scope.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Page<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>project<span class=\"token punctuation\">,<\/span> page<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    page<span class=\"token punctuation\">.<\/span>title <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>project<span class=\"token punctuation\">.<\/span>name<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\"> - Page Title<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>image <span class=\"token operator\">=<\/span> <span class=\"token string\">'/image.jpg'<\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>description <span class=\"token operator\">=<\/span> <span class=\"token string\">'Page meta description'<\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>canonical <span class=\"token operator\">=<\/span> <span class=\"token string\">'http://absolute.url/canonical-link'<\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>locale <span class=\"token operator\">=<\/span> <span class=\"token string\">'pt-BR'<\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>robots <span class=\"token operator\">=<\/span> <span class=\"token string\">'index, follow'<\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>schema <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>changes <span class=\"token operator\">=<\/span> <span class=\"token string\">'weekly'<\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>priority <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h1<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">.<\/span>title<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>h1<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">.<\/span>description<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Page<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"custom-events\"><a href=\"#custom-events\">Custom Events<\/a><\/h2><p>Updating <code>page.title<\/code> will raise a custom event.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Analytics<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">hydrate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    window<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span>page<span class=\"token punctuation\">.<\/span>event<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n      console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">New title: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>page<span class=\"token punctuation\">.<\/span>title<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Analytics<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>🔥 <code>page.event<\/code> is only available in client functions/lifecycles.<\/p>\n<\/blockquote>\n<h2 id=\"error-pages\"><a href=\"#error-pages\">Error pages<\/a><\/h2><p>If during the <a href=\"/server-side-rendering\">server-side render<\/a> process the <code>page.status<\/code> has any value besides <code>200<\/code>, your application will receive another render pass that gives you the chance to adjust the interface according to the status.<\/p>\n<p>The <code>status<\/code> key will be raised with the HTTP response.<\/p>\n<p>The page status will be modified to <code>500<\/code> and receive another render pass if the page raise an exception while rendering.<\/p>\n<p>The status of <a href=\"/server-functions\">server functions<\/a> responses will be set to the <code>page.status<\/code>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> ErrorPage <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./ErrorPage'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> HomePage <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./HomePage'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">.<\/span>status <span class=\"token operator\">!==<\/span> <span class=\"token number\">200<\/span> <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">ErrorPage<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>*<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">HomePage<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>🔥 Assigning to the <code>status<\/code> key during the <a href=\"/full-stack-lifecycle\">single-page application<\/a> mode will have no effect.<\/p>\n<\/blockquote>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about the <a href=\"/context-project\">context <code>project<\/code><\/a>.<\/p>\n","description":"The page object is a proxy in the Nullstack Context available in both client and server and gives you information about the document head metatags","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"context-page"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/context-project.html b/docs/context-project.html
index 7d841c17..54973cdc 100644
--- a/docs/context-project.html
+++ b/docs/context-project.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -107,15 +107,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about the
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Context Project - Nullstack","description":"The project object is a proxy in the Nullstack Context available in both client and server and gives you information about the app manifest and some metatags"};
       window.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/context-project":{"title":"Context Project","html":"<ul>\n<li>Type: <code>object<\/code><\/li>\n<li>Origin: <a href=\"/context#----nullstack-context\">Nullstack Context<\/a><\/li>\n<li>Availability: server/client<\/li>\n<li><strong>readwrite<\/strong> in the <strong>server<\/strong> context<\/li>\n<li><strong>readonly<\/strong> in the <strong>client<\/strong> context<\/li>\n<\/ul>\n<p>It gives you information about the app manifest and some metatags.<\/p>\n<p><code>project<\/code> keys will be used to generate metatags during server-side rendering and must be assigned before <a href=\"/full-stack-lifecycle\"><code>initiate<\/code><\/a> is resolved.<\/p>\n<p><code>project<\/code> keys will be used to generate the app <strong>manifest<\/strong> and should be set during the <a href=\"/application-startup\">application startup<\/a>.<\/p>\n<p>The <code>disallow<\/code> key will be used to generate the <strong>robots.txt<\/strong> and should be set during the <a href=\"/application-startup\">application startup<\/a>.<\/p>\n<p><code>project<\/code> keys are frozen after the <a href=\"/application-startup\">application startup<\/a>.<\/p>\n<p>The following keys are available in the object:<\/p>\n<ul>\n<li><strong>domain<\/strong>: <code>string<\/code><\/li>\n<li><strong>name<\/strong>: <code>string<\/code><\/li>\n<li><strong>shortName<\/strong>: <code>string<\/code><\/li>\n<li><strong>color<\/strong>: <code>string<\/code><\/li>\n<li><strong>backgroundColor<\/strong>: <code>string<\/code><\/li>\n<li><strong>type<\/strong>: <code>string<\/code><\/li>\n<li><strong>display<\/strong>: <code>string<\/code><\/li>\n<li><strong>orientation<\/strong>: <code>string<\/code><\/li>\n<li><strong>scope<\/strong>: <code>string<\/code><\/li>\n<li><strong>root<\/strong>: <code>string<\/code><\/li>\n<li><strong>icons<\/strong>: <code>object<\/code><\/li>\n<li><strong>favicon<\/strong>: <code>string<\/code> (relative or absolute url)<\/li>\n<li><strong>disallow<\/strong>: <code>string array<\/code> (relative paths)<\/li>\n<li><strong>sitemap<\/strong>: <code>boolean<\/code> or <code>string<\/code> (relative or absolute url)<\/li>\n<\/ul>\n<p>Besides <code>domain<\/code>, <code>name<\/code> and <code>color<\/code> all other keys have sensible defaults generated based on the application scope.<\/p>\n<p>If you do not declare the <code>icons<\/code> key, Nullstack will scan any icons with the name following the pattern &quot;icon-[WIDTH]x[HEIGHT].png&quot; in your public folder.<\/p>\n<p>If the <code>sitemap<\/code> key is set to true your <strong>robots.txt<\/strong> file will point the sitemap to <code>https://${project.domain}/sitemap.xml<\/code>.<\/p>\n<p>The <code>cdn<\/code> key will prefix your asset bundles and will be available in the context so you can manually prefix other assets.<\/p>\n<p>The <code>protocol<\/code> key is &quot;http&quot; in development mode and &quot;https&quot; in production mode by default.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>project<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    project<span class=\"token punctuation\">.<\/span>name <span class=\"token operator\">=<\/span> <span class=\"token string\">'Nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>shortName <span class=\"token operator\">=<\/span> <span class=\"token string\">'Nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>domain <span class=\"token operator\">=<\/span> <span class=\"token string\">'nullstack.app'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>color <span class=\"token operator\">=<\/span> <span class=\"token string\">'#d22365'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>backgroundColor <span class=\"token operator\">=<\/span> <span class=\"token string\">'#d22365'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>type <span class=\"token operator\">=<\/span> <span class=\"token string\">'website'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>display <span class=\"token operator\">=<\/span> <span class=\"token string\">'standalone'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>orientation <span class=\"token operator\">=<\/span> <span class=\"token string\">'portrait'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>scope <span class=\"token operator\">=<\/span> <span class=\"token string\">'/'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>root <span class=\"token operator\">=<\/span> <span class=\"token string\">'/'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>icons <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token string\">'72'<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">'/icon-72x72.png'<\/span><span class=\"token punctuation\">,<\/span>\n      <span class=\"token string\">'128'<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">'/icon-128x128.png'<\/span><span class=\"token punctuation\">,<\/span>\n      <span class=\"token string\">'512'<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">'/icon-512x512.png'<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>favicon <span class=\"token operator\">=<\/span> <span class=\"token string\">'/favicon.png'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>disallow <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token string\">'/admin'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>sitemap <span class=\"token operator\">=<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>cdn <span class=\"token operator\">=<\/span> <span class=\"token string\">'cdn.nullstack.app'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>protocol <span class=\"token operator\">=<\/span> <span class=\"token string\">'https'<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>project<span class=\"token punctuation\">,<\/span> page<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    page<span class=\"token punctuation\">.<\/span>title <span class=\"token operator\">=<\/span> project<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 You can override the automatically generated <strong>manifest.json<\/strong> and <strong>robots.txt<\/strong> by serving your own file from the <strong>public<\/strong> folder<\/p>\n<\/blockquote>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about the <a href=\"/context-settings\">context <code>settings<\/code><\/a>.<\/p>\n","description":"The project object is a proxy in the Nullstack Context available in both client and server and gives you information about the app manifest and some metatags","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"context-project"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/context-project/index.html b/docs/context-project/index.html
index 7d841c17..54973cdc 100644
--- a/docs/context-project/index.html
+++ b/docs/context-project/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -107,15 +107,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about the
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Context Project - Nullstack","description":"The project object is a proxy in the Nullstack Context available in both client and server and gives you information about the app manifest and some metatags"};
       window.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/context-project":{"title":"Context Project","html":"<ul>\n<li>Type: <code>object<\/code><\/li>\n<li>Origin: <a href=\"/context#----nullstack-context\">Nullstack Context<\/a><\/li>\n<li>Availability: server/client<\/li>\n<li><strong>readwrite<\/strong> in the <strong>server<\/strong> context<\/li>\n<li><strong>readonly<\/strong> in the <strong>client<\/strong> context<\/li>\n<\/ul>\n<p>It gives you information about the app manifest and some metatags.<\/p>\n<p><code>project<\/code> keys will be used to generate metatags during server-side rendering and must be assigned before <a href=\"/full-stack-lifecycle\"><code>initiate<\/code><\/a> is resolved.<\/p>\n<p><code>project<\/code> keys will be used to generate the app <strong>manifest<\/strong> and should be set during the <a href=\"/application-startup\">application startup<\/a>.<\/p>\n<p>The <code>disallow<\/code> key will be used to generate the <strong>robots.txt<\/strong> and should be set during the <a href=\"/application-startup\">application startup<\/a>.<\/p>\n<p><code>project<\/code> keys are frozen after the <a href=\"/application-startup\">application startup<\/a>.<\/p>\n<p>The following keys are available in the object:<\/p>\n<ul>\n<li><strong>domain<\/strong>: <code>string<\/code><\/li>\n<li><strong>name<\/strong>: <code>string<\/code><\/li>\n<li><strong>shortName<\/strong>: <code>string<\/code><\/li>\n<li><strong>color<\/strong>: <code>string<\/code><\/li>\n<li><strong>backgroundColor<\/strong>: <code>string<\/code><\/li>\n<li><strong>type<\/strong>: <code>string<\/code><\/li>\n<li><strong>display<\/strong>: <code>string<\/code><\/li>\n<li><strong>orientation<\/strong>: <code>string<\/code><\/li>\n<li><strong>scope<\/strong>: <code>string<\/code><\/li>\n<li><strong>root<\/strong>: <code>string<\/code><\/li>\n<li><strong>icons<\/strong>: <code>object<\/code><\/li>\n<li><strong>favicon<\/strong>: <code>string<\/code> (relative or absolute url)<\/li>\n<li><strong>disallow<\/strong>: <code>string array<\/code> (relative paths)<\/li>\n<li><strong>sitemap<\/strong>: <code>boolean<\/code> or <code>string<\/code> (relative or absolute url)<\/li>\n<\/ul>\n<p>Besides <code>domain<\/code>, <code>name<\/code> and <code>color<\/code> all other keys have sensible defaults generated based on the application scope.<\/p>\n<p>If you do not declare the <code>icons<\/code> key, Nullstack will scan any icons with the name following the pattern &quot;icon-[WIDTH]x[HEIGHT].png&quot; in your public folder.<\/p>\n<p>If the <code>sitemap<\/code> key is set to true your <strong>robots.txt<\/strong> file will point the sitemap to <code>https://${project.domain}/sitemap.xml<\/code>.<\/p>\n<p>The <code>cdn<\/code> key will prefix your asset bundles and will be available in the context so you can manually prefix other assets.<\/p>\n<p>The <code>protocol<\/code> key is &quot;http&quot; in development mode and &quot;https&quot; in production mode by default.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>project<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    project<span class=\"token punctuation\">.<\/span>name <span class=\"token operator\">=<\/span> <span class=\"token string\">'Nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>shortName <span class=\"token operator\">=<\/span> <span class=\"token string\">'Nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>domain <span class=\"token operator\">=<\/span> <span class=\"token string\">'nullstack.app'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>color <span class=\"token operator\">=<\/span> <span class=\"token string\">'#d22365'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>backgroundColor <span class=\"token operator\">=<\/span> <span class=\"token string\">'#d22365'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>type <span class=\"token operator\">=<\/span> <span class=\"token string\">'website'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>display <span class=\"token operator\">=<\/span> <span class=\"token string\">'standalone'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>orientation <span class=\"token operator\">=<\/span> <span class=\"token string\">'portrait'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>scope <span class=\"token operator\">=<\/span> <span class=\"token string\">'/'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>root <span class=\"token operator\">=<\/span> <span class=\"token string\">'/'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>icons <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token string\">'72'<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">'/icon-72x72.png'<\/span><span class=\"token punctuation\">,<\/span>\n      <span class=\"token string\">'128'<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">'/icon-128x128.png'<\/span><span class=\"token punctuation\">,<\/span>\n      <span class=\"token string\">'512'<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">'/icon-512x512.png'<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>favicon <span class=\"token operator\">=<\/span> <span class=\"token string\">'/favicon.png'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>disallow <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token string\">'/admin'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>sitemap <span class=\"token operator\">=<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>cdn <span class=\"token operator\">=<\/span> <span class=\"token string\">'cdn.nullstack.app'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>protocol <span class=\"token operator\">=<\/span> <span class=\"token string\">'https'<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>project<span class=\"token punctuation\">,<\/span> page<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    page<span class=\"token punctuation\">.<\/span>title <span class=\"token operator\">=<\/span> project<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 You can override the automatically generated <strong>manifest.json<\/strong> and <strong>robots.txt<\/strong> by serving your own file from the <strong>public<\/strong> folder<\/p>\n<\/blockquote>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about the <a href=\"/context-settings\">context <code>settings<\/code><\/a>.<\/p>\n","description":"The project object is a proxy in the Nullstack Context available in both client and server and gives you information about the app manifest and some metatags","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"context-project"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/context-secrets.html b/docs/context-secrets.html
index f1ae7c72..4902dd52 100644
--- a/docs/context-secrets.html
+++ b/docs/context-secrets.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -79,15 +79,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about the
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Context Secrets - Nullstack","description":"The secrets object is a proxy in the Nullstack Context available in server which you can use to configure your application with private information"};
       window.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/context-secrets":{"title":"Context Secrets","html":"<ul>\n<li>Type: <code>object<\/code><\/li>\n<li>Origin: <a href=\"/context#----nullstack-context\">Nullstack Context<\/a><\/li>\n<li>Availability: <strong>server<\/strong><\/li>\n<li><strong>readwrite<\/strong> in <strong>server<\/strong> context<\/li>\n<\/ul>\n<p>You can use it to configure your application with private information.<\/p>\n<p><code>secrets<\/code> keys are frozen after the <a href=\"/application-startup\">application startup<\/a>.<\/p>\n<p>The following keys are available in the object:<\/p>\n<ul>\n<li><strong>development<\/strong>: <code>object<\/code><\/li>\n<li><strong>production<\/strong>: <code>object<\/code><\/li>\n<li><strong>[anySetting]<\/strong>: <code>any<\/code><\/li>\n<\/ul>\n<p>You can assign keys to <code>development<\/code> or <code>production<\/code> keys in order to have different secrets per <a href=\"/context-environment\">environment<\/a>.<\/p>\n<p>If you assign a key directly to the <code>secrets<\/code> object it will be available in both environments.<\/p>\n<p>When reading from a key you must read directly from the <code>secrets<\/code> object and Nullstack will return the best-suited value for that <a href=\"/context-environment\">environment<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>secrets<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    secrets<span class=\"token punctuation\">.<\/span>development<span class=\"token punctuation\">.<\/span>privateKey <span class=\"token operator\">=<\/span> <span class=\"token string\">'SANDBOX_API_KEY'<\/span><span class=\"token punctuation\">;<\/span>\n    secrets<span class=\"token punctuation\">.<\/span>production<span class=\"token punctuation\">.<\/span>privateKey <span class=\"token operator\">=<\/span> <span class=\"token string\">'PRODUCTION_API_KEY'<\/span><span class=\"token punctuation\">;<\/span>\n    secrets<span class=\"token punctuation\">.<\/span>endpoint <span class=\"token operator\">=<\/span> <span class=\"token string\">'https://domain.com/api'<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">fetchFromApi<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>secrets<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> response <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span>secrets<span class=\"token punctuation\">.<\/span>endpoint<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span>\n      headers<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span>\n        Authorization<span class=\"token operator\">:<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Bearer <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>secrets<span class=\"token punctuation\">.<\/span>privateKey<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span>\n      <span class=\"token punctuation\">}<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">await<\/span> response<span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Any environment key starting with NULLSTACK_SECRETS_ will be mapped to the secrets in that environment.<\/p>\n<blockquote>\n<p>🐱‍💻 NULLSTACK_SECRETS_PRIVATE_KEY will be mapped to <code>secrets.privateKey<\/code><\/p>\n<\/blockquote>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about the <a href=\"/instance-self\">instance self<\/a>.<\/p>\n","description":"The secrets object is a proxy in the Nullstack Context available in server which you can use to configure your application with private information","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"context-secrets"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/context-secrets/index.html b/docs/context-secrets/index.html
index f1ae7c72..4902dd52 100644
--- a/docs/context-secrets/index.html
+++ b/docs/context-secrets/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -79,15 +79,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about the
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Context Secrets - Nullstack","description":"The secrets object is a proxy in the Nullstack Context available in server which you can use to configure your application with private information"};
       window.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/context-secrets":{"title":"Context Secrets","html":"<ul>\n<li>Type: <code>object<\/code><\/li>\n<li>Origin: <a href=\"/context#----nullstack-context\">Nullstack Context<\/a><\/li>\n<li>Availability: <strong>server<\/strong><\/li>\n<li><strong>readwrite<\/strong> in <strong>server<\/strong> context<\/li>\n<\/ul>\n<p>You can use it to configure your application with private information.<\/p>\n<p><code>secrets<\/code> keys are frozen after the <a href=\"/application-startup\">application startup<\/a>.<\/p>\n<p>The following keys are available in the object:<\/p>\n<ul>\n<li><strong>development<\/strong>: <code>object<\/code><\/li>\n<li><strong>production<\/strong>: <code>object<\/code><\/li>\n<li><strong>[anySetting]<\/strong>: <code>any<\/code><\/li>\n<\/ul>\n<p>You can assign keys to <code>development<\/code> or <code>production<\/code> keys in order to have different secrets per <a href=\"/context-environment\">environment<\/a>.<\/p>\n<p>If you assign a key directly to the <code>secrets<\/code> object it will be available in both environments.<\/p>\n<p>When reading from a key you must read directly from the <code>secrets<\/code> object and Nullstack will return the best-suited value for that <a href=\"/context-environment\">environment<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>secrets<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    secrets<span class=\"token punctuation\">.<\/span>development<span class=\"token punctuation\">.<\/span>privateKey <span class=\"token operator\">=<\/span> <span class=\"token string\">'SANDBOX_API_KEY'<\/span><span class=\"token punctuation\">;<\/span>\n    secrets<span class=\"token punctuation\">.<\/span>production<span class=\"token punctuation\">.<\/span>privateKey <span class=\"token operator\">=<\/span> <span class=\"token string\">'PRODUCTION_API_KEY'<\/span><span class=\"token punctuation\">;<\/span>\n    secrets<span class=\"token punctuation\">.<\/span>endpoint <span class=\"token operator\">=<\/span> <span class=\"token string\">'https://domain.com/api'<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">fetchFromApi<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>secrets<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> response <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span>secrets<span class=\"token punctuation\">.<\/span>endpoint<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span>\n      headers<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span>\n        Authorization<span class=\"token operator\">:<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Bearer <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>secrets<span class=\"token punctuation\">.<\/span>privateKey<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span>\n      <span class=\"token punctuation\">}<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">await<\/span> response<span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Any environment key starting with NULLSTACK_SECRETS_ will be mapped to the secrets in that environment.<\/p>\n<blockquote>\n<p>🐱‍💻 NULLSTACK_SECRETS_PRIVATE_KEY will be mapped to <code>secrets.privateKey<\/code><\/p>\n<\/blockquote>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about the <a href=\"/instance-self\">instance self<\/a>.<\/p>\n","description":"The secrets object is a proxy in the Nullstack Context available in server which you can use to configure your application with private information","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"context-secrets"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/context-settings.html b/docs/context-settings.html
index eca7799d..c1f52814 100644
--- a/docs/context-settings.html
+++ b/docs/context-settings.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -80,15 +80,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about the
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Context Settings - Nullstack","description":"The settings object is a proxy in the Nullstack Context available in both client and server which you can use to configure your application with public information"};
       window.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/context-settings":{"title":"Context Settings","html":"<ul>\n<li>Type: <code>object<\/code><\/li>\n<li>Origin: <a href=\"/context#----nullstack-context\">Nullstack Context<\/a><\/li>\n<li>Availability: server/client<\/li>\n<li><strong>readwrite<\/strong> in <strong>server<\/strong> context<\/li>\n<li><strong>readonly<\/strong> in <strong>client<\/strong> context<\/li>\n<\/ul>\n<p>You can use it to configure your application with public information.<\/p>\n<p><code>settings<\/code> keys are frozen after the <a href=\"/application-startup\">application startup<\/a>.<\/p>\n<p>The following keys are available in the object:<\/p>\n<ul>\n<li><strong>development<\/strong>: <code>object<\/code><\/li>\n<li><strong>production<\/strong>: <code>object<\/code><\/li>\n<li><strong>[anySetting]<\/strong>: <code>any<\/code><\/li>\n<\/ul>\n<p>You can assign keys to <code>development<\/code> or <code>production<\/code> keys in order to have different settings per <a href=\"/context-environment\">environment<\/a>.<\/p>\n<p>If you assign a key directly to the <code>settings<\/code> object it will be available in both environments.<\/p>\n<p>When reading from a key you must read directly from the <code>settings<\/code> object and Nullstack will return the best-suited value for that <a href=\"/context-environment\">environment<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>settings<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    settings<span class=\"token punctuation\">.<\/span>development<span class=\"token punctuation\">.<\/span>publicKey <span class=\"token operator\">=<\/span> <span class=\"token string\">'SANDBOX_API_KEY'<\/span><span class=\"token punctuation\">;<\/span>\n    settings<span class=\"token punctuation\">.<\/span>production<span class=\"token punctuation\">.<\/span>publicKey <span class=\"token operator\">=<\/span> <span class=\"token string\">'PRODUCTION_API_KEY'<\/span><span class=\"token punctuation\">;<\/span>\n    settings<span class=\"token punctuation\">.<\/span>endpoint <span class=\"token operator\">=<\/span> <span class=\"token string\">'https://domain.com/api'<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">hydrate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>settings<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> response <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span>settings<span class=\"token punctuation\">.<\/span>endpoint<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span>\n      headers<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span>\n        Authorization<span class=\"token operator\">:<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Bearer <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>settings<span class=\"token punctuation\">.<\/span>publicKey<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span>\n      <span class=\"token punctuation\">}<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>data <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> response<span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Any environment key starting with NULLSTACK_SETTINGS_ will be mapped to the settings in that environment.<\/p>\n<blockquote>\n<p>🐱‍💻 NULLSTACK_SETTINGS_PUBLIC_KEY will be mapped to <code>settings.publicKey<\/code><\/p>\n<\/blockquote>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about the <a href=\"/context-secrets\">context <code>secrets<\/code><\/a>.<\/p>\n","description":"The settings object is a proxy in the Nullstack Context available in both client and server which you can use to configure your application with public information","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"context-settings"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/context-settings/index.html b/docs/context-settings/index.html
index eca7799d..c1f52814 100644
--- a/docs/context-settings/index.html
+++ b/docs/context-settings/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -80,15 +80,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about the
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Context Settings - Nullstack","description":"The settings object is a proxy in the Nullstack Context available in both client and server which you can use to configure your application with public information"};
       window.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/context-settings":{"title":"Context Settings","html":"<ul>\n<li>Type: <code>object<\/code><\/li>\n<li>Origin: <a href=\"/context#----nullstack-context\">Nullstack Context<\/a><\/li>\n<li>Availability: server/client<\/li>\n<li><strong>readwrite<\/strong> in <strong>server<\/strong> context<\/li>\n<li><strong>readonly<\/strong> in <strong>client<\/strong> context<\/li>\n<\/ul>\n<p>You can use it to configure your application with public information.<\/p>\n<p><code>settings<\/code> keys are frozen after the <a href=\"/application-startup\">application startup<\/a>.<\/p>\n<p>The following keys are available in the object:<\/p>\n<ul>\n<li><strong>development<\/strong>: <code>object<\/code><\/li>\n<li><strong>production<\/strong>: <code>object<\/code><\/li>\n<li><strong>[anySetting]<\/strong>: <code>any<\/code><\/li>\n<\/ul>\n<p>You can assign keys to <code>development<\/code> or <code>production<\/code> keys in order to have different settings per <a href=\"/context-environment\">environment<\/a>.<\/p>\n<p>If you assign a key directly to the <code>settings<\/code> object it will be available in both environments.<\/p>\n<p>When reading from a key you must read directly from the <code>settings<\/code> object and Nullstack will return the best-suited value for that <a href=\"/context-environment\">environment<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>settings<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    settings<span class=\"token punctuation\">.<\/span>development<span class=\"token punctuation\">.<\/span>publicKey <span class=\"token operator\">=<\/span> <span class=\"token string\">'SANDBOX_API_KEY'<\/span><span class=\"token punctuation\">;<\/span>\n    settings<span class=\"token punctuation\">.<\/span>production<span class=\"token punctuation\">.<\/span>publicKey <span class=\"token operator\">=<\/span> <span class=\"token string\">'PRODUCTION_API_KEY'<\/span><span class=\"token punctuation\">;<\/span>\n    settings<span class=\"token punctuation\">.<\/span>endpoint <span class=\"token operator\">=<\/span> <span class=\"token string\">'https://domain.com/api'<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">hydrate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>settings<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> response <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span>settings<span class=\"token punctuation\">.<\/span>endpoint<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span>\n      headers<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span>\n        Authorization<span class=\"token operator\">:<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Bearer <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>settings<span class=\"token punctuation\">.<\/span>publicKey<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span>\n      <span class=\"token punctuation\">}<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>data <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> response<span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Any environment key starting with NULLSTACK_SETTINGS_ will be mapped to the settings in that environment.<\/p>\n<blockquote>\n<p>🐱‍💻 NULLSTACK_SETTINGS_PUBLIC_KEY will be mapped to <code>settings.publicKey<\/code><\/p>\n<\/blockquote>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about the <a href=\"/context-secrets\">context <code>secrets<\/code><\/a>.<\/p>\n","description":"The settings object is a proxy in the Nullstack Context available in both client and server which you can use to configure your application with public information","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"context-settings"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/context.html b/docs/context.html
index 03bd7814..3431afbf 100644
--- a/docs/context.html
+++ b/docs/context.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -183,15 +183,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about <a
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Context - Nullstack","description":"Every function in Nullstack receives a context as the argument."};
       window.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/context":{"title":"Context","html":"<p>Every function in Nullstack receives a context as the argument.<\/p>\n<p>There are two contexts, one for the client and another one for the server.<\/p>\n<p>The client context lives as long as the browser tab is open.<\/p>\n<p>The server context lives as long as the server is running.<\/p>\n<p>Both contexts are proxies that merge the keys of 3 objects:<\/p>\n<h2 id=\"----nullstack-context\"><a href=\"#----nullstack-context\">1 - Nullstack Context<\/a><\/h2><p>These are the information that the framework makes available to you by default.<\/p>\n<h3 id=\"the-available-global-keys-in-both-server-and-client-are-\"><a href=\"#the-available-global-keys-in-both-server-and-client-are-\">The available global keys in both server and client are:<\/a><\/h3><ul>\n<li><a href=\"/context-page\"><code>page<\/code><\/a><\/li>\n<li><a href=\"/context-project\"><code>project<\/code><\/a><\/li>\n<li><a href=\"/context-environment\"><code>environment<\/code><\/a><\/li>\n<li><a href=\"/routes-and-params#params\"><code>params<\/code><\/a><\/li>\n<li><a href=\"/routes-and-params#router\"><code>router<\/code><\/a><\/li>\n<li><a href=\"/context-settings\"><code>settings<\/code><\/a><\/li>\n<li><a href=\"/service-worker\"><code>worker<\/code><\/a><\/li>\n<\/ul>\n<h3 id=\"the-keys-available-only-in-server-functions-are-\"><a href=\"#the-keys-available-only-in-server-functions-are-\">The keys available only in server functions are:<\/a><\/h3><ul>\n<li><a href=\"/server-request-and-response\"><code>server<\/code><\/a><\/li>\n<li><a href=\"/server-request-and-response#request-and-response\"><code>request<\/code><\/a><\/li>\n<li><a href=\"/server-request-and-response#request-and-response\"><code>response<\/code><\/a><\/li>\n<li><a href=\"/context-secrets\"><code>secrets<\/code><\/a><\/li>\n<\/ul>\n<h3 id=\"the-key-available-only-in-client-\"><a href=\"#the-key-available-only-in-client-\">The key available only in client:<\/a><\/h3><ul>\n<li><a href=\"/context-instances\"><code>instances<\/code><\/a><\/li>\n<\/ul>\n<h2 id=\"----application-context\"><a href=\"#----application-context\">2 - Application Context<\/a><\/h2><p>When you set a key to the context it will be available for destructuring at any depth of the application, even the parents of your component or 3rd party applications that mount your component.<\/p>\n<p>Updating a key in the context causes the application to re-render automatically.<\/p>\n<p>You can think of this as a single concept to replace <strong>stores<\/strong>, <strong>contexts<\/strong>, <strong>services<\/strong>, and <strong>reducers<\/strong> at the same time using the dependency injection pattern with vanilla JavaScript objects instead.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">updateTotalCount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>totalCount <span class=\"token operator\">+=<\/span> context<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">double<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">+=<\/span> context<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">updateTotalCount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>double<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Counter <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Counter'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>totalCount <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>count <span class=\"token operator\">||<\/span> count <span class=\"token operator\">&lt;<\/span> <span class=\"token number\">10<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Counter<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span><span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"----component-context\"><a href=\"#----component-context\">3 - Component Context<\/a><\/h2><p>This one contains the attributes you declare in your tag, and including:<\/p>\n<ul>\n<li><a href=\"/context-data\"><code>data<\/code><\/a><\/li>\n<li><a href=\"/instance-self\"><code>self<\/code><\/a><\/li>\n<li><a href=\"/renderable-components#components-with-children\"><code>children<\/code><\/a><\/li>\n<\/ul>\n<p>If the attribute is declared in a component tag every function of that component will have access to that attribute in its context.<\/p>\n<p>If the attribute is declared in a tag that has an event it will be merged into the event function context.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">add<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">+=<\/span> context<span class=\"token punctuation\">.<\/span>delta <span class=\"token operator\">+<\/span> context<span class=\"token punctuation\">.<\/span>amount<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">,<\/span> delta<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>add<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">amount<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        add <span class=\"token punctuation\">{<\/span>delta<span class=\"token punctuation\">}<\/span> to <span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Counter <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Counter'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Counter<\/span><\/span> <span class=\"token attr-name\">delta<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"functions-context\"><a href=\"#functions-context\">Functions Context<\/a><\/h2><p>Every function of subclasses of Nullstack is injected with a copy of the instance context merged with its arguments.<\/p>\n<p>Arguments are optional, but if declared, must be a single object with keys of your choice.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">add<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">+=<\/span> context<span class=\"token punctuation\">.<\/span>amount <span class=\"token operator\">||<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">add<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>            <span class=\"token comment\">// sums 1<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">add<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>amount<span class=\"token operator\">:<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">// sums 2<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>context<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">// 3<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about <a href=\"/routes-and-params\">routes and params<\/a>.<\/p>\n","description":"Every function in Nullstack receives a context as the argument.","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"context"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/context/index.html b/docs/context/index.html
index 03bd7814..3431afbf 100644
--- a/docs/context/index.html
+++ b/docs/context/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -183,15 +183,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about <a
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Context - Nullstack","description":"Every function in Nullstack receives a context as the argument."};
       window.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/context":{"title":"Context","html":"<p>Every function in Nullstack receives a context as the argument.<\/p>\n<p>There are two contexts, one for the client and another one for the server.<\/p>\n<p>The client context lives as long as the browser tab is open.<\/p>\n<p>The server context lives as long as the server is running.<\/p>\n<p>Both contexts are proxies that merge the keys of 3 objects:<\/p>\n<h2 id=\"----nullstack-context\"><a href=\"#----nullstack-context\">1 - Nullstack Context<\/a><\/h2><p>These are the information that the framework makes available to you by default.<\/p>\n<h3 id=\"the-available-global-keys-in-both-server-and-client-are-\"><a href=\"#the-available-global-keys-in-both-server-and-client-are-\">The available global keys in both server and client are:<\/a><\/h3><ul>\n<li><a href=\"/context-page\"><code>page<\/code><\/a><\/li>\n<li><a href=\"/context-project\"><code>project<\/code><\/a><\/li>\n<li><a href=\"/context-environment\"><code>environment<\/code><\/a><\/li>\n<li><a href=\"/routes-and-params#params\"><code>params<\/code><\/a><\/li>\n<li><a href=\"/routes-and-params#router\"><code>router<\/code><\/a><\/li>\n<li><a href=\"/context-settings\"><code>settings<\/code><\/a><\/li>\n<li><a href=\"/service-worker\"><code>worker<\/code><\/a><\/li>\n<\/ul>\n<h3 id=\"the-keys-available-only-in-server-functions-are-\"><a href=\"#the-keys-available-only-in-server-functions-are-\">The keys available only in server functions are:<\/a><\/h3><ul>\n<li><a href=\"/server-request-and-response\"><code>server<\/code><\/a><\/li>\n<li><a href=\"/server-request-and-response#request-and-response\"><code>request<\/code><\/a><\/li>\n<li><a href=\"/server-request-and-response#request-and-response\"><code>response<\/code><\/a><\/li>\n<li><a href=\"/context-secrets\"><code>secrets<\/code><\/a><\/li>\n<\/ul>\n<h3 id=\"the-key-available-only-in-client-\"><a href=\"#the-key-available-only-in-client-\">The key available only in client:<\/a><\/h3><ul>\n<li><a href=\"/context-instances\"><code>instances<\/code><\/a><\/li>\n<\/ul>\n<h2 id=\"----application-context\"><a href=\"#----application-context\">2 - Application Context<\/a><\/h2><p>When you set a key to the context it will be available for destructuring at any depth of the application, even the parents of your component or 3rd party applications that mount your component.<\/p>\n<p>Updating a key in the context causes the application to re-render automatically.<\/p>\n<p>You can think of this as a single concept to replace <strong>stores<\/strong>, <strong>contexts<\/strong>, <strong>services<\/strong>, and <strong>reducers<\/strong> at the same time using the dependency injection pattern with vanilla JavaScript objects instead.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">updateTotalCount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>totalCount <span class=\"token operator\">+=<\/span> context<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">double<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">+=<\/span> context<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">updateTotalCount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>double<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Counter <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Counter'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>totalCount <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>count <span class=\"token operator\">||<\/span> count <span class=\"token operator\">&lt;<\/span> <span class=\"token number\">10<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Counter<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span><span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"----component-context\"><a href=\"#----component-context\">3 - Component Context<\/a><\/h2><p>This one contains the attributes you declare in your tag, and including:<\/p>\n<ul>\n<li><a href=\"/context-data\"><code>data<\/code><\/a><\/li>\n<li><a href=\"/instance-self\"><code>self<\/code><\/a><\/li>\n<li><a href=\"/renderable-components#components-with-children\"><code>children<\/code><\/a><\/li>\n<\/ul>\n<p>If the attribute is declared in a component tag every function of that component will have access to that attribute in its context.<\/p>\n<p>If the attribute is declared in a tag that has an event it will be merged into the event function context.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">add<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">+=<\/span> context<span class=\"token punctuation\">.<\/span>delta <span class=\"token operator\">+<\/span> context<span class=\"token punctuation\">.<\/span>amount<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">,<\/span> delta<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>add<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">amount<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        add <span class=\"token punctuation\">{<\/span>delta<span class=\"token punctuation\">}<\/span> to <span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Counter <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Counter'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Counter<\/span><\/span> <span class=\"token attr-name\">delta<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"functions-context\"><a href=\"#functions-context\">Functions Context<\/a><\/h2><p>Every function of subclasses of Nullstack is injected with a copy of the instance context merged with its arguments.<\/p>\n<p>Arguments are optional, but if declared, must be a single object with keys of your choice.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">add<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">+=<\/span> context<span class=\"token punctuation\">.<\/span>amount <span class=\"token operator\">||<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">add<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>            <span class=\"token comment\">// sums 1<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">add<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>amount<span class=\"token operator\">:<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">// sums 2<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>context<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">// 3<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about <a href=\"/routes-and-params\">routes and params<\/a>.<\/p>\n","description":"Every function in Nullstack receives a context as the argument.","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"context"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/contexto-page.html b/docs/contexto-page.html
index 68111404..877b80ff 100644
--- a/docs/contexto-page.html
+++ b/docs/contexto-page.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -36,15 +36,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":404,"title":"Page Not Found - Nullstack","description":"Sorry, this is not the page you are looking for."};
       window.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/contexto-page":{"title":"Page Not Found","html":"<p>Perhaps you want to learn about <a href=\"/context-page\">how to make a 404 page with Nullstack<\/a>?<\/p>\n<p>If you are looking for something else, you should <a href=\"/documentation\">read the documentation<\/a>.<\/p>\n","description":"Sorry, this is not the page you are looking for.","status":404,"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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"contexto-page"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/contexto-page/index.html b/docs/contexto-page/index.html
index 68111404..877b80ff 100644
--- a/docs/contexto-page/index.html
+++ b/docs/contexto-page/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -36,15 +36,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":404,"title":"Page Not Found - Nullstack","description":"Sorry, this is not the page you are looking for."};
       window.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/contexto-page":{"title":"Page Not Found","html":"<p>Perhaps you want to learn about <a href=\"/context-page\">how to make a 404 page with Nullstack<\/a>?<\/p>\n<p>If you are looking for something else, you should <a href=\"/documentation\">read the documentation<\/a>.<\/p>\n","description":"Sorry, this is not the page you are looking for.","status":404,"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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"contexto-page"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/contributors.html b/docs/contributors.html
index 993e1154..ab565c66 100644
--- a/docs/contributors.html
+++ b/docs/contributors.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -34,15 +34,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Contributors - Nullstack","description":"Found a bug or want a new feature? Become a contributor!","locale":"en-US"};
       window.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-7/contributors":{"documentation":[],"packages":[],"locale":"en-US","i18n":{"title":"Contributors","description":"Found a bug or want a new feature? Become a contributor!","state":{"title":"The State of Nullstack","paragraphs":["Nullstack is being developed since January 2019 with features being extracted from freelancing projects.","At this point the API is stable, lifecycle methods and context keys will pretty much be frozen.","We are not yet on 1.0 but really close, the only thing missing is to test it on applications made outside the core team to figure out if it fits the needs of other programmers."]},"roadmap":{"title":"The Roadmap","paragraphs":["The next updates will be guided towards fixing any bugs that are found and focus on quality of life.","The updates listed on <a href=\"https://github.com/nullstack/nullstack/issues\" target=\"_blank\" rel=\"noopener\">Nullstack issues<\/a> are the next planned steps without any particular order."]},"core":{"title":"The Core Team","paragraphs":["Nullstack was developed by full-stack neuro-atypical freelancers.","With a heavy background in Rails, Ember.js, React.js and the Vue.js philosophy the inspirations took from those projects might be obvious."],"team":[{"name":"Christian Mortaro","role":"Autistic Author","github":"Mortaro","description":"Creator of the concept. Comes with new API proposals to its favorite rubber ducks and returns with commits.","contribution":"Reverse engineered wishful thinking code into existence and then refactored it into a framework."},{"name":"Dayson Marx","role":"Distracted Designer","github":"daysonmarx","description":"Rubber duck with human skills that makes sure the code is not going too far outside the box, then makes the box look nice.","contribution":"API reviewer that developed third party projects to test proof of concepts from a front-end focused perspective."},{"name":"Anny Figueira","role":"Autistic Adopter","github":"AnnyFigueira","description":"Rubber duck with a neck to find inconsistencies and problems, waiting till an API is approved to force us into rewriting everything.","contribution":"An early adopter of the framework that developed real production applications to validate how the parts fit together."},{"name":"Bianca Augusta","role":"Autistic Artist","github":"Bilkaya","description":"Freelance illustrator for 10 years. Warcraft addict, aspiring cosplayer and druid tanker in WoW.","contribution":"Mother of Nulla-Chan and reads scripts here and there under pure pressure from Mortaro."},{"name":"Guilherme Correia","role":"import Member from <a href='https://github.com/vuejs-br' target='_blank' rel='noopener'>vuejs-br<\/a>","github":"GuiDevloper","description":"Experimentalist, universes writer, dreamer and developer when finds and plays the right untitled cassette tape.","contribution":"User of undocumented features and creator of issues requiring documentation that he will do himself."},{"name":"Alisson Suassuna","role":"God's servant","github":"alissonsuassuna","description":"TipsCode instructor. Full-stack JavaScript developer, passionate about technology and servant of the Lord Jesus Christ.","contribution":"In charge of creating content about Nullstack, classes, tips and tutorials. Focused in making Nullstack easy to use."}]},"packages":{"title":"Packages Contributors"},"documentation":{"title":"Documentation Contributors"},"instructions":{"title":"How to Contribute","paragraphs":["It's simple. Found a bug or want a new feature?","<a href=\"https://github.com/nullstack/nullstack/issues\" target=\"_blank\" rel=\"noopener\">Create an issue<\/a> or <a href=\"https://github.com/nullstack/nullstack/pulls\" target=\"_blank\" rel=\"noopener\" class=\"ci1\">submit a pull request<\/a> with tests."]},"githubCacheWarning":"* The list might take a while to update due to GitHub API cache"}},"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/contributors/index.html b/docs/contributors/index.html
index 993e1154..ab565c66 100644
--- a/docs/contributors/index.html
+++ b/docs/contributors/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -34,15 +34,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Contributors - Nullstack","description":"Found a bug or want a new feature? Become a contributor!","locale":"en-US"};
       window.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-7/contributors":{"documentation":[],"packages":[],"locale":"en-US","i18n":{"title":"Contributors","description":"Found a bug or want a new feature? Become a contributor!","state":{"title":"The State of Nullstack","paragraphs":["Nullstack is being developed since January 2019 with features being extracted from freelancing projects.","At this point the API is stable, lifecycle methods and context keys will pretty much be frozen.","We are not yet on 1.0 but really close, the only thing missing is to test it on applications made outside the core team to figure out if it fits the needs of other programmers."]},"roadmap":{"title":"The Roadmap","paragraphs":["The next updates will be guided towards fixing any bugs that are found and focus on quality of life.","The updates listed on <a href=\"https://github.com/nullstack/nullstack/issues\" target=\"_blank\" rel=\"noopener\">Nullstack issues<\/a> are the next planned steps without any particular order."]},"core":{"title":"The Core Team","paragraphs":["Nullstack was developed by full-stack neuro-atypical freelancers.","With a heavy background in Rails, Ember.js, React.js and the Vue.js philosophy the inspirations took from those projects might be obvious."],"team":[{"name":"Christian Mortaro","role":"Autistic Author","github":"Mortaro","description":"Creator of the concept. Comes with new API proposals to its favorite rubber ducks and returns with commits.","contribution":"Reverse engineered wishful thinking code into existence and then refactored it into a framework."},{"name":"Dayson Marx","role":"Distracted Designer","github":"daysonmarx","description":"Rubber duck with human skills that makes sure the code is not going too far outside the box, then makes the box look nice.","contribution":"API reviewer that developed third party projects to test proof of concepts from a front-end focused perspective."},{"name":"Anny Figueira","role":"Autistic Adopter","github":"AnnyFigueira","description":"Rubber duck with a neck to find inconsistencies and problems, waiting till an API is approved to force us into rewriting everything.","contribution":"An early adopter of the framework that developed real production applications to validate how the parts fit together."},{"name":"Bianca Augusta","role":"Autistic Artist","github":"Bilkaya","description":"Freelance illustrator for 10 years. Warcraft addict, aspiring cosplayer and druid tanker in WoW.","contribution":"Mother of Nulla-Chan and reads scripts here and there under pure pressure from Mortaro."},{"name":"Guilherme Correia","role":"import Member from <a href='https://github.com/vuejs-br' target='_blank' rel='noopener'>vuejs-br<\/a>","github":"GuiDevloper","description":"Experimentalist, universes writer, dreamer and developer when finds and plays the right untitled cassette tape.","contribution":"User of undocumented features and creator of issues requiring documentation that he will do himself."},{"name":"Alisson Suassuna","role":"God's servant","github":"alissonsuassuna","description":"TipsCode instructor. Full-stack JavaScript developer, passionate about technology and servant of the Lord Jesus Christ.","contribution":"In charge of creating content about Nullstack, classes, tips and tutorials. Focused in making Nullstack easy to use."}]},"packages":{"title":"Packages Contributors"},"documentation":{"title":"Documentation Contributors"},"instructions":{"title":"How to Contribute","paragraphs":["It's simple. Found a bug or want a new feature?","<a href=\"https://github.com/nullstack/nullstack/issues\" target=\"_blank\" rel=\"noopener\">Create an issue<\/a> or <a href=\"https://github.com/nullstack/nullstack/pulls\" target=\"_blank\" rel=\"noopener\" class=\"ci1\">submit a pull request<\/a> with tests."]},"githubCacheWarning":"* The list might take a while to update due to GitHub API cache"}},"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/documentation.html b/docs/documentation.html
index 0571ffaf..4769ff52 100644
--- a/docs/documentation.html
+++ b/docs/documentation.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -34,15 +34,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200};
       window.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-3/documentation":{"locale":"en-US","i18n":{"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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/documentation/index.html b/docs/documentation/index.html
index 0571ffaf..4769ff52 100644
--- a/docs/documentation/index.html
+++ b/docs/documentation/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -34,15 +34,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200};
       window.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-3/documentation":{"locale":"en-US","i18n":{"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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/full-stack-lifecycle.html b/docs/full-stack-lifecycle.html
index 0be03164..bb92cd12 100644
--- a/docs/full-stack-lifecycle.html
+++ b/docs/full-stack-lifecycle.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -154,15 +154,15 @@ <h2 id="next-steps"><a href="#next-steps">Next steps</a></h2><p>⚔ Learn about
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Full-Stack Lifecycle - Nullstack","description":"Lifecycle methods are special named functions that you can declare in the class."};
       window.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/full-stack-lifecycle":{"title":"Full-Stack Lifecycle","html":"<p>Lifecycle methods are special named functions that you can declare in the class.<\/p>\n<p>Each lifecycle method runs in a specific order in a queue so it's guaranteed that all components initiated in that cycle will be prepared before the first one is initiated.<\/p>\n<h2 id=\"prepare\"><a href=\"#prepare\">Prepare<\/a><\/h2><p>This method is blocking and runs before the first time the component is rendered.<\/p>\n<p>You can use this function to set the state that the user will see before things are loaded.<\/p>\n<p>If the user is entering from this route <code>prepare<\/code> will run in the server before Nullstack <a href=\"/server-side-rendering\">server-side renders<\/a> your application.<\/p>\n<p>If the user is navigating from another route this method will run in the client.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>date <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Date<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"initiate\"><a href=\"#initiate\">Initiate<\/a><\/h2><p>This method can be async and runs right after the component is prepared and rendered for the first time.<\/p>\n<p>You can use this function to invoke another server function and load the data to present the page.<\/p>\n<p>If the user is entering from this route <code>initiate<\/code> will run in the server.<\/p>\n<p>Nullstack will wait till the promise is resolved and then finally generate the HTML that will be served.<\/p>\n<p>If the user is navigating from another route this method will run in the client.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>task <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">getTaskByDay<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>\n      day<span class=\"token operator\">:<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>date\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Learn more about <a href=\"/server-functions\">server functions<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"hydrate\"><a href=\"#hydrate\">Hydrate<\/a><\/h2><p>This method is async and will only run in the client.<\/p>\n<p>This method will always run no matter which environment started the component.<\/p>\n<p>This is a good place to trigger dependencies that manipulate the dom or can only run on the client-side.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">hydrate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>timer <span class=\"token operator\">=<\/span> <span class=\"token function\">setInterval<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n      console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>date<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">1000<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"update\"><a href=\"#update\">Update<\/a><\/h2><p>This method is async and will only run in the client.<\/p>\n<p>This method runs on every component anytime the application state changes.<\/p>\n<blockquote>\n<p>🔥 Be careful not to cause infinite loopings when mutating state inside <code>update<\/code>.<\/p>\n<\/blockquote>\n<p>This will run right before rendering but will not block the rendering queue.<\/p>\n<p>The <code>update<\/code> function will not start running until the application is rendered after the <code>initiate<\/code>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">update<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> today <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Date<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span>today<span class=\"token punctuation\">.<\/span><span class=\"token function\">getDay<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">!=<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>date<span class=\"token punctuation\">.<\/span><span class=\"token function\">getDay<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>date <span class=\"token operator\">=<\/span> today<span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Lifecycle methods have no special side effects, you can call them manually without causing problems.<\/p>\n<\/blockquote>\n<h2 id=\"terminate\"><a href=\"#terminate\">Terminate<\/a><\/h2><p>This method is async and will only run in the client.<\/p>\n<p>This method will run after your component leaves the DOM.<\/p>\n<p>This is the place to clean up whatever you set up in the <code>hydrate<\/code> method.<\/p>\n<p>The instance will be garbage collected after the <code>Promise<\/code> is resolved.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">terminate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token function\">clearInterval<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>timer<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"next-steps\"><a href=\"#next-steps\">Next steps<\/a><\/h2><p>⚔ Learn about <a href=\"/server-functions\">server functions<\/a>.<\/p>\n","description":"Lifecycle methods are special named functions that you can declare in the class.","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"full-stack-lifecycle"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/full-stack-lifecycle/index.html b/docs/full-stack-lifecycle/index.html
index 0be03164..bb92cd12 100644
--- a/docs/full-stack-lifecycle/index.html
+++ b/docs/full-stack-lifecycle/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -154,15 +154,15 @@ <h2 id="next-steps"><a href="#next-steps">Next steps</a></h2><p>⚔ Learn about
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Full-Stack Lifecycle - Nullstack","description":"Lifecycle methods are special named functions that you can declare in the class."};
       window.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/full-stack-lifecycle":{"title":"Full-Stack Lifecycle","html":"<p>Lifecycle methods are special named functions that you can declare in the class.<\/p>\n<p>Each lifecycle method runs in a specific order in a queue so it's guaranteed that all components initiated in that cycle will be prepared before the first one is initiated.<\/p>\n<h2 id=\"prepare\"><a href=\"#prepare\">Prepare<\/a><\/h2><p>This method is blocking and runs before the first time the component is rendered.<\/p>\n<p>You can use this function to set the state that the user will see before things are loaded.<\/p>\n<p>If the user is entering from this route <code>prepare<\/code> will run in the server before Nullstack <a href=\"/server-side-rendering\">server-side renders<\/a> your application.<\/p>\n<p>If the user is navigating from another route this method will run in the client.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>date <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Date<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"initiate\"><a href=\"#initiate\">Initiate<\/a><\/h2><p>This method can be async and runs right after the component is prepared and rendered for the first time.<\/p>\n<p>You can use this function to invoke another server function and load the data to present the page.<\/p>\n<p>If the user is entering from this route <code>initiate<\/code> will run in the server.<\/p>\n<p>Nullstack will wait till the promise is resolved and then finally generate the HTML that will be served.<\/p>\n<p>If the user is navigating from another route this method will run in the client.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>task <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">getTaskByDay<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>\n      day<span class=\"token operator\">:<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>date\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Learn more about <a href=\"/server-functions\">server functions<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"hydrate\"><a href=\"#hydrate\">Hydrate<\/a><\/h2><p>This method is async and will only run in the client.<\/p>\n<p>This method will always run no matter which environment started the component.<\/p>\n<p>This is a good place to trigger dependencies that manipulate the dom or can only run on the client-side.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">hydrate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>timer <span class=\"token operator\">=<\/span> <span class=\"token function\">setInterval<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n      console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>date<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">1000<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"update\"><a href=\"#update\">Update<\/a><\/h2><p>This method is async and will only run in the client.<\/p>\n<p>This method runs on every component anytime the application state changes.<\/p>\n<blockquote>\n<p>🔥 Be careful not to cause infinite loopings when mutating state inside <code>update<\/code>.<\/p>\n<\/blockquote>\n<p>This will run right before rendering but will not block the rendering queue.<\/p>\n<p>The <code>update<\/code> function will not start running until the application is rendered after the <code>initiate<\/code>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">update<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> today <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Date<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span>today<span class=\"token punctuation\">.<\/span><span class=\"token function\">getDay<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">!=<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>date<span class=\"token punctuation\">.<\/span><span class=\"token function\">getDay<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>date <span class=\"token operator\">=<\/span> today<span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Lifecycle methods have no special side effects, you can call them manually without causing problems.<\/p>\n<\/blockquote>\n<h2 id=\"terminate\"><a href=\"#terminate\">Terminate<\/a><\/h2><p>This method is async and will only run in the client.<\/p>\n<p>This method will run after your component leaves the DOM.<\/p>\n<p>This is the place to clean up whatever you set up in the <code>hydrate<\/code> method.<\/p>\n<p>The instance will be garbage collected after the <code>Promise<\/code> is resolved.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">terminate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token function\">clearInterval<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>timer<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"next-steps\"><a href=\"#next-steps\">Next steps<\/a><\/h2><p>⚔ Learn about <a href=\"/server-functions\">server functions<\/a>.<\/p>\n","description":"Lifecycle methods are special named functions that you can declare in the class.","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"full-stack-lifecycle"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/functional-components.html b/docs/functional-components.html
index f55ffaf7..1564316a 100644
--- a/docs/functional-components.html
+++ b/docs/functional-components.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -138,15 +138,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about the
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Functional Components - Nullstack","description":"Functional components are simple pure functions that can update context and have no state of it's own"};
       window.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/functional-components":{"title":"Functional Components","html":"<p>Since v0.9.21 Nullstack has the simplicity of pure functional components out-of-box.<\/p>\n<p>This one follows <a href=\"/renderable-components\">renderable components<\/a> spec but with more emphasis on the <strong>renderable<\/strong>.<\/p>\n<p>Using pure functions you can write focused-on-render components as follows:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">AnonComponent<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">html<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>html<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>id<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">NamedComponent<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">html<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>html<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>id<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">ArrowComponent<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">html<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>html<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>id<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> <span class=\"token punctuation\">{<\/span>\n  AnonComponent<span class=\"token punctuation\">,<\/span>\n  NamedComponent<span class=\"token punctuation\">,<\/span>\n  ArrowComponent\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>And exported like that it's use would be:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Functionals <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Functionals'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> html <span class=\"token operator\">=<\/span> <span class=\"token string\">\"&lt;p>text&lt;/p>\"<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Functionals.AnonComponent<\/span><\/span> <span class=\"token attr-name\">html<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>html<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>1<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Functionals.NamedComponent<\/span><\/span> <span class=\"token attr-name\">html<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>html<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>2<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Functionals.ArrowComponent<\/span><\/span> <span class=\"token attr-name\">html<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>html<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>3<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Then the rendering result would directly look like:<\/p>\n<pre><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>1<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>text<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>2<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>text<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>3<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>text<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<h2 id=\"binding-context-values\"><a href=\"#binding-context-values\">Binding Context Values<\/a><\/h2><p>Even not having state of it's own, Nullstack functional components can bind and update <a href=\"/context\"><code>context<\/code><\/a> values.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> BindPureComponent <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Functionals'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">BindPureComponent<\/span><\/span><span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Registering <code>counter<\/code> in the <code>context<\/code> like in the above component, we can read and update this data in the <strong>BindPureComponent<\/strong> as follows:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">BindPureComponent<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>number<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span>\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<p>Or, even use local functions ran by events to do this update:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">EventPureComponent<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">const<\/span> multiple <span class=\"token operator\">=<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token keyword\">function<\/span> <span class=\"token function\">multiply<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">*=<\/span> multiple<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>multiply<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>Multiply<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span>\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 With it's versatility and simplicity functional components are perfect for stateless components libraries<\/p>\n<\/blockquote>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about the <a href=\"/context-data\">context <code>data<\/code><\/a>.<\/p>\n","description":"Functional components are simple pure functions that can update context and have no state of it's own","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"functional-components"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/functional-components/index.html b/docs/functional-components/index.html
index f55ffaf7..1564316a 100644
--- a/docs/functional-components/index.html
+++ b/docs/functional-components/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -138,15 +138,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about the
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Functional Components - Nullstack","description":"Functional components are simple pure functions that can update context and have no state of it's own"};
       window.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/functional-components":{"title":"Functional Components","html":"<p>Since v0.9.21 Nullstack has the simplicity of pure functional components out-of-box.<\/p>\n<p>This one follows <a href=\"/renderable-components\">renderable components<\/a> spec but with more emphasis on the <strong>renderable<\/strong>.<\/p>\n<p>Using pure functions you can write focused-on-render components as follows:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">AnonComponent<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">html<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>html<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>id<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">NamedComponent<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">html<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>html<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>id<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">ArrowComponent<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">html<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>html<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>id<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> <span class=\"token punctuation\">{<\/span>\n  AnonComponent<span class=\"token punctuation\">,<\/span>\n  NamedComponent<span class=\"token punctuation\">,<\/span>\n  ArrowComponent\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>And exported like that it's use would be:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Functionals <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Functionals'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> html <span class=\"token operator\">=<\/span> <span class=\"token string\">\"&lt;p>text&lt;/p>\"<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Functionals.AnonComponent<\/span><\/span> <span class=\"token attr-name\">html<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>html<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>1<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Functionals.NamedComponent<\/span><\/span> <span class=\"token attr-name\">html<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>html<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>2<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Functionals.ArrowComponent<\/span><\/span> <span class=\"token attr-name\">html<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>html<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>3<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Then the rendering result would directly look like:<\/p>\n<pre><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>1<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>text<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>2<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>text<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>3<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>text<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<h2 id=\"binding-context-values\"><a href=\"#binding-context-values\">Binding Context Values<\/a><\/h2><p>Even not having state of it's own, Nullstack functional components can bind and update <a href=\"/context\"><code>context<\/code><\/a> values.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> BindPureComponent <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Functionals'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">BindPureComponent<\/span><\/span><span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Registering <code>counter<\/code> in the <code>context<\/code> like in the above component, we can read and update this data in the <strong>BindPureComponent<\/strong> as follows:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">BindPureComponent<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>number<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span>\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<p>Or, even use local functions ran by events to do this update:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">EventPureComponent<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">const<\/span> multiple <span class=\"token operator\">=<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token keyword\">function<\/span> <span class=\"token function\">multiply<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">*=<\/span> multiple<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>multiply<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>Multiply<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span>\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 With it's versatility and simplicity functional components are perfect for stateless components libraries<\/p>\n<\/blockquote>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about the <a href=\"/context-data\">context <code>data<\/code><\/a>.<\/p>\n","description":"Functional components are simple pure functions that can update context and have no state of it's own","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"functional-components"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/getting-started.html b/docs/getting-started.html
index 31d7a51c..ce79936b 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -110,15 +110,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Create your fir
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Getting Started - Nullstack","description":"Create full-stack JavaScript applications within seconds"};
       window.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/getting-started":{"title":"Getting Started","html":"<blockquote>\n<p>📌 You can watch a video tutorial on our <a href=\"https://www.youtube.com/watch?v=l23z00GEar8&amp;list=PL5ylYELQy1hyFbguVaShp3XujjdVXLpId\" target=\"_blank\" rel=\"noopener\">Youtube Channel<\/a>.<\/p>\n<\/blockquote>\n<p>Create full-stack JavaScript applications within seconds using <code>npx<\/code> to generate your project files from the latest template.<\/p>\n<blockquote>\n<p>🔥 The minimum required <a href=\"https://nodejs.org\" target=\"_blank\" rel=\"noopener\">node.js<\/a> version for development mode is <em>12.12.0<\/em>.<\/p>\n<\/blockquote>\n<blockquote>\n<p>⚠ If the directory you are in contains spaces, you use Windows and <code>npx<\/code> gives errors, read about <a href=\"#the-known-npx-bug\" target=\"_blank\" rel=\"noopener\">the known npx bug<\/a>.<\/p>\n<\/blockquote>\n<p>Replace <code>project-name<\/code> with your project name and run the command below to start a project:<\/p>\n<pre><code class=\"language-sh\">npx create<span class=\"token operator\">-<\/span>nullstack<span class=\"token operator\">-<\/span>app project<span class=\"token operator\">-<\/span>name\n<\/code><\/pre>\n<p>Change directory to the generated folder:<\/p>\n<pre><code class=\"language-sh\">cd project<span class=\"token operator\">-<\/span>name\n<\/code><\/pre>\n<p>Install the dependencies:<\/p>\n<pre><code class=\"language-sh\">npm install\n<\/code><\/pre>\n<p>Start the application in development mode:<\/p>\n<pre><code class=\"language-sh\">npm start\n<\/code><\/pre>\n<h2 id=\"understanding-the-generated-files\"><a href=\"#understanding-the-generated-files\">Understanding the generated files<\/a><\/h2><p>The following folders and files will be generated:<\/p>\n<h3 id=\"index-js\"><a href=\"#index-js\">index.js<\/a><\/h3><p>This is the <a href=\"https://webpack.js.org\" target=\"_blank\" rel=\"noopener\">Webpack<\/a> entry point.<\/p>\n<p>Usually, you don't have to touch this file, but it is a convenient place to import global dependencies like CSS frameworks.<\/p>\n<h3 id=\"src-\"><a href=\"#src-\">src/<\/a><\/h3><p>This folder will contain the actual source code of your application.<\/p>\n<h3 id=\"src-application-njs\"><a href=\"#src-application-njs\">src/Application.njs<\/a><\/h3><p>This is your application main file.<\/p>\n<blockquote>\n<p>✨ Learn more about the <a href=\"/njs-file-extension\" title=\"Nullstack JavaScript\">njs file extension<\/a>.<\/p>\n<\/blockquote>\n<p>The <code>start<\/code> function will be automatically called once when you run <code>npm start<\/code>, use it to populate your server <a href=\"/context\">context<\/a> with things like <a href=\"/how-to-use-mongodb-with-nullstack\">database<\/a>, <a href=\"/context-settings\">settings<\/a>, and <a href=\"/context-secrets\">secrets<\/a>.<\/p>\n<blockquote>\n<p>✨ Learn more about the <a href=\"/application-startup\">application startup<\/a>.<\/p>\n<\/blockquote>\n<h3 id=\"src-application-scss\"><a href=\"#src-application-scss\">src/Application.scss<\/a><\/h3><p>This is an empty file just to demonstrate that you can use <a href=\"/styles\">SCSS with Nullstack<\/a>.<\/p>\n<p>It is a good practice to import a style file in a component with the same name.<\/p>\n<blockquote>\n<p>✨ Learn more about <a href=\"/styles\">styles<\/a>.<\/p>\n<\/blockquote>\n<h3 id=\"public-\"><a href=\"#public-\">public/<\/a><\/h3><p>Every file in here will be available to anyone from the domain root.<\/p>\n<p>By default <code>create-nullstack-app<\/code> generates the icons required for your <strong>manifest.json<\/strong> and images for OG meta tags.<\/p>\n<blockquote>\n<p>✨ Learn more about <a href=\"/context-project\">manifest.json<\/a>.<\/p>\n<\/blockquote>\n<p>Be sure to replace these images with your project identity.<\/p>\n<h3 id=\"-development-\"><a href=\"#-development-\">.development/<\/a><\/h3><p>This is the compiled result of your application in development mode.<\/p>\n<blockquote>\n<p>🔥 Do not touch this folder<\/p>\n<\/blockquote>\n<h3 id=\"-production-\"><a href=\"#-production-\">.production/<\/a><\/h3><p>This is the compiled result of your application in production mode.<\/p>\n<blockquote>\n<p>🔥 Do not touch this folder<\/p>\n<\/blockquote>\n<blockquote>\n<p>✨ Learn more about <a href=\"/how-to-deploy-a-nullstack-application\">how to deploy a Nullstack application<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"the-known-npx-bug\"><a href=\"#the-known-npx-bug\">The known npx bug<\/a><\/h2><p>Warned on <code>npx<\/code> issues like <a href=\"https://github.com/zkat/npx/issues/100\" target=\"_blank\" rel=\"noopener\">#100<\/a>, <a href=\"https://github.com/zkat/npx/issues/110\" target=\"_blank\" rel=\"noopener\">#110<\/a> and <a href=\"https://github.com/zkat/npx/issues/146\" target=\"_blank\" rel=\"noopener\">#143<\/a>, it has an error when trying to resolve the path to his cache folder when contains spaces.<\/p>\n<p>If this happens to you, our recommendations are:<\/p>\n<ul>\n<li><p>Using downloaded as you normally would with <code>npm<\/code>:<\/p>\n<pre><code class=\"language-sh\">npm i <span class=\"token operator\">-<\/span>g create<span class=\"token operator\">-<\/span>nullstack<span class=\"token operator\">-<\/span>app\ncreate<span class=\"token operator\">-<\/span>nullstack<span class=\"token operator\">-<\/span>app project<span class=\"token operator\">-<\/span>name\n<\/code><\/pre><\/li>\n<li><p>or, change the cache folder directory, as stated <a href=\"https://github.com/zkat/npx/issues/146#issuecomment-384016791\" target=\"_blank\" rel=\"noopener\">here<\/a> and <a href=\"https://github.com/zkat/npx/issues/146#issuecomment-384019497\" target=\"_blank\" rel=\"noopener\">here<\/a>:<\/p>\n<ul>\n<li>If you want to keep the use of space, replace <code>FirstName<\/code> with the one used on your path and run:<\/li>\n<\/ul>\n<pre><code class=\"language-sh\">npm config <span class=\"token keyword\">set<\/span> cache <span class=\"token string\">\"C:\\Users\\FirstName~1\\AppData\\Roaming\\npm-cache\"<\/span> <span class=\"token operator\">--<\/span>global\n<\/code><\/pre>\n<ul>\n<li>or, using another path without spaces:<\/li>\n<\/ul>\n<pre><code class=\"language-sh\">npm config <span class=\"token keyword\">set<\/span> cache <span class=\"token constant\">C<\/span><span class=\"token operator\">:<\/span>\\tmp\\nodejs\\npm<span class=\"token operator\">-<\/span>cache <span class=\"token operator\">--<\/span>global\n<\/code><\/pre><\/li>\n<\/ul>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Create your first <a href=\"/renderable-components\">renderable component<\/a>.<\/p>\n","description":"Create full-stack JavaScript applications within seconds","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"getting-started"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/getting-started/index.html b/docs/getting-started/index.html
index 31d7a51c..ce79936b 100644
--- a/docs/getting-started/index.html
+++ b/docs/getting-started/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -110,15 +110,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Create your fir
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Getting Started - Nullstack","description":"Create full-stack JavaScript applications within seconds"};
       window.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/getting-started":{"title":"Getting Started","html":"<blockquote>\n<p>📌 You can watch a video tutorial on our <a href=\"https://www.youtube.com/watch?v=l23z00GEar8&amp;list=PL5ylYELQy1hyFbguVaShp3XujjdVXLpId\" target=\"_blank\" rel=\"noopener\">Youtube Channel<\/a>.<\/p>\n<\/blockquote>\n<p>Create full-stack JavaScript applications within seconds using <code>npx<\/code> to generate your project files from the latest template.<\/p>\n<blockquote>\n<p>🔥 The minimum required <a href=\"https://nodejs.org\" target=\"_blank\" rel=\"noopener\">node.js<\/a> version for development mode is <em>12.12.0<\/em>.<\/p>\n<\/blockquote>\n<blockquote>\n<p>⚠ If the directory you are in contains spaces, you use Windows and <code>npx<\/code> gives errors, read about <a href=\"#the-known-npx-bug\" target=\"_blank\" rel=\"noopener\">the known npx bug<\/a>.<\/p>\n<\/blockquote>\n<p>Replace <code>project-name<\/code> with your project name and run the command below to start a project:<\/p>\n<pre><code class=\"language-sh\">npx create<span class=\"token operator\">-<\/span>nullstack<span class=\"token operator\">-<\/span>app project<span class=\"token operator\">-<\/span>name\n<\/code><\/pre>\n<p>Change directory to the generated folder:<\/p>\n<pre><code class=\"language-sh\">cd project<span class=\"token operator\">-<\/span>name\n<\/code><\/pre>\n<p>Install the dependencies:<\/p>\n<pre><code class=\"language-sh\">npm install\n<\/code><\/pre>\n<p>Start the application in development mode:<\/p>\n<pre><code class=\"language-sh\">npm start\n<\/code><\/pre>\n<h2 id=\"understanding-the-generated-files\"><a href=\"#understanding-the-generated-files\">Understanding the generated files<\/a><\/h2><p>The following folders and files will be generated:<\/p>\n<h3 id=\"index-js\"><a href=\"#index-js\">index.js<\/a><\/h3><p>This is the <a href=\"https://webpack.js.org\" target=\"_blank\" rel=\"noopener\">Webpack<\/a> entry point.<\/p>\n<p>Usually, you don't have to touch this file, but it is a convenient place to import global dependencies like CSS frameworks.<\/p>\n<h3 id=\"src-\"><a href=\"#src-\">src/<\/a><\/h3><p>This folder will contain the actual source code of your application.<\/p>\n<h3 id=\"src-application-njs\"><a href=\"#src-application-njs\">src/Application.njs<\/a><\/h3><p>This is your application main file.<\/p>\n<blockquote>\n<p>✨ Learn more about the <a href=\"/njs-file-extension\" title=\"Nullstack JavaScript\">njs file extension<\/a>.<\/p>\n<\/blockquote>\n<p>The <code>start<\/code> function will be automatically called once when you run <code>npm start<\/code>, use it to populate your server <a href=\"/context\">context<\/a> with things like <a href=\"/how-to-use-mongodb-with-nullstack\">database<\/a>, <a href=\"/context-settings\">settings<\/a>, and <a href=\"/context-secrets\">secrets<\/a>.<\/p>\n<blockquote>\n<p>✨ Learn more about the <a href=\"/application-startup\">application startup<\/a>.<\/p>\n<\/blockquote>\n<h3 id=\"src-application-scss\"><a href=\"#src-application-scss\">src/Application.scss<\/a><\/h3><p>This is an empty file just to demonstrate that you can use <a href=\"/styles\">SCSS with Nullstack<\/a>.<\/p>\n<p>It is a good practice to import a style file in a component with the same name.<\/p>\n<blockquote>\n<p>✨ Learn more about <a href=\"/styles\">styles<\/a>.<\/p>\n<\/blockquote>\n<h3 id=\"public-\"><a href=\"#public-\">public/<\/a><\/h3><p>Every file in here will be available to anyone from the domain root.<\/p>\n<p>By default <code>create-nullstack-app<\/code> generates the icons required for your <strong>manifest.json<\/strong> and images for OG meta tags.<\/p>\n<blockquote>\n<p>✨ Learn more about <a href=\"/context-project\">manifest.json<\/a>.<\/p>\n<\/blockquote>\n<p>Be sure to replace these images with your project identity.<\/p>\n<h3 id=\"-development-\"><a href=\"#-development-\">.development/<\/a><\/h3><p>This is the compiled result of your application in development mode.<\/p>\n<blockquote>\n<p>🔥 Do not touch this folder<\/p>\n<\/blockquote>\n<h3 id=\"-production-\"><a href=\"#-production-\">.production/<\/a><\/h3><p>This is the compiled result of your application in production mode.<\/p>\n<blockquote>\n<p>🔥 Do not touch this folder<\/p>\n<\/blockquote>\n<blockquote>\n<p>✨ Learn more about <a href=\"/how-to-deploy-a-nullstack-application\">how to deploy a Nullstack application<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"the-known-npx-bug\"><a href=\"#the-known-npx-bug\">The known npx bug<\/a><\/h2><p>Warned on <code>npx<\/code> issues like <a href=\"https://github.com/zkat/npx/issues/100\" target=\"_blank\" rel=\"noopener\">#100<\/a>, <a href=\"https://github.com/zkat/npx/issues/110\" target=\"_blank\" rel=\"noopener\">#110<\/a> and <a href=\"https://github.com/zkat/npx/issues/146\" target=\"_blank\" rel=\"noopener\">#143<\/a>, it has an error when trying to resolve the path to his cache folder when contains spaces.<\/p>\n<p>If this happens to you, our recommendations are:<\/p>\n<ul>\n<li><p>Using downloaded as you normally would with <code>npm<\/code>:<\/p>\n<pre><code class=\"language-sh\">npm i <span class=\"token operator\">-<\/span>g create<span class=\"token operator\">-<\/span>nullstack<span class=\"token operator\">-<\/span>app\ncreate<span class=\"token operator\">-<\/span>nullstack<span class=\"token operator\">-<\/span>app project<span class=\"token operator\">-<\/span>name\n<\/code><\/pre><\/li>\n<li><p>or, change the cache folder directory, as stated <a href=\"https://github.com/zkat/npx/issues/146#issuecomment-384016791\" target=\"_blank\" rel=\"noopener\">here<\/a> and <a href=\"https://github.com/zkat/npx/issues/146#issuecomment-384019497\" target=\"_blank\" rel=\"noopener\">here<\/a>:<\/p>\n<ul>\n<li>If you want to keep the use of space, replace <code>FirstName<\/code> with the one used on your path and run:<\/li>\n<\/ul>\n<pre><code class=\"language-sh\">npm config <span class=\"token keyword\">set<\/span> cache <span class=\"token string\">\"C:\\Users\\FirstName~1\\AppData\\Roaming\\npm-cache\"<\/span> <span class=\"token operator\">--<\/span>global\n<\/code><\/pre>\n<ul>\n<li>or, using another path without spaces:<\/li>\n<\/ul>\n<pre><code class=\"language-sh\">npm config <span class=\"token keyword\">set<\/span> cache <span class=\"token constant\">C<\/span><span class=\"token operator\">:<\/span>\\tmp\\nodejs\\npm<span class=\"token operator\">-<\/span>cache <span class=\"token operator\">--<\/span>global\n<\/code><\/pre><\/li>\n<\/ul>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Create your first <a href=\"/renderable-components\">renderable component<\/a>.<\/p>\n","description":"Create full-stack JavaScript applications within seconds","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"getting-started"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/how-to-deploy-a-nullstack-application.html b/docs/how-to-deploy-a-nullstack-application.html
index d06b9366..a3d70774 100644
--- a/docs/how-to-deploy-a-nullstack-application.html
+++ b/docs/how-to-deploy-a-nullstack-application.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -60,15 +60,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><blockquote>
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"How to Deploy - Nullstack","description":"With Nullstack it's easy to have your application up and running in production mode"};
       window.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/how-to-deploy-a-nullstack-application":{"title":"How to Deploy","html":"<p>With Nullstack it's easy to have your application up and running in production mode.<\/p>\n<blockquote>\n<p>🐱‍💻 <strong>stonks<\/strong><\/p>\n<\/blockquote>\n<p>Nullstack compiles your code and all your dependencies using <a href=\"https://webpack.js.org\" target=\"_blank\" rel=\"noopener\">Webpack<\/a>.<\/p>\n<p>The output of the compilation is moved to the <strong>.production<\/strong> folder and is the only folder besides <strong>public<\/strong> that needs to be moved into the host machine.<\/p>\n<p>If you have <code>project.cdn<\/code> set you must move the <strong>public<\/strong> folder to the actual cdn.<\/p>\n<blockquote>\n<p>💡 It is important that the <strong>.production<\/strong> folder is present for environment detection<\/p>\n<\/blockquote>\n<p>The host machine must have at least node v8.10.0 installed.<\/p>\n<p>You don't have to &quot;npm install&quot; in the host machine.<\/p>\n<blockquote>\n<p>✨ You can configure the environment using <a href=\"/context-settings\"><code>settings<\/code><\/a> and <a href=\"/context-secrets\"><code>secrets<\/code><\/a><\/p>\n<\/blockquote>\n<p>To start the server just run:<\/p>\n<pre><code class=\"language-sh\">node <span class=\"token punctuation\">.<\/span>production<span class=\"token operator\">/<\/span>server<span class=\"token punctuation\">.<\/span>js\n<\/code><\/pre>\n<blockquote>\n<p>✨ It is recommend the usage of a process manager like <a href=\"https://pm2.keymetrics.io\" target=\"_blank\" rel=\"noopener\">PM2<\/a><\/p>\n<\/blockquote>\n<h2 id=\"how-to-deploy-a-static-generated-site-with-nullstack\"><a href=\"#how-to-deploy-a-static-generated-site-with-nullstack\">How to Deploy a static generated site with Nullstack<\/a><\/h2><p>After you <a href=\"/static-site-generation\">generate a static site<\/a>, all you have to do is move the output folder to any host machine capable of serving HTML.<\/p>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><blockquote>\n<p>🎉 <strong>Congratulations<\/strong>. You are done with the advanced concepts!<\/p>\n<\/blockquote>\n<p>⚔ Learn about <a href=\"/server-side-rendering\">server-side rendering<\/a>.<\/p>\n","description":"With Nullstack it's easy to have your application up and running in production mode","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"how-to-deploy-a-nullstack-application"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/how-to-deploy-a-nullstack-application/index.html b/docs/how-to-deploy-a-nullstack-application/index.html
index d06b9366..a3d70774 100644
--- a/docs/how-to-deploy-a-nullstack-application/index.html
+++ b/docs/how-to-deploy-a-nullstack-application/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -60,15 +60,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><blockquote>
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"How to Deploy - Nullstack","description":"With Nullstack it's easy to have your application up and running in production mode"};
       window.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/how-to-deploy-a-nullstack-application":{"title":"How to Deploy","html":"<p>With Nullstack it's easy to have your application up and running in production mode.<\/p>\n<blockquote>\n<p>🐱‍💻 <strong>stonks<\/strong><\/p>\n<\/blockquote>\n<p>Nullstack compiles your code and all your dependencies using <a href=\"https://webpack.js.org\" target=\"_blank\" rel=\"noopener\">Webpack<\/a>.<\/p>\n<p>The output of the compilation is moved to the <strong>.production<\/strong> folder and is the only folder besides <strong>public<\/strong> that needs to be moved into the host machine.<\/p>\n<p>If you have <code>project.cdn<\/code> set you must move the <strong>public<\/strong> folder to the actual cdn.<\/p>\n<blockquote>\n<p>💡 It is important that the <strong>.production<\/strong> folder is present for environment detection<\/p>\n<\/blockquote>\n<p>The host machine must have at least node v8.10.0 installed.<\/p>\n<p>You don't have to &quot;npm install&quot; in the host machine.<\/p>\n<blockquote>\n<p>✨ You can configure the environment using <a href=\"/context-settings\"><code>settings<\/code><\/a> and <a href=\"/context-secrets\"><code>secrets<\/code><\/a><\/p>\n<\/blockquote>\n<p>To start the server just run:<\/p>\n<pre><code class=\"language-sh\">node <span class=\"token punctuation\">.<\/span>production<span class=\"token operator\">/<\/span>server<span class=\"token punctuation\">.<\/span>js\n<\/code><\/pre>\n<blockquote>\n<p>✨ It is recommend the usage of a process manager like <a href=\"https://pm2.keymetrics.io\" target=\"_blank\" rel=\"noopener\">PM2<\/a><\/p>\n<\/blockquote>\n<h2 id=\"how-to-deploy-a-static-generated-site-with-nullstack\"><a href=\"#how-to-deploy-a-static-generated-site-with-nullstack\">How to Deploy a static generated site with Nullstack<\/a><\/h2><p>After you <a href=\"/static-site-generation\">generate a static site<\/a>, all you have to do is move the output folder to any host machine capable of serving HTML.<\/p>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><blockquote>\n<p>🎉 <strong>Congratulations<\/strong>. You are done with the advanced concepts!<\/p>\n<\/blockquote>\n<p>⚔ Learn about <a href=\"/server-side-rendering\">server-side rendering<\/a>.<\/p>\n","description":"With Nullstack it's easy to have your application up and running in production mode","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"how-to-deploy-a-nullstack-application"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/how-to-use-facebook-pixel-with-nullstack.html b/docs/how-to-use-facebook-pixel-with-nullstack.html
index 47e9f2f0..a7a50330 100644
--- a/docs/how-to-use-facebook-pixel-with-nullstack.html
+++ b/docs/how-to-use-facebook-pixel-with-nullstack.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -119,15 +119,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><blockquote>
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Facebook's Pixel - Nullstack","description":"Take advantage of the [context](/context) and [custom events](/context-page) to create a component that dynamically sends Pixel events"};
       window.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/how-to-use-facebook-pixel-with-nullstack":{"title":"Facebook's Pixel","html":"<p>According to <a href=\"https://developers.facebook.com/docs/facebook-pixel/\" target=\"_blank\" rel=\"noopener\">developers.facebook.com<\/a>:<\/p>\n<p>&quot;The Facebook pixel is a snippet of JavaScript code that allows you to track visitor activity on your website.&quot;<\/p>\n<p>You can take advantage of the <a href=\"/context\">context<\/a> and <a href=\"/context-page\">custom events<\/a> to create a component that dynamically sends Pixel events.<\/p>\n<p>Facebook's Pixel can only be called after <a href=\"/full-stack-lifecycle\"><code>hydrate<\/code><\/a> to ensure it is running in the client.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">FacebookPixel<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">hydrate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">,<\/span> id<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token operator\">!<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">f<span class=\"token punctuation\">,<\/span> b<span class=\"token punctuation\">,<\/span> e<span class=\"token punctuation\">,<\/span> v<span class=\"token punctuation\">,<\/span> n<span class=\"token punctuation\">,<\/span> t<span class=\"token punctuation\">,<\/span> s<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>f<span class=\"token punctuation\">.<\/span>fbq<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span><span class=\"token punctuation\">;<\/span>\n      n <span class=\"token operator\">=<\/span> f<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">fbq<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n          n<span class=\"token punctuation\">.<\/span>callMethod <span class=\"token operator\">?<\/span>\n              n<span class=\"token punctuation\">.<\/span><span class=\"token function\">callMethod<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">apply<\/span><span class=\"token punctuation\">(<\/span>n<span class=\"token punctuation\">,<\/span> arguments<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">:<\/span> n<span class=\"token punctuation\">.<\/span>queue<span class=\"token punctuation\">.<\/span><span class=\"token function\">push<\/span><span class=\"token punctuation\">(<\/span>arguments<span class=\"token punctuation\">)<\/span>\n      <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>f<span class=\"token punctuation\">.<\/span>_fbq<span class=\"token punctuation\">)<\/span> f<span class=\"token punctuation\">.<\/span>_fbq <span class=\"token operator\">=<\/span> n<span class=\"token punctuation\">;<\/span>\n      n<span class=\"token punctuation\">.<\/span>push <span class=\"token operator\">=<\/span> n<span class=\"token punctuation\">;<\/span>\n      n<span class=\"token punctuation\">.<\/span>loaded <span class=\"token operator\">=<\/span> <span class=\"token operator\">!<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n      n<span class=\"token punctuation\">.<\/span>version <span class=\"token operator\">=<\/span> <span class=\"token string\">'2.0'<\/span><span class=\"token punctuation\">;<\/span>\n      n<span class=\"token punctuation\">.<\/span>queue <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n      t <span class=\"token operator\">=<\/span> b<span class=\"token punctuation\">.<\/span><span class=\"token function\">createElement<\/span><span class=\"token punctuation\">(<\/span>e<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n      t<span class=\"token punctuation\">.<\/span>async <span class=\"token operator\">=<\/span> <span class=\"token operator\">!<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n      t<span class=\"token punctuation\">.<\/span>src <span class=\"token operator\">=<\/span> v<span class=\"token punctuation\">;<\/span>\n      s <span class=\"token operator\">=<\/span> b<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementsByTagName<\/span><span class=\"token punctuation\">(<\/span>e<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">[<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n      s<span class=\"token punctuation\">.<\/span>parentNode<span class=\"token punctuation\">.<\/span><span class=\"token function\">insertBefore<\/span><span class=\"token punctuation\">(<\/span>t<span class=\"token punctuation\">,<\/span> s<span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">(<\/span>window<span class=\"token punctuation\">,<\/span> document<span class=\"token punctuation\">,<\/span> <span class=\"token string\">'script'<\/span><span class=\"token punctuation\">,<\/span>\n      <span class=\"token string\">'https://connect.facebook.net/en_US/fbevents.js'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token function\">fbq<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'init'<\/span><span class=\"token punctuation\">,<\/span> id<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token function\">fbq<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'track'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'PageView'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    window<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span>page<span class=\"token punctuation\">.<\/span>event<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token function\">fbq<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'init'<\/span><span class=\"token punctuation\">,<\/span> id<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token function\">fbq<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'track'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'PageView'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> FacebookPixel<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> FacebookPixel <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./FacebookPixel'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">FacebookPixel<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>REPLACE_WITH_YOUR_FACEBOOK_PIXEL_ID<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"using-a-wrapper\"><a href=\"#using-a-wrapper\">Using a Wrapper<\/a><\/h2><p>Alternatively, you can install <a href=\"https://github.com/Mortaro/nullstack-facebook-pixel\" target=\"_blank\" rel=\"noopener\">nullstack-facebook-pixel<\/a> as a dependency:<\/p>\n<pre><code class=\"language-sh\">npm install nullstack<span class=\"token operator\">-<\/span>facebook<span class=\"token operator\">-<\/span>pixel\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> FacebookPixel <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack-facebook-pixel'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">FacebookPixel<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>REPLACE_WITH_YOUR_FACEBOOK_PIXEL_ID<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><blockquote>\n<p>🎉 <strong>Congratulations<\/strong>. You are done with the documentation!<\/p>\n<\/blockquote>\n<p>⚔ If you want to see this more examples please <a href=\"https://github.com/nullstack/nullstack/issues\" target=\"_blank\" rel=\"noopener\">open an issue on github<\/a>.<\/p>\n","description":"Take advantage of the [context](/context) and [custom events](/context-page) to create a component that dynamically sends Pixel events","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"how-to-use-facebook-pixel-with-nullstack"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/how-to-use-facebook-pixel-with-nullstack/index.html b/docs/how-to-use-facebook-pixel-with-nullstack/index.html
index 47e9f2f0..a7a50330 100644
--- a/docs/how-to-use-facebook-pixel-with-nullstack/index.html
+++ b/docs/how-to-use-facebook-pixel-with-nullstack/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -119,15 +119,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><blockquote>
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Facebook's Pixel - Nullstack","description":"Take advantage of the [context](/context) and [custom events](/context-page) to create a component that dynamically sends Pixel events"};
       window.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/how-to-use-facebook-pixel-with-nullstack":{"title":"Facebook's Pixel","html":"<p>According to <a href=\"https://developers.facebook.com/docs/facebook-pixel/\" target=\"_blank\" rel=\"noopener\">developers.facebook.com<\/a>:<\/p>\n<p>&quot;The Facebook pixel is a snippet of JavaScript code that allows you to track visitor activity on your website.&quot;<\/p>\n<p>You can take advantage of the <a href=\"/context\">context<\/a> and <a href=\"/context-page\">custom events<\/a> to create a component that dynamically sends Pixel events.<\/p>\n<p>Facebook's Pixel can only be called after <a href=\"/full-stack-lifecycle\"><code>hydrate<\/code><\/a> to ensure it is running in the client.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">FacebookPixel<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">hydrate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">,<\/span> id<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token operator\">!<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">f<span class=\"token punctuation\">,<\/span> b<span class=\"token punctuation\">,<\/span> e<span class=\"token punctuation\">,<\/span> v<span class=\"token punctuation\">,<\/span> n<span class=\"token punctuation\">,<\/span> t<span class=\"token punctuation\">,<\/span> s<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>f<span class=\"token punctuation\">.<\/span>fbq<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span><span class=\"token punctuation\">;<\/span>\n      n <span class=\"token operator\">=<\/span> f<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">fbq<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n          n<span class=\"token punctuation\">.<\/span>callMethod <span class=\"token operator\">?<\/span>\n              n<span class=\"token punctuation\">.<\/span><span class=\"token function\">callMethod<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">apply<\/span><span class=\"token punctuation\">(<\/span>n<span class=\"token punctuation\">,<\/span> arguments<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">:<\/span> n<span class=\"token punctuation\">.<\/span>queue<span class=\"token punctuation\">.<\/span><span class=\"token function\">push<\/span><span class=\"token punctuation\">(<\/span>arguments<span class=\"token punctuation\">)<\/span>\n      <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>f<span class=\"token punctuation\">.<\/span>_fbq<span class=\"token punctuation\">)<\/span> f<span class=\"token punctuation\">.<\/span>_fbq <span class=\"token operator\">=<\/span> n<span class=\"token punctuation\">;<\/span>\n      n<span class=\"token punctuation\">.<\/span>push <span class=\"token operator\">=<\/span> n<span class=\"token punctuation\">;<\/span>\n      n<span class=\"token punctuation\">.<\/span>loaded <span class=\"token operator\">=<\/span> <span class=\"token operator\">!<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n      n<span class=\"token punctuation\">.<\/span>version <span class=\"token operator\">=<\/span> <span class=\"token string\">'2.0'<\/span><span class=\"token punctuation\">;<\/span>\n      n<span class=\"token punctuation\">.<\/span>queue <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n      t <span class=\"token operator\">=<\/span> b<span class=\"token punctuation\">.<\/span><span class=\"token function\">createElement<\/span><span class=\"token punctuation\">(<\/span>e<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n      t<span class=\"token punctuation\">.<\/span>async <span class=\"token operator\">=<\/span> <span class=\"token operator\">!<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n      t<span class=\"token punctuation\">.<\/span>src <span class=\"token operator\">=<\/span> v<span class=\"token punctuation\">;<\/span>\n      s <span class=\"token operator\">=<\/span> b<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementsByTagName<\/span><span class=\"token punctuation\">(<\/span>e<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">[<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n      s<span class=\"token punctuation\">.<\/span>parentNode<span class=\"token punctuation\">.<\/span><span class=\"token function\">insertBefore<\/span><span class=\"token punctuation\">(<\/span>t<span class=\"token punctuation\">,<\/span> s<span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">(<\/span>window<span class=\"token punctuation\">,<\/span> document<span class=\"token punctuation\">,<\/span> <span class=\"token string\">'script'<\/span><span class=\"token punctuation\">,<\/span>\n      <span class=\"token string\">'https://connect.facebook.net/en_US/fbevents.js'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token function\">fbq<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'init'<\/span><span class=\"token punctuation\">,<\/span> id<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token function\">fbq<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'track'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'PageView'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    window<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span>page<span class=\"token punctuation\">.<\/span>event<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token function\">fbq<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'init'<\/span><span class=\"token punctuation\">,<\/span> id<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token function\">fbq<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'track'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'PageView'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> FacebookPixel<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> FacebookPixel <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./FacebookPixel'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">FacebookPixel<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>REPLACE_WITH_YOUR_FACEBOOK_PIXEL_ID<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"using-a-wrapper\"><a href=\"#using-a-wrapper\">Using a Wrapper<\/a><\/h2><p>Alternatively, you can install <a href=\"https://github.com/Mortaro/nullstack-facebook-pixel\" target=\"_blank\" rel=\"noopener\">nullstack-facebook-pixel<\/a> as a dependency:<\/p>\n<pre><code class=\"language-sh\">npm install nullstack<span class=\"token operator\">-<\/span>facebook<span class=\"token operator\">-<\/span>pixel\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> FacebookPixel <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack-facebook-pixel'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">FacebookPixel<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>REPLACE_WITH_YOUR_FACEBOOK_PIXEL_ID<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><blockquote>\n<p>🎉 <strong>Congratulations<\/strong>. You are done with the documentation!<\/p>\n<\/blockquote>\n<p>⚔ If you want to see this more examples please <a href=\"https://github.com/nullstack/nullstack/issues\" target=\"_blank\" rel=\"noopener\">open an issue on github<\/a>.<\/p>\n","description":"Take advantage of the [context](/context) and [custom events](/context-page) to create a component that dynamically sends Pixel events","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"how-to-use-facebook-pixel-with-nullstack"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/how-to-use-google-analytics-with-nullstack.html b/docs/how-to-use-google-analytics-with-nullstack.html
index f3c7006b..e62bac9a 100644
--- a/docs/how-to-use-google-analytics-with-nullstack.html
+++ b/docs/how-to-use-google-analytics-with-nullstack.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -117,15 +117,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn <a href="
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Google Analytics - Nullstack","description":"Take advantage of the context and custom events to create a component that dynamically sends GTAG events"};
       window.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/how-to-use-google-analytics-with-nullstack":{"title":"Google Analytics","html":"<p>According to <a href=\"https://analytics.google.com\" target=\"_blank\" rel=\"noopener\">analytics.google.com<\/a>:<\/p>\n<p>&quot;Google Analytics lets you measure your advertising ROI as well as track your Flash, video, and social networking sites and applications.&quot;<\/p>\n<p>You can take advantage of the <a href=\"/context\">context<\/a> and <a href=\"/context-page\">custom events<\/a> to create a component that dynamically sends GTAG events.<\/p>\n<p>GTAG can only be called after <a href=\"/full-stack-lifecycle\"><code>hydrate<\/code><\/a> to ensure it is running in the client.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">GoogleAnalytics<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">hydrate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>router<span class=\"token punctuation\">,<\/span> page<span class=\"token punctuation\">,<\/span> id<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    window<span class=\"token punctuation\">.<\/span>dataLayer <span class=\"token operator\">=<\/span> window<span class=\"token punctuation\">.<\/span>dataLayer <span class=\"token operator\">||<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">function<\/span> <span class=\"token function\">gtag<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">{<\/span>\n      dataLayer<span class=\"token punctuation\">.<\/span><span class=\"token function\">push<\/span><span class=\"token punctuation\">(<\/span>arguments<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n    <span class=\"token function\">gtag<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'js'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Date<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token function\">gtag<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'config'<\/span><span class=\"token punctuation\">,<\/span> id<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span>\n      page_title<span class=\"token operator\">:<\/span> page<span class=\"token punctuation\">.<\/span>title<span class=\"token punctuation\">,<\/span>\n      page_path<span class=\"token operator\">:<\/span> router<span class=\"token punctuation\">.<\/span>url\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    window<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span>page<span class=\"token punctuation\">.<\/span>event<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token function\">gtag<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'event'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'page_view'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span>\n        page_title<span class=\"token operator\">:<\/span> page<span class=\"token punctuation\">.<\/span>title<span class=\"token punctuation\">,<\/span>\n        page_path<span class=\"token operator\">:<\/span> router<span class=\"token punctuation\">.<\/span>url\n      <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>id<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script<\/span> \n        <span class=\"token attr-name\">async<\/span>\n        <span class=\"token attr-name\">src<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">https://www.googletagmanager.com/gtag/js?id=<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>id<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">}<\/span><\/span>\n      <span class=\"token punctuation\">/><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> GoogleAnalytics<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> GoogleAnalytics <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./GoogleAnalytics'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">GoogleAnalytics<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>REPLACE_WITH_YOUR_GOOGLE_ANALYTICS_ID<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"using-a-wrapper\"><a href=\"#using-a-wrapper\">Using a Wrapper<\/a><\/h2><p>Alternatively, you can install <a href=\"https://github.com/Mortaro/nullstack-google-analytics\" target=\"_blank\" rel=\"noopener\">nullstack-google-analytics<\/a> as a dependency:<\/p>\n<pre><code class=\"language-sh\">npm install nullstack<span class=\"token operator\">-<\/span>google<span class=\"token operator\">-<\/span>analytics\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> GoogleAnalytics <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack-google-analytics'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">GoogleAnalytics<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>REPLACE_WITH_YOUR_GOOGLE_ANALYTICS_ID<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn <a href=\"/how-to-use-facebook-pixel-with-nullstack\">how to use Facebook Pixel with Nullstack<\/a>.<\/p>\n","description":"Take advantage of the context and custom events to create a component that dynamically sends GTAG events","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"how-to-use-google-analytics-with-nullstack"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/how-to-use-google-analytics-with-nullstack/index.html b/docs/how-to-use-google-analytics-with-nullstack/index.html
index f3c7006b..e62bac9a 100644
--- a/docs/how-to-use-google-analytics-with-nullstack/index.html
+++ b/docs/how-to-use-google-analytics-with-nullstack/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -117,15 +117,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn <a href="
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Google Analytics - Nullstack","description":"Take advantage of the context and custom events to create a component that dynamically sends GTAG events"};
       window.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/how-to-use-google-analytics-with-nullstack":{"title":"Google Analytics","html":"<p>According to <a href=\"https://analytics.google.com\" target=\"_blank\" rel=\"noopener\">analytics.google.com<\/a>:<\/p>\n<p>&quot;Google Analytics lets you measure your advertising ROI as well as track your Flash, video, and social networking sites and applications.&quot;<\/p>\n<p>You can take advantage of the <a href=\"/context\">context<\/a> and <a href=\"/context-page\">custom events<\/a> to create a component that dynamically sends GTAG events.<\/p>\n<p>GTAG can only be called after <a href=\"/full-stack-lifecycle\"><code>hydrate<\/code><\/a> to ensure it is running in the client.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">GoogleAnalytics<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">hydrate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>router<span class=\"token punctuation\">,<\/span> page<span class=\"token punctuation\">,<\/span> id<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    window<span class=\"token punctuation\">.<\/span>dataLayer <span class=\"token operator\">=<\/span> window<span class=\"token punctuation\">.<\/span>dataLayer <span class=\"token operator\">||<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">function<\/span> <span class=\"token function\">gtag<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">{<\/span>\n      dataLayer<span class=\"token punctuation\">.<\/span><span class=\"token function\">push<\/span><span class=\"token punctuation\">(<\/span>arguments<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n    <span class=\"token function\">gtag<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'js'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Date<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token function\">gtag<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'config'<\/span><span class=\"token punctuation\">,<\/span> id<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span>\n      page_title<span class=\"token operator\">:<\/span> page<span class=\"token punctuation\">.<\/span>title<span class=\"token punctuation\">,<\/span>\n      page_path<span class=\"token operator\">:<\/span> router<span class=\"token punctuation\">.<\/span>url\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    window<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span>page<span class=\"token punctuation\">.<\/span>event<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token function\">gtag<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'event'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'page_view'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span>\n        page_title<span class=\"token operator\">:<\/span> page<span class=\"token punctuation\">.<\/span>title<span class=\"token punctuation\">,<\/span>\n        page_path<span class=\"token operator\">:<\/span> router<span class=\"token punctuation\">.<\/span>url\n      <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>id<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script<\/span> \n        <span class=\"token attr-name\">async<\/span>\n        <span class=\"token attr-name\">src<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">https://www.googletagmanager.com/gtag/js?id=<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>id<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">}<\/span><\/span>\n      <span class=\"token punctuation\">/><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> GoogleAnalytics<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> GoogleAnalytics <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./GoogleAnalytics'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">GoogleAnalytics<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>REPLACE_WITH_YOUR_GOOGLE_ANALYTICS_ID<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"using-a-wrapper\"><a href=\"#using-a-wrapper\">Using a Wrapper<\/a><\/h2><p>Alternatively, you can install <a href=\"https://github.com/Mortaro/nullstack-google-analytics\" target=\"_blank\" rel=\"noopener\">nullstack-google-analytics<\/a> as a dependency:<\/p>\n<pre><code class=\"language-sh\">npm install nullstack<span class=\"token operator\">-<\/span>google<span class=\"token operator\">-<\/span>analytics\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> GoogleAnalytics <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack-google-analytics'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">GoogleAnalytics<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>REPLACE_WITH_YOUR_GOOGLE_ANALYTICS_ID<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn <a href=\"/how-to-use-facebook-pixel-with-nullstack\">how to use Facebook Pixel with Nullstack<\/a>.<\/p>\n","description":"Take advantage of the context and custom events to create a component that dynamically sends GTAG events","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"how-to-use-google-analytics-with-nullstack"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/how-to-use-mongodb-with-nullstack.html b/docs/how-to-use-mongodb-with-nullstack.html
index 110de660..bca76174 100644
--- a/docs/how-to-use-mongodb-with-nullstack.html
+++ b/docs/how-to-use-mongodb-with-nullstack.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -87,15 +87,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn <a href="
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"How to use MongoDB - Nullstack","description":"You can use any database with Nullstack, but the JavaScript integration and flexibility of MongoDB looks especially good with Nullstack applications"};
       window.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/how-to-use-mongodb-with-nullstack":{"title":"How to use MongoDB","html":"<p>According to <a href=\"https://www.mongodb.com\" target=\"_blank\" rel=\"noopener\">mongodb.com<\/a>:<\/p>\n<p>&quot;MongoDB is a general purpose, document-based, distributed database built for modern application developers and for the cloud era.&quot;<\/p>\n<p>You can use any database with Nullstack, but the JavaScript integration and flexibility of MongoDB looks especially good with Nullstack applications.<\/p>\n<p>Install the MongoDB driver from npm:<\/p>\n<pre><code class=\"language-sh\">npm install mongodb\n<\/code><\/pre>\n<p>Configure the database credentials using <a href=\"/context-secrets\"><code>secrets<\/code><\/a> in your <code>.env<\/code> file.<\/p>\n<pre><code><span class=\"token constant\">NULLSTACK_SECRETS_MONGODB_URI<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"mongodb://localhost:27017/dbname\"<\/span>\n<span class=\"token constant\">NULLSTACK_SECRETS_DATABASE_NAME<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"dbname\"<\/span>\n<\/code><\/pre>\n<p>The last step is to simply assign the database connection to the server context.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span>MongoClient<span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'mongodb'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">startDatabase<\/span><span class=\"token punctuation\">(<\/span>context<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">startDatabase<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span>secrets<span class=\"token punctuation\">}<\/span> <span class=\"token operator\">=<\/span> context<span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> databaseClient <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">MongoClient<\/span><span class=\"token punctuation\">(<\/span>secrets<span class=\"token punctuation\">.<\/span>databaseUri<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">await<\/span> databaseClient<span class=\"token punctuation\">.<\/span><span class=\"token function\">connect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    context<span class=\"token punctuation\">.<\/span>database <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> databaseClient<span class=\"token punctuation\">.<\/span><span class=\"token function\">db<\/span><span class=\"token punctuation\">(<\/span>secrets<span class=\"token punctuation\">.<\/span>databaseName<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>The example above will make the <code>database<\/code> key available to all your server functions.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">BooksList<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  books <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">getBooks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>database<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">await<\/span> database<span class=\"token punctuation\">.<\/span><span class=\"token function\">collection<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'books'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">find<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">toArray<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>books <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getBooks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> BooksList<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn <a href=\"/how-to-use-google-analytics-with-nullstack\">how to use Google Analytics with Nullstack<\/a>.<\/p>\n","description":"You can use any database with Nullstack, but the JavaScript integration and flexibility of MongoDB looks especially good with Nullstack applications","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"how-to-use-mongodb-with-nullstack"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/how-to-use-mongodb-with-nullstack/index.html b/docs/how-to-use-mongodb-with-nullstack/index.html
index 110de660..bca76174 100644
--- a/docs/how-to-use-mongodb-with-nullstack/index.html
+++ b/docs/how-to-use-mongodb-with-nullstack/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -87,15 +87,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn <a href="
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"How to use MongoDB - Nullstack","description":"You can use any database with Nullstack, but the JavaScript integration and flexibility of MongoDB looks especially good with Nullstack applications"};
       window.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/how-to-use-mongodb-with-nullstack":{"title":"How to use MongoDB","html":"<p>According to <a href=\"https://www.mongodb.com\" target=\"_blank\" rel=\"noopener\">mongodb.com<\/a>:<\/p>\n<p>&quot;MongoDB is a general purpose, document-based, distributed database built for modern application developers and for the cloud era.&quot;<\/p>\n<p>You can use any database with Nullstack, but the JavaScript integration and flexibility of MongoDB looks especially good with Nullstack applications.<\/p>\n<p>Install the MongoDB driver from npm:<\/p>\n<pre><code class=\"language-sh\">npm install mongodb\n<\/code><\/pre>\n<p>Configure the database credentials using <a href=\"/context-secrets\"><code>secrets<\/code><\/a> in your <code>.env<\/code> file.<\/p>\n<pre><code><span class=\"token constant\">NULLSTACK_SECRETS_MONGODB_URI<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"mongodb://localhost:27017/dbname\"<\/span>\n<span class=\"token constant\">NULLSTACK_SECRETS_DATABASE_NAME<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"dbname\"<\/span>\n<\/code><\/pre>\n<p>The last step is to simply assign the database connection to the server context.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span>MongoClient<span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'mongodb'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">startDatabase<\/span><span class=\"token punctuation\">(<\/span>context<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">startDatabase<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span>secrets<span class=\"token punctuation\">}<\/span> <span class=\"token operator\">=<\/span> context<span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> databaseClient <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">MongoClient<\/span><span class=\"token punctuation\">(<\/span>secrets<span class=\"token punctuation\">.<\/span>databaseUri<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">await<\/span> databaseClient<span class=\"token punctuation\">.<\/span><span class=\"token function\">connect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    context<span class=\"token punctuation\">.<\/span>database <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> databaseClient<span class=\"token punctuation\">.<\/span><span class=\"token function\">db<\/span><span class=\"token punctuation\">(<\/span>secrets<span class=\"token punctuation\">.<\/span>databaseName<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>The example above will make the <code>database<\/code> key available to all your server functions.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">BooksList<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  books <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">getBooks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>database<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">await<\/span> database<span class=\"token punctuation\">.<\/span><span class=\"token function\">collection<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'books'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">find<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">toArray<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>books <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getBooks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> BooksList<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn <a href=\"/how-to-use-google-analytics-with-nullstack\">how to use Google Analytics with Nullstack<\/a>.<\/p>\n","description":"You can use any database with Nullstack, but the JavaScript integration and flexibility of MongoDB looks especially good with Nullstack applications","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"how-to-use-mongodb-with-nullstack"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/index.html b/docs/index.html
index a77ad1e7..76bc7ef5 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -119,15 +119,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Full-stack JavaScript Components - Nullstack","description":"Nullstack is a full-stack JavaScript framework for building progressive web applications","locale":"en-US"};
       window.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-1/":{"locale":"en-US","i18n":{"title":"Full-stack JavaScript Components","description":"Nullstack is a full-stack JavaScript framework for building progressive web applications","hero":{"heading":"Full-stack","subHeading":"JavaScript Components","tagline":"For one-dev armies","descriptions":["Write the back-end and the front-end of a feature in a single component and let the framework decide where the code should run.","Nullstack gives you all the tools you need to stay focused on your business logic."],"callToAction":"npx create-nullstack-app","actionLink":"/getting-started","actionCallback":"Command copied, paste it on the terminal"},"trinity":{"heading":"The Holy Trinity","subHeading":"of progressive web apps development","roles":[{"title":"Optimized for the first render","image":"/illustrations/nulla-tanker.webp","text":"On the first render you'll get SEO ready HTML optimized for the first paint of your route in a single request using local functions with zero JavaScript dependencies in the client bundle"},{"title":"Fluid PWA experience","image":"/illustrations/nulla-healer.webp","text":"After the content is served and the network is idle Nullstack JavaScript is loaded, the state of the application is restored through hydration and it becomes a single page application"},{"title":"Lightweight API requests","image":"/illustrations/nulla-dps.webp","text":"Subsequent server functions will fetch JSON from an automaticallty generated microservice API, deserialize the response, update the aplication state, and rerender the page out of the box"}]},"features":[{"title":"Stop wasting time glueing code together","snippet":"GlueCode","image":"/illustrations/nulla-glue.webp","text":"A full-stack Lifecycle combined with a feature-driven mindset allows you to write clean and reusable code without the need to create APIs manually."},{"title":"Become a programmer less dependent on gimmicks","snippet":"Vanilla","image":"/illustrations/nulla-scrolls.webp","inverted":true,"text":"Your components are just POJOs. Take advantage of the existing ecosystem while you write JavaScript as it is supposed to be, and see the result reflected in the dom."},{"title":"You already know Nullstack","snippet":"Modern","image":"/illustrations/nulla-map.webp","text":"Routes are simple attributes you can assign to any tag, and links are just 'a' tags. You will find out that Nullstack is just a modern version of your current stack."},{"title":"All the tools you need speak the same language","snippet":"Batteries","image":"/illustrations/nulla-tools.webp","inverted":true,"text":"Most chores are very repetitive. Save your energy for the real challenges using the shortcuts we created, like object events and two-way bindings."}],"playlist":{"heading":"Learn with our ","slang":"Dweebs","realWord":" Experts","videos":[{"title":"Full-stack with Nullstack","link":"https://www.youtube.com/watch?v=l23z00GEar8&list=PL5ylYELQy1hyFbguVaShp3XujjdVXLpId","thumbnail":"/thumbnails/en-us-pokepoll.webp"},{"title":"Open Source no Brasil - Ajude a traduzir o Nullstack","link":"https://www.youtube.com/watch?v=ud3IF5Xtd1s","thumbnail":"/thumbnails/en-us-contribute.webp"},{"title":"What are JavaScript Components?","link":"https://www.youtube.com/watch?v=H2i5_A1txGI","thumbnail":"/thumbnails/en-us-components.webp"}]}}},"GlueCode":{"html":"<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Feature<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// runs in the server<\/span>\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token keyword\">delete<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> database <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    database<span class=\"token punctuation\">.<\/span><span class=\"token function\">query<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"DELETE * FROM WAIFUS\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// runs in the client<\/span>\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">confirm<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token function\">confirm<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"You sure? uwu\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">delete<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// runs wherever is best<\/span>\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>confirm<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        Delete\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n<span class=\"token punctuation\">}<\/span>\n"},"Vanilla":{"html":"<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Vanilla<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// variables are just variables<\/span>\n  count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token comment\">// mutations reflect in the dom<\/span>\n  <span class=\"token function\">increment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token operator\">++<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token comment\">// 'this' is bound by default<\/span>\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>increment<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> \n        <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>"},"Modern":{"html":"<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Modern<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// params are injected on every function<\/span>\n  <span class=\"token function\">renderWaifu<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> params <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> Hi i'm <span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">}<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token comment\">// routes can have dynamic segments<\/span>\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Waifu<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/waifus/:name<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a<\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/waifus/Nulla<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n          NullaChan\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>a<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>"},"Batteries":{"html":"<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Batteries<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// variables can be bound to the dom<\/span>\n  name <span class=\"token operator\">=<\/span> <span class=\"token string\">'Nulla-Chan'<\/span><span class=\"token punctuation\">;<\/span>\n  isWaifu <span class=\"token operator\">=<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span>\n  \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token comment\">// preparing an object event<\/span>\n    <span class=\"token keyword\">const<\/span> isWaifu <span class=\"token operator\">=<\/span> <span class=\"token operator\">!<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>isWaifu<span class=\"token punctuation\">;<\/span>\n\n    <span class=\"token comment\">// events are prevented by default<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span>isWaifu<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n          Toggle Waifu\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>"},"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/instance-self.html b/docs/instance-self.html
index 482c4dd9..217ef648 100644
--- a/docs/instance-self.html
+++ b/docs/instance-self.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -175,15 +175,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about the
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Instance Self - Nullstack","description":"The self object is a proxy in the Nullstack Context available in client and gives you information about the instance lifecycle"};
       window.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/instance-self":{"title":"Instance Self","html":"<ul>\n<li>Type: <code>object<\/code><\/li>\n<li>Origin: <a href=\"/context#----nullstack-context\">Nullstack Context<\/a><\/li>\n<li>Availability: <strong>client<\/strong><\/li>\n<li><strong>readonly<\/strong> in <strong>client<\/strong> context<\/li>\n<\/ul>\n<p>It gives you information about the instance lifecycle and it's unique <a href=\"#instance-key\" target=\"_blank\" rel=\"noopener\"><code>key<\/code><\/a>.<\/p>\n<p>Each instance receives its own <code>self<\/code> object.<\/p>\n<p>The following keys are available in the object:<\/p>\n<ul>\n<li><strong>initiated<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>hydrated<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>prerendered<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>element<\/strong>: <code>HTMLElement<\/code><\/li>\n<li><a href=\"#instance-key\" target=\"_blank\" rel=\"noopener\"><code>key<\/code><\/a>: <code>string<\/code><\/li>\n<\/ul>\n<p>When a lifecycle method is resolved, even if not declared, an equivalent key is set to <code>true<\/code> in <code>self<\/code>.<\/p>\n<p>If the component was server-side rendered the <code>prerendered<\/code> key will remain <code>true<\/code> until it is terminated.<\/p>\n<p>The <code>element<\/code> key points to the DOM selector and is only guaranteed to exist when <code>hydrate<\/code> is being called since <code>prepare<\/code> and <code>initiate<\/code> could run in the server.<\/p>\n<blockquote>\n<p>💡 Do not use <code>element<\/code> to guess the environment, instead use the <a href=\"/context-environment\"><code>environment<\/code><\/a> for that.<\/p>\n<\/blockquote>\n<p>Observing <code>self<\/code> is a nice way to avoid giving placeholder information to the end-user.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Page<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>price <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getPrice<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">hydrate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>self<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    self<span class=\"token punctuation\">.<\/span>element<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'input'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">focus<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>self<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>self<span class=\"token punctuation\">.<\/span>prerendered <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token operator\">!<\/span>self<span class=\"token punctuation\">.<\/span>initiated<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span> \n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>number<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>price<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">disabled<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token operator\">!<\/span>self<span class=\"token punctuation\">.<\/span>hydrated<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> \n          Save\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Page<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 Components that get optimized into <a href=\"/renderable-components\">functional components<\/a> have no access to <code>self<\/code>.<\/p>\n<\/blockquote>\n<h2 id=\"instance-key\"><a href=\"#instance-key\">Instance Key<\/a><\/h2><ul>\n<li>Type: <code>string<\/code><\/li>\n<li>Origin: <a href=\"/context#----component-context\">Component Context<\/a><\/li>\n<li>Availability: <strong>client<\/strong><\/li>\n<li><strong>readonly<\/strong> in <strong>client<\/strong> context or after defined it's value as attribute<\/li>\n<\/ul>\n<p>It allows you to persist the instance when it moves in the dom.<\/p>\n<p>You can declare one <code>key<\/code> per instance.<\/p>\n<blockquote>\n<p>💡 If you do not declare a <code>key<\/code> nullstack will generate one based on dom depth.<\/p>\n<\/blockquote>\n<blockquote>\n<p>🔥 Keys cannot start with &quot;_.&quot; to avoid conflicts with Nullstack generated keys<\/p>\n<\/blockquote>\n<p>Keys must be globally unique since the component could move anywhere around the dom and not only between its siblings.<\/p>\n<h3 id=\"preserving-state\"><a href=\"#preserving-state\">Preserving state<\/a><\/h3><p>Keys are useful to preserve state in <a href=\"/stateful-components\">stateful components<\/a> when you move them in the dom.<\/p>\n<p>This is especially useful for dynamically sized lists that invoke components.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Item <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Item'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">List<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>items <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getItems<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>self<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> componentKey <span class=\"token operator\">=<\/span> self<span class=\"token punctuation\">.<\/span>key<span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span> \n        <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>items<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">item<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">(<\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Item<\/span><\/span> <span class=\"token attr-name\">key<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>componentKey<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">-<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>item<span class=\"token punctuation\">.<\/span>id<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token spread\"><span class=\"token punctuation\">{<\/span><span class=\"token operator\">...<\/span>item<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Page<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h3 id=\"shared-instances\"><a href=\"#shared-instances\">Shared Instances<\/a><\/h3><p>You can also use keys to share the instance between two elements.<\/p>\n<p>Only the first encounter of the <code>key<\/code> will run its <a href=\"/full-stack-lifecycle\">lifecycle<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>amount<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span>count<span class=\"token operator\">:<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token operator\">+<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span> x <span class=\"token punctuation\">{<\/span>amount<span class=\"token punctuation\">}<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">*<\/span> amount<span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>  \n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Counter <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Counter'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Counter<\/span><\/span> <span class=\"token attr-name\">key<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>a<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">amount<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Counter<\/span><\/span> <span class=\"token attr-name\">key<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>b<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">amount<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Counter<\/span><\/span> <span class=\"token attr-name\">key<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>b<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">amount<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">3<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about the <a href=\"/server-request-and-response\">server request and response<\/a>.<\/p>\n","description":"The self object is a proxy in the Nullstack Context available in client and gives you information about the instance lifecycle","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"instance-self"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/instance-self/index.html b/docs/instance-self/index.html
index 482c4dd9..217ef648 100644
--- a/docs/instance-self/index.html
+++ b/docs/instance-self/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -175,15 +175,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about the
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Instance Self - Nullstack","description":"The self object is a proxy in the Nullstack Context available in client and gives you information about the instance lifecycle"};
       window.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/instance-self":{"title":"Instance Self","html":"<ul>\n<li>Type: <code>object<\/code><\/li>\n<li>Origin: <a href=\"/context#----nullstack-context\">Nullstack Context<\/a><\/li>\n<li>Availability: <strong>client<\/strong><\/li>\n<li><strong>readonly<\/strong> in <strong>client<\/strong> context<\/li>\n<\/ul>\n<p>It gives you information about the instance lifecycle and it's unique <a href=\"#instance-key\" target=\"_blank\" rel=\"noopener\"><code>key<\/code><\/a>.<\/p>\n<p>Each instance receives its own <code>self<\/code> object.<\/p>\n<p>The following keys are available in the object:<\/p>\n<ul>\n<li><strong>initiated<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>hydrated<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>prerendered<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>element<\/strong>: <code>HTMLElement<\/code><\/li>\n<li><a href=\"#instance-key\" target=\"_blank\" rel=\"noopener\"><code>key<\/code><\/a>: <code>string<\/code><\/li>\n<\/ul>\n<p>When a lifecycle method is resolved, even if not declared, an equivalent key is set to <code>true<\/code> in <code>self<\/code>.<\/p>\n<p>If the component was server-side rendered the <code>prerendered<\/code> key will remain <code>true<\/code> until it is terminated.<\/p>\n<p>The <code>element<\/code> key points to the DOM selector and is only guaranteed to exist when <code>hydrate<\/code> is being called since <code>prepare<\/code> and <code>initiate<\/code> could run in the server.<\/p>\n<blockquote>\n<p>💡 Do not use <code>element<\/code> to guess the environment, instead use the <a href=\"/context-environment\"><code>environment<\/code><\/a> for that.<\/p>\n<\/blockquote>\n<p>Observing <code>self<\/code> is a nice way to avoid giving placeholder information to the end-user.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Page<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>price <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getPrice<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">hydrate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>self<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    self<span class=\"token punctuation\">.<\/span>element<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'input'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">focus<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>self<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>self<span class=\"token punctuation\">.<\/span>prerendered <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token operator\">!<\/span>self<span class=\"token punctuation\">.<\/span>initiated<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span> \n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>number<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>price<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">disabled<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token operator\">!<\/span>self<span class=\"token punctuation\">.<\/span>hydrated<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> \n          Save\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Page<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 Components that get optimized into <a href=\"/renderable-components\">functional components<\/a> have no access to <code>self<\/code>.<\/p>\n<\/blockquote>\n<h2 id=\"instance-key\"><a href=\"#instance-key\">Instance Key<\/a><\/h2><ul>\n<li>Type: <code>string<\/code><\/li>\n<li>Origin: <a href=\"/context#----component-context\">Component Context<\/a><\/li>\n<li>Availability: <strong>client<\/strong><\/li>\n<li><strong>readonly<\/strong> in <strong>client<\/strong> context or after defined it's value as attribute<\/li>\n<\/ul>\n<p>It allows you to persist the instance when it moves in the dom.<\/p>\n<p>You can declare one <code>key<\/code> per instance.<\/p>\n<blockquote>\n<p>💡 If you do not declare a <code>key<\/code> nullstack will generate one based on dom depth.<\/p>\n<\/blockquote>\n<blockquote>\n<p>🔥 Keys cannot start with &quot;_.&quot; to avoid conflicts with Nullstack generated keys<\/p>\n<\/blockquote>\n<p>Keys must be globally unique since the component could move anywhere around the dom and not only between its siblings.<\/p>\n<h3 id=\"preserving-state\"><a href=\"#preserving-state\">Preserving state<\/a><\/h3><p>Keys are useful to preserve state in <a href=\"/stateful-components\">stateful components<\/a> when you move them in the dom.<\/p>\n<p>This is especially useful for dynamically sized lists that invoke components.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Item <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Item'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">List<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>items <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getItems<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>self<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> componentKey <span class=\"token operator\">=<\/span> self<span class=\"token punctuation\">.<\/span>key<span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span> \n        <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>items<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">item<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">(<\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Item<\/span><\/span> <span class=\"token attr-name\">key<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>componentKey<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">-<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>item<span class=\"token punctuation\">.<\/span>id<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token spread\"><span class=\"token punctuation\">{<\/span><span class=\"token operator\">...<\/span>item<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Page<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h3 id=\"shared-instances\"><a href=\"#shared-instances\">Shared Instances<\/a><\/h3><p>You can also use keys to share the instance between two elements.<\/p>\n<p>Only the first encounter of the <code>key<\/code> will run its <a href=\"/full-stack-lifecycle\">lifecycle<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>amount<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span>count<span class=\"token operator\">:<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token operator\">+<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span> x <span class=\"token punctuation\">{<\/span>amount<span class=\"token punctuation\">}<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">*<\/span> amount<span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>  \n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Counter <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Counter'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Counter<\/span><\/span> <span class=\"token attr-name\">key<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>a<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">amount<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Counter<\/span><\/span> <span class=\"token attr-name\">key<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>b<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">amount<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Counter<\/span><\/span> <span class=\"token attr-name\">key<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>b<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">amount<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">3<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about the <a href=\"/server-request-and-response\">server request and response<\/a>.<\/p>\n","description":"The self object is a proxy in the Nullstack Context available in client and gives you information about the instance lifecycle","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"instance-self"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/njs-file-extension.html b/docs/njs-file-extension.html
index 8bd24da0..788a9167 100644
--- a/docs/njs-file-extension.html
+++ b/docs/njs-file-extension.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -135,15 +135,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn more abou
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"NJS File Extension - Nullstack","description":"Nullstack JavaScript files let Webpack know which loaders to use at transpile time"};
       window.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/njs-file-extension":{"title":"NJS File Extension","html":"<p>Nullstack JavaScript files let <a href=\"https://webpack.js.org\" target=\"_blank\" rel=\"noopener\">Webpack<\/a> know which loaders to use at transpile time.<\/p>\n<p>NJS files must import Nullstack or one of its subclasses.<\/p>\n<p>If only a subclass is imported, a Nullstack import will be injected at transpile time.<\/p>\n<p>At transpile time JSX tags will be replaced with <code>Nullstack.element<\/code>.<\/p>\n<p>This extension also allows Nullstack to make free transpile time optimizations like source injection.<\/p>\n<blockquote>\n<p>🔥 Each file must have only one class declaration.<\/p>\n<\/blockquote>\n<ul>\n<li>On the <strong>server<\/strong> bundle static async functions are mapped into a registry for security.<\/li>\n<li>On the <strong>client<\/strong> bundle static async functions are removed and replaced with a invoke method.<\/li>\n<li>On the <strong>client<\/strong> bundle static async functions with the name starting with <strong>&quot;start&quot;<\/strong> (and optionally followed by an uppercase letter) are completely removed.<\/li>\n<li>On both <strong>server<\/strong> and <strong>client<\/strong> bundles, a hash with the md5 of the original source code is added to the class.<\/li>\n<\/ul>\n<blockquote>\n<p>🐱‍💻 Bellow an example of a original .njs file.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> List <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./List'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span>readFileSync<span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'fs'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Tasks<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">List<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">getTasks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>limit<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> json <span class=\"token operator\">=<\/span> <span class=\"token function\">readFileSync<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'tasks.json'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'utf-8'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token constant\">JSON<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">parse<\/span><span class=\"token punctuation\">(<\/span>json<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span>tasks<span class=\"token punctuation\">.<\/span><span class=\"token function\">slice<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> limit<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>tasks <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>tasks <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getTasks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>limit<span class=\"token operator\">:<\/span> <span class=\"token number\">10<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">renderTask<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>task<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span> \n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>task<span class=\"token punctuation\">.<\/span>description<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token punctuation\">{<\/span>tasks<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">task<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Task<\/span><\/span> <span class=\"token attr-name\">task<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>task<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Tasks<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>🐱‍💻 Bellow an example of the same transpiled .njs file.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> List <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./List'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Tasks<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">List<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> hash <span class=\"token operator\">=<\/span> <span class=\"token string\">'d493ac09d0d57574a30f136d31da455f'<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token keyword\">static<\/span> getTasks <span class=\"token operator\">=<\/span> Nullstack<span class=\"token punctuation\">.<\/span><span class=\"token function\">invoke<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'getTasks'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'d493ac09d0d57574a30f136d31da455f'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>tasks <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>tasks <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getTasks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>limit<span class=\"token operator\">:<\/span> <span class=\"token number\">10<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">renderTask<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>task<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span> \n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">source<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>task<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>description<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> Task <span class=\"token operator\">=<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>renderTask<span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token punctuation\">{<\/span>tasks<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">task<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Task<\/span><\/span> <span class=\"token attr-name\">task<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>task<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Tasks<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn more about the <a href=\"/service-worker\">service worker<\/a>.<\/p>\n","description":"Nullstack JavaScript files let Webpack know which loaders to use at transpile time","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"njs-file-extension"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/njs-file-extension/index.html b/docs/njs-file-extension/index.html
index 8bd24da0..788a9167 100644
--- a/docs/njs-file-extension/index.html
+++ b/docs/njs-file-extension/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -135,15 +135,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn more abou
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"NJS File Extension - Nullstack","description":"Nullstack JavaScript files let Webpack know which loaders to use at transpile time"};
       window.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/njs-file-extension":{"title":"NJS File Extension","html":"<p>Nullstack JavaScript files let <a href=\"https://webpack.js.org\" target=\"_blank\" rel=\"noopener\">Webpack<\/a> know which loaders to use at transpile time.<\/p>\n<p>NJS files must import Nullstack or one of its subclasses.<\/p>\n<p>If only a subclass is imported, a Nullstack import will be injected at transpile time.<\/p>\n<p>At transpile time JSX tags will be replaced with <code>Nullstack.element<\/code>.<\/p>\n<p>This extension also allows Nullstack to make free transpile time optimizations like source injection.<\/p>\n<blockquote>\n<p>🔥 Each file must have only one class declaration.<\/p>\n<\/blockquote>\n<ul>\n<li>On the <strong>server<\/strong> bundle static async functions are mapped into a registry for security.<\/li>\n<li>On the <strong>client<\/strong> bundle static async functions are removed and replaced with a invoke method.<\/li>\n<li>On the <strong>client<\/strong> bundle static async functions with the name starting with <strong>&quot;start&quot;<\/strong> (and optionally followed by an uppercase letter) are completely removed.<\/li>\n<li>On both <strong>server<\/strong> and <strong>client<\/strong> bundles, a hash with the md5 of the original source code is added to the class.<\/li>\n<\/ul>\n<blockquote>\n<p>🐱‍💻 Bellow an example of a original .njs file.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> List <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./List'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span>readFileSync<span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'fs'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Tasks<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">List<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">getTasks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>limit<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> json <span class=\"token operator\">=<\/span> <span class=\"token function\">readFileSync<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'tasks.json'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'utf-8'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token constant\">JSON<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">parse<\/span><span class=\"token punctuation\">(<\/span>json<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span>tasks<span class=\"token punctuation\">.<\/span><span class=\"token function\">slice<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> limit<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>tasks <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>tasks <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getTasks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>limit<span class=\"token operator\">:<\/span> <span class=\"token number\">10<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">renderTask<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>task<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span> \n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>task<span class=\"token punctuation\">.<\/span>description<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token punctuation\">{<\/span>tasks<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">task<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Task<\/span><\/span> <span class=\"token attr-name\">task<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>task<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Tasks<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>🐱‍💻 Bellow an example of the same transpiled .njs file.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> List <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./List'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Tasks<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">List<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> hash <span class=\"token operator\">=<\/span> <span class=\"token string\">'d493ac09d0d57574a30f136d31da455f'<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token keyword\">static<\/span> getTasks <span class=\"token operator\">=<\/span> Nullstack<span class=\"token punctuation\">.<\/span><span class=\"token function\">invoke<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'getTasks'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'d493ac09d0d57574a30f136d31da455f'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>tasks <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>tasks <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getTasks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>limit<span class=\"token operator\">:<\/span> <span class=\"token number\">10<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">renderTask<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>task<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span> \n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">source<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>task<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>description<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> Task <span class=\"token operator\">=<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>renderTask<span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token punctuation\">{<\/span>tasks<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">task<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Task<\/span><\/span> <span class=\"token attr-name\">task<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>task<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Tasks<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn more about the <a href=\"/service-worker\">service worker<\/a>.<\/p>\n","description":"Nullstack JavaScript files let Webpack know which loaders to use at transpile time","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"njs-file-extension"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/nullstack-logo.html b/docs/nullstack-logo.html
index 5bc9de12..df9e8e8a 100644
--- a/docs/nullstack-logo.html
+++ b/docs/nullstack-logo.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -59,15 +59,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Nullstack Logo - Nullstack","description":"Nullstack comes with it's set of logos built-in"};
       window.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/nullstack-logo":{"title":"Nullstack Logo","html":"<p>Nullstack comes with it's set of logos built-in to be used as components:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Logo <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack/logo'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Logo<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">30<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">light<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Logo<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">30<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">monotone<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Logo<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">30<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">light<\/span> <span class=\"token attr-name\">monotone<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Logo<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">30<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">duotone<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Logo<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">30<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">light<\/span> <span class=\"token attr-name\">duotone<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>The above components and it's attributes generates the following logos:<\/p>\n<p><img src=\"/nullstack-logos.png\" alt=\"Nullstack Logos\"><\/p>\n<p>The Logo uses full width and has color <code>duotone<\/code> by default.<\/p>\n","description":"Nullstack comes with it's set of logos built-in","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"nullstack-logo"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/nullstack-logo/index.html b/docs/nullstack-logo/index.html
index 5bc9de12..df9e8e8a 100644
--- a/docs/nullstack-logo/index.html
+++ b/docs/nullstack-logo/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -59,15 +59,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Nullstack Logo - Nullstack","description":"Nullstack comes with it's set of logos built-in"};
       window.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/nullstack-logo":{"title":"Nullstack Logo","html":"<p>Nullstack comes with it's set of logos built-in to be used as components:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Logo <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack/logo'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Logo<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">30<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">light<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Logo<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">30<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">monotone<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Logo<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">30<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">light<\/span> <span class=\"token attr-name\">monotone<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Logo<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">30<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">duotone<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Logo<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">30<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">light<\/span> <span class=\"token attr-name\">duotone<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>The above components and it's attributes generates the following logos:<\/p>\n<p><img src=\"/nullstack-logos.png\" alt=\"Nullstack Logos\"><\/p>\n<p>The Logo uses full width and has color <code>duotone<\/code> by default.<\/p>\n","description":"Nullstack comes with it's set of logos built-in","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"nullstack-logo"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css b/docs/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css
deleted file mode 100644
index 813f9ceb..00000000
--- a/docs/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! tailwindcss v2.1.1 | MIT License | https://tailwindcss.com *//*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */*,*::before,*::after{box-sizing:border-box}:root{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"}b{font-weight:bolder}code,pre{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;font-size:1em}button{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{text-transform:none}button,[type=button]{-webkit-appearance:button}blockquote,h1,h2,h3,h4,h5,p,pre{margin:0}button{background-color:transparent;background-image:none}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}ul{list-style:none;margin:0;padding:0}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}body{font-family:inherit;line-height:inherit}*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}img{border-style:solid}button,[role=button]{cursor:pointer}h1,h2,h3,h4,h5{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button{padding:0;line-height:inherit;color:inherit}pre,code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}img,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}.prose{color:#374151;max-width:65ch}.prose a{color:#111827;text-decoration:underline;font-weight:500}.prose ul>li{position:relative;padding-left:1.75em}.prose ul>li::before{content:"";position:absolute;background-color:#d1d5db;border-radius:50%;width:.375em;height:.375em;top:calc(0.875em - 0.1875em);left:.25em}.prose blockquote{font-weight:500;font-style:normal;color:#111827;border-left-width:.25rem;border-left-color:#e5e7eb;quotes:"“" "”" "‘" "’";margin-top:1.6em;margin-bottom:1.6em;padding-left:1em}.prose blockquote p:last-of-type::after{content:close-quote}.prose h1{color:#111827;font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111}.prose h2{color:#111827;font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333}.prose h3{color:#111827;font-weight:600;font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose h4{color:#111827;font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.prose code{color:#111827;font-weight:600;font-size:.875em;background-color:#f3f4f6}.prose a code{color:#111827}.prose pre{color:#e5e7eb;background-color:#1f2937;overflow-x:auto;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding-top:.8571429em;padding-right:1.1428571em;padding-bottom:.8571429em;padding-left:1.1428571em}.prose pre code{background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:400;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose pre code::before{content:none}.prose pre code::after{content:none}.prose{font-size:1rem;line-height:1.75}.prose p{margin-top:1.25em;margin-bottom:1.25em}.prose img{margin-top:2em;margin-bottom:2em}.prose video{margin-top:2em;margin-bottom:2em}.prose h2 code{font-size:.875em}.prose h3 code{font-size:.9em}.prose ul{margin-top:1.25em;margin-bottom:1.25em}.prose li{margin-top:.5em;margin-bottom:.5em}.prose>ul>li p{margin-top:.75em;margin-bottom:.75em}.prose>ul>li>*:first-child{margin-top:1.25em}.prose>ul>li>*:last-child{margin-bottom:1.25em}.prose ul ul{margin-top:.75em;margin-bottom:.75em}.prose h2+*{margin-top:0}.prose h3+*{margin-top:0}.prose h4+*{margin-top:0}.prose>:first-child{margin-top:0}.prose>:last-child{margin-bottom:0}.prose h2,.prose h3,.prose h4{scroll-margin-top:8rem}.dark .dark\:prose-dark{color:#d1d5db}.dark .dark\:prose-dark blockquote{border-left-color:#374151;color:#d1d5db}.dark .dark\:prose-dark a{color:#d1d5db}.dark .dark\:prose-dark code{background-color:#1f2937;color:#d1d5db}.dark .dark\:prose-dark h2,.dark .dark\:prose-dark h3,.dark .dark\:prose-dark h4{color:#f3f4f6;scroll-margin-top:8rem}.dark .dark\:prose-dark ul li:before{background-color:#6b7280}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.25rem * var(--tw-space-y-reverse))}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(0.25rem * var(--tw-space-x-reverse));margin-left:calc(0.25rem * calc(1 - var(--tw-space-x-reverse)))}.bg-white{--tw-bg-opacity: 1;background-color:rgba(255, 255, 255, var(--tw-bg-opacity))}.bg-gray-800{--tw-bg-opacity: 1;background-color:rgba(31, 41, 55, var(--tw-bg-opacity))}.bg-yellow-300{--tw-bg-opacity: 1;background-color:rgba(252, 211, 77, var(--tw-bg-opacity))}.bg-pink-600{--tw-bg-opacity: 1;background-color:rgba(219, 39, 119, var(--tw-bg-opacity))}.hover\:bg-transparent:hover{background-color:transparent}.dark .dark\:bg-gray-800{--tw-bg-opacity: 1;background-color:rgba(31, 41, 55, var(--tw-bg-opacity))}.dark .dark\:bg-gray-900{--tw-bg-opacity: 1;background-color:rgba(17, 24, 39, var(--tw-bg-opacity))}.bg-bottom{background-position:bottom}.bg-center{background-position:center}.bg-no-repeat{background-repeat:no-repeat}.bg-repeat-y{background-repeat:repeat-y}.bg-0{background-size:0%}.bg-70{background-size:70%}.hover\:bg-100:hover{background-size:100%}.border-gray-100{--tw-border-opacity: 1;border-color:rgba(243, 244, 246, var(--tw-border-opacity))}.border-gray-200{--tw-border-opacity: 1;border-color:rgba(229, 231, 235, var(--tw-border-opacity))}.border-pink-600{--tw-border-opacity: 1;border-color:rgba(219, 39, 119, var(--tw-border-opacity))}.dark .dark\:border-gray-800{--tw-border-opacity: 1;border-color:rgba(31, 41, 55, var(--tw-border-opacity))}.rounded-md{border-radius:.375rem}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-t-4{border-top-width:4px}.border-t{border-top-width:1px}.border-b{border-bottom-width:1px}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.font-light{font-weight:300}.h-5{height:1.25rem}.h-24{height:6rem}.h-80{height:20rem}.h-screen{height:100vh}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.my-3{margin-top:.75rem;margin-bottom:.75rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.mt-3{margin-top:.75rem}.mb-3{margin-bottom:.75rem}.mt-4{margin-top:1rem}.mb-4{margin-bottom:1rem}.mt-6{margin-top:1.5rem}.mb-8{margin-bottom:2rem}.mt-12{margin-top:3rem}.mb-12{margin-bottom:3rem}.max-w-none{max-width:none}.max-w-full{max-width:100%}.max-w-screen-xl{max-width:1280px}.min-w-32{min-width:8rem}.dark .dark\:opacity-10{opacity:.1}.overflow-y-auto{overflow-y:auto}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.px-8{padding-left:2rem;padding-right:2rem}.py-12{padding-top:3rem;padding-bottom:3rem}.pt-1{padding-top:.25rem}.pb-12{padding-bottom:3rem}.pb-24{padding-bottom:6rem}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.top-0{top:0px}.bottom-0{bottom:0px}.left-0{left:0px}.right-10{right:2.5rem}.bottom-10{bottom:2.5rem}*{--tw-shadow: 0 0 #0000}.shadow{--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}*{--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgba(59, 130, 246, 0.5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000}.ring-0{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.text-center{text-align:center}.text-white{--tw-text-opacity: 1;color:rgba(255, 255, 255, var(--tw-text-opacity))}.text-gray-300{--tw-text-opacity: 1;color:rgba(209, 213, 219, var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity: 1;color:rgba(156, 163, 175, var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity: 1;color:rgba(107, 114, 128, var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity: 1;color:rgba(31, 41, 55, var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity: 1;color:rgba(17, 24, 39, var(--tw-text-opacity))}.text-pink-500{--tw-text-opacity: 1;color:rgba(236, 72, 153, var(--tw-text-opacity))}.text-pink-600{--tw-text-opacity: 1;color:rgba(219, 39, 119, var(--tw-text-opacity))}.hover\:text-white:hover{--tw-text-opacity: 1;color:rgba(255, 255, 255, var(--tw-text-opacity))}.hover\:text-pink-600:hover{--tw-text-opacity: 1;color:rgba(219, 39, 119, var(--tw-text-opacity))}.dark .dark\:text-white{--tw-text-opacity: 1;color:rgba(255, 255, 255, var(--tw-text-opacity))}.dark .dark\:text-gray-300{--tw-text-opacity: 1;color:rgba(209, 213, 219, var(--tw-text-opacity))}.dark .dark\:text-pink-500{--tw-text-opacity: 1;color:rgba(236, 72, 153, var(--tw-text-opacity))}.dark .dark\:hover\:text-pink-400:hover{--tw-text-opacity: 1;color:rgba(244, 114, 182, var(--tw-text-opacity))}.underline{text-decoration:underline}.w-24{width:6rem}.w-full{width:100%}.z-20{z-index:20}.z-40{z-index:40}.z-50{z-index:50}.gap-4{gap:1rem}.gap-8{gap:2rem}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.transform{--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-105:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05}.rotate-180{--tw-rotate: 180deg}.translate-y-0{--tw-translate-y: 0px}.translate-y-full{--tw-translate-y: 100%}.transition{transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.delay-100{transition-delay:100ms}.delay-300{transition-delay:300ms}.delay-500{transition-delay:500ms}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,100%{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8, 0, 1, 1)}50%{transform:none;animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}}@media(min-width: 640px){.sm\:space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(0.5rem * var(--tw-space-x-reverse));margin-left:calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))}}@media(min-width: 640px){.sm\:bg-yellow-200{--tw-bg-opacity: 1;background-color:rgba(253, 230, 138, var(--tw-bg-opacity))}}@media(min-width: 640px){.dark .sm\:dark\:bg-gray-700{--tw-bg-opacity: 1;background-color:rgba(55, 65, 81, var(--tw-bg-opacity))}}@media(min-width: 640px){.sm\:border-0{border-width:0px}}@media(min-width: 640px){.sm\:flex{display:flex}}@media(min-width: 640px){.sm\:hidden{display:none}}@media(min-width: 640px){.sm\:flex-nowrap{flex-wrap:nowrap}}@media(min-width: 640px){.sm\:justify-self-start{justify-self:start}}@media(min-width: 640px){.sm\:order-2{order:2}}@media(min-width: 640px){.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media(min-width: 640px){.sm\:text-2xl{font-size:1.5rem;line-height:2rem}}@media(min-width: 640px){.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media(min-width: 640px){.sm\:text-5xl{font-size:3rem;line-height:1}}@media(min-width: 640px){.sm\:text-6xl{font-size:3.75rem;line-height:1}}@media(min-width: 640px){.sm\:mt-0{margin-top:0px}}@media(min-width: 640px){.sm\:mb-0{margin-bottom:0px}}@media(min-width: 640px){.sm\:mb-3{margin-bottom:.75rem}}@media(min-width: 640px){.sm\:mb-24{margin-bottom:6rem}}@media(min-width: 640px){.sm\:px-0{padding-left:0px;padding-right:0px}}@media(min-width: 640px){.sm\:px-20{padding-left:5rem;padding-right:5rem}}@media(min-width: 640px){.sm\:py-24{padding-top:6rem;padding-bottom:6rem}}@media(min-width: 640px){.sm\:py-36{padding-top:9rem;padding-bottom:9rem}}@media(min-width: 640px){.sm\:pb-0{padding-bottom:0px}}@media(min-width: 640px){.sm\:pl-3{padding-left:.75rem}}@media(min-width: 640px){.sm\:pt-12{padding-top:3rem}}@media(min-width: 640px){.sm\:pb-24{padding-bottom:6rem}}@media(min-width: 640px){.sm\:pt-36{padding-top:9rem}}@media(min-width: 640px){.sm\:text-left{text-align:left}}@media(min-width: 640px){.sm\:w-auto{width:auto}}@media(min-width: 640px){.sm\:w-1\/3{width:33.333333%}}@media(min-width: 640px){.sm\:w-5\/12{width:41.666667%}}@media(min-width: 640px){.sm\:w-6\/12{width:50%}}@media(min-width: 640px){.sm\:w-10\/12{width:83.333333%}}@media(min-width: 640px){.sm\:grid-cols-5{grid-template-columns:repeat(5, minmax(0, 1fr))}}@media(min-width: 640px){.sm\:transition-none{transition-property:none}}@media(min-width: 768px){.md\:hidden{display:none}}@media(min-width: 768px){.md\:h-auto{height:auto}}@media(min-width: 768px){.md\:p-0{padding:0px}}@media(min-width: 768px){.md\:pr-4{padding-right:1rem}}@media(min-width: 768px){.md\:relative{position:relative}}@media(min-width: 768px){.md\:w-80{width:20rem}}@media(min-width: 768px){.md\:z-auto{z-index:auto}}@media(min-width: 768px){.md\:translate-y-0{--tw-translate-y: 0px}}
-@font-face{font-family:"Roboto";font-style:normal;font-weight:300;src:local(""),url("/roboto-v20-latin-300.woff2") format("woff2");font-display:swap}@font-face{font-family:"Roboto";font-style:normal;font-weight:500;src:local(""),url("/roboto-v20-latin-500.woff2") format("woff2");font-display:swap}@font-face{font-family:"Crete Round";font-style:normal;font-weight:400;src:local(""),url("/crete-round-v9-latin-regular.woff2") format("woff2");font-display:swap}body{font-family:var(--secondary-font-family);--primary-font-family: "Crete Round", serif;--secondary-font-family: "Roboto", sans-serif;font-weight:300;overflow-y:scroll}h1,h2,h3,h4,h5{font-family:var(--primary-font-family);font-weight:700;letter-spacing:1px}blockquote{line-height:140%}section a img{transition:.1s}section a img:hover{transform:scale(1.1);z-index:1;transition:.3s}main{min-height:100vh;padding-top:61px}pre{color:#ddbc72;font-size:1rem;width:100%;background-color:#282c34;line-height:1.5;padding:.5rem;color:#ddbc72;overflow-x:auto}@-moz-document url-prefix(){pre{font-size:1.1rem}}@media(max-width: 768px){pre{overflow-x:auto}}.token.selector,.token.tag{color:#ff5d9a !important}.token.comment{color:#9dbcf7 !important}.token.string,.token.attr-value{color:#99c47a !important}.token.atrule,.token.keyword{color:#e89bff !important}.token.property,.token.boolean,.token.number,.token.constant,.token.symbol,.token.attr-name,.token.deleted{color:#e9ac72 !important}.token.function,.token.operator{color:#71bfff !important}.token.punctuation{color:#b1b8c6 !important}article :target::before{content:"";display:block;height:calc(80px + 1rem);margin-top:calc(-80px + -1rem)}@media(max-width: 768px){article pre code.language-jsx{overflow-x:scroll}}
diff --git a/docs/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js b/docs/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js
deleted file mode 100644
index 949cb371..00000000
--- a/docs/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(e){var t={};function __webpack_require__(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,__webpack_require__),r.l=!0,r.exports}__webpack_require__.m=e,__webpack_require__.c=t,__webpack_require__.d=function(e,t,n){__webpack_require__.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},__webpack_require__.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},__webpack_require__.t=function(e,t){if(1&t&&(e=__webpack_require__(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(__webpack_require__.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)__webpack_require__.d(n,r,function(t){return e[t]}.bind(null,r));return n},__webpack_require__.n=function(e){var t=e&&e.__esModule?function getDefault(){return e.default}:function getModuleExports(){return e};return __webpack_require__.d(t,"a",t),t},__webpack_require__.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},__webpack_require__.p="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/",__webpack_require__(__webpack_require__.s=4)}([function(e,t,n){},function(e,t){},function(e,t,n){},function(e,t,n){},function(e,t,n){"use strict";n.r(t);n(0);const r=/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*))(?:Z|(\+|-)([\d|:]*))?$/,i=/^\/Date\((d|-|.*)\)[\/|\\]$/;function dateParser(e,t){if("string"==typeof t){let e=r.exec(t);if(e)return new Date(t);if(e=i.exec(t),e){const t=e[1].split(/[-+,.]/);return new Date(t[0]?+t[0]:0-+t[1])}}return t}function deserialize(e){return JSON.parse(e,dateParser)}function fragment({children:e}){return e}function element_element(e,t,...n){n=function flattenChildren(e){return e=[].concat.apply([],e).map(e=>null!=e&&e),[].concat.apply([],e)}(n),"textarea"===e&&(n=[n.join("")]);const r={...t,children:n};return"element"===e&&(e=r.tag||fragment,delete r.tag),"function"==typeof e&&void 0!==e.render?{type:e,attributes:r,children:null}:{type:e,attributes:r,children:n}}function extractParamValue(e){return"true"===e||"false"!==e&&(e?decodeURIComponent(e.replace(/\+/g," ")):"")}function serializeParam(e){return e&&void 0!==e.toJSON?e.toJSON():e}function serializeSearch(e){return Object.keys(e).map(t=>!1===e[t]||e[t]?`${t}=${e[t]}`:"").filter(e=>!!e).join("&")}const l={};var a=l;const s={set(e,t,n){const r=serializeParam(n);e[t]=r;const i=serializeSearch(e);return S.url=S.path+(i?"?":"")+i,!0},get:(e,t)=>!1!==e[t]&&(!1!==a[t]&&(e[t]||a[t]||""))},o={...window.params};delete window.params;const c=new Proxy(o,s);function updateParams(e){!function resetSegments(){for(const e in l)delete l[e]}();const t=function getQueryStringParams(e){const[t,n]=e.split("?");return n?n.split("&").reduce((e,t)=>{let[n,r]=t.split("=");return e[n]=extractParamValue(r),e},{}):{}}(e);for(const e of Object.keys({...t,...o}))o[e]=t[e];return c}var u=c;const d={...window.environment,client:!0,server:!1};Object.freeze(d);var m=d;function extractLocation(e){let[t,n]=e.split("#"),[r,i]=t.split("?");"/"!==r&&r.endsWith("/")&&(r=r.substring(0,r.length-1));let l=r;i&&(l+="?"+i);let a=l;return n&&(a+="#"+n),void 0===n&&(n=""),{path:r,search:i,url:l,urlWithHash:a,hash:n}}function isFalse(e){return null==e||!1===e||"object"==typeof e&&(void 0===e.type||null===e.type||!1===e.type)}function isText(e){return void 0===e.children}function anchorableElement(e){const t=e.querySelectorAll('a[href^="/"]:not([target])');for(const e of t)e.onclick=t=>{t.preventDefault(),S.url=e.getAttribute("href")}}function render(e,t){if(isFalse(e)||"head"===e.type)return document.createComment("");if(isText(e))return document.createTextNode(e);const n=t&&t.svg||"svg"===e.type;let r;r=n?document.createElementNS("http://www.w3.org/2000/svg",e.type):document.createElement(e.type),e.instance&&(e.instance._self.element=r);for(let t in e.attributes)if("html"===t)r.innerHTML=e.attributes[t],anchorableElement(r);else if(t.startsWith("on")){const n=t.replace("on",""),i="_event."+n;e[i]=n=>{!0!==e.attributes.default&&n.preventDefault(),e.attributes[t]({...e.attributes,event:n})},r.addEventListener(n,e[i])}else{const n=typeof e.attributes[t];"object"!==n&&"function"!==n&&("value"!=t&&!0===e.attributes[t]?r.setAttribute(t,""):("value"==t||!1!==e.attributes[t]&&null!==e.attributes[t]&&void 0!==e.attributes[t])&&r.setAttribute(t,e.attributes[t]))}if(!e.attributes.html){for(let t=0;t<e.children.length;t++){const i=render(e.children[t],{svg:n});r.appendChild(i)}"select"==e.type&&(r.value=e.attributes.value)}return r}function rerender(e,t,n){if(t=void 0===t?w.virtualDom:t,(n=void 0===n?w.nextVirtualDom:n).instance&&(n.instance._self.element=e),!w.hydrated&&e)for(const t of e.childNodes)t.tagName&&"textarea"==t.tagName.toLowerCase()&&0==t.childNodes.length&&t.appendChild(document.createTextNode("")),8===t.COMMENT_NODE&&"#"===t.textContent&&e.removeChild(t);if(!isFalse(t)||!isFalse(n)){if((isFalse(t)||isFalse(n))&&t!=n){const t=render(n);return e.replaceWith(t)}if("head"!=t.type||"head"!=n.type){if("head"==t.type||"head"==n.type){const t=render(n);return e.replaceWith(t)}if(t.type!==n.type){const t=render(n);return e.replaceWith(t)}if(isText(t)&&isText(n))t!=n&&(e.nodeValue=n);else if(t.type===n.type){const r=Object.keys({...t.attributes,...n.attributes});for(const i of r)if("html"===i)n.attributes[i]!==t.attributes[i]&&(e.innerHTML=n.attributes[i],anchorableElement(e));else if("checked"===i)n.attributes[i]!==e.value&&(e.checked=n.attributes[i]);else if("value"===i)n.attributes[i]!==e.value&&(e.value=n.attributes[i]);else if(i.startsWith("on")){const r=i.replace("on",""),l="_event."+r;e.removeEventListener(r,t[l]),n.attributes[i]&&(n[l]=e=>{!0!==n.attributes.default&&e.preventDefault(),n.attributes[i]({...n.attributes,event:e})},e.addEventListener(r,n[l]))}else{const r=typeof n.attributes[i];"object"!==r&&"function"!==r&&(void 0!==t.attributes[i]&&void 0===n.attributes[i]?e.removeAttribute(i):t.attributes[i]!==n.attributes[i]&&("value"!=i&&!1===n.attributes[i]||null===n.attributes[i]||void 0===n.attributes[i]?e.removeAttribute(i):"value"!=i&&!0===n.attributes[i]?e.setAttribute(i,""):e.setAttribute(i,n.attributes[i])))}if(n.attributes.html)return;const i=Math.max(t.children.length,n.children.length);if(n.children.length>t.children.length){for(let r=0;r<t.children.length;r++)rerender(e.childNodes[r],t.children[r],n.children[r]);for(let r=t.children.length;r<n.children.length;r++){const t=render(n.children[r]);e.appendChild(t)}}else if(t.children.length>n.children.length){for(let r=0;r<n.children.length;r++)rerender(e.childNodes[r],t.children[r],n.children[r]);for(let r=t.children.length-1;r>=n.children.length;r--)e.removeChild(e.childNodes[r])}else for(let r=i-1;r>-1;r--){if(void 0===e.childNodes[r])return void console.error(`Virtual DOM does not match the DOM. Expected tag ${t.type} but instead found undefined. This error usually happens because of an invalid HTML hierarchy like nested forms or tables without tr.`);rerender(e.childNodes[r],t.children[r],n.children[r])}"textarea"==n.type&&(e.value=n.children.join("")),"select"==n.type&&(e.value=n.attributes.value)}}}}const h={set(e,t,n){return isProxyable(t,n)?(n._isProxy=!0,e[t]=new Proxy(n,this)):e[t]=n,t.startsWith("_")||w.update(),!0},get(e,t){return"_isProxy"===t||Reflect.get(...arguments)}};function isProxyable(e,t){return!(e.startsWith("_")||null===t||"object"!=typeof t||void 0!==t._isProxy||t instanceof Date)}function generateObjectProxy(e,t){if(isProxyable(e,t)){if("object"==typeof t)for(const e of Object.keys(t))t[e]=generateObjectProxy(e,t[e]);return new Proxy(t,h)}return t}const p={},f=deserialize(JSON.stringify(window.context));for(const e of Object.keys(f))p[e]=generateObjectProxy(e,f[e]);const b={set:(e,t,n)=>(p[t]=generateObjectProxy(t,n),w.update(),!0),get:(e,t)=>"_isProxy"===t||(void 0===e[t]?p[t]:e[t])};function generateContext(e){return new Proxy(e,b)}var g=p;function erase(e){e.type=!1,delete e.attributes,delete e.children}function camelize(e){return e.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g,(e,t)=>t.toUpperCase())}function kebabize(e){return e.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase()}let x=[{transform:function objectable_transform({node:e}){if(function objectable_match(e){return e&&void 0!==e.attributes}(e))for(const t in e.attributes)if(t.startsWith("on")&&"object"==typeof e.attributes[t]){const n=e.attributes.source,r=e.attributes[t];e.attributes[t]=function(){Object.assign(n,r)}.bind(n)}},client:!0},{transform:function parameterizable_transform({node:e,router:t,params:n}){if(!function parameterizable_match(e){return e&&e.attributes&&(e.attributes.params||e.attributes.path)}(e))return;let r;if(e.attributes.params){r={};for(const t in e.attributes.params)r[t]=serializeParam(e.attributes.params[t])}else r=n;const i=serializeSearch(r),l=e.attributes.path||t.path;e.attributes.href=l+(i?"?":"")+i,delete e.attributes.path,delete e.attributes.params},client:!0,server:!0},{transform:function anchorable_transform({node:e,router:t}){if(!function anchorable_match(e){return e&&"a"===e.type&&e.attributes.href&&e.attributes.href.startsWith("/")&&!e.attributes.target}(e))return;const n=e.attributes.onclick;e.attributes.onclick=({event:r})=>{r.preventDefault(),t.url=e.attributes.href,n&&setTimeout(()=>{n({...e.attributes,event:r})},0)}},client:!0},{load:function load({router:e}){e._routes={},e._oldSegments?(e._oldSegments=e._newSegments,e._newSegments={}):(e._oldSegments={},e._newSegments={})},transform:function routable_transform({node:e,depth:t,router:n}){if(!function match(e){return e&&void 0!==e.attributes&&void 0!==e.attributes.route}(e))return;const r=t.slice(0,-1).join(".");if(void 0!==n._routes[r])erase(e);else{const t=function routeMatches(e,t){let{path:n}=extractLocation(e);const r=n.split("/"),i=t.split("/"),l={},a=Math.max(r.length,i.length);let s=!1;for(let e=0;e<a;e++)if(!s)if("*"===i[e])s=!0;else if(i[e]&&i[e].startsWith(":")){l[i[e].replace(":","")]=extractParamValue(r[e])}else if(i[e]!==r[e])return!1;return l}(n.url,e.attributes.route);t?(n._routes[r]=!0,n._newSegments[r]=t,Object.assign(n._segments,t)):erase(e)}},client:!0,server:!0},{transform:function datable_transform({node:e}){if(function datable_match(e){return e&&void 0!==e.attributes}(e)){e.attributes.data=e.attributes.data||{};for(const t in e.attributes)if(t.startsWith("data-")){const n=camelize(t.slice(5));e.attributes.data[n]=e.attributes[t]}for(const t in e.attributes.data){const n="data-"+kebabize(t);e.attributes[n]=e.attributes.data[t]}}},client:!0,server:!0},{transform:function bindable_transform({node:e,environment:t}){if(!function bindable_match(e){return void 0!==e&&void 0!==e.attributes&&void 0!==e.attributes.bind&&void 0!==e.attributes.source}(e))return;const n=e.attributes.source;"textarea"===e.type?e.children=[n[e.attributes.bind]]:"input"===e.type&&"checkbox"===e.attributes.type?e.attributes.checked=n[e.attributes.bind]:e.attributes.value=n[e.attributes.bind],e.attributes.name=e.attributes.name||e.attributes.bind,t.client&&function attachEvent(e){const t=e.attributes.source;let n="oninput",r="value";"checkbox"===e.attributes.type||"radio"===e.attributes.type?(n="onclick",r="checked"):"input"!==e.type&&"textarea"!==e.type&&(n="onchange");const i=e.attributes[n];e.attributes[n]=({event:n,value:l})=>{"checked"==r?t[e.attributes.bind]=n.target[r]:!0===t[e.attributes.bind]||!1===t[e.attributes.bind]?t[e.attributes.bind]=n?"true"==n.target[r]:l:"number"==typeof t[e.attributes.bind]?t[e.attributes.bind]=parseFloat(n?n.target[r]:l)||0:t[e.attributes.bind]=n?n.target[r]:l,void 0!==i&&setTimeout(()=>{i({...e.attributes,event:n,value:l})},0)}}(e)},client:!0,server:!0}];function loadPlugins(e){for(const t of x)t.load&&t.load(e.context);return x}async function generateBranch(e,t,n,r){if(function transformNodes(e,t,n){for(const r of x)r.transform({...e.context,node:t,depth:n})}(r,t,n),isFalse(t))e.children.push(!1);else if(function isClass(e){return"function"==typeof e.type&&e.type.prototype&&"function"==typeof e.type.prototype.render}(t)){const i=t.attributes.key?t.attributes.key:function generateKey(e){return 1===e.length?"application":"n-"+e.join("-")}(n)+(t.attributes.route?r.context.router.url:"");if(r.context.environment.client&&r.context.router._changed&&t.attributes&&t.attributes.route&&"ssg"!==r.context.environment.mode){const e=n.slice(0,-1).join("."),t=r.context.router._newSegments[e];if(t){const n=r.context.router._oldSegments[e];for(const e in t)n[e]!==t[e]&&delete r.memory[i]}}const l=r.instances[i]||new t.type(r);let a;l._self.persistent=!!t.attributes.persistent,l._self.key=i,l._attributes=t.attributes,l._scope=r,r.memory&&(a=r.memory[i],a&&(l._self.initiated=!0,Object.assign(l,a),delete r.memory[i]));let s=!1;l._self.terminated&&(s=!0,l._self.terminated=!1);const o=void 0===r.instances[i];r.instances[i]=l,o&&(void 0===a&&(l.prepare&&l.prepare(),r.context.environment.server?(l.initiate&&await l.initiate(),l._self.initiated=!0):r.initiationQueue.push(l)),s=!0),r.hydrationQueue&&(s?r.hydrationQueue.push(l):1==l._self.initiated&&l.update&&l.update()),r.context.environment.client&&r.renewalQueue.push(l);const c=l.render();c&&c.type&&(c.instance=l),t.children=[].concat(c);for(let i=0;i<t.children.length;i++)await generateBranch(e,t.children[i],[...n,i],r)}else if(function isFunction(e){return"function"==typeof e.type}(t)){const i=t.type.name?r.generateContext(t.attributes):t.attributes,l=t.type(i);t.children=[].concat(l);for(let i=0;i<t.children.length;i++)await generateBranch(e,t.children[i],[...n,i],r)}else if(t.type){const i={type:t.type,attributes:t.attributes||{},instance:t.instance,children:[]};if(t.children)for(let e=0;e<t.children.length;e++)await generateBranch(i,t.children[e],[...n,e],r);e.children.push(i)}else e.children.push(t)}async function generateTree(e,t){const n={type:"div",attributes:{id:"application"},children:[]};return await generateBranch(n,e,[0],t),n}const y={initialized:!1,hydrated:!1,initializer:null,instances:{}};g.instances=y.instances,y.initiationQueue=[],y.renewalQueue=[],y.hydrationQueue=[],y.virtualDom={},y.selector=null,y.events={},y.generateContext=generateContext,y.renderQueue=null,y.update=async function(){y.initialized&&(clearInterval(y.renderQueue),y.renderQueue=setTimeout(async()=>{const e=y;e.context=g,e.plugins=loadPlugins(e),y.initialized=!1,y.initiationQueue=[],y.renewalQueue=[],y.hydrationQueue=[],y.nextVirtualDom=await generateTree(y.initializer(),e),rerender(y.selector),y.virtualDom=y.nextVirtualDom,y.nextVirtualDom=null,y.processLifecycleQueues()},16))},y.processLifecycleQueues=async function(){y.initialized||(y.initialized=!0,y.hydrated=!0);const e=y.initiationQueue,t=y.hydrationQueue;for(const t of e)t.initiate&&await t.initiate(),t._self.initiated=!0;e.length&&y.update();for(const e of t)e.hydrate&&await e.hydrate(),e._self.hydrated=!0;t.length&&y.update();for(const e in y.instances){const t=y.instances[e];y.renewalQueue.includes(t)||t._self.terminated||(t.terminate&&await t.terminate(),t._self.persistent?t._self.terminated=!0:delete y.instances[e])}S._changed=!1};var w=y;const v={...window.worker};v.online=navigator.onLine,delete window.worker;const _=Object.freeze([]),k={set:(e,t,n)=>(e[t]=n,w.update(),!0),get:(e,t)=>e[t]||_};v.queues=new Proxy({},k);const C=new Proxy(v,{set:(e,t,n)=>(e[t]!==n&&(e[t]=n,w.update()),!0)});if(v.enabled){window.addEventListener("beforeinstallprompt",(function(e){e.preventDefault(),C.installation=e})),async function register(){if("serviceWorker"in navigator){const e="/service-worker.js";try{C.registration=await navigator.serviceWorker.register(e,{scope:"/"})}catch(e){console.log(e)}}}()}window.addEventListener("online",()=>{C.online=!0,"ssg"===m.mode?S._update(S.url):C.responsive=!0}),window.addEventListener("offline",()=>{C.online=!1});var P=C;function windowEvent(e){clearTimeout(null),setTimeout(()=>{const t=new Event("nullstack."+e);window.dispatchEvent(t)},0)}const j={...window.page,event:"nullstack.page"};delete window.page;var L=new Proxy(j,{set(e,t,n){"title"===t&&(document.title=n);const r=Reflect.set(...arguments);return"title"===t&&windowEvent("page"),w.update(),r}});function _defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}let M=null;var S=new class router_Router{constructor(){_defineProperty(this,"event","nullstack.router"),_defineProperty(this,"_changed",!1),_defineProperty(this,"_segments",a);const{hash:e,url:t}=extractLocation(window.location.pathname+window.location.search);this._url=t,this._hash=e}async _popState(){const{urlWithHash:e}=extractLocation(window.location.pathname+window.location.search);await this._update(e,!1)}async _update(e,t){const{url:n,path:r,hash:i,urlWithHash:l}=extractLocation(e);clearTimeout(M),M=setTimeout(async()=>{if(L.status=200,"ssg"===m.mode){P.fetching=!0;const e="/index.json",t="/"===r?e:r+e;try{const e=await fetch(t),r=await e.json(n);w.memory=r.instances;for(const e in r.page)L[e]=r.page[e];P.responsive=!0}catch(e){P.responsive=!1}P.fetching=!1}t&&history.pushState({},document.title,l),this._url=n,this._hash=i,this._changed=!0,updateParams(n),w.update(),windowEvent("router")},0)}async _redirect(e){if(e.startsWith("http"))return window.location.href=e;const{url:t,hash:n,urlWithHash:r}=extractLocation(e);t===this._url&&this._hash===n||await this._update(r,!0),n||window.scroll(0,0)}get url(){return this._url}set url(e){this._redirect(e)}get path(){return extractLocation(this._url).path}set path(e){this._redirect(e+window.location.search)}};var z={get(e,t){return"_isProxy"===t||("function"!=typeof e[t]||e[t].name.startsWith("_")||"constructor"===t?Reflect.get(...arguments):n=>{const r=generateContext({...e._attributes,...n,self:e._self});return e[t](r)})},set:(e,t,n)=>(e[t]=generateObjectProxy(t,n),t.startsWith("_")||w.update(),!0)};const T={...window.settings};delete window.settings,Object.freeze(T);var O=T;const A={...window.project};delete window.project,Object.freeze(A);var q=A;n(1);function client_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}g.page=L,g.router=S,g.settings=O,g.worker=P,g.params=u,g.project=q,g.environment=window.environment,w.memory=deserialize(JSON.stringify(window.instances));const H=w;H.generateContext=generateContext,H.context=g,w.plugins=loadPlugins(H);class client_Nullstack{static async start(e){if(window.addEventListener("popstate",()=>{S._popState()}),w.routes={},updateParams(S.url),w.currentInstance=null,w.initializer=()=>element_element(e),w.selector=document.querySelector("#application"),"spa"===m.mode){H.plugins=loadPlugins(H),g.environment=m,w.virtualDom=await generateTree(w.initializer(),H);const e=render(w.virtualDom);w.selector.replaceWith(e),w.selector=e}else w.virtualDom=await generateTree(w.initializer(),H),g.environment=m,H.plugins=loadPlugins(H),w.nextVirtualDom=await generateTree(w.initializer(),H),rerender(w.selector),w.virtualDom=w.nextVirtualDom,w.nextVirtualDom=null;w.processLifecycleQueues(),delete window.context}constructor(){client_defineProperty(this,"_self",{prerendered:!1,initiated:!1,hydrated:!1,terminated:!1});const e=function getProxyableMethods(e){let t=new Set,n=e;do{Object.getOwnPropertyNames(n).map(e=>t.add(e))}while((n=Object.getPrototypeOf(n))&&n!=Object.prototype);return[...t.keys()].filter(t=>"constructor"!==t&&"function"==typeof e[t]&&!t.startsWith("_")&&!e[t].name.startsWith("_"))}(this),t=new Proxy(this,z);for(const n of e)this[n]=this[n].bind(t);return t}render(){return!1}}client_defineProperty(client_Nullstack,"element",element_element),client_defineProperty(client_Nullstack,"invoke",(function invoke(e,t){return async function _invoke(n={}){var r;let i;P.fetching=!0,Object.isFrozen(P.queues[e])?P.queues[e]=[n]:P.queues[e]=[...P.queues[e],n];const l=t===this.constructor.hash?t:`${t}-${this.constructor.hash}`;let a=`${P.api}/nullstack/${l}/${e}.json`;try{const e=await fetch(a,{method:"POST",headers:P.headers,mode:"cors",cache:"no-cache",credentials:"same-origin",redirect:"follow",referrerPolicy:"no-referrer",body:JSON.stringify(n||{})});L.status=e.status;i=deserialize(await e.text()).result,P.responsive=!0}catch(e){P.responsive=!1}return 1===(null===(r=P.queues[e])||void 0===r?void 0:r.length)?delete P.queues[e]:P.queues[e]=P.queues[e].filter(e=>e!==n),P.fetching=!!Object.keys(P.queues).length,i}})),client_defineProperty(client_Nullstack,"fragment",fragment),client_defineProperty(client_Nullstack,"use",function usePlugins(e){return async(...t)=>{x=[...new Set([...t.flat(),...x])].filter(t=>t[e])}}("client"));var D=client_Nullstack;n(2);function Translatable_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}class Translatable_Translatable extends D{constructor(...e){super(...e),Translatable_defineProperty(this,"geti18nByLocale",D.invoke("geti18nByLocale","56b29579668c161418055db93fdd2691"))}async initiate({project:e,page:t,locale:n}){this.locale=n,this.i18n=await this.geti18nByLocale({locale:n}),this.i18n.title&&(t.title=`${this.i18n.title} - ${e.name}`,t.description=this.i18n.description,t.locale=n||"en-US")}update({locale:e}){this.locale!==e&&this.initiate()}}Translatable_defineProperty(Translatable_Translatable,"hash","56b29579668c161418055db93fdd2691");var B=Translatable_Translatable;class Documentation_Documentation extends B{hydrate({router:e,page:t}){"pt-BR"===t.locale?e.url="/pt-br/comecando":e.url="/getting-started"}}!function Documentation_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}(Documentation_Documentation,"hash","45cf5090d7d5af44940480cf9ef3dc19");var Z=Documentation_Documentation;class Components_Components extends B{prepare({page:e}){e.priority=.3}renderProject({title:e,repository:t}){return D.element("a",{href:t,target:0===t.indexOf("http")&&"_blank",rel:"noopener",class:"block text-pink-600 dark:text-pink-500 border-t border-gray-100 dark:border-gray-800 py-2 mt-2"},e)}renderTopic({title:e,projects:t,tagline:n}){const r=this.renderProject;return D.element("div",{class:"w-full my-6"},D.element("h2",{class:"w-full text-xl sm:text-4xl font-light mb-4"}," ",e," "),n&&D.element("p",{class:"my-3",title:n.title}," ",n.text," "),D.element("nav",{class:"w-full"},t.map(e=>D.element(r,e))))}render(){const e=this.renderTopic;return!!this.i18n&&D.element("section",{class:"max-w-screen-xl mx-auto px-4 flex justify-between items-center flex-wrap py-12 sm:py-24"},D.element("h1",{class:"w-full text-xl sm:text-4xl font-light mb-4"}," ",this.i18n.heading," "),D.element("p",{class:"w-full text-xl"}," ",this.i18n.tagline," "),D.element("p",{class:"w-full prose dark:prose-dark max-w-none",html:this.i18n.contribute}),D.element("div",{class:"w-full"},this.i18n.topics.map(t=>D.element(e,t))))}}!function Components_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}(Components_Components,"hash","2f4773e237a19e3b6c883b2b9685addd");var W=Components_Components;n(3);function Close({size:e}){return D.element("svg",{width:e,height:e,viewBox:"0 0 482 482"},D.element("path",{d:"M316.552 203H163.552C149 203 138 212 149 228C160 244 190.5 278 218.052 298C234.5 309.94 250.552 306.304 260.552 298C279.218 282.5 319.352 246.8 330.552 228C341.752 209.2 325.885 203.5 316.552 203Z",fill:"currentColor"}))}function Article_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}class Article_Article extends D{constructor(...e){super(...e),Article_defineProperty(this,"title",""),Article_defineProperty(this,"html",""),Article_defineProperty(this,"getArticleByKey",D.invoke("getArticleByKey","a4edd2952897ef3f7e238f0297a10258")),Article_defineProperty(this,"getArticlesList",D.invoke("getArticlesList","a4edd2952897ef3f7e238f0297a10258"))}async initiate({project:e,page:t,locale:n,params:r}){const i=await this.getArticleByKey({key:r.slug,locale:n});Object.assign(this,i);const{topics:l}=await this.getArticlesList({locale:n});this.topics=l,t.title=`${i.title} - ${e.name}`,t.description=i.description,i.status&&(t.status=404)}renderLink({title:e,href:t,router:n}){const r=n.url===t;return D.element("a",{href:t,class:(r?"text-pink-500 dark:text-pink-500":"text-gray-500 dark:text-gray-300")+" hover:text-pink-600 dark:hover:text-pink-400 block w-full",source:this,onclick:{expanded:!0}}," ",e," ")}renderTopic({title:e,links:t}){const n=this.renderLink;return D.element("div",{class:"mb-3"},D.element("h5",null," ",e," "),D.element("nav",null,t.map(e=>D.element(n,e))))}render(){var e;const t=this.renderTopic;return D.element("section",{class:"max-w-screen-xl mx-auto px-4 flex flex-wrap sm:flex-nowrap py-12 sm:py-24"},D.element("button",{source:this,onclick:{expanded:!this.expanded},class:"transition delay-300 fixed bottom-10 right-10 bg-pink-600 text-white shadow-xl rounded-full py-2 px-4 z-50 md:hidden ring-0 transform "+(this.expanded?"rotate-180 transform":"")},D.element(Close,{size:20})),D.element("aside",{class:"w-full md:w-80 fixed top-0 left-0 md:relative z-40 md:z-auto bg-white dark:bg-gray-900 h-screen md:h-auto p-4 overflow-y-auto md:p-0 md:pr-4 transform pb-24 sm:pb-0 transition sm:transition-none delay-500 delay-0 "+(this.expanded?"translate-y-0":"translate-y-full md:translate-y-0")},null===(e=this.topics)||void 0===e?void 0:e.map(e=>D.element(t,e))),D.element("article",{class:"w-full pb-24"},D.element("h1",{class:"text-pink-600 text-4xl font-light block mb-8"}," ",this.title," "),D.element("div",{html:this.html,class:"prose dark:prose-dark max-w-none"})))}}Article_defineProperty(Article_Article,"hash","a4edd2952897ef3f7e238f0297a10258");var N=Article_Article;function Logo({light:e,height:t,monotone:n}){const r=e?"#fff":"#2d3748",i=n?r:"#d22365";return D.element("svg",{xmlns:"http://www.w3.org/2000/svg",height:t,viewBox:"0 0 511.5039 113.7368"},D.element("title",null," Nullstack "),D.element("path",{d:"M13.2736,39.964H28.7009v9.8922a20.3919,20.3919,0,0,1,7.743-8.479,21.2792,21.2792,0,0,1,11.2172-3.0031q7.36,0,11.3349,4.1218t3.9745,11.6588a48.9655,48.9655,0,0,1-1.06,8.8913l-8.3025,42.8665H36.3556L44.187,65.7546a31.2306,31.2306,0,0,0,.5888-5.5939q0-7.6542-6.3593-7.6547a10.7348,10.7348,0,0,0-8.4791,4.3278q-3.5922,4.328-5.0639,12.0415l-7.1248,37.0372H.4961Z",transform:"translate(-0.4961)",fill:r}),D.element("path",{d:"M81.4691,107.62q-7.2426,0-11.2466-4.1807t-4.004-11.8943a46.3965,46.3965,0,0,1,1.001-8.6557L75.64,39.964H92.7746L85.0609,80.24a29.8175,29.8175,0,0,0-.5888,5.5938q0,7.6551,6.4771,7.6548A10.3547,10.3547,0,0,0,99.2811,89.19q3.4446-4.2978,4.9756-12.0709L111.44,39.964h17.1348l-12.7775,65.9485H100.37V96.138a18.7565,18.7565,0,0,1-7.4781,8.3908A21.4849,21.4849,0,0,1,81.4691,107.62Z",transform:"translate(-0.4961)",fill:r}),D.element("path",{d:"M150.2958,113.7368q-11.4821,0-16.7815-3.3563t-5.2995-10.5989a43.049,43.049,0,0,1,1.1188-8.3613l11.9532-56.6451H123.2687l2.532-13.2486h35.2118L146.2918,92.4213q-.1767.825-.3238,1.7371a10.5763,10.5763,0,0,0-.1473,1.6781q0,4.6521,8.2436,4.6517h16.3694l-2.65,13.2486Z",transform:"translate(-0.4961)",fill:i}),D.element("path",{d:"M181.897,92.21q-11.4822,0-16.7816-3.3563T159.816,78.255a43.0455,43.0455,0,0,1,1.1187-8.3613l11.9532-56.6451H154.87L157.4018,0h35.2118L177.8929,70.8947q-.1765.8248-.3238,1.737a10.5766,10.5766,0,0,0-.1472,1.6782q0,4.6519,8.2435,4.6517h16.3694l-2.65,13.2486Z",transform:"translate(-0.4961)",fill:i}),D.element("path",{d:"M228.3106,107.62a72.47,72.47,0,0,1-23.6119-4.1218l3.003-15.0739q10.5988,6.7717,21.6688,6.7715,6.4176,0,10.0983-2.2965a7.1387,7.1387,0,0,0,3.68-6.3593,4.4873,4.4873,0,0,0-1.8253-3.8273q-2.3556-1.884-9.5979-3.9452l-5.1817-1.4132q-13.8969-3.8271-13.8963-16.9582a18.9819,18.9819,0,0,1,8.0375-16.0455q8.0374-5.976,22.4637-5.9766a60.6829,60.6829,0,0,1,10.1573.8538,63.0434,63.0434,0,0,1,10.5105,2.797L260.8727,56.981a33.7,33.7,0,0,0-19.3724-6.3q-5.9478,0-9.3623,2.09a6.2659,6.2659,0,0,0-3.4152,5.5056,5.102,5.102,0,0,0,2.2375,4.2984q2.4731,1.7082,9.6568,3.7685l4.3573,1.2365q7.4775,2.12,10.9816,6.271t3.5035,10.805q0,10.7172-8.2436,16.84T228.3106,107.62Z",transform:"translate(-0.4961)",fill:r}),D.element("path",{d:"M297.9546,106.2069q-11.3055,0-16.6932-3.3857t-5.3878-10.57a47.7847,47.7847,0,0,1,1.06-8.3613l5.9472-30.6778H265.9813l2.532-13.2486h16.8993l3.5918-18.7247h17.2527L302.6063,39.964h22.5521l-2.532,13.2486h-22.552l-6.1827,31.6788A20.2915,20.2915,0,0,0,293.48,88.13a3.9534,3.9534,0,0,0,1.9431,3.68q1.9433,1.1482,6.2416,1.1482h13.2486l-2.532,13.2486Z",transform:"translate(-0.4961)",fill:r}),D.element("path",{d:"M338.2138,107.62q-9.4224,0-14.6029-5.1228-5.1828-5.1228-5.1816-14.25,0-12.2469,9.3034-18.99t26.2617-6.7421h11.3643l.4711-2.8852a3.6427,3.6427,0,0,1,.1177-.7066v-1.001A5.6271,5.6271,0,0,0,362.974,52.8q-2.9748-1.7666-8.5086-1.7665a41.5275,41.5275,0,0,0-10.8933,1.59,85.9338,85.9338,0,0,0-13.3074,5.0639l2.7675-14.7206a74.3941,74.3941,0,0,1,24.6129-4.5929q12.07,0,18.6363,4.6518,6.5643,4.652,6.5655,13.72a36.323,36.323,0,0,1-.4711,5.5939q-.4716,3.003-1.1188,5.9471l-7.2425,37.626H358.47v-7.36A26.3115,26.3115,0,0,1,338.2138,107.62Zm7.1837-11.8354q6.476,0,11.2466-5.6822t6.3-15.3978h-6.6537q-19.9029,0-19.9023,12.13a8.3352,8.3352,0,0,0,9.009,8.95Z",transform:"translate(-0.4961)",fill:r}),D.element("path",{d:"M415.1828,107.62q-13.72,0-21.1683-7.4192t-7.4486-21.4333a42.63,42.63,0,0,1,5.005-20.8444,36.7663,36.7663,0,0,1,13.9257-14.338,40.3978,40.3978,0,0,1,20.7562-5.2111A39.0215,39.0215,0,0,1,445.8607,43.32l-3.1208,15.78a22.7112,22.7112,0,0,0-16.075-6.7126,21.2393,21.2393,0,0,0-11.8059,3.2974A22.52,22.52,0,0,0,406.88,64.783a29.416,29.416,0,0,0-2.8853,13.278q0,8.0083,3.4741,11.7765T417.95,93.606q8.8324,0,19.3724-6.1238l-3.2974,16.2516A45.998,45.998,0,0,1,415.1828,107.62Z",transform:"translate(-0.4961)",fill:r}),D.element("path",{d:"M458.1224,14.2911H475.375l-8.95,46.0463L490.2134,39.964H512L482.2643,64.5769l18.43,41.3356H482.382L469.31,75.058l-6.83,5.6527-4.8284,25.2018H440.3987Z",transform:"translate(-0.4961)",fill:r}))}function Hamburger({size:e}){return D.element("svg",{width:e,height:e,viewBox:"0 0 482 482"},D.element("path",{d:"M92.5 150H386.5",stroke:"currentColor","stroke-width":"42","stroke-linecap":"round","stroke-linejoin":"round"}),D.element("path",{d:"M92.5 241H386.5",stroke:"currentColor","stroke-width":"42","stroke-linecap":"round","stroke-linejoin":"round"}),D.element("path",{d:"M92.5 332H386.5",stroke:"currentColor","stroke-width":"42","stroke-linecap":"round","stroke-linejoin":"round"}))}function Close_Close({size:e}){return D.element("svg",{width:e,height:e,viewBox:"0 0 482 482"},D.element("path",{d:"M124 124L358 358",stroke:"currentColor","stroke-width":"70.2055","stroke-linecap":"round","stroke-linejoin":"round"}),D.element("path",{d:"M358 124L124 358",stroke:"currentColor","stroke-width":"70.2055","stroke-linecap":"round","stroke-linejoin":"round"}))}function DayMode({size:e}){return D.element("svg",{width:e,height:e,viewBox:"0 0 482 482"},D.element("circle",{cx:"234",cy:"234",r:"104",fill:"#1f2937",opacity:"0.2"}),D.element("path",{d:"M237.5 45.5V97.5",stroke:"#DB2777","stroke-width":"16","stroke-linecap":"round","stroke-linejoin":"round"}),D.element("path",{d:"M237.5 379V431",stroke:"#DB2777","stroke-width":"16","stroke-linecap":"round","stroke-linejoin":"round"}),D.element("path",{d:"M430.25 238.25L378.25 238.25",stroke:"#DB2777","stroke-width":"16","stroke-linecap":"round","stroke-linejoin":"round"}),D.element("path",{d:"M96.75 238.25L44.75 238.25",stroke:"#DB2777","stroke-width":"16","stroke-linecap":"round","stroke-linejoin":"round"}),D.element("path",{d:"M373.795 374.545L337.025 337.775",stroke:"#DB2777","stroke-width":"16","stroke-linecap":"round","stroke-linejoin":"round"}),D.element("path",{d:"M137.975 138.725L101.205 101.955",stroke:"#DB2777","stroke-width":"16","stroke-linecap":"round","stroke-linejoin":"round"}),D.element("path",{d:"M101.205 374.545L137.975 337.775",stroke:"#DB2777","stroke-width":"16","stroke-linecap":"round","stroke-linejoin":"round"}),D.element("path",{d:"M337.025 138.725L373.795 101.955",stroke:"#DB2777","stroke-width":"16","stroke-linecap":"round","stroke-linejoin":"round"}))}function Brasil({size:e}){return D.element("svg",{width:e,height:e,viewBox:"0 0 683 482"},D.element("path",{d:"M581.479 466.955C581.479 466.955 401.504 472 341.512 472C281.52 472 101.545 466.955 101.545 466.955C55.0735 466.955 17.0252 428.782 17.0252 382.105C17.0252 382.105 12 275.946 12 240.488C12 205.03 17.0252 98.871 17.0252 98.871C17.0013 52.2178 55.0256 14.0449 101.521 14.0449C101.521 14.0449 281.496 9 341.488 9C401.48 9 581.455 14.0449 581.455 14.0449C627.927 14.0449 665.975 52.2178 665.975 98.895C665.975 98.895 671 204.958 671 240.512C671 276.066 665.975 382.129 665.975 382.129C665.975 428.782 627.951 466.955 581.479 466.955Z",fill:"#1f2937",opacity:"0.2"}),D.element("path",{d:"M48 240.98L340.366 28L630 240.98L340.366 453L48 240.98Z",fill:"currentColor"}),D.element("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M279.817 137.236C238.724 158.889 210.709 202.023 210.709 251.7C210.709 323.111 268.598 381 340.008 381C411.418 381 469.308 323.111 469.308 251.7C469.308 202.927 442.302 160.461 402.429 138.439V158.855C432.255 178.947 451.874 213.033 451.874 251.7C451.874 313.482 401.79 363.566 340.008 363.566C278.226 363.566 228.142 313.482 228.142 251.7C228.142 212.077 248.742 177.266 279.817 157.391V137.236Z",fill:"white"}),D.element("rect",{x:"326.632",y:"115.713",width:"28.9809",height:"89.1721",fill:"white"}))}function Gringo({size:e}){return D.element("svg",{width:e,height:e,viewBox:"0 0 683 482"},D.element("path",{d:"M0 46.3333C0 20.7441 20.7441 0 46.3333 0H636.667C662.256 0 683 20.7441 683 46.3333V241V435.667C683 461.256 662.256 482 636.667 482H46.3334C20.7442 482 0 461.256 0 435.667V46.3333Z",fill:"#1f2937",opacity:"0.2"}),D.element("path",{d:"M48 240.98L340.366 28L630 240.98L340.366 453L48 240.98Z",fill:"currentColor"}),D.element("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M342 371C413.797 371 472 312.797 472 241C472 169.203 413.797 111 342 111C270.203 111 212 169.203 212 241C212 312.797 270.203 371 342 371ZM342 345C399.438 345 446 298.438 446 241C446 183.562 399.438 137 342 137C284.562 137 238 183.562 238 241C238 298.438 284.562 345 342 345Z",fill:"white"}))}function Header_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}class Header_Header extends B{constructor(...e){super(...e),Header_defineProperty(this,"expanded",!1)}renderLink({title:e,href:t,target:n,mobile:r,onclick:i}){return D.element("element",{tag:i?"button":"a",href:t,target:n,source:this,onclick:i||{expanded:!1},class:"w-full sm:w-auto border-b sm:border-0 border-gray-100 dark:border-gray-800 p-2 font-lg hover:text-pink-600 items-center flex font-light "+(r?"sm:hidden":"")},e)}toggleMode(e){const t=e.mode;e.mode=e.oppositeMode,e.oppositeMode=t,window.localStorage.setItem("mode",e.mode)}render({mode:e,oppositeMode:t,locale:n}){const r=this.renderLink;return!!this.i18n&&D.element("header",{class:"fixed w-full bg-white dark:bg-gray-900 shadow top-0 left-0 z-20"},D.element("div",{class:"max-w-screen-xl mx-auto px-4 flex justify-between items-center flex-wrap py-4"},D.element("div",{class:"w-full sm:w-auto justify-between sm:justify-self-start sm:px-0 items-center flex"},D.element("a",this.i18n.home,D.element(Logo,{height:"30",light:"dark"===e})),D.element("span",{source:this,onclick:{expanded:!this.expanded},class:"flex items-center sm:hidden"},this.expanded&&D.element(Close_Close,{size:20,class:"text-gray-900 dark:text-white"}),!this.expanded&&D.element(Hamburger,{size:20,class:"text-gray-900 dark:text-white"}))),D.element("nav",{class:"flex items-center flex-wrap sm:px-0 mt-2 sm:mt-0 "+(!this.expanded&&"hidden sm:flex")},this.i18n.links.map(e=>D.element(r,e)),D.element(r,{href:this.i18n.language.href,title:this.i18n.language.title,mobile:!0}),D.element(r,{source:this,onclick:this.toggleMode,title:this.i18n.mode[t],mobile:!0})),D.element("div",{class:"flex w-full sm:w-auto mt-4 sm:mt-0 sm:space-x-2 items-center "+(!this.expanded&&"hidden sm:flex")},D.element("a",{href:this.i18n.language.href,title:this.i18n.language.title,class:"hidden sm:flex text-pink-600"},"pt-BR"===n&&D.element(Gringo,{size:30}),"pt-BR"!==n&&D.element(Brasil,{size:30})),D.element("button",{source:this,onclick:this.toggleMode,title:this.i18n.mode[t],class:"hidden sm:flex text-pink-600 dark:text-white"},D.element(DayMode,{size:25})),D.element("a",{href:this.i18n.action.href,source:this,onclick:{expanded:!1},class:"bg-pink-600 text-white px-4 py-2 border border-pink-600 hover:bg-transparent hover:text-pink-600 w-full sm:w-auto min-w-32 text-center"},this.i18n.action.title))))}}Header_defineProperty(Header_Header,"hash","f5fb24cd2e1c063a68727c9d800077da");var F=Header_Header;function GitHub({size:e}){return D.element("svg",{width:e,height:e,viewBox:"0 0 482 482"},D.element("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M241.5 80C150.104 80 76 153.919 76 245.087C76 318.021 123.411 379.912 189.183 401.727C197.46 403.257 200.502 398.145 200.502 393.772C200.502 389.835 200.337 376.823 200.283 363.045C154.214 373.023 144.513 343.581 144.513 343.581C136.977 324.5 126.152 319.416 126.152 319.416C111.133 309.164 127.275 309.383 127.275 309.383C143.883 310.558 152.652 326.386 152.652 326.386C167.424 351.618 191.376 344.319 200.803 340.109C202.283 329.448 206.586 322.149 211.299 318.021C174.549 313.839 135.908 299.678 135.908 236.448C135.908 218.433 142.375 203.699 152.954 192.135C151.227 187.98 145.582 171.196 154.543 148.451C154.543 148.451 168.438 144.023 200.063 165.373C213.273 161.71 227.414 159.878 241.5 159.823C255.559 159.878 269.727 161.71 282.964 165.373C314.562 144.023 328.429 148.451 328.429 148.451C337.446 171.196 331.773 187.98 330.046 192.135C340.652 203.699 347.065 218.433 347.065 236.448C347.065 299.842 308.341 313.812 271.509 317.912C277.456 323.024 282.745 333.084 282.745 348.475C282.745 370.563 282.553 388.332 282.553 393.772C282.553 398.173 285.54 403.312 293.926 401.699C359.644 379.857 407 317.994 407 245.087C407 153.919 332.896 80 241.5 80Z",fill:"currentColor"}),D.element("path",{d:"M138.676 317.01C138.319 317.83 137.004 318.076 135.826 317.502C134.62 316.955 133.962 315.834 134.346 315.014C134.702 314.167 135.99 313.948 137.196 314.495C138.402 315.069 139.087 316.19 138.676 317.01Z",fill:"currentColor"}),D.element("path",{d:"M145.39 324.473C144.595 325.211 143.061 324.856 142.019 323.708C140.923 322.559 140.731 321.029 141.526 320.29C142.348 319.552 143.828 319.908 144.924 321.056C145.993 322.204 146.212 323.735 145.39 324.473Z",fill:"currentColor"}),D.element("path",{d:"M151.912 333.986C150.898 334.697 149.227 334.04 148.213 332.564C147.199 331.088 147.199 329.339 148.24 328.628C149.254 327.917 150.898 328.546 151.94 330.022C152.954 331.498 152.954 333.275 151.912 333.986Z",fill:"currentColor"}),D.element("path",{d:"M160.846 343.171C159.942 344.183 157.996 343.909 156.599 342.542C155.146 341.203 154.762 339.317 155.667 338.333C156.599 337.321 158.517 337.622 159.942 338.961C161.367 340.274 161.806 342.187 160.846 343.171Z",fill:"currentColor"}),D.element("path",{d:"M173.179 348.502C172.768 349.787 170.904 350.388 169.041 349.841C167.177 349.267 165.944 347.764 166.328 346.452C166.711 345.139 168.575 344.538 170.466 345.112C172.357 345.686 173.563 347.19 173.179 348.502Z",fill:"currentColor"}),D.element("path",{d:"M186.717 349.486C186.772 350.853 185.182 351.973 183.209 352.001C181.236 352.055 179.619 350.935 179.619 349.595C179.619 348.228 181.181 347.107 183.154 347.08C185.1 347.053 186.717 348.146 186.717 349.486Z",fill:"currentColor"}),D.element("path",{d:"M199.323 347.354C199.57 348.693 198.2 350.033 196.227 350.416C194.308 350.771 192.527 349.951 192.28 348.639C192.034 347.272 193.431 345.905 195.35 345.55C197.323 345.194 199.077 346.014 199.323 347.354Z",fill:"currentColor"}))}function YouTube({size:e}){return D.element("svg",{width:e,height:e,viewBox:"0 0 482 482"},D.element("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M242.949 353.27C272.252 353.27 360.16 350.815 360.16 350.815C382.859 350.815 401.432 332.243 401.432 309.544C401.432 309.544 403.886 257.94 403.886 240.641C403.886 223.342 401.432 171.738 401.432 171.738C401.432 149.027 382.847 130.455 360.148 130.455C360.148 130.455 272.24 128 242.937 128C213.634 128 125.726 130.455 125.726 130.455C103.016 130.455 84.4429 149.027 84.4546 171.726C84.4546 171.726 82 223.377 82 240.629C82 257.881 84.4546 309.532 84.4546 309.532C84.4546 332.243 103.039 350.815 125.738 350.815C125.738 350.815 213.646 353.27 242.949 353.27ZM212.116 190.299V290.971L293.443 240.629L212.116 190.299Z",fill:"currentColor"}))}function Twitter({size:e}){return D.element("svg",{width:e,height:e,viewBox:"0 0 482 482"},D.element("path",{d:"M359.651 159.865C353.651 161.521 348.897 161.259 348.897 161.259L349.1 160.126C354.694 155.653 368.811 141.885 370.666 135.436C371.478 132.648 370.521 131.689 370.521 131.602L352.491 139.27L337.418 146.096C327.012 135.029 311.243 128 293.619 128C262.284 128 236.862 150.25 236.862 177.7C236.862 182.725 237.616 191.875 239.181 196.464C239.181 197.917 239.239 195.012 239.181 196.464C219.006 195.912 193.121 187.605 170.076 175.899C124.624 152.835 121.784 136.859 121.784 136.859C114.653 144.47 110.971 169.625 118.189 189.319C122.827 201.954 138.741 213.283 138.741 213.283C138.741 213.283 131.61 213.428 124.161 210.901C116.711 208.374 113.87 205.876 113.87 205.876C109.435 216.71 118.334 236.085 133.726 249.94C142.683 258.045 159.061 263.128 159.061 263.128L133.494 263.854C132.045 288.777 185.642 303.562 185.642 303.562C169.931 315.674 151.727 323.023 132.19 323.023C122.073 323.023 112.276 321.513 103 318.724C128.798 340.045 161.96 354.743 198.019 352.855C293.677 347.83 347.679 265.423 350.259 184.497L350.375 184.671C350.375 184.671 354.868 182.435 364.434 172.82C374 163.205 379.971 151.993 379.971 151.993C379.971 151.993 365.651 158.209 359.651 159.865Z",fill:"currentColor"}))}function Discord({size:e}){return D.element("svg",{width:e,height:e,viewBox:"0 0 482 482"},D.element("path",{d:"M350.027 75H127.973C109.248 75 94 90.228 94 109.088V332.847C94 351.718 109.248 366.934 127.973 366.934H315.895L307.116 336.32L328.322 356.017L348.373 374.548L384 406V109.088C384 90.228 368.752 75 350.027 75ZM286.068 291.145C286.068 291.145 280.098 284.029 275.137 277.738C296.841 271.618 305.134 258.042 305.134 258.042C298.337 262.51 291.88 265.656 286.08 267.805C277.799 271.278 269.835 273.598 262.053 274.921C246.148 277.897 231.557 277.071 219.13 274.752C209.683 272.93 201.561 270.283 194.775 267.636C190.969 266.142 186.823 264.321 182.677 262.013C182.178 261.685 181.68 261.515 181.181 261.187C180.853 261.017 180.683 260.859 180.513 260.689C177.534 259.037 175.868 257.872 175.868 257.872C175.868 257.872 183.821 271.109 204.868 277.399C199.895 283.689 193.767 291.134 193.767 291.134C157.143 289.98 143.221 265.972 143.221 265.972C143.221 212.686 167.089 169.491 167.089 169.491C190.957 151.615 213.659 152.113 213.659 152.113L215.313 154.104C185.486 162.714 171.734 175.781 171.734 175.781C171.734 175.781 175.381 173.79 181.51 170.984C199.238 163.2 213.33 161.051 219.13 160.553C220.127 160.383 220.954 160.225 221.951 160.225C232.056 158.901 243.497 158.573 255.426 159.897C271.172 161.718 288.073 166.357 305.304 175.781C305.304 175.781 292.208 163.37 264.035 154.76L266.357 152.113C266.357 152.113 289.059 151.615 312.927 169.491C312.927 169.491 336.796 212.686 336.796 265.972C336.773 265.984 322.681 289.991 286.068 291.145ZM209.003 213.851C199.555 213.851 192.102 222.121 192.102 232.224C192.102 242.316 199.725 250.597 209.003 250.597C218.451 250.597 225.905 242.327 225.905 232.224C226.075 222.132 218.451 213.851 209.003 213.851ZM269.495 213.851C260.048 213.851 252.594 222.121 252.594 232.224C252.594 242.316 260.218 250.597 269.495 250.597C278.943 250.597 286.397 242.327 286.397 232.224C286.397 222.132 278.932 213.851 269.495 213.851Z",fill:"currentColor"}))}class Footer_Footer extends B{renderLink({href:e,icon:t,title:n}){return D.element("a",{href:e,title:n,target:"_blank",rel:"noopener",class:"text-pink-600 hover:text-white inline-block"},D.element(t,{size:45}))}render(){const e=this.renderLink;return D.element("footer",{class:"flex flex-wrap w-full justify-center relative"},D.element("div",{class:"w-full relative flex justify-center h-80 bg-70 hover:bg-100 bg-bottom bg-no-repeat",style:"background-image: url(/stars.webp); transition: background-size 3s;"},D.element("img",{src:"/footer.webp",alt:"Nulla-Chan",class:"absolute bottom-0"})),D.element("div",{class:"bg-gray-800 w-full py-4 flex-wrap"},D.element("nav",{class:"w-full flex items-center justify-center space-x-1"},D.element(e,{href:"https://twitter.com/nullstackapp",title:"Twitter",icon:Twitter}),D.element(e,{href:"https://github.com/nullstack/nullstack",title:"Github",icon:GitHub}),D.element(e,{href:"https://discord.gg/eDZfKz264v",title:"Discord",icon:Discord}),D.element(e,{href:"https://www.youtube.com/nullstack",title:"Youtube",icon:YouTube})),D.element("nav",{class:"w-full flex flex-wrap items-center justify-center space-x-1"},D.element("p",{class:"text-center mt-3 w-full text-gray-400 px-6"},this.i18n.star.story),D.element("a",{href:"https://github.com/nullstack/nullstack/stargazers",class:"text-white flex flex-wrap text-xl text-center",target:"_blank",rel:"noopener"},D.element("span",{class:"block w-full"},this.i18n.star.action)))))}}!function Footer_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}(Footer_Footer,"hash","bd736cc02a490d831849ba4f1f870ba1");var V=Footer_Footer;function Snippet_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}class Snippet_Snippet extends D{constructor(...e){super(...e),Snippet_defineProperty(this,"html",""),Snippet_defineProperty(this,"getSnippetByKey",D.invoke("getSnippetByKey","86f3540e7f07dba49bd268d81f29b781"))}async initiate({key:e,locale:t}){this.html=await this.getSnippetByKey({key:e,locale:t})}render(){return D.element("pre",{class:"p-4 w-full rounded-md shadow-2xl bg-gray-800"},D.element("code",{html:this.html}))}}Snippet_defineProperty(Snippet_Snippet,"hash","86f3540e7f07dba49bd268d81f29b781");var E=Snippet_Snippet;class Home_Home extends B{async getStarted({router:e,href:t}){if("clipboard"in navigator){const e="npx create-nullstack-app";await navigator.clipboard.writeText(e)}clearTimeout(this.gettingStarted),this.gettingStarted=setTimeout(()=>{e.url=t},3e3)}renderHero({page:e}){return D.element("section",{class:"max-w-screen-xl mx-auto px-4 flex justify-between items-center flex-wrap sm:pt-12"},D.element("div",{class:"sm:w-5/12 grid gap-8 mt-12 sm:mt-0"},D.element("h1",{class:"w-full"},D.element("span",{class:`text-pink-600 ${"pt-BR"===e.locale?"text-2xl sm:text-4xl":"text-4xl sm:text-6xl"} font-light block sm:mb-3 text-center sm:text-left`},this.i18n.hero.heading),D.element("span",{class:`text-pink-600 ${"pt-BR"!==e.locale?"text-3xl sm:text-5xl":"text-4xl sm:text-6xl"} font-light block sm:mb-3 text-center sm:text-left`},this.i18n.hero.subHeading),D.element("span",{class:"text-2xl sm:text-4xl font-light block text-center sm:text-left"},this.i18n.hero.tagline)),D.element(D.fragment,null,this.i18n.hero.descriptions.map(e=>D.element("p",{class:"text-xl sm:text-2xl text-center sm:text-left"},e))),D.element("div",null,D.element("button",{class:"bg-pink-600 text-white px-6 py-4 border border-pink-600 hover:bg-transparent hover:text-pink-600 inline-block w-full sm:w-auto",source:this,onclick:this.getStarted,href:this.i18n.hero.actionLink},this.gettingStarted?this.i18n.hero.actionCallback:this.i18n.hero.callToAction))),D.element("div",{class:"bg-center bg-0 hover:bg-100 bg-repeat-y mt-6",style:"background-image: url(/stars.webp); transition: background-size 3s;"},D.element("img",{src:"/illustrations/nulla-hero.webp",alt:"Nulla-Chan",class:"max-w-full",width:"627",height:"765",loading:"lazy"})))}renderRole({image:e,title:t,text:n}){return D.element("div",{class:"sm:w-1/3 px-8 flex flex-wrap justify-center text-center mb-8 sm:mb-0"},D.element("div",{class:"bg-center bg-0 hover:bg-100",style:"background-image: url(/stars.webp); transition: background-size 3s;"},D.element("img",{src:e,alt:t,width:"192",height:"192",class:"transform hover:scale-105 transition delay-100",loading:"lazy"})),D.element("h2",{class:"w-full text-center text-pink-600 dark:text-pink-500 text-xl sm:text-2xl font-light mb-4 sm:px-20"},t),D.element("p",{class:"w-full text-center text-xl font-gray-600"},n))}renderTrinity(){const e=this.renderRole;return D.element("section",{class:"max-w-screen-xl mx-auto px-4 flex justify-between items-center flex-wrap py-12 sm:py-36"},D.element("h2",{class:"w-full text-center mb-8 sm:mb-24"},D.element("span",{class:"w-full text-pink-600 text-4xl sm:text-6xl font-light block sm:mb-3"},this.i18n.trinity.heading),D.element("span",{class:"sm:text-xl block"},this.i18n.trinity.subHeading)),this.i18n.trinity.roles.map(t=>D.element(e,t)))}renderFeature({snippet:e,image:t,title:n,text:r,inverted:i,locale:l}){return D.element("section",{class:"max-w-screen-xl mx-auto px-4 flex justify-between items-center flex-wrap py-12 sm:py-36"},D.element("div",{class:"w-full sm:w-5/12 "+(i?"sm:order-2":"")},D.element(E,{key:e,locale:l})),D.element("div",{class:"mt-12 sm:mt-0 sm:w-5/12"},D.element("h3",{class:"text-pink-600 dark:text-pink-500 text-xl sm:text-4xl font-light mb-4"},n),D.element("p",{class:"text-xl font-gray-600"},r),D.element("img",{src:t,alt:n,class:"mt-6",width:"520",height:"272",loading:"lazy"})))}renderVideo({link:e,title:t,thumbnail:n}){return D.element("div",{class:"w-full sm:w-auto p-1 flex justify-center"},D.element("a",{href:e,title:t,target:"_blank",rel:"noopener"},D.element("img",{src:n,alt:t,height:"209",width:"372",loading:"lazy"})))}renderPlaylist(){const e=this.renderVideo;return D.element("div",null,D.element("section",{class:"max-w-screen-xl mx-auto px-4 flex justify-center items-center flex-wrap py-12 sm:pt-36"},D.element("h2",{class:"text-xl sm:text-4xl font-light mb-4"},this.i18n.playlist.heading,D.element("del",null,this.i18n.playlist.slang),D.element("span",{class:"text-pink-600 dark:text-pink-500"},this.i18n.playlist.realWord)),D.element("div",{class:"sm:flex items-center justify-center w-full mt-12 flex-wrap"},this.i18n.playlist.videos.map(t=>D.element(e,t)))))}renderSeparator(){return D.element("div",{class:"h-5 bg-center bg-no-repeat w-full max-w-screen-xl mx-auto flex justify-center items-start flex-wrap border-t-4 border-gray-200 text-center dark:opacity-10 text-gray-300"},D.element(Close,{size:30}))}render(){const e=this.renderPlaylist,t=this.renderFeature,n=this.renderTrinity,r=this.renderSeparator,i=this.renderHero;return!!this.i18n&&D.element("div",null,D.element(i,null),D.element(r,null),D.element(n,null),D.element(r,null),this.i18n.features.map(e=>D.element(D.fragment,null,D.element(t,e),D.element(r,null))),D.element(e,null))}}!function Home_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}(Home_Home,"hash","2ae9e9d0324e3cf6b619783fea86061c");var $=Home_Home;function Waifu_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}class Waifu_Waifu extends B{constructor(...e){super(...e),Waifu_defineProperty(this,"fanarts",[]),Waifu_defineProperty(this,"getFanarts",D.invoke("getFanarts","80a2696547bef91f652f412a25c3a464"))}async initiate(e){super.initiate(e),this.fanarts=await this.getFanarts()}hydrate(){this.fanarts.sort(()=>Math.random()>.5?1:-1)}renderAttribute({label:e,value:t}){return D.element("li",null,D.element("b",null,e),": ",t)}renderProfile(){const e=this.renderAttribute;return D.element("section",{class:"max-w-screen-xl mx-auto px-4 flex justify-between items-center flex-wrap py-12 sm:py-24"},D.element("div",{class:"w-full mb-8"},D.element("h2",{class:"w-full text-pink-600 text-4xl sm:text-6xl font-light block sm:mb-3"},this.i18n.title),D.element("span",{class:"text-2xl sm:text-4xl font-light block mb-3"},this.i18n.description),D.element("blockquote",null,this.i18n.descriptions.map(e=>D.element("p",{class:"text-xl"}," ",e," ")))),D.element("div",{class:"flex flex-wrap justify-between w-full"},D.element("div",{class:"flex w-full sm:w-6/12 bg-yellow-300 dark:bg-gray-800 justify-center py-8"},D.element("img",{src:"/illustrations/nulla-fullbody.png",alt:"Nulla-Chan",class:"max-w-full",width:"319",height:"587",loading:"lazy"})),D.element("div",{class:"flex w-full sm:w-6/12 sm:bg-yellow-200 sm:dark:bg-gray-700 justify-center py-8 items-center"},D.element("ul",{class:"sm:w-6/12 grid gap-4 sm:mt-0"},this.i18n.attributes.map(t=>D.element(e,t)),D.element("li",null,D.element("b",null," ",this.i18n.artist.label," "),D.element("a",{href:this.i18n.artist.href,target:"_blank",rel:"noopener",class:"underline"},this.i18n.artist.text)),D.element("li",null,D.element("b",null," ",this.i18n.concept.label," "),D.element("a",{href:this.i18n.concept.href,target:"_blank",rel:"noopener",class:"underline"},this.i18n.concept.text))))))}renderFanart({image:e}){const t=e.slice(0,-5).replace(/\[dot\]/g,".").replace(/\[u\]/g,"."),n="/fanarts/"+e;return D.element("div",{class:"flex flex-col p-3 shadow items-center space-y-1"},D.element("img",{src:n,alt:t,title:"Nulla-chan by "+t}),D.element("a",{href:"https://www.instagram.com/"+t,target:"_blank",rel:"noopener",class:"hover:text-pink-600 block pt-1"},"@",t))}renderFanarts({self:e}){const t=this.renderFanart;return!!e.hydrated&&D.element("section",{class:"max-w-screen-xl mx-auto px-4 flex justify-between items-center flex-wrap pb-12 sm:pb-24"},D.element("h2",{class:"w-full text-pink-600 text-4xl sm:text-6xl font-light block sm:mb-3"},this.i18n.fanarts.heading),D.element("span",{class:"text-2xl sm:text-4xl font-light block mb-8"},this.i18n.fanarts.tagline),D.element("div",{class:"grid grid-cols-2 sm:grid-cols-5 gap-8 w-full"},this.fanarts.map(e=>D.element(t,{image:e}))))}render({}){const e=this.renderFanarts,t=this.renderProfile;return!!this.i18n&&D.element("div",null,D.element(t,null),D.element(e,null))}}Waifu_defineProperty(Waifu_Waifu,"hash","80a2696547bef91f652f412a25c3a464");var R=Waifu_Waifu;function _extends(){return(_extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function Contributors_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}class Contributors_Contributors extends B{constructor(...e){super(...e),Contributors_defineProperty(this,"documentation",[]),Contributors_defineProperty(this,"packages",[])}async fetchContributors({repository:e}){const t=await fetch(`https://api.github.com/repos/nullstack/${e}/contributors`);return await t.json()}async hydrate(){this.documentation=await this.fetchContributors({repository:"nullstack.github.io"});const e=[...await this.fetchContributors({repository:"nullstack"}),...await this.fetchContributors({repository:"create-nullstack-app"}),...await this.fetchContributors({repository:"create-nullstatic-app"})],t=new Set(e.map(({login:e})=>e));this.packages=[...t].map(t=>e.find(e=>e.login==t))}renderTopic({title:e,paragraphs:t,main:n,children:r}){return D.element("div",{class:"w-full mb-12"},D.element("element",{tag:n?"h1":"h2",class:"text-xl sm:text-4xl font-light mb-4"},e),t&&D.element("div",{class:"text-xl"},t.map(e=>D.element("p",{class:"w-full mb-1",html:e}))),D.element("div",{class:"xl x12"},r))}renderState(){const e=this.renderTopic,{state:t}=this.i18n;return D.element(e,_extends({},t,{main:!0}))}renderRoadmap(){const e=this.renderTopic,{roadmap:t}=this.i18n;return D.element(e,t)}renderCoreContributor({github:e,name:t,role:n,description:r,contribution:i}){return D.element("div",{class:"border border-gray-100 dark:border-gray-800 p-2 mt-2 flex flex-wrap"},D.element("img",{src:`https://github.com/${e}.png`,alt:t,width:"90",height:"90",class:"w-24 h-24 mb-2 sm:mb-0"}),D.element("div",{class:"w-full sm:w-10/12 sm:pl-3"},D.element("h3",null,D.element("a",{href:"https://github.com/"+e,target:"_blank",rel:"noopener",class:"text-pink-600"},t)),D.element("h4",{html:n}),D.element("p",null," ",r," "),D.element("p",null," ",i," ")))}renderCoreTeam(){const e=this.renderCoreContributor,t=this.renderTopic,{core:n}=this.i18n;return D.element(t,n,n.team.map(t=>D.element(e,t)))}renderInstructions(){const e=this.renderTopic,{instructions:t}=this.i18n;return D.element(e,t)}renderContributor({login:e,avatar_url:t,html_url:n}){return D.element("a",{href:n,title:e,target:"_blank",rel:"noopener",class:"ci1"},D.element("img",{src:t,alt:e,width:"90",height:"90",class:"h-24 w-24"}))}renderGithubContributors({title:e,key:t}){const n=this.renderContributor,r=this.renderTopic;return D.element(r,{title:e},D.element("div",{class:"flex justify-start flex-wrap"},this[t].map(e=>D.element(n,e))),D.element("p",{class:"w-full mt-2"},this.i18n.githubCacheWarning))}render(){const e=this.renderInstructions,t=this.renderGithubContributors,n=this.renderCoreTeam,r=this.renderRoadmap,i=this.renderState;return!!this.i18n&&D.element("section",{class:"max-w-screen-xl mx-auto px-4 flex justify-between items-center flex-wrap py-12 sm:py-24"},D.element(i,null),D.element(r,null),D.element(n,null),D.element(t,{title:this.i18n.packages.title,key:"packages"}),D.element(t,{title:this.i18n.documentation.title,key:"documentation"}),D.element(e,null))}}Contributors_defineProperty(Contributors_Contributors,"hash","63bf3ec44cc9e5682171f0dad238d317");var Q=Contributors_Contributors;class stroke_Icon extends D{render({width:e,height:t,length:n,title:r,rotation:i,animation:l,speed:a,class:s,color:o="currentColor"}){const c=!!i&&`rotate(${i})`,u={slow:"1.5s",fast:"0.5s"}[a]||"1.0s";return D.element("svg",{width:e,height:t,transform:c,class:s,viewBox:"0 0 512 512"},r&&D.element("title",null,r),"spin"===l&&D.element("animateTransform",{attributeType:"xml",attributeName:"transform",type:"rotate",from:"360 0 0",to:"0 0 0",dur:u,additive:"sum",repeatCount:"indefinite"}),D.element("path",{d:"M501.9984,279.0708a16.0691,16.0691,0,0,1-13.4278,15.8986l-35.9968,5.9988A17.6011,17.6011,0,0,0,438.58,313.2018a190.8568,190.8568,0,0,1-13.0446,31.4643A17.5918,17.5918,0,0,0,426.82,363.09l21.2127,29.7891a16.0776,16.0776,0,0,1-1.7514,20.7457l-32.6594,32.6583a16.0432,16.0432,0,0,1-20.72,1.77l-29.6617-21.2007a17.59,17.59,0,0,0-18.5045-1.2931,192.38,192.38,0,0,1-31.5078,13.0457,17.6007,17.6007,0,0,0-12.1433,13.9121l-6.1141,36.0359a16.07,16.07,0,0,1-15.903,13.4484H232.82a16.0653,16.0653,0,0,1-15.8975-13.4277l-6-35.9967a17.6049,17.6049,0,0,0-12.1182-13.9633,191.0666,191.0666,0,0,1-30.5031-12.54,17.62,17.62,0,0,0-18.399,1.2888L119.709,448.852a15.4291,15.4291,0,0,1-9.2011,2.9509A15.7635,15.7635,0,0,1,99.1461,447.05l-32.7182-32.715a15.9459,15.9459,0,0,1-1.7394-20.626l21.0854-29.3308a17.5751,17.5751,0,0,0,1.255-18.6569,186.7013,186.7013,0,0,1-13.2112-31.3456A17.637,17.637,0,0,0,59.935,302.2907l-36.49-6.2208A16.0752,16.0752,0,0,1,10,280.168V234.0254a16.0757,16.0757,0,0,1,13.4571-15.902l35.5549-6a17.5854,17.5854,0,0,0,13.9763-12.2794,188.24,188.24,0,0,1,12.828-31.5448,17.6135,17.6135,0,0,0-1.2877-18.3989L63.09,119.78A16.0645,16.0645,0,0,1,64.82,99.0512l32.77-32.6584.1187-.124a15.6331,15.6331,0,0,1,11.2594-4.6469,15.8133,15.8133,0,0,1,9.3122,2.951l29.457,21.2039a17.5634,17.5634,0,0,0,18.6536,1.2507,186.6559,186.6559,0,0,1,31.3326-13.2068,17.6346,17.6346,0,0,0,12.0921-13.887l6.2252-36.49A16.0692,16.0692,0,0,1,231.9433,9.9987h46.1426a16.0748,16.0748,0,0,1,15.902,13.4571l6,35.5678a17.5926,17.5926,0,0,0,12.2968,13.9721,189.9907,189.9907,0,0,1,32.6888,13.4528,17.612,17.612,0,0,0,18.45-1.2714L393.28,63.9132a15.41,15.41,0,0,1,9.2011-2.9509,15.7748,15.7748,0,0,1,11.3618,4.7546l32.7138,32.7138a15.95,15.95,0,0,1,1.7144,20.6608L427.05,148.7826a17.6069,17.6069,0,0,0-1.2714,18.48,192.2247,192.2247,0,0,1,13.049,31.511,17.6,17.6,0,0,0,13.9121,12.139l36.0055,6.11.03.0043A15.6605,15.6605,0,0,1,501.9984,232.7Z",transform:"translate(0 0.0013)",fill:"none",stroke:o,"stroke-miterlimit":"10","stroke-width":n||20}),D.element("circle",{cx:"256",cy:"256.0013",r:"101",fill:"none",stroke:o,"stroke-miterlimit":"10","stroke-width":n||20}))}}!function stroke_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}(stroke_Icon,"hash","fc9e1bed5737d04f2ad977b1c4cdb408");var G=stroke_Icon;class Loader_Loader extends D{render({worker:e}){return!!e.fetching&&D.element("div",{class:"w-full z-50 fixed top-0 left-0 h-screen flex items-center justify-center bg-white dark:bg-gray-900"},D.element(G,{animation:"spin",speed:"slow",height:40,class:"text-gray-800 dark:text-white"}))}}!function Loader_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}(Loader_Loader,"hash","55395ecdc930e6a3ee5e046bf02e575f");var U=Loader_Loader;class GoogleAnalytics_GoogleAnalytics extends D{hydrate({router:e,page:t,id:n}){function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config",n,{page_title:t.title,page_path:e.url}),window.addEventListener(t.event,()=>{gtag("event","page_view",{page_title:t.title,page_path:e.url})})}render({id:e,self:t}){const n="https://www.googletagmanager.com";return t.hydrated?D.element("script",{async:!0,src:`${n}/gtag/js?id=${e}`}):D.element("head",null,D.element("link",{rel:"preconnect",href:n}))}}!function GoogleAnalytics_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}(GoogleAnalytics_GoogleAnalytics,"hash","f6eb2002bffbe4d1d528bc45653ff256");var I=GoogleAnalytics_GoogleAnalytics;class Application_Application extends D{renderPreloader(){return D.element("head",null,D.element("link",{rel:"preload",href:"/roboto-v20-latin-300.woff2",as:"font",type:"font/woff2",crossorigin:!0}),D.element("link",{rel:"preload",href:"/roboto-v20-latin-500.woff2",as:"font",type:"font/woff2",crossorigin:!0}),D.element("link",{rel:"preload",href:"/crete-round-v9-latin-regular.woff2",as:"font",type:"font/woff2",crossorigin:!0}))}prepare(e){e.mode="light",e.oppositeMode="dark"}hydrate(e){localStorage.mode&&(e.mode=localStorage.mode,"dark"===e.mode&&(e.oppositeMode="light"))}render({router:e,mode:t}){const n=this.renderPreloader,r=e.url.startsWith("/pt-br")?"pt-BR":"en-US";return D.element("main",{class:t},D.element("div",{class:"dark:bg-gray-900 dark:text-white"},D.element(F,{locale:r}),D.element($,{route:"/",locale:"en-US"}),D.element($,{route:"/pt-br",locale:"pt-BR"}),D.element(Z,{route:"/documentation",locale:"en-US"}),D.element(Z,{route:"/pt-br/documentacao",locale:"pt-BR"}),D.element(W,{route:"/components",locale:"en-US"}),D.element(W,{route:"/pt-br/componentes",locale:"pt-BR"}),D.element(Q,{route:"/contributors",locale:"en-US"}),D.element(Q,{route:"/pt-br/contribuidores",locale:"pt-BR"}),D.element(R,{route:"/waifu",locale:"en-US"}),D.element(R,{route:"/pt-br/waifu",locale:"pt-BR"}),D.element(N,{route:"/pt-br/:slug",locale:"pt-BR"}),D.element(N,{route:"/:slug",locale:"en-US"}),D.element(I,{id:"G-E7GZ5Z4MLN"}),D.element(n,null),D.element(U,null),D.element(V,{locale:r})))}}!function Application_defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}(Application_Application,"hash","48db744b3f2f66ad13a226a53a1f52bd");var K=Application_Application;t.default=D.start(K)}]);
\ No newline at end of file
diff --git a/docs/nullstack/360045b75355bf43c2fdd604465e03af35097bee/offline.html b/docs/nullstack/dd981f7940e4d78bac6ca2abe788cc0438f7d9dc/offline.html
similarity index 97%
rename from docs/nullstack/360045b75355bf43c2fdd604465e03af35097bee/offline.html
rename to docs/nullstack/dd981f7940e4d78bac6ca2abe788cc0438f7d9dc/offline.html
index 0656c042..febe6e73 100644
--- a/docs/nullstack/360045b75355bf43c2fdd604465e03af35097bee/offline.html
+++ b/docs/nullstack/dd981f7940e4d78bac6ca2abe788cc0438f7d9dc/offline.html
@@ -10,8 +10,8 @@
     
     <meta property="og:type" content="website">
     <meta property="og:site_name" content="Nullstack">
-    <meta property="og:url" content="https://nullstack.app/nullstack/360045b75355bf43c2fdd604465e03af35097bee/offline">
-    <link rel="canonical" href="https://nullstack.app/nullstack/360045b75355bf43c2fdd604465e03af35097bee/offline">
+    <meta property="og:url" content="https://nullstack.app/nullstack/dd981f7940e4d78bac6ca2abe788cc0438f7d9dc/offline">
+    <link rel="canonical" href="https://nullstack.app/nullstack/dd981f7940e4d78bac6ca2abe788cc0438f7d9dc/offline">
     
     <link rel="shortcut icon" href="/favicon-96x96.png" type="image/png">
     <link rel="icon" href="/favicon-96x96.png" type="image/png">
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -34,15 +34,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200};
       window.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-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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":false,"responsive":false};
       window.params = {};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/nullstack/360045b75355bf43c2fdd604465e03af35097bee/offline/index.html b/docs/nullstack/dd981f7940e4d78bac6ca2abe788cc0438f7d9dc/offline/index.html
similarity index 97%
rename from docs/nullstack/360045b75355bf43c2fdd604465e03af35097bee/offline/index.html
rename to docs/nullstack/dd981f7940e4d78bac6ca2abe788cc0438f7d9dc/offline/index.html
index 0656c042..febe6e73 100644
--- a/docs/nullstack/360045b75355bf43c2fdd604465e03af35097bee/offline/index.html
+++ b/docs/nullstack/dd981f7940e4d78bac6ca2abe788cc0438f7d9dc/offline/index.html
@@ -10,8 +10,8 @@
     
     <meta property="og:type" content="website">
     <meta property="og:site_name" content="Nullstack">
-    <meta property="og:url" content="https://nullstack.app/nullstack/360045b75355bf43c2fdd604465e03af35097bee/offline">
-    <link rel="canonical" href="https://nullstack.app/nullstack/360045b75355bf43c2fdd604465e03af35097bee/offline">
+    <meta property="og:url" content="https://nullstack.app/nullstack/dd981f7940e4d78bac6ca2abe788cc0438f7d9dc/offline">
+    <link rel="canonical" href="https://nullstack.app/nullstack/dd981f7940e4d78bac6ca2abe788cc0438f7d9dc/offline">
     
     <link rel="shortcut icon" href="/favicon-96x96.png" type="image/png">
     <link rel="icon" href="/favicon-96x96.png" type="image/png">
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -34,15 +34,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200};
       window.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-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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":false,"responsive":false};
       window.params = {};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/nullstack/360045b75355bf43c2fdd604465e03af35097bee/offline/index.json b/docs/nullstack/dd981f7940e4d78bac6ca2abe788cc0438f7d9dc/offline/index.json
similarity index 100%
rename from docs/nullstack/360045b75355bf43c2fdd604465e03af35097bee/offline/index.json
rename to docs/nullstack/dd981f7940e4d78bac6ca2abe788cc0438f7d9dc/offline/index.json
diff --git a/docs/other-post.html b/docs/other-post.html
index 826c5d34..669b6217 100644
--- a/docs/other-post.html
+++ b/docs/other-post.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -36,15 +36,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":404,"title":"Page Not Found - Nullstack","description":"Sorry, this is not the page you are looking for."};
       window.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/other-post":{"title":"Page Not Found","html":"<p>Perhaps you want to learn about <a href=\"/context-page\">how to make a 404 page with Nullstack<\/a>?<\/p>\n<p>If you are looking for something else, you should <a href=\"/documentation\">read the documentation<\/a>.<\/p>\n","description":"Sorry, this is not the page you are looking for.","status":404,"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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"other-post"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/other-post/index.html b/docs/other-post/index.html
index 826c5d34..669b6217 100644
--- a/docs/other-post/index.html
+++ b/docs/other-post/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -36,15 +36,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":404,"title":"Page Not Found - Nullstack","description":"Sorry, this is not the page you are looking for."};
       window.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/other-post":{"title":"Page Not Found","html":"<p>Perhaps you want to learn about <a href=\"/context-page\">how to make a 404 page with Nullstack<\/a>?<\/p>\n<p>If you are looking for something else, you should <a href=\"/documentation\">read the documentation<\/a>.<\/p>\n","description":"Sorry, this is not the page you are looking for.","status":404,"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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"other-post"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br.html b/docs/pt-br.html
index 89990b88..a97d7a1d 100644
--- a/docs/pt-br.html
+++ b/docs/pt-br.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -119,15 +119,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Componentes JavaScript Full-stack - Nullstack","description":"Nullstack é um framework JavaScript full-stack para construir aplicações web progressivas","locale":"pt-BR"};
       window.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-2/pt-br":{"locale":"pt-BR","i18n":{"title":"Componentes JavaScript Full-stack","description":"Nullstack é um framework JavaScript full-stack para construir aplicações web progressivas","hero":{"heading":"Componentes JavaScript","subHeading":"Full-stack","tagline":"para exércitos de um dev só","descriptions":["Escreva o back-end e o front-end de um recurso em um único componente e deixe o framework decidir onde o código deve ser executado.","O Nullstack oferece todas as ferramentas que você precisa para manter o foco na lógica de negócios."],"callToAction":"npx create-nullstack-app","actionLink":"/pt-br/comecando","actionCallback":"Comando copiado, cole no terminal"},"trinity":{"heading":"A Santa Trindade","subHeading":"do desenvolvimento de aplicativos web progressivos","roles":[{"title":"Primeira visita otimizada","image":"/illustrations/nulla-tanker.webp","text":"Na primeira visita, você terá HTML pronto para SEO e otimizado para a primeira renderização de sua rota em uma única solicitação usando funções locais com nenhuma dependência de JavaScript no pacote do cliente"},{"title":"Experiência de PWA fluida","image":"/illustrations/nulla-healer.webp","text":"Depois que o conteúdo é servido e a rede está ociosa, o JavaScript do Nullstack é carregado, o estado da aplicação é restaurado por meio de hidratação e torna-se uma aplicação de página única (SPA)"},{"title":"Solicitações de API leves","image":"/illustrations/nulla-dps.webp","text":"As funções de servidor subsequentes buscarão JSON de uma API de microsserviços gerada automaticamente, desserializarão a resposta, atualizarão o estado da aplicação e renderizarão a página sem nenhum código adicional"}]},"features":[{"title":"Não perca mais tempo colando um código no outro","snippet":"GlueCode","image":"/illustrations/nulla-glue.webp","text":"Um ciclo de vida full-stack combinado com uma abordagem orientada a recursos permite que você escreva código limpo e reutilizável sem a necessidade de criar APIs manualmente."},{"title":"Torne-se um programador menos dependente de maneirismos","snippet":"Vanilla","image":"/illustrations/nulla-scrolls.webp","inverted":true,"text":"Seus componentes são apenas POJOs. Aproveite as vantagens do ecossistema existente enquanto escreve JavaScript como deve ser e veja o resultado refletido no dom."},{"title":"Você já sabe Nullstack","snippet":"Modern","image":"/illustrations/nulla-map.webp","text":"As rotas são atributos simples que você pode atribuir a qualquer tag, e os links são apenas tags 'a'. Você descobrirá que Nullstack é apenas uma versão moderna de sua stack atual."},{"title":"Todas as ferramentas que você precisa falando a mesma língua","snippet":"Batteries","image":"/illustrations/nulla-tools.webp","inverted":true,"text":"A maioria das tarefas são muito repetitivas. Economize sua energia para os desafios reais usando os atalhos que criamos, como eventos em objeto e vínculos bidirecionais."}],"playlist":{"heading":"Aprenda com nossos ","slang":"Dweebs","realWord":" Especialistas","videos":[{"title":"Full-stack com Nullstack","link":"https://www.youtube.com/watch?v=ieLVXZGXUkI&list=PL5ylYELQy1hz1tcnZcP44xRxETpH9bTUe","thumbnail":"/thumbnails/pt-br-pokepoll.webp"},{"title":"Open Source no Brasil - Ajude a traduzir o Nullstack","link":"https://www.youtube.com/watch?v=ud3IF5Xtd1s","thumbnail":"/thumbnails/pt-br-contribute.webp"},{"title":"O que são Componentes em JavaScript?","link":"https://www.youtube.com/watch?v=3yNwTz9w5Fw","thumbnail":"/thumbnails/pt-br-components.webp"}]}}},"GlueCode":{"html":"<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Feature<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// executa no servidor<\/span>\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token keyword\">delete<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> database <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    database<span class=\"token punctuation\">.<\/span><span class=\"token function\">query<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"DELETE * FROM WAIFUS\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// executa no client<\/span>\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">confirm<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token function\">confirm<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"Tem certeza? uwu\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">delete<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// executa onde for melhor<\/span>\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>confirm<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        Delete\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n<span class=\"token punctuation\">}<\/span>\n"},"Vanilla":{"html":"<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Vanilla<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// variáveis ​​são apenas variáveis<\/span>\n  count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token comment\">// mutações refletem no dom<\/span>\n  <span class=\"token function\">increment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token operator\">++<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// 'this' é vinculado por padrão<\/span>\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>increment<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> \n        <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>"},"Modern":{"html":"<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Modern<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// 'params' são injetados em cada função<\/span>\n  <span class=\"token function\">renderWaifu<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> params <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> Olá<span class=\"token punctuation\">,<\/span> eu sou a <span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">}<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// as rotas podem ter segmentos dinâmicos<\/span>\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Waifu<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/waifus/:name<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a<\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/waifus/Nulla<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n          NullaChan\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>a<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>"},"Batteries":{"html":"<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Batteries<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// variáveis ​​podem ser vinculadas ao dom<\/span>\n  name <span class=\"token operator\">=<\/span> <span class=\"token string\">'Nulla-Chan'<\/span><span class=\"token punctuation\">;<\/span>\n  isWaifu <span class=\"token operator\">=<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span>\n  \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token comment\">// preparando um evento em objeto<\/span>\n    <span class=\"token keyword\">const<\/span> isWaifu <span class=\"token operator\">=<\/span> <span class=\"token operator\">!<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>isWaifu<span class=\"token punctuation\">;<\/span>\n\n    <span class=\"token comment\">// eventos são evitados por padrão<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span>isWaifu<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n          Alternar Waifu\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>"},"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/aplicacao-de-pagina-unica.html b/docs/pt-br/aplicacao-de-pagina-unica.html
index 4bf9edfe..2bd5aa05 100644
--- a/docs/pt-br/aplicacao-de-pagina-unica.html
+++ b/docs/pt-br/aplicacao-de-pagina-unica.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -62,15 +62,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo Passo</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Aplicação de Página Única - Nullstack","description":"Use o Nullstack para gerar single page applications que podem se conectar a qualquer API ou funções de servidor"};
       window.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/aplicacao-de-pagina-unica":{"title":"Aplicação de Página Única","html":"<p>Use o Nullstack para gerar single page applications que podem se conectar a qualquer API ou funções de servidor<\/p>\n<p>Single page applications são úteis para ambientes que não devem usar <a href=\"/pt-br/renderizando-no-servidor\">renderização do lado do servidor<\/a>, como os aplicativos nativos.<\/p>\n<p>Você pode mover facilmente seu aplicativo de SSR para SPA alterando o comando build.<\/p>\n<pre><code class=\"language-sh\">npx nullstack build <span class=\"token operator\">--<\/span>mode<span class=\"token operator\">=<\/span>spa <span class=\"token operator\">--<\/span>output<span class=\"token operator\">=<\/span>spa\n<\/code><\/pre>\n<blockquote>\n<p>🔥 Você deve estar em uma pasta do projeto Nullstack para executar este comando.\nPor padrão, ele criará seu aplicativo de página única na pasta <strong>spa<\/strong> que você pode sobrescrever com a flag <code>--output<\/code>.<\/p>\n<\/blockquote>\n<p>O construtor executará seu aplicativo no modo de produção e gerará um index.html vazio que está preparado para se tornar um aplicativo Nullstack apenas do cliente.<\/p>\n<p>O <a href=\"/pt-br/contexto-project\">manifest.json<\/a> e o conteúdo da pasta pública serão copiados para a pasta de destino.<\/p>\n<p>Na primeira visita ao seu aplicativo estático, o pacote JavaScript será carregado e iniciará um SPA.<\/p>\n<p>Nas solicitações subsequentes, o Nullstack irá empurrar o histórico e atualizar o estado do aplicativo sem nunca recarregar a página.<\/p>\n<h2 id=\"boas-pr-ticas\"><a href=\"#boas-pr-ticas\">Boas práticas<\/a><\/h2><p>Você pode adicionar um script ao seu <strong>package.json<\/strong> para gerar seu site estático em uma pasta personalizada:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token punctuation\">{<\/span>\n  <span class=\"token string\">\"name\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"nullstack.github.io\"<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token string\">\"scripts\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token string\">\"start\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"npx nullstack start\"<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token string\">\"build\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"npx nullstack build --mode=spa --output=web\"<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token operator\">...<\/span>\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<h2 id=\"ressalvas\"><a href=\"#ressalvas\">Ressalvas<\/a><\/h2><p>No modo SPA, tanto <a href=\"/pt-br/ciclo-de-vida-full-stack\"><code>prepare<\/code><\/a> e <a href=\"/pt-br/ciclo-de-vida-full-stack\"><code>initiate<\/code><\/a> sempre serão executados no cliente.\nNo entanto, é uma boa prática seguir os padrões de SSR para poder alterar facilmente o modo de construção.<\/p>\n<p>Você pode misturar modos e solicitar outras funções de servidor apontando <code>worker.api<\/code> e hospedando o pacote do servidor em um ambiente node.js.<\/p>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo Passo<\/a><\/h2><p>⚔ Aprenda <a href=\"/pt-br/como-usar-mongodb-com-nullstack\">como usar MongoDB com Nullstack<\/a>.<\/p>\n","description":"Use o Nullstack para gerar single page applications que podem se conectar a qualquer API ou funções de servidor","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"aplicacao-de-pagina-unica"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/aplicacao-de-pagina-unica/index.html b/docs/pt-br/aplicacao-de-pagina-unica/index.html
index 4bf9edfe..2bd5aa05 100644
--- a/docs/pt-br/aplicacao-de-pagina-unica/index.html
+++ b/docs/pt-br/aplicacao-de-pagina-unica/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -62,15 +62,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo Passo</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Aplicação de Página Única - Nullstack","description":"Use o Nullstack para gerar single page applications que podem se conectar a qualquer API ou funções de servidor"};
       window.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/aplicacao-de-pagina-unica":{"title":"Aplicação de Página Única","html":"<p>Use o Nullstack para gerar single page applications que podem se conectar a qualquer API ou funções de servidor<\/p>\n<p>Single page applications são úteis para ambientes que não devem usar <a href=\"/pt-br/renderizando-no-servidor\">renderização do lado do servidor<\/a>, como os aplicativos nativos.<\/p>\n<p>Você pode mover facilmente seu aplicativo de SSR para SPA alterando o comando build.<\/p>\n<pre><code class=\"language-sh\">npx nullstack build <span class=\"token operator\">--<\/span>mode<span class=\"token operator\">=<\/span>spa <span class=\"token operator\">--<\/span>output<span class=\"token operator\">=<\/span>spa\n<\/code><\/pre>\n<blockquote>\n<p>🔥 Você deve estar em uma pasta do projeto Nullstack para executar este comando.\nPor padrão, ele criará seu aplicativo de página única na pasta <strong>spa<\/strong> que você pode sobrescrever com a flag <code>--output<\/code>.<\/p>\n<\/blockquote>\n<p>O construtor executará seu aplicativo no modo de produção e gerará um index.html vazio que está preparado para se tornar um aplicativo Nullstack apenas do cliente.<\/p>\n<p>O <a href=\"/pt-br/contexto-project\">manifest.json<\/a> e o conteúdo da pasta pública serão copiados para a pasta de destino.<\/p>\n<p>Na primeira visita ao seu aplicativo estático, o pacote JavaScript será carregado e iniciará um SPA.<\/p>\n<p>Nas solicitações subsequentes, o Nullstack irá empurrar o histórico e atualizar o estado do aplicativo sem nunca recarregar a página.<\/p>\n<h2 id=\"boas-pr-ticas\"><a href=\"#boas-pr-ticas\">Boas práticas<\/a><\/h2><p>Você pode adicionar um script ao seu <strong>package.json<\/strong> para gerar seu site estático em uma pasta personalizada:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token punctuation\">{<\/span>\n  <span class=\"token string\">\"name\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"nullstack.github.io\"<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token string\">\"scripts\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token string\">\"start\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"npx nullstack start\"<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token string\">\"build\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"npx nullstack build --mode=spa --output=web\"<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token operator\">...<\/span>\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<h2 id=\"ressalvas\"><a href=\"#ressalvas\">Ressalvas<\/a><\/h2><p>No modo SPA, tanto <a href=\"/pt-br/ciclo-de-vida-full-stack\"><code>prepare<\/code><\/a> e <a href=\"/pt-br/ciclo-de-vida-full-stack\"><code>initiate<\/code><\/a> sempre serão executados no cliente.\nNo entanto, é uma boa prática seguir os padrões de SSR para poder alterar facilmente o modo de construção.<\/p>\n<p>Você pode misturar modos e solicitar outras funções de servidor apontando <code>worker.api<\/code> e hospedando o pacote do servidor em um ambiente node.js.<\/p>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo Passo<\/a><\/h2><p>⚔ Aprenda <a href=\"/pt-br/como-usar-mongodb-com-nullstack\">como usar MongoDB com Nullstack<\/a>.<\/p>\n","description":"Use o Nullstack para gerar single page applications que podem se conectar a qualquer API ou funções de servidor","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"aplicacao-de-pagina-unica"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/ciclo-de-vida-full-stack.html b/docs/pt-br/ciclo-de-vida-full-stack.html
index 8e45998f..12f23356 100644
--- a/docs/pt-br/ciclo-de-vida-full-stack.html
+++ b/docs/pt-br/ciclo-de-vida-full-stack.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -154,15 +154,15 @@ <h2 id="pr-ximos-passos"><a href="#pr-ximos-passos">Próximos passos</a></h2><p>
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Ciclo de Vida Full-Stack - Nullstack","description":"Métodos de ciclo de vida são funções nomeadas de forma especial que você pode declarar na classe"};
       window.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/ciclo-de-vida-full-stack":{"title":"Ciclo de Vida Full-Stack","html":"<p>Métodos de ciclo de vida são funções nomeadas de forma especial que você pode declarar na classe.<\/p>\n<p>Cada método de ciclo de vida roda em uma fila de ordem específica, garantindo que todos os componentes do ciclo atual sejam preparados antes do primeiro ser iniciado.<\/p>\n<h2 id=\"prepare\"><a href=\"#prepare\">Prepare<\/a><\/h2><p>Esse método é bloqueante e roda antes da primeira renderização do componente.<\/p>\n<p>Você pode usar essa função para definir o estado que o usuário verá antes do carregamento.<\/p>\n<p>Se o usuário estiver entrando através dessa rota, <code>prepare<\/code> irá rodar no servidor antes do Nullstack <a href=\"/pt-br/renderizando-no-servidor\">renderizar sua aplicação no lado do servidor<\/a>.<\/p>\n<p>Se o usuário estiver navegando por outra rota, esse método rodará no cliente.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>date <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Date<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"initiate\"><a href=\"#initiate\">Initiate<\/a><\/h2><p>Esse método pode ser assíncrono, e roda assim que o componente for preparado e renderizado pela primeira vez.<\/p>\n<p>Você pode usá-lo para invocar outra função do servidor e carregar os dados para apresentar a página.<\/p>\n<p>Se o usuário estiver entrando através dessa rota, <code>initiate<\/code> rodará no servidor.<\/p>\n<p>Nullstack irá esperar até que a promise seja resolvida e então finalmente irá gerar o HTML que será servido.<\/p>\n<p>Se o usuário estiver navegando por outra rota, esse método rodará no cliente.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>task <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">getTaskByDay<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>\n      day<span class=\"token operator\">:<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>date\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Aprenda mais sobre <a href=\"/pt-br/funcoes-de-servidor\">funções do servidor<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"hydrate\"><a href=\"#hydrate\">Hydrate<\/a><\/h2><p>Esse método é assíncrono e rodará apenas no cliente.<\/p>\n<p>Ele sempre rodará independente do ambiente que iniciou o componente.<\/p>\n<p>Esse é um bom lugar para acionar dependências que manipulam o DOM ou que podem rodar apenas no lado do cliente.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">hydrate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>timer <span class=\"token operator\">=<\/span> <span class=\"token function\">setInterval<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n      console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>date<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">1000<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"update\"><a href=\"#update\">Update<\/a><\/h2><p>Esse método é assíncrono e rodará apenas no cliente.<\/p>\n<p>Ele roda em todos os componentes sempre que o estado da aplicação mudar.<\/p>\n<blockquote>\n<p>🔥 Tome cuidado para não causar loops infinitos quando mutacionar o estado dentro de <code>update<\/code>.<\/p>\n<\/blockquote>\n<p>Ele irá rodar logo antes da renderização, mas não irá bloquear a fila.<\/p>\n<p>A função <code>update<\/code> não rodará até que a aplicação seja renderizada após <code>initiate<\/code>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">update<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> today <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Date<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span>today<span class=\"token punctuation\">.<\/span><span class=\"token function\">getDay<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">!=<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>date<span class=\"token punctuation\">.<\/span><span class=\"token function\">getDay<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>date <span class=\"token operator\">=<\/span> today<span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Métodos de ciclo de vida não têm efeitos colaterais, você pode chamá-los manualmentes sem causar problemas.<\/p>\n<\/blockquote>\n<h2 id=\"terminate\"><a href=\"#terminate\">Terminate<\/a><\/h2><p>Esse método é assíncrono e rodará apenas no cliente.<\/p>\n<p>Ele irá rodar após o componente deixar o DOM.<\/p>\n<p>Esse é o lugar para limpar qualquer coisa que você definiu no método <code>hydrate<\/code>.<\/p>\n<p>Essa instância será levada pelo garbage collector após a resolução da <code>Promise<\/code>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">terminate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token function\">clearInterval<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>timer<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"pr-ximos-passos\"><a href=\"#pr-ximos-passos\">Próximos passos<\/a><\/h2><p>⚔ Aprenda sobre <a href=\"/pt-br/funcoes-de-servidor\">funções do servidor<\/a>.<\/p>\n","description":"Métodos de ciclo de vida são funções nomeadas de forma especial que você pode declarar na classe","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"ciclo-de-vida-full-stack"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/ciclo-de-vida-full-stack/index.html b/docs/pt-br/ciclo-de-vida-full-stack/index.html
index 8e45998f..12f23356 100644
--- a/docs/pt-br/ciclo-de-vida-full-stack/index.html
+++ b/docs/pt-br/ciclo-de-vida-full-stack/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -154,15 +154,15 @@ <h2 id="pr-ximos-passos"><a href="#pr-ximos-passos">Próximos passos</a></h2><p>
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Ciclo de Vida Full-Stack - Nullstack","description":"Métodos de ciclo de vida são funções nomeadas de forma especial que você pode declarar na classe"};
       window.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/ciclo-de-vida-full-stack":{"title":"Ciclo de Vida Full-Stack","html":"<p>Métodos de ciclo de vida são funções nomeadas de forma especial que você pode declarar na classe.<\/p>\n<p>Cada método de ciclo de vida roda em uma fila de ordem específica, garantindo que todos os componentes do ciclo atual sejam preparados antes do primeiro ser iniciado.<\/p>\n<h2 id=\"prepare\"><a href=\"#prepare\">Prepare<\/a><\/h2><p>Esse método é bloqueante e roda antes da primeira renderização do componente.<\/p>\n<p>Você pode usar essa função para definir o estado que o usuário verá antes do carregamento.<\/p>\n<p>Se o usuário estiver entrando através dessa rota, <code>prepare<\/code> irá rodar no servidor antes do Nullstack <a href=\"/pt-br/renderizando-no-servidor\">renderizar sua aplicação no lado do servidor<\/a>.<\/p>\n<p>Se o usuário estiver navegando por outra rota, esse método rodará no cliente.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>date <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Date<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"initiate\"><a href=\"#initiate\">Initiate<\/a><\/h2><p>Esse método pode ser assíncrono, e roda assim que o componente for preparado e renderizado pela primeira vez.<\/p>\n<p>Você pode usá-lo para invocar outra função do servidor e carregar os dados para apresentar a página.<\/p>\n<p>Se o usuário estiver entrando através dessa rota, <code>initiate<\/code> rodará no servidor.<\/p>\n<p>Nullstack irá esperar até que a promise seja resolvida e então finalmente irá gerar o HTML que será servido.<\/p>\n<p>Se o usuário estiver navegando por outra rota, esse método rodará no cliente.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>task <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">getTaskByDay<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>\n      day<span class=\"token operator\">:<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>date\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Aprenda mais sobre <a href=\"/pt-br/funcoes-de-servidor\">funções do servidor<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"hydrate\"><a href=\"#hydrate\">Hydrate<\/a><\/h2><p>Esse método é assíncrono e rodará apenas no cliente.<\/p>\n<p>Ele sempre rodará independente do ambiente que iniciou o componente.<\/p>\n<p>Esse é um bom lugar para acionar dependências que manipulam o DOM ou que podem rodar apenas no lado do cliente.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">hydrate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>timer <span class=\"token operator\">=<\/span> <span class=\"token function\">setInterval<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n      console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>date<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">1000<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"update\"><a href=\"#update\">Update<\/a><\/h2><p>Esse método é assíncrono e rodará apenas no cliente.<\/p>\n<p>Ele roda em todos os componentes sempre que o estado da aplicação mudar.<\/p>\n<blockquote>\n<p>🔥 Tome cuidado para não causar loops infinitos quando mutacionar o estado dentro de <code>update<\/code>.<\/p>\n<\/blockquote>\n<p>Ele irá rodar logo antes da renderização, mas não irá bloquear a fila.<\/p>\n<p>A função <code>update<\/code> não rodará até que a aplicação seja renderizada após <code>initiate<\/code>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">update<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> today <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Date<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span>today<span class=\"token punctuation\">.<\/span><span class=\"token function\">getDay<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">!=<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>date<span class=\"token punctuation\">.<\/span><span class=\"token function\">getDay<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>date <span class=\"token operator\">=<\/span> today<span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Métodos de ciclo de vida não têm efeitos colaterais, você pode chamá-los manualmentes sem causar problemas.<\/p>\n<\/blockquote>\n<h2 id=\"terminate\"><a href=\"#terminate\">Terminate<\/a><\/h2><p>Esse método é assíncrono e rodará apenas no cliente.<\/p>\n<p>Ele irá rodar após o componente deixar o DOM.<\/p>\n<p>Esse é o lugar para limpar qualquer coisa que você definiu no método <code>hydrate<\/code>.<\/p>\n<p>Essa instância será levada pelo garbage collector após a resolução da <code>Promise<\/code>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">terminate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token function\">clearInterval<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>timer<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"pr-ximos-passos\"><a href=\"#pr-ximos-passos\">Próximos passos<\/a><\/h2><p>⚔ Aprenda sobre <a href=\"/pt-br/funcoes-de-servidor\">funções do servidor<\/a>.<\/p>\n","description":"Métodos de ciclo de vida são funções nomeadas de forma especial que você pode declarar na classe","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"ciclo-de-vida-full-stack"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/comecando.html b/docs/pt-br/comecando.html
index b9f30e28..bc50d9d4 100644
--- a/docs/pt-br/comecando.html
+++ b/docs/pt-br/comecando.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -110,15 +110,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo Passo</a></h2><p>⚔ Cr
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Começando - Nullstack","description":"Crie aplicações full-stack em JavaScript em meros segundos"};
       window.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/comecando":{"title":"Começando","html":"<blockquote>\n<p>📌 Você pode assistir um tutorial no nosso <a href=\"https://www.youtube.com/watch?v=ieLVXZGXUkI&amp;list=PL5ylYELQy1hz1tcnZcP44xRxETpH9bTUe\" target=\"_blank\" rel=\"noopener\">Canal do Youtube<\/a>.<\/p>\n<\/blockquote>\n<p>Crie aplicações JavaScript full-stack em segundos usando <code>npx<\/code> para gerar os arquivos do seu projeto usando o template mais recente.<\/p>\n<blockquote>\n<p>🔥 A versão mínima necessária do <a href=\"https://nodejs.org/pt-br/\" target=\"_blank\" rel=\"noopener\">node.js<\/a> para o modo de desenvovimento é <em>12.12.0<\/em>.<\/p>\n<\/blockquote>\n<blockquote>\n<p>⚠ Se o diretório em que você está contém espaços, você usa Windows e o <code>npx<\/code> der erros, leia sobre o <a href=\"#bug-conhecido-do-npx\" target=\"_blank\" rel=\"noopener\">bug conhecido do npx<\/a>.<\/p>\n<\/blockquote>\n<p>Troque <code>project-name<\/code> com o nome do seu projeto e rode o comanto abaixo para começar um projeto:<\/p>\n<pre><code class=\"language-sh\">npx create<span class=\"token operator\">-<\/span>nullstack<span class=\"token operator\">-<\/span>app project<span class=\"token operator\">-<\/span>name\n<\/code><\/pre>\n<p>Troque o diretório para a pasta gerada:<\/p>\n<pre><code class=\"language-sh\">cd project<span class=\"token operator\">-<\/span>name\n<\/code><\/pre>\n<p>Instale as dependências:<\/p>\n<pre><code class=\"language-sh\">npm install\n<\/code><\/pre>\n<p>Inicie a aplicação em modo de desenvolvimento:<\/p>\n<pre><code class=\"language-sh\">npm start\n<\/code><\/pre>\n<h2 id=\"entendendo-os-arquivos-gerados\"><a href=\"#entendendo-os-arquivos-gerados\">Entendendo os arquivos gerados<\/a><\/h2><p>As seguintes pastas e arquivos serão gerados:<\/p>\n<h3 id=\"index-js\"><a href=\"#index-js\">index.js<\/a><\/h3><p>Este é o ponto de entrada do <a href=\"https://webpack.js.org\" target=\"_blank\" rel=\"noopener\">Webpack<\/a>.<\/p>\n<p>Normalmente, você não precisará mexer neste arquivo, mas é um lugar conveniente para importar dependências globais como frameworks CSS.<\/p>\n<h3 id=\"src-\"><a href=\"#src-\">src/<\/a><\/h3><p>Esta pasta contêm o código fonte da sua aplicação.<\/p>\n<h3 id=\"src-application-njs\"><a href=\"#src-application-njs\">src/Application.njs<\/a><\/h3><p>Este é o arquivo principal da sua aplicação.<\/p>\n<blockquote>\n<p>✨ Saiba mais sobre a <a href=\"/pt-br/extensao-de-arquivo-njs\" title=\"Nullstack JavaScript\">extensão de arquivo njs<\/a>.<\/p>\n<\/blockquote>\n<p>A função <code>start<\/code> será automaticamente chamada uma vez que você rode <code>npm start<\/code>, use a para preencher o <a href=\"/pt-br/contexto\">contexto<\/a> do seu servidor com coisas como <a href=\"/pt-br/como-usar-mongodb-com-nullstack\">banco de dados<\/a>, <a href=\"/pt-br/contexto-settings\">configurações<\/a>, e <a href=\"/pt-br/contexto-secrets\">segredos<\/a>.<\/p>\n<blockquote>\n<p>✨ Saiba mais sobre a <a href=\"/pt-br/inicializacao-da-aplicacao\">inicialização da aplicação<\/a>.<\/p>\n<\/blockquote>\n<h3 id=\"src-application-scss\"><a href=\"#src-application-scss\">src/Application.scss<\/a><\/h3><p>Este é um arquivo vazio só para demonstrar que você pode usar <a href=\"/pt-br/estilos\">SCSS com Nullstack<\/a>.<\/p>\n<p>É uma boa prática importar um arquivo de estilo em um componente com o mesmo nome.<\/p>\n<blockquote>\n<p>✨ Saiba mais sobre <a href=\"/pt-br/estilos\">estilos<\/a>.<\/p>\n<\/blockquote>\n<h3 id=\"public-\"><a href=\"#public-\">public/<\/a><\/h3><p>Todo arquivo aqui ficará disponível para qualquer um na raíz do domínio.<\/p>\n<p>Por padrão <code>create-nullstack-app<\/code> gera os ícones necessários para o seu <strong>manifest.json<\/strong> e imagens para meta tags OG.<\/p>\n<blockquote>\n<p>✨ Saiba mais sobre o <a href=\"/pt-br/contexto-project\">manifest.json<\/a>.<\/p>\n<\/blockquote>\n<p>Tenha certeza de trocar estas imagens pela identidade do seu projeto.<\/p>\n<h3 id=\"-development-\"><a href=\"#-development-\">.development/<\/a><\/h3><p>Este é o resultado compilado da sua aplicação em modo de desenvolvimento.<\/p>\n<blockquote>\n<p>🔥 Não toque nesta pasta<\/p>\n<\/blockquote>\n<h3 id=\"-production-\"><a href=\"#-production-\">.production/<\/a><\/h3><p>Este é o resultado compilado da sua aplicação em modo de produção.<\/p>\n<blockquote>\n<p>🔥 Não toque nesta pasta<\/p>\n<\/blockquote>\n<blockquote>\n<p>✨ Saiba mais sobre <a href=\"/pt-br/como-fazer-deploy-de-aplicacao-nullstack\">como fazer deploy de aplicação Nullstack<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"bug-conhecido-do-npx\"><a href=\"#bug-conhecido-do-npx\">Bug conhecido do npx<\/a><\/h2><p>Avisado em issues do <code>npx<\/code> como <a href=\"https://github.com/zkat/npx/issues/100\" target=\"_blank\" rel=\"noopener\">#100<\/a>, <a href=\"https://github.com/zkat/npx/issues/110\" target=\"_blank\" rel=\"noopener\">#110<\/a> e <a href=\"https://github.com/zkat/npx/issues/146\" target=\"_blank\" rel=\"noopener\">#143<\/a>, ele tem um erro ao tentar resolver o caminho para sua pasta de cache quando este contém espaços.<\/p>\n<p>Se isso ocorrer com você, nossas recomendações são:<\/p>\n<ul>\n<li><p>Usando baixado como normalmente faria com <code>npm<\/code>:<\/p>\n<pre><code class=\"language-sh\">npm i <span class=\"token operator\">-<\/span>g create<span class=\"token operator\">-<\/span>nullstack<span class=\"token operator\">-<\/span>app\ncreate<span class=\"token operator\">-<\/span>nullstack<span class=\"token operator\">-<\/span>app project<span class=\"token operator\">-<\/span>name\n<\/code><\/pre><\/li>\n<li><p>ou, mudar o diretório da pasta de cache, como dito <a href=\"https://github.com/zkat/npx/issues/146#issuecomment-384016791\" target=\"_blank\" rel=\"noopener\">aqui<\/a> e <a href=\"https://github.com/zkat/npx/issues/146#issuecomment-384019497\" target=\"_blank\" rel=\"noopener\">aqui<\/a>:<\/p>\n<ul>\n<li>Se deseja manter o uso do espaço, subtitua <code>PrimeiroNome<\/code> pelo usado no seu caminho e rode:<\/li>\n<\/ul>\n<pre><code class=\"language-sh\">npm config <span class=\"token keyword\">set<\/span> cache <span class=\"token string\">\"C:\\Users\\PrimeiroNome~1\\AppData\\Roaming\\npm-cache\"<\/span> <span class=\"token operator\">--<\/span>global\n<\/code><\/pre>\n<ul>\n<li>ou, usando outro caminho sem espaços:<\/li>\n<\/ul>\n<pre><code class=\"language-sh\">npm config <span class=\"token keyword\">set<\/span> cache <span class=\"token constant\">C<\/span><span class=\"token operator\">:<\/span>\\tmp\\nodejs\\npm<span class=\"token operator\">-<\/span>cache <span class=\"token operator\">--<\/span>global\n<\/code><\/pre><\/li>\n<\/ul>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo Passo<\/a><\/h2><p>⚔ Crie seu primeiro <a href=\"/pt-br/componentes-renderizaveis\">componente renderizável<\/a>.<\/p>\n","description":"Crie aplicações full-stack em JavaScript em meros segundos","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"comecando"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/comecando/index.html b/docs/pt-br/comecando/index.html
index b9f30e28..bc50d9d4 100644
--- a/docs/pt-br/comecando/index.html
+++ b/docs/pt-br/comecando/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -110,15 +110,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo Passo</a></h2><p>⚔ Cr
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Começando - Nullstack","description":"Crie aplicações full-stack em JavaScript em meros segundos"};
       window.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/comecando":{"title":"Começando","html":"<blockquote>\n<p>📌 Você pode assistir um tutorial no nosso <a href=\"https://www.youtube.com/watch?v=ieLVXZGXUkI&amp;list=PL5ylYELQy1hz1tcnZcP44xRxETpH9bTUe\" target=\"_blank\" rel=\"noopener\">Canal do Youtube<\/a>.<\/p>\n<\/blockquote>\n<p>Crie aplicações JavaScript full-stack em segundos usando <code>npx<\/code> para gerar os arquivos do seu projeto usando o template mais recente.<\/p>\n<blockquote>\n<p>🔥 A versão mínima necessária do <a href=\"https://nodejs.org/pt-br/\" target=\"_blank\" rel=\"noopener\">node.js<\/a> para o modo de desenvovimento é <em>12.12.0<\/em>.<\/p>\n<\/blockquote>\n<blockquote>\n<p>⚠ Se o diretório em que você está contém espaços, você usa Windows e o <code>npx<\/code> der erros, leia sobre o <a href=\"#bug-conhecido-do-npx\" target=\"_blank\" rel=\"noopener\">bug conhecido do npx<\/a>.<\/p>\n<\/blockquote>\n<p>Troque <code>project-name<\/code> com o nome do seu projeto e rode o comanto abaixo para começar um projeto:<\/p>\n<pre><code class=\"language-sh\">npx create<span class=\"token operator\">-<\/span>nullstack<span class=\"token operator\">-<\/span>app project<span class=\"token operator\">-<\/span>name\n<\/code><\/pre>\n<p>Troque o diretório para a pasta gerada:<\/p>\n<pre><code class=\"language-sh\">cd project<span class=\"token operator\">-<\/span>name\n<\/code><\/pre>\n<p>Instale as dependências:<\/p>\n<pre><code class=\"language-sh\">npm install\n<\/code><\/pre>\n<p>Inicie a aplicação em modo de desenvolvimento:<\/p>\n<pre><code class=\"language-sh\">npm start\n<\/code><\/pre>\n<h2 id=\"entendendo-os-arquivos-gerados\"><a href=\"#entendendo-os-arquivos-gerados\">Entendendo os arquivos gerados<\/a><\/h2><p>As seguintes pastas e arquivos serão gerados:<\/p>\n<h3 id=\"index-js\"><a href=\"#index-js\">index.js<\/a><\/h3><p>Este é o ponto de entrada do <a href=\"https://webpack.js.org\" target=\"_blank\" rel=\"noopener\">Webpack<\/a>.<\/p>\n<p>Normalmente, você não precisará mexer neste arquivo, mas é um lugar conveniente para importar dependências globais como frameworks CSS.<\/p>\n<h3 id=\"src-\"><a href=\"#src-\">src/<\/a><\/h3><p>Esta pasta contêm o código fonte da sua aplicação.<\/p>\n<h3 id=\"src-application-njs\"><a href=\"#src-application-njs\">src/Application.njs<\/a><\/h3><p>Este é o arquivo principal da sua aplicação.<\/p>\n<blockquote>\n<p>✨ Saiba mais sobre a <a href=\"/pt-br/extensao-de-arquivo-njs\" title=\"Nullstack JavaScript\">extensão de arquivo njs<\/a>.<\/p>\n<\/blockquote>\n<p>A função <code>start<\/code> será automaticamente chamada uma vez que você rode <code>npm start<\/code>, use a para preencher o <a href=\"/pt-br/contexto\">contexto<\/a> do seu servidor com coisas como <a href=\"/pt-br/como-usar-mongodb-com-nullstack\">banco de dados<\/a>, <a href=\"/pt-br/contexto-settings\">configurações<\/a>, e <a href=\"/pt-br/contexto-secrets\">segredos<\/a>.<\/p>\n<blockquote>\n<p>✨ Saiba mais sobre a <a href=\"/pt-br/inicializacao-da-aplicacao\">inicialização da aplicação<\/a>.<\/p>\n<\/blockquote>\n<h3 id=\"src-application-scss\"><a href=\"#src-application-scss\">src/Application.scss<\/a><\/h3><p>Este é um arquivo vazio só para demonstrar que você pode usar <a href=\"/pt-br/estilos\">SCSS com Nullstack<\/a>.<\/p>\n<p>É uma boa prática importar um arquivo de estilo em um componente com o mesmo nome.<\/p>\n<blockquote>\n<p>✨ Saiba mais sobre <a href=\"/pt-br/estilos\">estilos<\/a>.<\/p>\n<\/blockquote>\n<h3 id=\"public-\"><a href=\"#public-\">public/<\/a><\/h3><p>Todo arquivo aqui ficará disponível para qualquer um na raíz do domínio.<\/p>\n<p>Por padrão <code>create-nullstack-app<\/code> gera os ícones necessários para o seu <strong>manifest.json<\/strong> e imagens para meta tags OG.<\/p>\n<blockquote>\n<p>✨ Saiba mais sobre o <a href=\"/pt-br/contexto-project\">manifest.json<\/a>.<\/p>\n<\/blockquote>\n<p>Tenha certeza de trocar estas imagens pela identidade do seu projeto.<\/p>\n<h3 id=\"-development-\"><a href=\"#-development-\">.development/<\/a><\/h3><p>Este é o resultado compilado da sua aplicação em modo de desenvolvimento.<\/p>\n<blockquote>\n<p>🔥 Não toque nesta pasta<\/p>\n<\/blockquote>\n<h3 id=\"-production-\"><a href=\"#-production-\">.production/<\/a><\/h3><p>Este é o resultado compilado da sua aplicação em modo de produção.<\/p>\n<blockquote>\n<p>🔥 Não toque nesta pasta<\/p>\n<\/blockquote>\n<blockquote>\n<p>✨ Saiba mais sobre <a href=\"/pt-br/como-fazer-deploy-de-aplicacao-nullstack\">como fazer deploy de aplicação Nullstack<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"bug-conhecido-do-npx\"><a href=\"#bug-conhecido-do-npx\">Bug conhecido do npx<\/a><\/h2><p>Avisado em issues do <code>npx<\/code> como <a href=\"https://github.com/zkat/npx/issues/100\" target=\"_blank\" rel=\"noopener\">#100<\/a>, <a href=\"https://github.com/zkat/npx/issues/110\" target=\"_blank\" rel=\"noopener\">#110<\/a> e <a href=\"https://github.com/zkat/npx/issues/146\" target=\"_blank\" rel=\"noopener\">#143<\/a>, ele tem um erro ao tentar resolver o caminho para sua pasta de cache quando este contém espaços.<\/p>\n<p>Se isso ocorrer com você, nossas recomendações são:<\/p>\n<ul>\n<li><p>Usando baixado como normalmente faria com <code>npm<\/code>:<\/p>\n<pre><code class=\"language-sh\">npm i <span class=\"token operator\">-<\/span>g create<span class=\"token operator\">-<\/span>nullstack<span class=\"token operator\">-<\/span>app\ncreate<span class=\"token operator\">-<\/span>nullstack<span class=\"token operator\">-<\/span>app project<span class=\"token operator\">-<\/span>name\n<\/code><\/pre><\/li>\n<li><p>ou, mudar o diretório da pasta de cache, como dito <a href=\"https://github.com/zkat/npx/issues/146#issuecomment-384016791\" target=\"_blank\" rel=\"noopener\">aqui<\/a> e <a href=\"https://github.com/zkat/npx/issues/146#issuecomment-384019497\" target=\"_blank\" rel=\"noopener\">aqui<\/a>:<\/p>\n<ul>\n<li>Se deseja manter o uso do espaço, subtitua <code>PrimeiroNome<\/code> pelo usado no seu caminho e rode:<\/li>\n<\/ul>\n<pre><code class=\"language-sh\">npm config <span class=\"token keyword\">set<\/span> cache <span class=\"token string\">\"C:\\Users\\PrimeiroNome~1\\AppData\\Roaming\\npm-cache\"<\/span> <span class=\"token operator\">--<\/span>global\n<\/code><\/pre>\n<ul>\n<li>ou, usando outro caminho sem espaços:<\/li>\n<\/ul>\n<pre><code class=\"language-sh\">npm config <span class=\"token keyword\">set<\/span> cache <span class=\"token constant\">C<\/span><span class=\"token operator\">:<\/span>\\tmp\\nodejs\\npm<span class=\"token operator\">-<\/span>cache <span class=\"token operator\">--<\/span>global\n<\/code><\/pre><\/li>\n<\/ul>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo Passo<\/a><\/h2><p>⚔ Crie seu primeiro <a href=\"/pt-br/componentes-renderizaveis\">componente renderizável<\/a>.<\/p>\n","description":"Crie aplicações full-stack em JavaScript em meros segundos","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"comecando"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/como-fazer-deploy-de-aplicacao-nullstack.html b/docs/pt-br/como-fazer-deploy-de-aplicacao-nullstack.html
index b246628b..3715cc0d 100644
--- a/docs/pt-br/como-fazer-deploy-de-aplicacao-nullstack.html
+++ b/docs/pt-br/como-fazer-deploy-de-aplicacao-nullstack.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -60,15 +60,15 @@ <h2 id="pr-xima-etapa"><a href="#pr-xima-etapa">Próxima Etapa</a></h2><blockquo
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Como fazer Deploy - Nullstack","description":"Com o Nullstack é fácil ter sua aplicação instalada e funcionando no modo de produção"};
       window.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/como-fazer-deploy-de-aplicacao-nullstack":{"title":"Como fazer Deploy","html":"<p>Com o Nullstack é fácil ter sua aplicação instalada e funcionando no modo de produção<\/p>\n<blockquote>\n<p>🐱‍💻 <strong>stonks<\/strong><\/p>\n<\/blockquote>\n<p>Nullstack compila seu código e todas as suas dependências usando <a href=\"https://webpack.js.org\" target=\"_blank\" rel=\"noopener\">Webpack<\/a>.<\/p>\n<p>A saída da compilação é movida para a pasta <strong>.production<\/strong> e é a única pasta além de <strong>public<\/strong> que precisa ser movida para a máquina host.<\/p>\n<p>Se você tiver <code>project.cdn<\/code> definido, deverá mover a pasta <strong>public<\/strong> para o cdn real.<\/p>\n<blockquote>\n<p>💡 É importante que a pasta <strong>.production<\/strong> esteja presente para a detecção do ambiente<\/p>\n<\/blockquote>\n<p>A máquina host deve ter pelo menos a versão 8.10.0 do node instalada.<\/p>\n<p>Você não precisa executar &quot;npm install&quot; na máquina host.<\/p>\n<blockquote>\n<p>✨ Você pode configurar o ambiente usando <a href=\"/pt-br/contexto-settings\"><code>settings<\/code><\/a> e <a href=\"/pt-br/contexto-secrets\"><code>secrets<\/code><\/a><\/p>\n<\/blockquote>\n<p>Para iniciar o servidor, basta executar:<\/p>\n<pre><code class=\"language-sh\">node <span class=\"token punctuation\">.<\/span>production<span class=\"token operator\">/<\/span>server<span class=\"token punctuation\">.<\/span>js\n<\/code><\/pre>\n<blockquote>\n<p>✨ Recomenda-se o uso de um gerenciador de processos como <a href=\"https://pm2.keymetrics.io\" target=\"_blank\" rel=\"noopener\">PM2<\/a><\/p>\n<\/blockquote>\n<h2 id=\"como-fazer-o-deploy-de-um-site-est-tico-gerado-com-nullstack\"><a href=\"#como-fazer-o-deploy-de-um-site-est-tico-gerado-com-nullstack\">Como fazer o Deploy de um site estático gerado com NullStack<\/a><\/h2><p>Depois de <a href=\"/pt-br/geracao-de-sites-estaticos\">gerar um site estático<\/a>, tudo o que você precisa fazer é mover a pasta de saída para qualquer máquina host capaz de servir HTML.<\/p>\n<h2 id=\"pr-xima-etapa\"><a href=\"#pr-xima-etapa\">Próxima Etapa<\/a><\/h2><blockquote>\n<p>🎉 <strong>Parabéns<\/strong>. Você concluiu os conceitos avançados!<\/p>\n<\/blockquote>\n<p>⚔ Aprenda sobre <a href=\"/pt-br/renderizando-no-servidor\">renderização do lado do servidor<\/a>.<\/p>\n","description":"Com o Nullstack é fácil ter sua aplicação instalada e funcionando no modo de produção","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"como-fazer-deploy-de-aplicacao-nullstack"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/como-fazer-deploy-de-aplicacao-nullstack/index.html b/docs/pt-br/como-fazer-deploy-de-aplicacao-nullstack/index.html
index b246628b..3715cc0d 100644
--- a/docs/pt-br/como-fazer-deploy-de-aplicacao-nullstack/index.html
+++ b/docs/pt-br/como-fazer-deploy-de-aplicacao-nullstack/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -60,15 +60,15 @@ <h2 id="pr-xima-etapa"><a href="#pr-xima-etapa">Próxima Etapa</a></h2><blockquo
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Como fazer Deploy - Nullstack","description":"Com o Nullstack é fácil ter sua aplicação instalada e funcionando no modo de produção"};
       window.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/como-fazer-deploy-de-aplicacao-nullstack":{"title":"Como fazer Deploy","html":"<p>Com o Nullstack é fácil ter sua aplicação instalada e funcionando no modo de produção<\/p>\n<blockquote>\n<p>🐱‍💻 <strong>stonks<\/strong><\/p>\n<\/blockquote>\n<p>Nullstack compila seu código e todas as suas dependências usando <a href=\"https://webpack.js.org\" target=\"_blank\" rel=\"noopener\">Webpack<\/a>.<\/p>\n<p>A saída da compilação é movida para a pasta <strong>.production<\/strong> e é a única pasta além de <strong>public<\/strong> que precisa ser movida para a máquina host.<\/p>\n<p>Se você tiver <code>project.cdn<\/code> definido, deverá mover a pasta <strong>public<\/strong> para o cdn real.<\/p>\n<blockquote>\n<p>💡 É importante que a pasta <strong>.production<\/strong> esteja presente para a detecção do ambiente<\/p>\n<\/blockquote>\n<p>A máquina host deve ter pelo menos a versão 8.10.0 do node instalada.<\/p>\n<p>Você não precisa executar &quot;npm install&quot; na máquina host.<\/p>\n<blockquote>\n<p>✨ Você pode configurar o ambiente usando <a href=\"/pt-br/contexto-settings\"><code>settings<\/code><\/a> e <a href=\"/pt-br/contexto-secrets\"><code>secrets<\/code><\/a><\/p>\n<\/blockquote>\n<p>Para iniciar o servidor, basta executar:<\/p>\n<pre><code class=\"language-sh\">node <span class=\"token punctuation\">.<\/span>production<span class=\"token operator\">/<\/span>server<span class=\"token punctuation\">.<\/span>js\n<\/code><\/pre>\n<blockquote>\n<p>✨ Recomenda-se o uso de um gerenciador de processos como <a href=\"https://pm2.keymetrics.io\" target=\"_blank\" rel=\"noopener\">PM2<\/a><\/p>\n<\/blockquote>\n<h2 id=\"como-fazer-o-deploy-de-um-site-est-tico-gerado-com-nullstack\"><a href=\"#como-fazer-o-deploy-de-um-site-est-tico-gerado-com-nullstack\">Como fazer o Deploy de um site estático gerado com NullStack<\/a><\/h2><p>Depois de <a href=\"/pt-br/geracao-de-sites-estaticos\">gerar um site estático<\/a>, tudo o que você precisa fazer é mover a pasta de saída para qualquer máquina host capaz de servir HTML.<\/p>\n<h2 id=\"pr-xima-etapa\"><a href=\"#pr-xima-etapa\">Próxima Etapa<\/a><\/h2><blockquote>\n<p>🎉 <strong>Parabéns<\/strong>. Você concluiu os conceitos avançados!<\/p>\n<\/blockquote>\n<p>⚔ Aprenda sobre <a href=\"/pt-br/renderizando-no-servidor\">renderização do lado do servidor<\/a>.<\/p>\n","description":"Com o Nullstack é fácil ter sua aplicação instalada e funcionando no modo de produção","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"como-fazer-deploy-de-aplicacao-nullstack"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/como-usar-facebook-pixel-no-nullstack.html b/docs/pt-br/como-usar-facebook-pixel-no-nullstack.html
index 5a0c5fb8..1cf18709 100644
--- a/docs/pt-br/como-usar-facebook-pixel-no-nullstack.html
+++ b/docs/pt-br/como-usar-facebook-pixel-no-nullstack.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -119,15 +119,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo Passo</a></h2><blockquo
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Facebook Pixel - Nullstack","description":"Aproveite as vantagens do [contexto](/pt-br/contexto) e [eventos personalizados](/pt-br/contexto-page) para criar um componente que envia eventos Pixel dinamicamente."};
       window.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/como-usar-facebook-pixel-no-nullstack":{"title":"Facebook Pixel","html":"<p>De acordo com <a href=\"https://developers.facebook.com/docs/facebook-pixel/\" target=\"_blank\" rel=\"noopener\">developers.facebook.com<\/a>:<\/p>\n<p>&quot;O Facebook Pixel é um trecho de código JavaScript que permite rastrear a atividade do visitante em seu site.&quot;<\/p>\n<p>Você pode aproveitar as vantagens do <a href=\"/pt-br/contexto\">contexto<\/a> e dos <a href=\"/pt-br/contexto-page\">eventos personalizados<\/a> para criar um componente que envia eventos Pixel dinamicamente.<\/p>\n<p>O Facebook Pixel só pode ser chamado depois de <a href=\"/pt-br/ciclo-de-vida-full-stack\"><code>hydrate<\/code><\/a> para garantir que está sendo executado no cliente.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">FacebookPixel<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">hydrate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">,<\/span> id<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token operator\">!<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">f<span class=\"token punctuation\">,<\/span> b<span class=\"token punctuation\">,<\/span> e<span class=\"token punctuation\">,<\/span> v<span class=\"token punctuation\">,<\/span> n<span class=\"token punctuation\">,<\/span> t<span class=\"token punctuation\">,<\/span> s<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>f<span class=\"token punctuation\">.<\/span>fbq<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span><span class=\"token punctuation\">;<\/span>\n      n <span class=\"token operator\">=<\/span> f<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">fbq<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n          n<span class=\"token punctuation\">.<\/span>callMethod <span class=\"token operator\">?<\/span>\n              n<span class=\"token punctuation\">.<\/span><span class=\"token function\">callMethod<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">apply<\/span><span class=\"token punctuation\">(<\/span>n<span class=\"token punctuation\">,<\/span> arguments<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">:<\/span> n<span class=\"token punctuation\">.<\/span>queue<span class=\"token punctuation\">.<\/span><span class=\"token function\">push<\/span><span class=\"token punctuation\">(<\/span>arguments<span class=\"token punctuation\">)<\/span>\n      <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>f<span class=\"token punctuation\">.<\/span>_fbq<span class=\"token punctuation\">)<\/span> f<span class=\"token punctuation\">.<\/span>_fbq <span class=\"token operator\">=<\/span> n<span class=\"token punctuation\">;<\/span>\n      n<span class=\"token punctuation\">.<\/span>push <span class=\"token operator\">=<\/span> n<span class=\"token punctuation\">;<\/span>\n      n<span class=\"token punctuation\">.<\/span>loaded <span class=\"token operator\">=<\/span> <span class=\"token operator\">!<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n      n<span class=\"token punctuation\">.<\/span>version <span class=\"token operator\">=<\/span> <span class=\"token string\">'2.0'<\/span><span class=\"token punctuation\">;<\/span>\n      n<span class=\"token punctuation\">.<\/span>queue <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n      t <span class=\"token operator\">=<\/span> b<span class=\"token punctuation\">.<\/span><span class=\"token function\">createElement<\/span><span class=\"token punctuation\">(<\/span>e<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n      t<span class=\"token punctuation\">.<\/span>async <span class=\"token operator\">=<\/span> <span class=\"token operator\">!<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n      t<span class=\"token punctuation\">.<\/span>src <span class=\"token operator\">=<\/span> v<span class=\"token punctuation\">;<\/span>\n      s <span class=\"token operator\">=<\/span> b<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementsByTagName<\/span><span class=\"token punctuation\">(<\/span>e<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">[<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n      s<span class=\"token punctuation\">.<\/span>parentNode<span class=\"token punctuation\">.<\/span><span class=\"token function\">insertBefore<\/span><span class=\"token punctuation\">(<\/span>t<span class=\"token punctuation\">,<\/span> s<span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">(<\/span>window<span class=\"token punctuation\">,<\/span> document<span class=\"token punctuation\">,<\/span> <span class=\"token string\">'script'<\/span><span class=\"token punctuation\">,<\/span>\n      <span class=\"token string\">'https://connect.facebook.net/en_US/fbevents.js'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token function\">fbq<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'init'<\/span><span class=\"token punctuation\">,<\/span> id<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token function\">fbq<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'track'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'PageView'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    window<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span>page<span class=\"token punctuation\">.<\/span>event<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token function\">fbq<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'init'<\/span><span class=\"token punctuation\">,<\/span> id<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token function\">fbq<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'track'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'PageView'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> FacebookPixel<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> FacebookPixel <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./FacebookPixel'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">FacebookPixel<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>SUBSTITUA_COM_SEU_ID_DO_FACEBOOK_PIXEL<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"usando-um-wrapper\"><a href=\"#usando-um-wrapper\">Usando um Wrapper<\/a><\/h2><p>Alternativamente, você pode instalar <a href=\"https://github.com/Mortaro/nullstack-facebook-pixel\" target=\"_blank\" rel=\"noopener\">nullstack-facebook-pixel<\/a> como uma dependência:<\/p>\n<pre><code class=\"language-sh\">npm install nullstack<span class=\"token operator\">-<\/span>facebook<span class=\"token operator\">-<\/span>pixel\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> FacebookPixel <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack-facebook-pixel'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">FacebookPixel<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>SUBSTITUA_COM_SEU_ID_DO_FACEBOOK_PIXEL<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo Passo<\/a><\/h2><blockquote>\n<p>🎉 <strong>Parabéns<\/strong>. Você concluiu a documentação!<\/p>\n<\/blockquote>\n<p>⚔ Se você deseja ver mais exemplos aqui, <a href=\"https://github.com/nullstack/nullstack/issues\" target=\"_blank\" rel=\"noopener\">abra uma issue no github<\/a>.<\/p>\n","description":"Aproveite as vantagens do [contexto](/pt-br/contexto) e [eventos personalizados](/pt-br/contexto-page) para criar um componente que envia eventos Pixel dinamicamente.","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"como-usar-facebook-pixel-no-nullstack"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/como-usar-facebook-pixel-no-nullstack/index.html b/docs/pt-br/como-usar-facebook-pixel-no-nullstack/index.html
index 5a0c5fb8..1cf18709 100644
--- a/docs/pt-br/como-usar-facebook-pixel-no-nullstack/index.html
+++ b/docs/pt-br/como-usar-facebook-pixel-no-nullstack/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -119,15 +119,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo Passo</a></h2><blockquo
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Facebook Pixel - Nullstack","description":"Aproveite as vantagens do [contexto](/pt-br/contexto) e [eventos personalizados](/pt-br/contexto-page) para criar um componente que envia eventos Pixel dinamicamente."};
       window.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/como-usar-facebook-pixel-no-nullstack":{"title":"Facebook Pixel","html":"<p>De acordo com <a href=\"https://developers.facebook.com/docs/facebook-pixel/\" target=\"_blank\" rel=\"noopener\">developers.facebook.com<\/a>:<\/p>\n<p>&quot;O Facebook Pixel é um trecho de código JavaScript que permite rastrear a atividade do visitante em seu site.&quot;<\/p>\n<p>Você pode aproveitar as vantagens do <a href=\"/pt-br/contexto\">contexto<\/a> e dos <a href=\"/pt-br/contexto-page\">eventos personalizados<\/a> para criar um componente que envia eventos Pixel dinamicamente.<\/p>\n<p>O Facebook Pixel só pode ser chamado depois de <a href=\"/pt-br/ciclo-de-vida-full-stack\"><code>hydrate<\/code><\/a> para garantir que está sendo executado no cliente.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">FacebookPixel<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">hydrate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">,<\/span> id<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token operator\">!<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">f<span class=\"token punctuation\">,<\/span> b<span class=\"token punctuation\">,<\/span> e<span class=\"token punctuation\">,<\/span> v<span class=\"token punctuation\">,<\/span> n<span class=\"token punctuation\">,<\/span> t<span class=\"token punctuation\">,<\/span> s<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>f<span class=\"token punctuation\">.<\/span>fbq<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span><span class=\"token punctuation\">;<\/span>\n      n <span class=\"token operator\">=<\/span> f<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">fbq<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n          n<span class=\"token punctuation\">.<\/span>callMethod <span class=\"token operator\">?<\/span>\n              n<span class=\"token punctuation\">.<\/span><span class=\"token function\">callMethod<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">apply<\/span><span class=\"token punctuation\">(<\/span>n<span class=\"token punctuation\">,<\/span> arguments<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">:<\/span> n<span class=\"token punctuation\">.<\/span>queue<span class=\"token punctuation\">.<\/span><span class=\"token function\">push<\/span><span class=\"token punctuation\">(<\/span>arguments<span class=\"token punctuation\">)<\/span>\n      <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>f<span class=\"token punctuation\">.<\/span>_fbq<span class=\"token punctuation\">)<\/span> f<span class=\"token punctuation\">.<\/span>_fbq <span class=\"token operator\">=<\/span> n<span class=\"token punctuation\">;<\/span>\n      n<span class=\"token punctuation\">.<\/span>push <span class=\"token operator\">=<\/span> n<span class=\"token punctuation\">;<\/span>\n      n<span class=\"token punctuation\">.<\/span>loaded <span class=\"token operator\">=<\/span> <span class=\"token operator\">!<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n      n<span class=\"token punctuation\">.<\/span>version <span class=\"token operator\">=<\/span> <span class=\"token string\">'2.0'<\/span><span class=\"token punctuation\">;<\/span>\n      n<span class=\"token punctuation\">.<\/span>queue <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n      t <span class=\"token operator\">=<\/span> b<span class=\"token punctuation\">.<\/span><span class=\"token function\">createElement<\/span><span class=\"token punctuation\">(<\/span>e<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n      t<span class=\"token punctuation\">.<\/span>async <span class=\"token operator\">=<\/span> <span class=\"token operator\">!<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n      t<span class=\"token punctuation\">.<\/span>src <span class=\"token operator\">=<\/span> v<span class=\"token punctuation\">;<\/span>\n      s <span class=\"token operator\">=<\/span> b<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementsByTagName<\/span><span class=\"token punctuation\">(<\/span>e<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">[<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n      s<span class=\"token punctuation\">.<\/span>parentNode<span class=\"token punctuation\">.<\/span><span class=\"token function\">insertBefore<\/span><span class=\"token punctuation\">(<\/span>t<span class=\"token punctuation\">,<\/span> s<span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">(<\/span>window<span class=\"token punctuation\">,<\/span> document<span class=\"token punctuation\">,<\/span> <span class=\"token string\">'script'<\/span><span class=\"token punctuation\">,<\/span>\n      <span class=\"token string\">'https://connect.facebook.net/en_US/fbevents.js'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token function\">fbq<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'init'<\/span><span class=\"token punctuation\">,<\/span> id<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token function\">fbq<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'track'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'PageView'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    window<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span>page<span class=\"token punctuation\">.<\/span>event<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token function\">fbq<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'init'<\/span><span class=\"token punctuation\">,<\/span> id<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token function\">fbq<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'track'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'PageView'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> FacebookPixel<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> FacebookPixel <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./FacebookPixel'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">FacebookPixel<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>SUBSTITUA_COM_SEU_ID_DO_FACEBOOK_PIXEL<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"usando-um-wrapper\"><a href=\"#usando-um-wrapper\">Usando um Wrapper<\/a><\/h2><p>Alternativamente, você pode instalar <a href=\"https://github.com/Mortaro/nullstack-facebook-pixel\" target=\"_blank\" rel=\"noopener\">nullstack-facebook-pixel<\/a> como uma dependência:<\/p>\n<pre><code class=\"language-sh\">npm install nullstack<span class=\"token operator\">-<\/span>facebook<span class=\"token operator\">-<\/span>pixel\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> FacebookPixel <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack-facebook-pixel'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">FacebookPixel<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>SUBSTITUA_COM_SEU_ID_DO_FACEBOOK_PIXEL<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo Passo<\/a><\/h2><blockquote>\n<p>🎉 <strong>Parabéns<\/strong>. Você concluiu a documentação!<\/p>\n<\/blockquote>\n<p>⚔ Se você deseja ver mais exemplos aqui, <a href=\"https://github.com/nullstack/nullstack/issues\" target=\"_blank\" rel=\"noopener\">abra uma issue no github<\/a>.<\/p>\n","description":"Aproveite as vantagens do [contexto](/pt-br/contexto) e [eventos personalizados](/pt-br/contexto-page) para criar um componente que envia eventos Pixel dinamicamente.","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"como-usar-facebook-pixel-no-nullstack"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/como-usar-google-analytics-no-nullstack.html b/docs/pt-br/como-usar-google-analytics-no-nullstack.html
index b19ff666..45b5f0f9 100644
--- a/docs/pt-br/como-usar-google-analytics-no-nullstack.html
+++ b/docs/pt-br/como-usar-google-analytics-no-nullstack.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -117,15 +117,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo Passo</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Google Analytics - Nullstack","description":"Aproveite as vantagens do contexto e dos eventos personalizados para criar um componente que envia eventos GTAG dinamicamente."};
       window.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/como-usar-google-analytics-no-nullstack":{"title":"Google Analytics","html":"<p>De acordo com <a href=\"https://analytics.google.com\" target=\"_blank\" rel=\"noopener\">analytics.google.com<\/a>:<\/p>\n<p>&quot;O Google Analytics permite que você avalie o ROI de publicidade, bem como rastreie o Flash, vídeo e mídias sociais em sites e aplicativos.&quot;<\/p>\n<p>Você pode aproveitar as vantagens do <a href=\"/pt-br/contexto\">contexto<\/a> e dos <a href=\"/pt-br/contexto-page\">eventos personalizados<\/a> para criar um componente que envia eventos GTAG dinamicamente.<\/p>\n<p>O GTAG só pode ser chamado depois de <a href=\"/pt-br/ciclo-de-vida-full-stack\"><code>hydrate<\/code><\/a> para garantir que está sendo executado no cliente.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">GoogleAnalytics<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">hydrate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>router<span class=\"token punctuation\">,<\/span> page<span class=\"token punctuation\">,<\/span> id<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    window<span class=\"token punctuation\">.<\/span>dataLayer <span class=\"token operator\">=<\/span> window<span class=\"token punctuation\">.<\/span>dataLayer <span class=\"token operator\">||<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">function<\/span> <span class=\"token function\">gtag<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">{<\/span>\n      dataLayer<span class=\"token punctuation\">.<\/span><span class=\"token function\">push<\/span><span class=\"token punctuation\">(<\/span>arguments<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n    <span class=\"token function\">gtag<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'js'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Date<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token function\">gtag<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'config'<\/span><span class=\"token punctuation\">,<\/span> id<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span>\n      page_title<span class=\"token operator\">:<\/span> page<span class=\"token punctuation\">.<\/span>title<span class=\"token punctuation\">,<\/span>\n      page_path<span class=\"token operator\">:<\/span> router<span class=\"token punctuation\">.<\/span>url\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    window<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span>page<span class=\"token punctuation\">.<\/span>event<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token function\">gtag<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'event'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'page_view'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span>\n        page_title<span class=\"token operator\">:<\/span> page<span class=\"token punctuation\">.<\/span>title<span class=\"token punctuation\">,<\/span>\n        page_path<span class=\"token operator\">:<\/span> router<span class=\"token punctuation\">.<\/span>url\n      <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>id<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script<\/span> \n        <span class=\"token attr-name\">async<\/span>\n        <span class=\"token attr-name\">src<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">https://www.googletagmanager.com/gtag/js?id=<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>id<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">}<\/span><\/span>\n      <span class=\"token punctuation\">/><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> GoogleAnalytics<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> GoogleAnalytics <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./GoogleAnalytics'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">GoogleAnalytics<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>SUBSTITUA_COM_SEU_ID_DO_GOOGLE_ANALYTICS<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"usando-um-wrapper\"><a href=\"#usando-um-wrapper\">Usando um Wrapper<\/a><\/h2><p>Alternativamente, você pode instalar o <a href=\"https://github.com/Mortaro/nullstack-google-analytics\" target=\"_blank\" rel=\"noopener\">nullstack-google-analytics<\/a> como uma dependência:<\/p>\n<pre><code class=\"language-sh\">npm install nullstack<span class=\"token operator\">-<\/span>google<span class=\"token operator\">-<\/span>analytics\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> GoogleAnalytics <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack-google-analytics'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">GoogleAnalytics<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>SUBSTITUA_COM_SEU_ID_DO_GOOGLE_ANALYTICS<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo Passo<\/a><\/h2><p>⚔ Aprenda <a href=\"/pt-br/como-usar-facebook-pixel-no-nullstack\">como usar o Facebook Pixel com o Nullstack<\/a>.<\/p>\n","description":"Aproveite as vantagens do contexto e dos eventos personalizados para criar um componente que envia eventos GTAG dinamicamente.","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"como-usar-google-analytics-no-nullstack"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/como-usar-google-analytics-no-nullstack/index.html b/docs/pt-br/como-usar-google-analytics-no-nullstack/index.html
index b19ff666..45b5f0f9 100644
--- a/docs/pt-br/como-usar-google-analytics-no-nullstack/index.html
+++ b/docs/pt-br/como-usar-google-analytics-no-nullstack/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -117,15 +117,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo Passo</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Google Analytics - Nullstack","description":"Aproveite as vantagens do contexto e dos eventos personalizados para criar um componente que envia eventos GTAG dinamicamente."};
       window.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/como-usar-google-analytics-no-nullstack":{"title":"Google Analytics","html":"<p>De acordo com <a href=\"https://analytics.google.com\" target=\"_blank\" rel=\"noopener\">analytics.google.com<\/a>:<\/p>\n<p>&quot;O Google Analytics permite que você avalie o ROI de publicidade, bem como rastreie o Flash, vídeo e mídias sociais em sites e aplicativos.&quot;<\/p>\n<p>Você pode aproveitar as vantagens do <a href=\"/pt-br/contexto\">contexto<\/a> e dos <a href=\"/pt-br/contexto-page\">eventos personalizados<\/a> para criar um componente que envia eventos GTAG dinamicamente.<\/p>\n<p>O GTAG só pode ser chamado depois de <a href=\"/pt-br/ciclo-de-vida-full-stack\"><code>hydrate<\/code><\/a> para garantir que está sendo executado no cliente.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">GoogleAnalytics<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">hydrate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>router<span class=\"token punctuation\">,<\/span> page<span class=\"token punctuation\">,<\/span> id<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    window<span class=\"token punctuation\">.<\/span>dataLayer <span class=\"token operator\">=<\/span> window<span class=\"token punctuation\">.<\/span>dataLayer <span class=\"token operator\">||<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">function<\/span> <span class=\"token function\">gtag<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">{<\/span>\n      dataLayer<span class=\"token punctuation\">.<\/span><span class=\"token function\">push<\/span><span class=\"token punctuation\">(<\/span>arguments<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n    <span class=\"token function\">gtag<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'js'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Date<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token function\">gtag<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'config'<\/span><span class=\"token punctuation\">,<\/span> id<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span>\n      page_title<span class=\"token operator\">:<\/span> page<span class=\"token punctuation\">.<\/span>title<span class=\"token punctuation\">,<\/span>\n      page_path<span class=\"token operator\">:<\/span> router<span class=\"token punctuation\">.<\/span>url\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    window<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span>page<span class=\"token punctuation\">.<\/span>event<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token function\">gtag<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'event'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'page_view'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span>\n        page_title<span class=\"token operator\">:<\/span> page<span class=\"token punctuation\">.<\/span>title<span class=\"token punctuation\">,<\/span>\n        page_path<span class=\"token operator\">:<\/span> router<span class=\"token punctuation\">.<\/span>url\n      <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>id<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script<\/span> \n        <span class=\"token attr-name\">async<\/span>\n        <span class=\"token attr-name\">src<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">https://www.googletagmanager.com/gtag/js?id=<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>id<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">}<\/span><\/span>\n      <span class=\"token punctuation\">/><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> GoogleAnalytics<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> GoogleAnalytics <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./GoogleAnalytics'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">GoogleAnalytics<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>SUBSTITUA_COM_SEU_ID_DO_GOOGLE_ANALYTICS<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"usando-um-wrapper\"><a href=\"#usando-um-wrapper\">Usando um Wrapper<\/a><\/h2><p>Alternativamente, você pode instalar o <a href=\"https://github.com/Mortaro/nullstack-google-analytics\" target=\"_blank\" rel=\"noopener\">nullstack-google-analytics<\/a> como uma dependência:<\/p>\n<pre><code class=\"language-sh\">npm install nullstack<span class=\"token operator\">-<\/span>google<span class=\"token operator\">-<\/span>analytics\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> GoogleAnalytics <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack-google-analytics'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">GoogleAnalytics<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>SUBSTITUA_COM_SEU_ID_DO_GOOGLE_ANALYTICS<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo Passo<\/a><\/h2><p>⚔ Aprenda <a href=\"/pt-br/como-usar-facebook-pixel-no-nullstack\">como usar o Facebook Pixel com o Nullstack<\/a>.<\/p>\n","description":"Aproveite as vantagens do contexto e dos eventos personalizados para criar um componente que envia eventos GTAG dinamicamente.","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"como-usar-google-analytics-no-nullstack"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/como-usar-mongodb-com-nullstack.html b/docs/pt-br/como-usar-mongodb-com-nullstack.html
index 5de94181..8760010f 100644
--- a/docs/pt-br/como-usar-mongodb-com-nullstack.html
+++ b/docs/pt-br/como-usar-mongodb-com-nullstack.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -87,15 +87,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo Passo</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Como usar MongoDB - Nullstack","description":"Você pode usar qualquer banco de dados com Nullstack, mas a integração JavaScript e flexibilidade do MongoDB parece especialmente boa com aplicativos Nullstack"};
       window.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/como-usar-mongodb-com-nullstack":{"title":"Como usar MongoDB","html":"<p>De acordo com <a href=\"https://www.mongodb.com\" target=\"_blank\" rel=\"noopener\">mongodb.com<\/a>:<\/p>\n<p>&quot;O MongoDB é um banco de dados distribuído de propósito geral, baseado em documentos, criado para desenvolvedores de aplicativos modernos e para a era da nuvem.&quot;<\/p>\n<p>Você pode usar qualquer banco de dados com Nullstack, mas a integração JavaScript e flexibilidade do MongoDB parece especialmente boa com aplicativos Nullstack.<\/p>\n<p>Instale o driver MongoDB do npm:<\/p>\n<pre><code class=\"language-sh\">npm install mongodb\n<\/code><\/pre>\n<p>Configure as credenciais do banco de dados usando <a href=\"/pt-br/contexto-secrets\"><code>secrets<\/code><\/a> em seu arquivo <code>.env<\/code>.<\/p>\n<pre><code><span class=\"token constant\">NULLSTACK_SECRETS_MONGODB_URI<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"mongodb://localhost:27017/dbname\"<\/span>\n<span class=\"token constant\">NULLSTACK_SECRETS_DATABASE_NAME<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"dbname\"<\/span>\n<\/code><\/pre>\n<p>O último passo é simplesmente atribuir a conexão do banco de dados ao contexto do servidor.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span>MongoClient<span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'mongodb'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">startDatabase<\/span><span class=\"token punctuation\">(<\/span>context<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">startDatabase<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span>secrets<span class=\"token punctuation\">}<\/span> <span class=\"token operator\">=<\/span> context<span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> databaseClient <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">MongoClient<\/span><span class=\"token punctuation\">(<\/span>secrets<span class=\"token punctuation\">.<\/span>databaseUri<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">await<\/span> databaseClient<span class=\"token punctuation\">.<\/span><span class=\"token function\">connect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    context<span class=\"token punctuation\">.<\/span>database <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> databaseClient<span class=\"token punctuation\">.<\/span><span class=\"token function\">db<\/span><span class=\"token punctuation\">(<\/span>secrets<span class=\"token punctuation\">.<\/span>databaseName<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>O exemplo acima tornará a chave <code>database<\/code> disponível para todas as funções do servidor.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">BooksList<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  books <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">getBooks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>database<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">await<\/span> database<span class=\"token punctuation\">.<\/span><span class=\"token function\">collection<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'books'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">find<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">toArray<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>books <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getBooks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> BooksList<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo Passo<\/a><\/h2><p>⚔ Aprenda <a href=\"/pt-br/como-usar-google-analytics-no-nullstack\">como usar Google Analytics no Nullstack<\/a>.<\/p>\n","description":"Você pode usar qualquer banco de dados com Nullstack, mas a integração JavaScript e flexibilidade do MongoDB parece especialmente boa com aplicativos Nullstack","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"como-usar-mongodb-com-nullstack"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/como-usar-mongodb-com-nullstack/index.html b/docs/pt-br/como-usar-mongodb-com-nullstack/index.html
index 5de94181..8760010f 100644
--- a/docs/pt-br/como-usar-mongodb-com-nullstack/index.html
+++ b/docs/pt-br/como-usar-mongodb-com-nullstack/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -87,15 +87,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo Passo</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Como usar MongoDB - Nullstack","description":"Você pode usar qualquer banco de dados com Nullstack, mas a integração JavaScript e flexibilidade do MongoDB parece especialmente boa com aplicativos Nullstack"};
       window.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/como-usar-mongodb-com-nullstack":{"title":"Como usar MongoDB","html":"<p>De acordo com <a href=\"https://www.mongodb.com\" target=\"_blank\" rel=\"noopener\">mongodb.com<\/a>:<\/p>\n<p>&quot;O MongoDB é um banco de dados distribuído de propósito geral, baseado em documentos, criado para desenvolvedores de aplicativos modernos e para a era da nuvem.&quot;<\/p>\n<p>Você pode usar qualquer banco de dados com Nullstack, mas a integração JavaScript e flexibilidade do MongoDB parece especialmente boa com aplicativos Nullstack.<\/p>\n<p>Instale o driver MongoDB do npm:<\/p>\n<pre><code class=\"language-sh\">npm install mongodb\n<\/code><\/pre>\n<p>Configure as credenciais do banco de dados usando <a href=\"/pt-br/contexto-secrets\"><code>secrets<\/code><\/a> em seu arquivo <code>.env<\/code>.<\/p>\n<pre><code><span class=\"token constant\">NULLSTACK_SECRETS_MONGODB_URI<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"mongodb://localhost:27017/dbname\"<\/span>\n<span class=\"token constant\">NULLSTACK_SECRETS_DATABASE_NAME<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"dbname\"<\/span>\n<\/code><\/pre>\n<p>O último passo é simplesmente atribuir a conexão do banco de dados ao contexto do servidor.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span>MongoClient<span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'mongodb'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">startDatabase<\/span><span class=\"token punctuation\">(<\/span>context<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">startDatabase<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span>secrets<span class=\"token punctuation\">}<\/span> <span class=\"token operator\">=<\/span> context<span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> databaseClient <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">MongoClient<\/span><span class=\"token punctuation\">(<\/span>secrets<span class=\"token punctuation\">.<\/span>databaseUri<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">await<\/span> databaseClient<span class=\"token punctuation\">.<\/span><span class=\"token function\">connect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    context<span class=\"token punctuation\">.<\/span>database <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> databaseClient<span class=\"token punctuation\">.<\/span><span class=\"token function\">db<\/span><span class=\"token punctuation\">(<\/span>secrets<span class=\"token punctuation\">.<\/span>databaseName<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>O exemplo acima tornará a chave <code>database<\/code> disponível para todas as funções do servidor.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">BooksList<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  books <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">getBooks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>database<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">await<\/span> database<span class=\"token punctuation\">.<\/span><span class=\"token function\">collection<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'books'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">find<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">toArray<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>books <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getBooks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> BooksList<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo Passo<\/a><\/h2><p>⚔ Aprenda <a href=\"/pt-br/como-usar-google-analytics-no-nullstack\">como usar Google Analytics no Nullstack<\/a>.<\/p>\n","description":"Você pode usar qualquer banco de dados com Nullstack, mas a integração JavaScript e flexibilidade do MongoDB parece especialmente boa com aplicativos Nullstack","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"como-usar-mongodb-com-nullstack"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/componentes-com-estado.html b/docs/pt-br/componentes-com-estado.html
index a06647c1..2382e41b 100644
--- a/docs/pt-br/componentes-com-estado.html
+++ b/docs/pt-br/componentes-com-estado.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -161,15 +161,15 @@ <h2 id="pr-ximos-passos"><a href="#pr-ximos-passos">Próximos passos</a></h2><p>
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Componentes com estado - Nullstack","description":"Um framework web full-stack produtivo não deve forçar você a pensar sobre detalhes de estrutura"};
       window.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-com-estado":{"title":"Componentes com estado","html":"<p>Um framework web full-stack produtivo não deve forçar você a pensar sobre detalhes de estrutura.<\/p>\n<p>Nullstack assume o controle de suas subclasses e gera um proxy para cada instância.<\/p>\n<p>Quando você invoca qualquer coisa em sua classe, você está na verdade dizendo ao Nullstack o que fazer com o ambiente nos bastidores.<\/p>\n<p>Isso permite que você use operações de JavaScript vanilla como atribuir a uma variável e ver o reflexo no dom.<\/p>\n<h2 id=\"mutabilidade\"><a href=\"#mutabilidade\">Mutabilidade<\/a><\/h2><p>Você pode modificar variáveis ​​de instância para atualizar o estado do seu aplicativo.<\/p>\n<p>As funções são vinculadas automaticamente ao proxy da instância e podem ser passadas como referência para eventos.<\/p>\n<p>Os eventos são declarados como atributos HTML normais.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"nullstack\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">increment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token operator\">++<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>increment<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 As atualizações são feitas em lotes, geralmente enquanto aguardam chamadas assíncronas, portanto, fazer várias atribuições não tem custos de desempenho!<\/p>\n<\/blockquote>\n<h2 id=\"objeto-de-eventos\"><a href=\"#objeto-de-eventos\">Objeto de Eventos<\/a><\/h2><p>Você pode criar atalho em eventos que são simples atribuições passando um objeto para o evento.<\/p>\n<p>Cada chave do objeto será atribuída à instância.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"nullstack\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span> count<span class=\"token operator\">:<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">+<\/span> <span class=\"token number\">1<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"fonte-de-evento\"><a href=\"#fonte-de-evento\">Fonte de Evento<\/a><\/h2><p>Por padrão, os eventos referem-se a <code>this<\/code> quando você passa um objeto.<\/p>\n<p>Você pode usar o atributo <code>source<\/code> para definir qual objeto receberá as atribuições.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"nullstack\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Paginator<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> params <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">source<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span> page<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        Primeira <span class=\"token constant\">P<\/span>ágina\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Paginator<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Aprenda mais sobre a <a href=\"/pt-br/rotas-e-parametros\">chave <code>params<\/code> do contexto<\/a>.<\/p>\n<\/blockquote>\n<blockquote>\n<p>💡 Se você não declarar uma fonte para o evento, o Nullstack injetará <code>source={this}<\/code> no tempo de transpilação para pular completamente o processo de pesquisa em tempo de execução!<\/p>\n<\/blockquote>\n<h2 id=\"contexto-de-evento\"><a href=\"#contexto-de-evento\">Contexto de Evento<\/a><\/h2><p>Os atributos do elemento-alvo do evento serão mesclados ao <code>context<\/code> da instância e podem ser desestruturados na assinatura da função.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"nullstack\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">increment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> delta <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">+=<\/span> delta<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>increment<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">delta<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 Qualquer atributo com valor primitivo será adicionado ao DOM.<\/p>\n<\/blockquote>\n<blockquote>\n<p>✨ Considere usar <a href=\"/pt-br/contexto-data\">atributos <code>data<\/code><\/a> para tornar seu HTML válido.<\/p>\n<\/blockquote>\n<h2 id=\"evento-original\"><a href=\"#evento-original\">Evento Original<\/a><\/h2><p>O comportamento padrão do navegador é impedido por padrão.<\/p>\n<p>Você pode desativar isso declarando um atributo <code>default<\/code> para o elemento de evento.<\/p>\n<p>Uma referência ao evento original é sempre mesclada com o contexto da função.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"nullstack\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Form<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token function\">submit<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> event <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    event<span class=\"token punctuation\">.<\/span><span class=\"token function\">preventDefault<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>form<\/span> <span class=\"token attr-name\">onsubmit<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>submit<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">default<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span> Enviar <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Form<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"pr-ximos-passos\"><a href=\"#pr-ximos-passos\">Próximos passos<\/a><\/h2><p>⚔ Aprenda sobre o <a href=\"/pt-br/ciclo-de-vida-full-stack\">ciclo da vida full-stack<\/a>.<\/p>\n","description":"Um framework web full-stack produtivo não deve forçar você a pensar sobre detalhes de estrutura","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"componentes-com-estado"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/componentes-com-estado/index.html b/docs/pt-br/componentes-com-estado/index.html
index a06647c1..2382e41b 100644
--- a/docs/pt-br/componentes-com-estado/index.html
+++ b/docs/pt-br/componentes-com-estado/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -161,15 +161,15 @@ <h2 id="pr-ximos-passos"><a href="#pr-ximos-passos">Próximos passos</a></h2><p>
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Componentes com estado - Nullstack","description":"Um framework web full-stack produtivo não deve forçar você a pensar sobre detalhes de estrutura"};
       window.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-com-estado":{"title":"Componentes com estado","html":"<p>Um framework web full-stack produtivo não deve forçar você a pensar sobre detalhes de estrutura.<\/p>\n<p>Nullstack assume o controle de suas subclasses e gera um proxy para cada instância.<\/p>\n<p>Quando você invoca qualquer coisa em sua classe, você está na verdade dizendo ao Nullstack o que fazer com o ambiente nos bastidores.<\/p>\n<p>Isso permite que você use operações de JavaScript vanilla como atribuir a uma variável e ver o reflexo no dom.<\/p>\n<h2 id=\"mutabilidade\"><a href=\"#mutabilidade\">Mutabilidade<\/a><\/h2><p>Você pode modificar variáveis ​​de instância para atualizar o estado do seu aplicativo.<\/p>\n<p>As funções são vinculadas automaticamente ao proxy da instância e podem ser passadas como referência para eventos.<\/p>\n<p>Os eventos são declarados como atributos HTML normais.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"nullstack\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">increment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token operator\">++<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>increment<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 As atualizações são feitas em lotes, geralmente enquanto aguardam chamadas assíncronas, portanto, fazer várias atribuições não tem custos de desempenho!<\/p>\n<\/blockquote>\n<h2 id=\"objeto-de-eventos\"><a href=\"#objeto-de-eventos\">Objeto de Eventos<\/a><\/h2><p>Você pode criar atalho em eventos que são simples atribuições passando um objeto para o evento.<\/p>\n<p>Cada chave do objeto será atribuída à instância.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"nullstack\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span> count<span class=\"token operator\">:<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">+<\/span> <span class=\"token number\">1<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"fonte-de-evento\"><a href=\"#fonte-de-evento\">Fonte de Evento<\/a><\/h2><p>Por padrão, os eventos referem-se a <code>this<\/code> quando você passa um objeto.<\/p>\n<p>Você pode usar o atributo <code>source<\/code> para definir qual objeto receberá as atribuições.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"nullstack\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Paginator<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> params <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">source<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span> page<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        Primeira <span class=\"token constant\">P<\/span>ágina\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Paginator<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Aprenda mais sobre a <a href=\"/pt-br/rotas-e-parametros\">chave <code>params<\/code> do contexto<\/a>.<\/p>\n<\/blockquote>\n<blockquote>\n<p>💡 Se você não declarar uma fonte para o evento, o Nullstack injetará <code>source={this}<\/code> no tempo de transpilação para pular completamente o processo de pesquisa em tempo de execução!<\/p>\n<\/blockquote>\n<h2 id=\"contexto-de-evento\"><a href=\"#contexto-de-evento\">Contexto de Evento<\/a><\/h2><p>Os atributos do elemento-alvo do evento serão mesclados ao <code>context<\/code> da instância e podem ser desestruturados na assinatura da função.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"nullstack\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">increment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> delta <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">+=<\/span> delta<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>increment<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">delta<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 Qualquer atributo com valor primitivo será adicionado ao DOM.<\/p>\n<\/blockquote>\n<blockquote>\n<p>✨ Considere usar <a href=\"/pt-br/contexto-data\">atributos <code>data<\/code><\/a> para tornar seu HTML válido.<\/p>\n<\/blockquote>\n<h2 id=\"evento-original\"><a href=\"#evento-original\">Evento Original<\/a><\/h2><p>O comportamento padrão do navegador é impedido por padrão.<\/p>\n<p>Você pode desativar isso declarando um atributo <code>default<\/code> para o elemento de evento.<\/p>\n<p>Uma referência ao evento original é sempre mesclada com o contexto da função.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"nullstack\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Form<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token function\">submit<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> event <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    event<span class=\"token punctuation\">.<\/span><span class=\"token function\">preventDefault<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>form<\/span> <span class=\"token attr-name\">onsubmit<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>submit<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">default<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span> Enviar <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Form<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"pr-ximos-passos\"><a href=\"#pr-ximos-passos\">Próximos passos<\/a><\/h2><p>⚔ Aprenda sobre o <a href=\"/pt-br/ciclo-de-vida-full-stack\">ciclo da vida full-stack<\/a>.<\/p>\n","description":"Um framework web full-stack produtivo não deve forçar você a pensar sobre detalhes de estrutura","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"componentes-com-estado"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/componentes-funcionais.html b/docs/pt-br/componentes-funcionais.html
index 35a6c6be..2e589a19 100644
--- a/docs/pt-br/componentes-funcionais.html
+++ b/docs/pt-br/componentes-funcionais.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -138,15 +138,15 @@ <h2 id="pr-xima-etapa"><a href="#pr-xima-etapa">Próxima Etapa</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Componentes Funcionais - Nullstack","description":"Componentes Funcionais são simples funções puras que podem modificar o contexto e não tem estado próprio"};
       window.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-funcionais":{"title":"Componentes Funcionais","html":"<p>Desde a v0.9.21, o Nullstack tem a simplicidade de componentes funcionais puros pronta para uso.<\/p>\n<p>Este segue as especificações de <a href=\"/pt-br/componentes-renderizaveis\">componentes renderizáveis<\/a>, mas com mais ênfase no <strong>renderizável<\/strong>.<\/p>\n<p>Usando funções puras, você pode escrever componentes focados na renderização da seguinte maneira:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">AnonComponent<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">html<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>html<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>id<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">NamedComponent<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">html<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>html<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>id<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">ArrowComponent<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">html<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>html<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>id<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> <span class=\"token punctuation\">{<\/span>\n  AnonComponent<span class=\"token punctuation\">,<\/span>\n  NamedComponent<span class=\"token punctuation\">,<\/span>\n  ArrowComponent\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>E exportado assim, seu uso seria:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Functionals <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Functionals'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> html <span class=\"token operator\">=<\/span> <span class=\"token string\">\"&lt;p>texto&lt;/p>\"<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Functionals.AnonComponent<\/span><\/span> <span class=\"token attr-name\">html<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>html<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>1<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Functionals.NamedComponent<\/span><\/span> <span class=\"token attr-name\">html<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>html<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>2<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Functionals.ArrowComponent<\/span><\/span> <span class=\"token attr-name\">html<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>html<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>3<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Então, o resultado da renderização seria diretamente semelhante a:<\/p>\n<pre><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>1<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>texto<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>2<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>texto<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>3<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>texto<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<h2 id=\"vinculando-valores-do-contexto\"><a href=\"#vinculando-valores-do-contexto\">Vinculando Valores do Contexto<\/a><\/h2><p>Mesmo não tendo estado próprio, os componentes funcionais do Nullstack podem vincular e modificar valores do <a href=\"/pt-br/contexto\"><code>context<\/code><\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> BindPureComponent <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Functionals'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">BindPureComponent<\/span><\/span><span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Registrando <code>counter<\/code> no <code>context<\/code> como no componente acima, podemos ler e modificar esse dado no <strong>BindPureComponent<\/strong> da seguinte maneira:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">BindPureComponent<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>number<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span>\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<p>Ou, até mesmo usar funções locais executadas por eventos para fazer essa modificação:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">EventPureComponent<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">const<\/span> multiple <span class=\"token operator\">=<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token keyword\">function<\/span> <span class=\"token function\">multiply<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">*=<\/span> multiple<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>multiply<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>Multiply<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span>\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 Com sua versatilidade e simplicidade, os componentes funcionais são perfeitos para bibliotecas de componentes sem estado<\/p>\n<\/blockquote>\n<h2 id=\"pr-xima-etapa\"><a href=\"#pr-xima-etapa\">Próxima Etapa<\/a><\/h2><p>⚔ Aprenda sobre a <a href=\"/pt-br/contexto-data\">chave <code>data<\/code> do contexto<\/a>.<\/p>\n","description":"Componentes Funcionais são simples funções puras que podem modificar o contexto e não tem estado próprio","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"componentes-funcionais"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/componentes-funcionais/index.html b/docs/pt-br/componentes-funcionais/index.html
index 35a6c6be..2e589a19 100644
--- a/docs/pt-br/componentes-funcionais/index.html
+++ b/docs/pt-br/componentes-funcionais/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -138,15 +138,15 @@ <h2 id="pr-xima-etapa"><a href="#pr-xima-etapa">Próxima Etapa</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Componentes Funcionais - Nullstack","description":"Componentes Funcionais são simples funções puras que podem modificar o contexto e não tem estado próprio"};
       window.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-funcionais":{"title":"Componentes Funcionais","html":"<p>Desde a v0.9.21, o Nullstack tem a simplicidade de componentes funcionais puros pronta para uso.<\/p>\n<p>Este segue as especificações de <a href=\"/pt-br/componentes-renderizaveis\">componentes renderizáveis<\/a>, mas com mais ênfase no <strong>renderizável<\/strong>.<\/p>\n<p>Usando funções puras, você pode escrever componentes focados na renderização da seguinte maneira:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">AnonComponent<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">html<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>html<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>id<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">NamedComponent<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">html<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>html<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>id<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">ArrowComponent<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">html<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>html<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>id<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> <span class=\"token punctuation\">{<\/span>\n  AnonComponent<span class=\"token punctuation\">,<\/span>\n  NamedComponent<span class=\"token punctuation\">,<\/span>\n  ArrowComponent\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>E exportado assim, seu uso seria:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Functionals <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Functionals'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> html <span class=\"token operator\">=<\/span> <span class=\"token string\">\"&lt;p>texto&lt;/p>\"<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Functionals.AnonComponent<\/span><\/span> <span class=\"token attr-name\">html<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>html<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>1<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Functionals.NamedComponent<\/span><\/span> <span class=\"token attr-name\">html<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>html<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>2<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Functionals.ArrowComponent<\/span><\/span> <span class=\"token attr-name\">html<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>html<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>3<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Então, o resultado da renderização seria diretamente semelhante a:<\/p>\n<pre><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>1<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>texto<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>2<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>texto<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>3<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>texto<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<h2 id=\"vinculando-valores-do-contexto\"><a href=\"#vinculando-valores-do-contexto\">Vinculando Valores do Contexto<\/a><\/h2><p>Mesmo não tendo estado próprio, os componentes funcionais do Nullstack podem vincular e modificar valores do <a href=\"/pt-br/contexto\"><code>context<\/code><\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> BindPureComponent <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Functionals'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">BindPureComponent<\/span><\/span><span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Registrando <code>counter<\/code> no <code>context<\/code> como no componente acima, podemos ler e modificar esse dado no <strong>BindPureComponent<\/strong> da seguinte maneira:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">BindPureComponent<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>number<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span>\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<p>Ou, até mesmo usar funções locais executadas por eventos para fazer essa modificação:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">EventPureComponent<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">const<\/span> multiple <span class=\"token operator\">=<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token keyword\">function<\/span> <span class=\"token function\">multiply<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">*=<\/span> multiple<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>multiply<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>Multiply<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span>\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 Com sua versatilidade e simplicidade, os componentes funcionais são perfeitos para bibliotecas de componentes sem estado<\/p>\n<\/blockquote>\n<h2 id=\"pr-xima-etapa\"><a href=\"#pr-xima-etapa\">Próxima Etapa<\/a><\/h2><p>⚔ Aprenda sobre a <a href=\"/pt-br/contexto-data\">chave <code>data<\/code> do contexto<\/a>.<\/p>\n","description":"Componentes Funcionais são simples funções puras que podem modificar o contexto e não tem estado próprio","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"componentes-funcionais"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/componentes-renderizaveis.html b/docs/pt-br/componentes-renderizaveis.html
index 4affd149..b0c96d3f 100644
--- a/docs/pt-br/componentes-renderizaveis.html
+++ b/docs/pt-br/componentes-renderizaveis.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -307,15 +307,15 @@ <h2 id="pr-xima-etapa"><a href="#pr-xima-etapa">Próxima Etapa</a></h2><p>⚔ Ad
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Componentes renderizáveis - Nullstack","description":"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"};
       window.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-renderizaveis":{"title":"Componentes renderizáveis","html":"<p>O componente mais simples que você pode fazer é um componente renderizável, com exceção de <a href=\"/pt-br/componentes-funcionais\">componentes funcionais<\/a>.<\/p>\n<p>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.<\/p>\n<p>Crie um arquivo em sua pasta src com o nome de seu componente e com a <a href=\"/pt-br/extensão-de-arquivo-njs\">extensão <code>.njs<\/code><\/a>.<\/p>\n<p>Neste exemplo, vai ser chamado <code>helloworld.njs<\/code>.<\/p>\n<p>Tudo o que você precisa fazer é importar <code>nullstack<\/code> ou qualquer uma das suas subclasses e estender sua classe dele, definir um método de instância chamado <code>render<\/code> que retorna qualquer JSX e exporte o componente.<\/p>\n<blockquote>\n<p>✨ Instale a extensão oficial <a href=\"https://marketplace.visualstudio.com/items?itemName=ChristianMortaro.vscode-nullstack\" target=\"_blank\" rel=\"noopener\">Nullstack para VSCode<\/a> para gerar classes com snippets.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"nullstack\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">HelloWorld<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span> Olá Mundo <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> HelloWorld<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>O código acima apenas declara o componente, você ainda tem que usá-lo.<\/p>\n<p>Importando o componente em seu aplicativo, temos a capacidade de usar uma nova tag em sua renderização.<\/p>\n<p>Esta tag será substituída pelo que você retornou no método <code>render<\/code> do componente.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"nullstack\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">import<\/span> <span class=\"token string\">\"./Application.scss\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">import<\/span> HelloWorld <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"./HelloWorld\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> page <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h1<\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">.<\/span>title<span class=\"token punctuation\">}<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>h1<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a<\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>https://nullstack.app/documentation<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">target<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>_blank<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n          Read the documentation\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>a<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">HelloWorld<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"usando-atributos-html-\"><a href=\"#usando-atributos-html-\">Usando atributos HTML.<\/a><\/h2><p>Nullstack JSX se desvia um pouco das especificações.<\/p>\n<p>Você pode usar os atributos HTML normais como <code>class<\/code> e <code>for<\/code> diretamente.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>label<\/span> <span class=\"token attr-name\">for<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>input<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>nao-me-rotule<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Eu sou um rótulo <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>label<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<h2 id=\"componentes-headless\"><a href=\"#componentes-headless\">Componentes Headless<\/a><\/h2><p>Se você deseja pular a renderização do componente, você pode simplesmente retornar <code>false<\/code> da renderização.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"nullstack\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Headless<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Headless<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Isso alocará o espaço no DOM para quando você decidir renderizar a marcação lá.<\/p>\n<p>Isso também é útil para renderização condicional.<\/p>\n<p>Se tudo o que você deseja fazer é gerar um componente invisível, você pode ignorar a definição do método de renderização.<\/p>\n<h2 id=\"componentes-internos\"><a href=\"#componentes-internos\">Componentes internos<\/a><\/h2><p>Em vez de criar um novo componente apenas para organizar a divisão de código, você pode criar um componente interno.<\/p>\n<p><strong>Componentes internos<\/strong> são quaisquer métodos cujo nome seja iniciado com <code>render<\/code> seguido por um caractere maiúsculo.<\/p>\n<p>Componentes internos compartilham a mesma instância e escopo, pois o componente principal, portanto, são muito convenientes para evitar problemas como adereços de perfuração.<\/p>\n<p>Para invocar o componente interno, use uma tag JSX com o nome do método sem o prefixo <code>render<\/code>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"nullstack\"<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Post<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">renderArticle<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>article<\/span><span class=\"token punctuation\">><\/span><\/span> Conteú<span class=\"token keyword\">do<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>article<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">renderAside<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>aside<\/span><span class=\"token punctuation\">><\/span><\/span> Conteú<span class=\"token keyword\">do<\/span> Relacionado <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>aside<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Article<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Aside<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> HelloWorld<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 Nullstack injetará uma referência constante à função no tempo de transpilação, a fim de ignorar completamente o processo de pesquisa de tempo de execução!<\/p>\n<\/blockquote>\n<h2 id=\"atributos-booleanos\"><a href=\"#atributos-booleanos\">Atributos booleanos<\/a><\/h2><p>Os atributos podem ser atribuídos como booleanos.<\/p>\n<p>Quando o valor é <code>false<\/code>, o atributo não será renderizado.<\/p>\n<p>Quando o valor for <code>true<\/code>, ele será processado como um atributo booleano sem um valor de string.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">disabled<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token boolean\">false<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Botão <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<p>Você pode abreviar atributos quando sabe que o valor será sempre verdadeiro.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">disabled<\/span><span class=\"token punctuation\">><\/span><\/span> Botão <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Aprender mais sobre <a href=\"/pt-br/contexto\">atributos<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"tag-elemento\"><a href=\"#tag-elemento\">Tag Elemento<\/a><\/h2><p>Se você precisar decidir o nome da tag em tempo de execução, pode usar a tag <code>element<\/code> e definir o atributo <code>tag<\/code> condicionalmente.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>element<\/span> <span class=\"token attr-name\">tag<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token operator\">!<\/span><span class=\"token operator\">!<\/span>link <span class=\"token operator\">?<\/span> <span class=\"token string\">\"a\"<\/span> <span class=\"token operator\">:<\/span> <span class=\"token string\">\"span\"<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>link <span class=\"token operator\">||<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n  algum texto arbitrário\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>element<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<p>Quando o atributo <code>tag<\/code> é omitido, Nullstack assumirá como padrão um <code>div<\/code>.<\/p>\n<h2 id=\"fragmentos\"><a href=\"#fragmentos\">Fragmentos<\/a><\/h2><p>Fragmentos são elementos que renderizam o seu conteúdo no componente pai.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">Fragmented<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span> Eu sou um botão<span class=\"token operator\">!<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> Parágrafo<span class=\"token operator\">!<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span>\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<p>Onde quer que seja usado, o componente funcional acima será renderizado da seguinte forma:<\/p>\n<pre><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span> Eu sou um botão<span class=\"token operator\">!<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> Parágrafo<span class=\"token operator\">!<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<h2 id=\"elementos-svg\"><a href=\"#elementos-svg\">Elementos SVG<\/a><\/h2><p>O SVG pode ser usado como se fosse qualquer tag HTML normal.<\/p>\n<p>Você pode manipular o SVG usando atributos e eventos normalmente.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>svg<\/span> <span class=\"token attr-name\">height<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>size<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">viewBox<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>0 0 100 100<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>circle<\/span> <span class=\"token attr-name\">cx<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>50<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">cy<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>50<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">r<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>40<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>grow<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>svg<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Aprender mais sobre <a href=\"/pt-br/componentes-com-estado\">eventos<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"componentes-com-filhos\"><a href=\"#componentes-com-filhos\">Componentes com filhos<\/a><\/h2><p>Seu componente pode ser invocado passando um bloco de conteúdo.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Header<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h1<\/span><span class=\"token punctuation\">><\/span><\/span> Olá Mundo<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>h1<\/span><span class=\"token punctuation\">><\/span><\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span><span class=\"token class-name\">Header<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<p>Isso não renderiza automaticamente o bloco, pois não saberia onde colocá-lo.<\/p>\n<p>Você pode desestruturar os filhos no método de renderização e colocá-los em sua marcação.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"nullstack\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Header<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> children <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>children<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Header<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Isso é possível porque a chave <code>children<\/code> faz parte do <a href=\"/pt-br/contexto##as-chaves-de-inst-ncia-do-cliente-s-o-\">contexto da instância<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"listas\"><a href=\"#listas\">Listas<\/a><\/h2><p>Você pode mapear listas sem declarar uma <code>key<\/code>.<\/p>\n<p>As listas que podem mudar de comprimento devem ser agrupadas em um elemento pai apenas para elas.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">{<\/span>list<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">item<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>item<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<p>Você pode emular uma lista de tamanho fixo, retornando <code>false<\/code> em vez de um elemento para reservar espaço no Dom.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token punctuation\">{<\/span>list<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">item<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">(<\/span>\n  item<span class=\"token punctuation\">.<\/span>visible <span class=\"token operator\">?<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>item<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token operator\">:<\/span> <span class=\"token boolean\">false<\/span>\n<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<p>É uma boa prática usar componentes internos combinados com listas para limpar seu código.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"nullstack\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">List<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n  items <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span>\n    <span class=\"token punctuation\">{<\/span> visible<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span> number<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token punctuation\">{<\/span> visible<span class=\"token operator\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span> number<span class=\"token operator\">:<\/span> <span class=\"token number\">2<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token punctuation\">{<\/span> visible<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span> number<span class=\"token operator\">:<\/span> <span class=\"token number\">3<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token punctuation\">]<\/span>\n\n  <span class=\"token function\">renderItem<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> visible<span class=\"token punctuation\">,<\/span> number <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>visible<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token punctuation\">{<\/span>number<span class=\"token punctuation\">}<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>items<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">item<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">(<\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Item<\/span><\/span> <span class=\"token spread\"><span class=\"token punctuation\">{<\/span><span class=\"token operator\">...<\/span>item<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> List<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Às vezes, você notará chaves no mapa. Saiba mais sobre a <a href=\"/pt-br/instancia-self#key-da-inst-ncia\">key da instância<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"html-interno\"><a href=\"#html-interno\">HTML interno<\/a><\/h2><p>Você pode definir o HTML interno de um elemento com o atributo <code>html<\/code>.<\/p>\n<p>Links dentro da string HTML serão substituídos por <a href=\"/pt-br/rotas-e-parametros\">Âncoras Roteáveis<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"nullstack\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Post<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  content <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">\n    &lt;h1> Este é um post &lt;/h1>\n    &lt;a href=\"/other-post\">\n      Confira este outro post\n    &lt;/a>\n  <\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>article<\/span> <span class=\"token attr-name\">html<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>content<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Post<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>🔥 Tome cuidado! Ao usar o HTML gerado pelo usuário, você está em risco de injeção de script<\/p>\n<\/blockquote>\n<h2 id=\"a-tag--head-\"><a href=\"#a-tag--head-\">A tag <code>head<\/code><\/a><\/h2><p>Componentes renderizáveis podem renderizar dentro da tag <code>head<\/code> um número ilimitado de vezes em qualquer profundidade do aplicativo.<\/p>\n<p>A tag <code>head<\/code> só será atualizada durante o processo de <a href=\"/pt-br/renderizacao-no-servidor\">renderização no servidor<\/a> e mudanças serão ignorados após o processo de <a href=\"/pt-br/ciclo-de-vida-full-stack\">hidratação<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>head<\/span><span class=\"token punctuation\">><\/span><\/span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>link<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>preconnect<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>https://www.googletagmanager.com<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>head<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>head<\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>link<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>preload<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/roboto-v20-latin-300.woff2<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">as<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>font<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>font/woff2<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">crossorigin<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>link<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>preload<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/crete-round-v9-latin-regular.woff2<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">as<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>font<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>font/woff2<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">crossorigin<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>head<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>🔥 Você não deve usar a tag <code>head<\/code> para atualizar <a href=\"/pt-br/contexto-page\">metatags<\/a> que o Nullstack já controla.<\/p>\n<\/blockquote>\n<h2 id=\"pr-xima-etapa\"><a href=\"#pr-xima-etapa\">Próxima Etapa<\/a><\/h2><p>⚔ Adicione estado ao seu componente usando <a href=\"/pt-br/componentes-com-estado\">componentes com estado<\/a>.<\/p>\n","description":"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","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"componentes-renderizaveis"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/componentes-renderizaveis/index.html b/docs/pt-br/componentes-renderizaveis/index.html
index 4affd149..b0c96d3f 100644
--- a/docs/pt-br/componentes-renderizaveis/index.html
+++ b/docs/pt-br/componentes-renderizaveis/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -307,15 +307,15 @@ <h2 id="pr-xima-etapa"><a href="#pr-xima-etapa">Próxima Etapa</a></h2><p>⚔ Ad
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Componentes renderizáveis - Nullstack","description":"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"};
       window.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-renderizaveis":{"title":"Componentes renderizáveis","html":"<p>O componente mais simples que você pode fazer é um componente renderizável, com exceção de <a href=\"/pt-br/componentes-funcionais\">componentes funcionais<\/a>.<\/p>\n<p>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.<\/p>\n<p>Crie um arquivo em sua pasta src com o nome de seu componente e com a <a href=\"/pt-br/extensão-de-arquivo-njs\">extensão <code>.njs<\/code><\/a>.<\/p>\n<p>Neste exemplo, vai ser chamado <code>helloworld.njs<\/code>.<\/p>\n<p>Tudo o que você precisa fazer é importar <code>nullstack<\/code> ou qualquer uma das suas subclasses e estender sua classe dele, definir um método de instância chamado <code>render<\/code> que retorna qualquer JSX e exporte o componente.<\/p>\n<blockquote>\n<p>✨ Instale a extensão oficial <a href=\"https://marketplace.visualstudio.com/items?itemName=ChristianMortaro.vscode-nullstack\" target=\"_blank\" rel=\"noopener\">Nullstack para VSCode<\/a> para gerar classes com snippets.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"nullstack\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">HelloWorld<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span> Olá Mundo <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> HelloWorld<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>O código acima apenas declara o componente, você ainda tem que usá-lo.<\/p>\n<p>Importando o componente em seu aplicativo, temos a capacidade de usar uma nova tag em sua renderização.<\/p>\n<p>Esta tag será substituída pelo que você retornou no método <code>render<\/code> do componente.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"nullstack\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">import<\/span> <span class=\"token string\">\"./Application.scss\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">import<\/span> HelloWorld <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"./HelloWorld\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> page <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h1<\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">.<\/span>title<span class=\"token punctuation\">}<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>h1<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a<\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>https://nullstack.app/documentation<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">target<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>_blank<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n          Read the documentation\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>a<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">HelloWorld<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"usando-atributos-html-\"><a href=\"#usando-atributos-html-\">Usando atributos HTML.<\/a><\/h2><p>Nullstack JSX se desvia um pouco das especificações.<\/p>\n<p>Você pode usar os atributos HTML normais como <code>class<\/code> e <code>for<\/code> diretamente.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>label<\/span> <span class=\"token attr-name\">for<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>input<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>nao-me-rotule<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Eu sou um rótulo <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>label<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<h2 id=\"componentes-headless\"><a href=\"#componentes-headless\">Componentes Headless<\/a><\/h2><p>Se você deseja pular a renderização do componente, você pode simplesmente retornar <code>false<\/code> da renderização.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"nullstack\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Headless<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Headless<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Isso alocará o espaço no DOM para quando você decidir renderizar a marcação lá.<\/p>\n<p>Isso também é útil para renderização condicional.<\/p>\n<p>Se tudo o que você deseja fazer é gerar um componente invisível, você pode ignorar a definição do método de renderização.<\/p>\n<h2 id=\"componentes-internos\"><a href=\"#componentes-internos\">Componentes internos<\/a><\/h2><p>Em vez de criar um novo componente apenas para organizar a divisão de código, você pode criar um componente interno.<\/p>\n<p><strong>Componentes internos<\/strong> são quaisquer métodos cujo nome seja iniciado com <code>render<\/code> seguido por um caractere maiúsculo.<\/p>\n<p>Componentes internos compartilham a mesma instância e escopo, pois o componente principal, portanto, são muito convenientes para evitar problemas como adereços de perfuração.<\/p>\n<p>Para invocar o componente interno, use uma tag JSX com o nome do método sem o prefixo <code>render<\/code>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"nullstack\"<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Post<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">renderArticle<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>article<\/span><span class=\"token punctuation\">><\/span><\/span> Conteú<span class=\"token keyword\">do<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>article<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">renderAside<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>aside<\/span><span class=\"token punctuation\">><\/span><\/span> Conteú<span class=\"token keyword\">do<\/span> Relacionado <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>aside<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Article<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Aside<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> HelloWorld<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 Nullstack injetará uma referência constante à função no tempo de transpilação, a fim de ignorar completamente o processo de pesquisa de tempo de execução!<\/p>\n<\/blockquote>\n<h2 id=\"atributos-booleanos\"><a href=\"#atributos-booleanos\">Atributos booleanos<\/a><\/h2><p>Os atributos podem ser atribuídos como booleanos.<\/p>\n<p>Quando o valor é <code>false<\/code>, o atributo não será renderizado.<\/p>\n<p>Quando o valor for <code>true<\/code>, ele será processado como um atributo booleano sem um valor de string.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">disabled<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token boolean\">false<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Botão <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<p>Você pode abreviar atributos quando sabe que o valor será sempre verdadeiro.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">disabled<\/span><span class=\"token punctuation\">><\/span><\/span> Botão <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Aprender mais sobre <a href=\"/pt-br/contexto\">atributos<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"tag-elemento\"><a href=\"#tag-elemento\">Tag Elemento<\/a><\/h2><p>Se você precisar decidir o nome da tag em tempo de execução, pode usar a tag <code>element<\/code> e definir o atributo <code>tag<\/code> condicionalmente.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>element<\/span> <span class=\"token attr-name\">tag<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token operator\">!<\/span><span class=\"token operator\">!<\/span>link <span class=\"token operator\">?<\/span> <span class=\"token string\">\"a\"<\/span> <span class=\"token operator\">:<\/span> <span class=\"token string\">\"span\"<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>link <span class=\"token operator\">||<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n  algum texto arbitrário\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>element<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<p>Quando o atributo <code>tag<\/code> é omitido, Nullstack assumirá como padrão um <code>div<\/code>.<\/p>\n<h2 id=\"fragmentos\"><a href=\"#fragmentos\">Fragmentos<\/a><\/h2><p>Fragmentos são elementos que renderizam o seu conteúdo no componente pai.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">Fragmented<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span> Eu sou um botão<span class=\"token operator\">!<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> Parágrafo<span class=\"token operator\">!<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span>\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<p>Onde quer que seja usado, o componente funcional acima será renderizado da seguinte forma:<\/p>\n<pre><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span> Eu sou um botão<span class=\"token operator\">!<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> Parágrafo<span class=\"token operator\">!<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<h2 id=\"elementos-svg\"><a href=\"#elementos-svg\">Elementos SVG<\/a><\/h2><p>O SVG pode ser usado como se fosse qualquer tag HTML normal.<\/p>\n<p>Você pode manipular o SVG usando atributos e eventos normalmente.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>svg<\/span> <span class=\"token attr-name\">height<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>size<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">viewBox<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>0 0 100 100<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>circle<\/span> <span class=\"token attr-name\">cx<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>50<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">cy<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>50<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">r<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>40<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>grow<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>svg<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Aprender mais sobre <a href=\"/pt-br/componentes-com-estado\">eventos<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"componentes-com-filhos\"><a href=\"#componentes-com-filhos\">Componentes com filhos<\/a><\/h2><p>Seu componente pode ser invocado passando um bloco de conteúdo.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Header<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h1<\/span><span class=\"token punctuation\">><\/span><\/span> Olá Mundo<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>h1<\/span><span class=\"token punctuation\">><\/span><\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span><span class=\"token class-name\">Header<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<p>Isso não renderiza automaticamente o bloco, pois não saberia onde colocá-lo.<\/p>\n<p>Você pode desestruturar os filhos no método de renderização e colocá-los em sua marcação.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"nullstack\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Header<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> children <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>children<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Header<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Isso é possível porque a chave <code>children<\/code> faz parte do <a href=\"/pt-br/contexto##as-chaves-de-inst-ncia-do-cliente-s-o-\">contexto da instância<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"listas\"><a href=\"#listas\">Listas<\/a><\/h2><p>Você pode mapear listas sem declarar uma <code>key<\/code>.<\/p>\n<p>As listas que podem mudar de comprimento devem ser agrupadas em um elemento pai apenas para elas.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">{<\/span>list<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">item<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>item<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<p>Você pode emular uma lista de tamanho fixo, retornando <code>false<\/code> em vez de um elemento para reservar espaço no Dom.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token punctuation\">{<\/span>list<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">item<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">(<\/span>\n  item<span class=\"token punctuation\">.<\/span>visible <span class=\"token operator\">?<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>item<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token operator\">:<\/span> <span class=\"token boolean\">false<\/span>\n<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<p>É uma boa prática usar componentes internos combinados com listas para limpar seu código.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"nullstack\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">List<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n  items <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span>\n    <span class=\"token punctuation\">{<\/span> visible<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span> number<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token punctuation\">{<\/span> visible<span class=\"token operator\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span> number<span class=\"token operator\">:<\/span> <span class=\"token number\">2<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token punctuation\">{<\/span> visible<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span> number<span class=\"token operator\">:<\/span> <span class=\"token number\">3<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token punctuation\">]<\/span>\n\n  <span class=\"token function\">renderItem<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> visible<span class=\"token punctuation\">,<\/span> number <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>visible<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token punctuation\">{<\/span>number<span class=\"token punctuation\">}<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>items<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">item<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">(<\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Item<\/span><\/span> <span class=\"token spread\"><span class=\"token punctuation\">{<\/span><span class=\"token operator\">...<\/span>item<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> List<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Às vezes, você notará chaves no mapa. Saiba mais sobre a <a href=\"/pt-br/instancia-self#key-da-inst-ncia\">key da instância<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"html-interno\"><a href=\"#html-interno\">HTML interno<\/a><\/h2><p>Você pode definir o HTML interno de um elemento com o atributo <code>html<\/code>.<\/p>\n<p>Links dentro da string HTML serão substituídos por <a href=\"/pt-br/rotas-e-parametros\">Âncoras Roteáveis<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"nullstack\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Post<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  content <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">\n    &lt;h1> Este é um post &lt;/h1>\n    &lt;a href=\"/other-post\">\n      Confira este outro post\n    &lt;/a>\n  <\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>article<\/span> <span class=\"token attr-name\">html<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>content<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Post<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>🔥 Tome cuidado! Ao usar o HTML gerado pelo usuário, você está em risco de injeção de script<\/p>\n<\/blockquote>\n<h2 id=\"a-tag--head-\"><a href=\"#a-tag--head-\">A tag <code>head<\/code><\/a><\/h2><p>Componentes renderizáveis podem renderizar dentro da tag <code>head<\/code> um número ilimitado de vezes em qualquer profundidade do aplicativo.<\/p>\n<p>A tag <code>head<\/code> só será atualizada durante o processo de <a href=\"/pt-br/renderizacao-no-servidor\">renderização no servidor<\/a> e mudanças serão ignorados após o processo de <a href=\"/pt-br/ciclo-de-vida-full-stack\">hidratação<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>head<\/span><span class=\"token punctuation\">><\/span><\/span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>link<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>preconnect<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>https://www.googletagmanager.com<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>head<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>head<\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>link<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>preload<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/roboto-v20-latin-300.woff2<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">as<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>font<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>font/woff2<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">crossorigin<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>link<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>preload<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/crete-round-v9-latin-regular.woff2<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">as<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>font<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>font/woff2<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">crossorigin<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>head<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>🔥 Você não deve usar a tag <code>head<\/code> para atualizar <a href=\"/pt-br/contexto-page\">metatags<\/a> que o Nullstack já controla.<\/p>\n<\/blockquote>\n<h2 id=\"pr-xima-etapa\"><a href=\"#pr-xima-etapa\">Próxima Etapa<\/a><\/h2><p>⚔ Adicione estado ao seu componente usando <a href=\"/pt-br/componentes-com-estado\">componentes com estado<\/a>.<\/p>\n","description":"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","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"componentes-renderizaveis"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/componentes.html b/docs/pt-br/componentes.html
index 0daebc2d..10495a92 100644
--- a/docs/pt-br/componentes.html
+++ b/docs/pt-br/componentes.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -34,15 +34,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"priority":0.3,"title":"Componentes da Comunidade - Nullstack","description":"Uma lista com curadoria de componentes Nullstack feitos pela comunidade.","locale":"pt-BR"};
       window.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-6/pt-br/componentes":{"locale":"pt-BR","i18n":{"title":"Componentes da Comunidade","description":"Uma lista com curadoria de componentes Nullstack feitos pela comunidade.","heading":"Componentes da Comunidade","tagline":"Uma lista com curadoria de componentes Nullstack feitos pela comunidade.","contribute":"Se você deseja adicionar um componente a esta lista, <a href='https://github.com/nullstack/nullstack.github.io/issues'>abra uma issue no github<\/a>.","topics":[{"title":"Integrações","projects":[{"title":"Google Analytics","repository":"https://github.com/Mortaro/nullstack-google-analytics"},{"title":"Facebook Pixel","repository":"https://github.com/Mortaro/nullstack-facebook-pixel"}]},{"title":"Inputs Gerais","projects":[{"title":"Input Monetário","repository":"https://github.com/Mortaro/nullstack-currency-input"},{"title":"Input de Data","repository":"https://github.com/Mortaro/nullstack-date-input"},{"title":"Adaptador para CKEditor","repository":"https://github.com/Mortaro/nullstack-ckeditor-adapter"},{"title":"Input para Upload de Arquivo","repository":"https://github.com/Mortaro/nullstack-upload-input"}]},{"title":"Inputs Brasileiros","tagline":{"title":"English: Nullstack is a Brazilian Framework","text":"🤘 Nullstack é BR porr@!"},"projects":[{"title":"Inputs para CPF e CNPJ","repository":"https://github.com/Mortaro/nullstack-cpf-cnpj-input"},{"title":"Input para CEP","repository":"https://github.com/Mortaro/nullstack-cep-input"},{"title":"Input para Telefone","repository":"https://github.com/Mortaro/nullstack-phone-input"}]},{"title":"Assets","projects":[{"title":"Logo Nullstack","repository":"/pt-br/nullstack-logo"}]}]}},"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/componentes/index.html b/docs/pt-br/componentes/index.html
index 0daebc2d..10495a92 100644
--- a/docs/pt-br/componentes/index.html
+++ b/docs/pt-br/componentes/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -34,15 +34,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"priority":0.3,"title":"Componentes da Comunidade - Nullstack","description":"Uma lista com curadoria de componentes Nullstack feitos pela comunidade.","locale":"pt-BR"};
       window.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-6/pt-br/componentes":{"locale":"pt-BR","i18n":{"title":"Componentes da Comunidade","description":"Uma lista com curadoria de componentes Nullstack feitos pela comunidade.","heading":"Componentes da Comunidade","tagline":"Uma lista com curadoria de componentes Nullstack feitos pela comunidade.","contribute":"Se você deseja adicionar um componente a esta lista, <a href='https://github.com/nullstack/nullstack.github.io/issues'>abra uma issue no github<\/a>.","topics":[{"title":"Integrações","projects":[{"title":"Google Analytics","repository":"https://github.com/Mortaro/nullstack-google-analytics"},{"title":"Facebook Pixel","repository":"https://github.com/Mortaro/nullstack-facebook-pixel"}]},{"title":"Inputs Gerais","projects":[{"title":"Input Monetário","repository":"https://github.com/Mortaro/nullstack-currency-input"},{"title":"Input de Data","repository":"https://github.com/Mortaro/nullstack-date-input"},{"title":"Adaptador para CKEditor","repository":"https://github.com/Mortaro/nullstack-ckeditor-adapter"},{"title":"Input para Upload de Arquivo","repository":"https://github.com/Mortaro/nullstack-upload-input"}]},{"title":"Inputs Brasileiros","tagline":{"title":"English: Nullstack is a Brazilian Framework","text":"🤘 Nullstack é BR porr@!"},"projects":[{"title":"Inputs para CPF e CNPJ","repository":"https://github.com/Mortaro/nullstack-cpf-cnpj-input"},{"title":"Input para CEP","repository":"https://github.com/Mortaro/nullstack-cep-input"},{"title":"Input para Telefone","repository":"https://github.com/Mortaro/nullstack-phone-input"}]},{"title":"Assets","projects":[{"title":"Logo Nullstack","repository":"/pt-br/nullstack-logo"}]}]}},"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/contexto-data.html b/docs/pt-br/contexto-data.html
index d68d59d5..344c0ea8 100644
--- a/docs/pt-br/contexto-data.html
+++ b/docs/pt-br/contexto-data.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -85,15 +85,15 @@ <h2 id="pr-xima-etapa"><a href="#pr-xima-etapa">Próxima Etapa</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Contexto Data - Nullstack","description":"O objeto data é um proxy no Contexto Componente disponível no client e te dá informações sobre o conjunto de dados do elemento"};
       window.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/contexto-data":{"title":"Contexto Data","html":"<ul>\n<li>Tipo: <code>object<\/code><\/li>\n<li>Origem: <a href=\"/pt-br/contexto#----contexto-componente\">Contexto Componente<\/a><\/li>\n<li>Disponibilidade: <strong>client<\/strong><\/li>\n<li><strong>readonly<\/strong> no contexto do <strong>client<\/strong><\/li>\n<\/ul>\n<p>Ele te dá informações sobre o conjunto de dados do elemento.<\/p>\n<p>Você pode usar esta chave para evitar poluir seu DOM com atributos inválidos.<\/p>\n<blockquote>\n<p>💡 Isso ajuda o Nullstack a definir atributos sem perder tempo validando-os.<\/p>\n<\/blockquote>\n<p>Quaisquer atributos <code>data-*<\/code> receberão uma chave camelizada respectiva no objeto <code>data<\/code>.<\/p>\n<p>Você pode atribuir atributos <code>data<\/code> ambos via <code>data-*<\/code> e uma chave <code>data<\/code> que aceita um objeto com chaves camelizadas.<\/p>\n<p>A versão kebab também está disponível no contexto.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"nullstack\"<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">ContextData<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n  count <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span>\n\n  <span class=\"token function\">calculate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> data <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">=<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">*<\/span> data<span class=\"token punctuation\">.<\/span>multiply <span class=\"token operator\">+<\/span> data<span class=\"token punctuation\">.<\/span>sum\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">renderInner<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span> data <span class=\"token punctuation\">}<\/span> <span class=\"token operator\">=<\/span> context\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">data<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>data<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token punctuation\">{<\/span>data<span class=\"token punctuation\">.<\/span>frameworkName<span class=\"token punctuation\">}<\/span>é o mesmo que\n        <span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">[<\/span><span class=\"token string\">\"data-framework-name\"<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> data <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>calculate<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">data-multiply<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">3<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">data<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span> sum<span class=\"token operator\">:<\/span> <span class=\"token number\">2<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n          Calcular\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Inner<\/span><\/span> <span class=\"token attr-name\">data-framework-name<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>Nullstack<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> ContextData\n<\/code><\/pre>\n<blockquote>\n<p>💡 Chaves camelizadas do objeto <code>data<\/code> resultarão em atributos kebab no DOM.<\/p>\n<\/blockquote>\n<h2 id=\"pr-xima-etapa\"><a href=\"#pr-xima-etapa\">Próxima Etapa<\/a><\/h2><p>⚔ Aprenda sobre a <a href=\"/pt-br/contexto-instances\">chave <code>instances<\/code> do contexto<\/a>.<\/p>\n","description":"O objeto data é um proxy no Contexto Componente disponível no client e te dá informações sobre o conjunto de dados do elemento","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"contexto-data"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/contexto-data/index.html b/docs/pt-br/contexto-data/index.html
index d68d59d5..344c0ea8 100644
--- a/docs/pt-br/contexto-data/index.html
+++ b/docs/pt-br/contexto-data/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -85,15 +85,15 @@ <h2 id="pr-xima-etapa"><a href="#pr-xima-etapa">Próxima Etapa</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Contexto Data - Nullstack","description":"O objeto data é um proxy no Contexto Componente disponível no client e te dá informações sobre o conjunto de dados do elemento"};
       window.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/contexto-data":{"title":"Contexto Data","html":"<ul>\n<li>Tipo: <code>object<\/code><\/li>\n<li>Origem: <a href=\"/pt-br/contexto#----contexto-componente\">Contexto Componente<\/a><\/li>\n<li>Disponibilidade: <strong>client<\/strong><\/li>\n<li><strong>readonly<\/strong> no contexto do <strong>client<\/strong><\/li>\n<\/ul>\n<p>Ele te dá informações sobre o conjunto de dados do elemento.<\/p>\n<p>Você pode usar esta chave para evitar poluir seu DOM com atributos inválidos.<\/p>\n<blockquote>\n<p>💡 Isso ajuda o Nullstack a definir atributos sem perder tempo validando-os.<\/p>\n<\/blockquote>\n<p>Quaisquer atributos <code>data-*<\/code> receberão uma chave camelizada respectiva no objeto <code>data<\/code>.<\/p>\n<p>Você pode atribuir atributos <code>data<\/code> ambos via <code>data-*<\/code> e uma chave <code>data<\/code> que aceita um objeto com chaves camelizadas.<\/p>\n<p>A versão kebab também está disponível no contexto.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"nullstack\"<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">ContextData<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n  count <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span>\n\n  <span class=\"token function\">calculate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> data <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">=<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">*<\/span> data<span class=\"token punctuation\">.<\/span>multiply <span class=\"token operator\">+<\/span> data<span class=\"token punctuation\">.<\/span>sum\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">renderInner<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span> data <span class=\"token punctuation\">}<\/span> <span class=\"token operator\">=<\/span> context\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">data<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>data<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token punctuation\">{<\/span>data<span class=\"token punctuation\">.<\/span>frameworkName<span class=\"token punctuation\">}<\/span>é o mesmo que\n        <span class=\"token punctuation\">{<\/span>context<span class=\"token punctuation\">[<\/span><span class=\"token string\">\"data-framework-name\"<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> data <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>calculate<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">data-multiply<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">3<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">data<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span> sum<span class=\"token operator\">:<\/span> <span class=\"token number\">2<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n          Calcular\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Inner<\/span><\/span> <span class=\"token attr-name\">data-framework-name<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>Nullstack<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> ContextData\n<\/code><\/pre>\n<blockquote>\n<p>💡 Chaves camelizadas do objeto <code>data<\/code> resultarão em atributos kebab no DOM.<\/p>\n<\/blockquote>\n<h2 id=\"pr-xima-etapa\"><a href=\"#pr-xima-etapa\">Próxima Etapa<\/a><\/h2><p>⚔ Aprenda sobre a <a href=\"/pt-br/contexto-instances\">chave <code>instances<\/code> do contexto<\/a>.<\/p>\n","description":"O objeto data é um proxy no Contexto Componente disponível no client e te dá informações sobre o conjunto de dados do elemento","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"contexto-data"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/contexto-environment.html b/docs/pt-br/contexto-environment.html
index 23be977c..ceda8b04 100644
--- a/docs/pt-br/contexto-environment.html
+++ b/docs/pt-br/contexto-environment.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -73,15 +73,15 @@ <h2 id="pr-xima-etapa"><a href="#pr-xima-etapa">Próxima Etapa</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Contexto Environment - Nullstack","description":"O objeto environment é um proxy no Contexto Nullstack disponível em ambos client e server e te dá informações sobre o ambiente atual"};
       window.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/contexto-environment":{"title":"Contexto Environment","html":"<ul>\n<li>Tipo: <code>object<\/code><\/li>\n<li>Origem: <a href=\"/pt-br/contexto#----contexto-nullstack\">Contexto Nullstack<\/a><\/li>\n<li>Disponibilidade: server/client<\/li>\n<li><strong>readonly<\/strong> em ambos <strong>server<\/strong> e <strong>client<\/strong><\/li>\n<\/ul>\n<p>Ele te dá informações sobre o ambiente atual.<\/p>\n<p>As seguintes chaves estão disponíveis no objeto:<\/p>\n<ul>\n<li><strong>client<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>server<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>development<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>production<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>static<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>key<\/strong>: <code>string<\/code><\/li>\n<\/ul>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Page<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>environment<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span> \n        <span class=\"token punctuation\">{<\/span>environment<span class=\"token punctuation\">.<\/span>client <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>Estou no cliente<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token punctuation\">{<\/span>environment<span class=\"token punctuation\">.<\/span>server <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>Estou no servidor<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token punctuation\">{<\/span>environment<span class=\"token punctuation\">.<\/span>development <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>Estou em modo de desenvolvimento<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token punctuation\">{<\/span>environment<span class=\"token punctuation\">.<\/span>production <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>Estou em modo de produção<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token punctuation\">{<\/span>environment<span class=\"token punctuation\">.<\/span>static <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>Estou em um site estático<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>Minha chave é <span class=\"token punctuation\">{<\/span>environment<span class=\"token punctuation\">.<\/span>key<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Page<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>A chave <code>key<\/code> do <code>environment<\/code> é um hash md5 das saídas da pasta do ambiente atual. A <code>key<\/code> é anexada nos caminhos dos <a href=\"/pt-br/estilos\">assets<\/a> e na <a href=\"/pt-br/geracao-de-sites-estaticos\">API estática<\/a> para auxiliar no controle de cache.<\/p>\n<h2 id=\"pr-xima-etapa\"><a href=\"#pr-xima-etapa\">Próxima Etapa<\/a><\/h2><p>⚔ Aprenda sobre a <a href=\"/pt-br/contexto-page\">chave <code>page<\/code> do contexto<\/a>.<\/p>\n","description":"O objeto environment é um proxy no Contexto Nullstack disponível em ambos client e server e te dá informações sobre o ambiente atual","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"contexto-environment"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/contexto-environment/index.html b/docs/pt-br/contexto-environment/index.html
index 23be977c..ceda8b04 100644
--- a/docs/pt-br/contexto-environment/index.html
+++ b/docs/pt-br/contexto-environment/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -73,15 +73,15 @@ <h2 id="pr-xima-etapa"><a href="#pr-xima-etapa">Próxima Etapa</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Contexto Environment - Nullstack","description":"O objeto environment é um proxy no Contexto Nullstack disponível em ambos client e server e te dá informações sobre o ambiente atual"};
       window.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/contexto-environment":{"title":"Contexto Environment","html":"<ul>\n<li>Tipo: <code>object<\/code><\/li>\n<li>Origem: <a href=\"/pt-br/contexto#----contexto-nullstack\">Contexto Nullstack<\/a><\/li>\n<li>Disponibilidade: server/client<\/li>\n<li><strong>readonly<\/strong> em ambos <strong>server<\/strong> e <strong>client<\/strong><\/li>\n<\/ul>\n<p>Ele te dá informações sobre o ambiente atual.<\/p>\n<p>As seguintes chaves estão disponíveis no objeto:<\/p>\n<ul>\n<li><strong>client<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>server<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>development<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>production<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>static<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>key<\/strong>: <code>string<\/code><\/li>\n<\/ul>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Page<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>environment<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span> \n        <span class=\"token punctuation\">{<\/span>environment<span class=\"token punctuation\">.<\/span>client <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>Estou no cliente<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token punctuation\">{<\/span>environment<span class=\"token punctuation\">.<\/span>server <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>Estou no servidor<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token punctuation\">{<\/span>environment<span class=\"token punctuation\">.<\/span>development <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>Estou em modo de desenvolvimento<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token punctuation\">{<\/span>environment<span class=\"token punctuation\">.<\/span>production <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>Estou em modo de produção<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token punctuation\">{<\/span>environment<span class=\"token punctuation\">.<\/span>static <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>Estou em um site estático<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>Minha chave é <span class=\"token punctuation\">{<\/span>environment<span class=\"token punctuation\">.<\/span>key<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Page<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>A chave <code>key<\/code> do <code>environment<\/code> é um hash md5 das saídas da pasta do ambiente atual. A <code>key<\/code> é anexada nos caminhos dos <a href=\"/pt-br/estilos\">assets<\/a> e na <a href=\"/pt-br/geracao-de-sites-estaticos\">API estática<\/a> para auxiliar no controle de cache.<\/p>\n<h2 id=\"pr-xima-etapa\"><a href=\"#pr-xima-etapa\">Próxima Etapa<\/a><\/h2><p>⚔ Aprenda sobre a <a href=\"/pt-br/contexto-page\">chave <code>page<\/code> do contexto<\/a>.<\/p>\n","description":"O objeto environment é um proxy no Contexto Nullstack disponível em ambos client e server e te dá informações sobre o ambiente atual","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"contexto-environment"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/contexto-instances.html b/docs/pt-br/contexto-instances.html
index d3c1c471..42acdda7 100644
--- a/docs/pt-br/contexto-instances.html
+++ b/docs/pt-br/contexto-instances.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -111,15 +111,15 @@ <h2 id="pr-xima-etapa"><a href="#pr-xima-etapa">Próxima Etapa</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Contexto Instances - Nullstack","description":"O objeto instances é um proxy no Contexto Nullstack disponível no client e fornece todas as instâncias ativas da aplicação"};
       window.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/contexto-instances":{"title":"Contexto Instances","html":"<ul>\n<li>Tipo: <code>object<\/code><\/li>\n<li>Origem: <a href=\"/pt-br/contexto#----contexto-nullstack\">Contexto Nullstack<\/a><\/li>\n<li>Disponibilidade: <strong>client<\/strong><\/li>\n<li><strong>readwrite<\/strong> no contexto do <strong>client<\/strong><\/li>\n<\/ul>\n<p>Fornece todas as instâncias ativas da aplicação.<\/p>\n<blockquote>\n<p>💡 Instâncias ativas são as criadas e ainda não <a href=\"/pt-br/ciclo-de-vida-full-stack#terminate\">terminadas<\/a><\/p>\n<\/blockquote>\n<p>Conforme explicado em <a href=\"/pt-br/instancia-self#key-da-inst-ncia\"><code>key<\/code> da instância<\/a>, keys desempenham um grande papel na definição de um identificador único para componentes.<\/p>\n<blockquote>\n<p>🔥 Nullstack confia que seus desenvolvedores sabem o que estão fazendo e expõe o máximo de comportamentos internos possíveis para o programador usar como quiser, use com precaução.<\/p>\n<\/blockquote>\n<p>Adicionando uma <code>key<\/code> única ao <strong>Counter<\/strong> torna-o disponível na lista <code>instances<\/code>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Counter <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Counter'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> AnyOtherComponent <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./AnyOtherComponent'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Counter<\/span><\/span> <span class=\"token attr-name\">key<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>counter<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">AnyOtherComponent<\/span><\/span><span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  value <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">increment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>value<span class=\"token operator\">++<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> Contador<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">}<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Você pode acessar qualquer método e variável de instância da instância <strong>counter<\/strong> em <strong>AnyOtherComponent<\/strong><\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">AnyOtherComponent<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> instances <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>instances<span class=\"token punctuation\">.<\/span>counter<span class=\"token punctuation\">.<\/span>increment<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        Add <span class=\"token number\">1<\/span> ao <span class=\"token punctuation\">{<\/span>instances<span class=\"token punctuation\">.<\/span>counter<span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> AnyOtherComponent<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>O uso de <code>instances<\/code> libera possibilidades ilimitadas de novos comportamentos como:<\/p>\n<ul>\n<li>Um ícone de notificação na navbar que pode ser atualizado de outros componentes em certas ações<\/li>\n<li>Um componente de <em>toast<\/em> que pode ser invocado de qualquer lugar de sua aplicação<\/li>\n<li>Um sistema de <em>store<\/em> com ações customizadas similares ao Redux<\/li>\n<li>Algo que nós nem imaginamos, sonhe criativamente e poste suas ideias no GitHub!<\/li>\n<\/ul>\n<h2 id=\"pr-xima-etapa\"><a href=\"#pr-xima-etapa\">Próxima Etapa<\/a><\/h2><p>⚔ Aprenda sobre a <a href=\"/pt-br/contexto-environment\">chave <code>environment<\/code> do contexto<\/a>.<\/p>\n","description":"O objeto instances é um proxy no Contexto Nullstack disponível no client e fornece todas as instâncias ativas da aplicação","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"contexto-instances"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/contexto-instances/index.html b/docs/pt-br/contexto-instances/index.html
index d3c1c471..42acdda7 100644
--- a/docs/pt-br/contexto-instances/index.html
+++ b/docs/pt-br/contexto-instances/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -111,15 +111,15 @@ <h2 id="pr-xima-etapa"><a href="#pr-xima-etapa">Próxima Etapa</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Contexto Instances - Nullstack","description":"O objeto instances é um proxy no Contexto Nullstack disponível no client e fornece todas as instâncias ativas da aplicação"};
       window.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/contexto-instances":{"title":"Contexto Instances","html":"<ul>\n<li>Tipo: <code>object<\/code><\/li>\n<li>Origem: <a href=\"/pt-br/contexto#----contexto-nullstack\">Contexto Nullstack<\/a><\/li>\n<li>Disponibilidade: <strong>client<\/strong><\/li>\n<li><strong>readwrite<\/strong> no contexto do <strong>client<\/strong><\/li>\n<\/ul>\n<p>Fornece todas as instâncias ativas da aplicação.<\/p>\n<blockquote>\n<p>💡 Instâncias ativas são as criadas e ainda não <a href=\"/pt-br/ciclo-de-vida-full-stack#terminate\">terminadas<\/a><\/p>\n<\/blockquote>\n<p>Conforme explicado em <a href=\"/pt-br/instancia-self#key-da-inst-ncia\"><code>key<\/code> da instância<\/a>, keys desempenham um grande papel na definição de um identificador único para componentes.<\/p>\n<blockquote>\n<p>🔥 Nullstack confia que seus desenvolvedores sabem o que estão fazendo e expõe o máximo de comportamentos internos possíveis para o programador usar como quiser, use com precaução.<\/p>\n<\/blockquote>\n<p>Adicionando uma <code>key<\/code> única ao <strong>Counter<\/strong> torna-o disponível na lista <code>instances<\/code>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Counter <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Counter'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> AnyOtherComponent <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./AnyOtherComponent'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Counter<\/span><\/span> <span class=\"token attr-name\">key<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>counter<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">AnyOtherComponent<\/span><\/span><span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  value <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">increment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>value<span class=\"token operator\">++<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> Contador<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">}<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Você pode acessar qualquer método e variável de instância da instância <strong>counter<\/strong> em <strong>AnyOtherComponent<\/strong><\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">AnyOtherComponent<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> instances <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>instances<span class=\"token punctuation\">.<\/span>counter<span class=\"token punctuation\">.<\/span>increment<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        Add <span class=\"token number\">1<\/span> ao <span class=\"token punctuation\">{<\/span>instances<span class=\"token punctuation\">.<\/span>counter<span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> AnyOtherComponent<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>O uso de <code>instances<\/code> libera possibilidades ilimitadas de novos comportamentos como:<\/p>\n<ul>\n<li>Um ícone de notificação na navbar que pode ser atualizado de outros componentes em certas ações<\/li>\n<li>Um componente de <em>toast<\/em> que pode ser invocado de qualquer lugar de sua aplicação<\/li>\n<li>Um sistema de <em>store<\/em> com ações customizadas similares ao Redux<\/li>\n<li>Algo que nós nem imaginamos, sonhe criativamente e poste suas ideias no GitHub!<\/li>\n<\/ul>\n<h2 id=\"pr-xima-etapa\"><a href=\"#pr-xima-etapa\">Próxima Etapa<\/a><\/h2><p>⚔ Aprenda sobre a <a href=\"/pt-br/contexto-environment\">chave <code>environment<\/code> do contexto<\/a>.<\/p>\n","description":"O objeto instances é um proxy no Contexto Nullstack disponível no client e fornece todas as instâncias ativas da aplicação","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"contexto-instances"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/contexto-page.html b/docs/pt-br/contexto-page.html
index e5c6ad96..2e568ea4 100644
--- a/docs/pt-br/contexto-page.html
+++ b/docs/pt-br/contexto-page.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -144,15 +144,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo Passo</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Contexto Page - Nullstack","description":"O objeto page é um proxy no Contexto Nullstack disponível em ambos client e server e te dá informações sobre as metatags da head do documento"};
       window.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/contexto-page":{"title":"Contexto Page","html":"<ul>\n<li>Tipo: <code>object<\/code><\/li>\n<li>Origem: <a href=\"/pt-br/contexto#----contexto-nullstack\">Contexto Nullstack<\/a><\/li>\n<li>Disponibilidade: server/client<\/li>\n<li><strong>readwrite<\/strong> em ambos <strong>server<\/strong> e <strong>client<\/strong><\/li>\n<\/ul>\n<p>Ele fornece informações sobre as metatags da <code>head<\/code> do documento.<\/p>\n<p>Chaves de <code>page<\/code> serão usadas para gerar as metatags durante a <a href=\"/pt-br/renderizando-no-servidor\">renderização no lado do servidor<\/a> e devem ser atribuídas antes do ciclo <a href=\"/pt-br/ciclo-de-vida-full-stack\"><code>initiate<\/code><\/a> ser resolvido.<\/p>\n<p>As seguintes chaves estão disponíveis no objeto:<\/p>\n<ul>\n<li><strong>title<\/strong>: <code>string<\/code><\/li>\n<li><strong>image<\/strong>: <code>string<\/code> (URL absoluto ou relativo)<\/li>\n<li><strong>description<\/strong>: <code>string<\/code><\/li>\n<li><strong>canonical<\/strong>: <code>string<\/code> (URL absoluto ou relativo)<\/li>\n<li><strong>locale<\/strong>: <code>string<\/code><\/li>\n<li><strong>robots<\/strong>: <code>string<\/code><\/li>\n<li><strong>schema<\/strong>: <code>object<\/code><\/li>\n<li><strong>changes<\/strong>: <code>string<\/code><\/li>\n<li><strong>priority<\/strong>: <code>number<\/code><\/li>\n<li><strong>status<\/strong>: <code>number<\/code><\/li>\n<\/ul>\n<p>Quando a chave <code>title<\/code> é atribuída no lado do client, o título do documento será atualizado.<\/p>\n<p>Nullstack utiliza as chaves <code>changes<\/code> e <code>priority<\/code> para gerar o <strong>sitemap.xml<\/strong>.<\/p>\n<p>O mapa do site é gerado automaticamente apenas ao utilizar a <a href=\"/pt-br/geracao-de-sites-estaticos\">geração de site estático<\/a> e deve ser gerado manualmente em aplicativos com a <a href=\"/pt-br/renderizando-no-servidor\">renderização no lado do servidor<\/a>.<\/p>\n<p>A chave <code>changes<\/code> representa a chave <code>changefreq<\/code> no <strong>sitemap.xml<\/strong> e se for atribuída deverá ser um dos seguintes valores:<\/p>\n<ul>\n<li><strong>always<\/strong><\/li>\n<li><strong>hourly<\/strong><\/li>\n<li><strong>daily<\/strong><\/li>\n<li><strong>weekly<\/strong><\/li>\n<li><strong>monthly<\/strong><\/li>\n<li><strong>yearly<\/strong><\/li>\n<li><strong>never<\/strong><\/li>\n<\/ul>\n<p>A chave <code>priority<\/code> é um número entre <code>0.0<\/code> e <code>1.0<\/code> que representa a chave <code>priority<\/code> no <strong>sitemap.xml<\/strong>.<\/p>\n<p>Nullstack não define uma prioridade padrão, no entanto, sitemaps assumem uma prioridade <code>0.5<\/code> quando não são definidas explicitamente.<\/p>\n<p>Além de <code>title<\/code> e <code>locale<\/code>, todas as outras chaves tem padrões sensíveis e gerados com base no escopo do aplicativo.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Page<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>project<span class=\"token punctuation\">,<\/span> page<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    page<span class=\"token punctuation\">.<\/span>title <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>project<span class=\"token punctuation\">.<\/span>name<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\"> - Título da página<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>image <span class=\"token operator\">=<\/span> <span class=\"token string\">'/imagem.jpg'<\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>description <span class=\"token operator\">=<\/span> <span class=\"token string\">'Meta descrição da página'<\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>canonical <span class=\"token operator\">=<\/span> <span class=\"token string\">'http://absoluto.url/canonical-link'<\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>locale <span class=\"token operator\">=<\/span> <span class=\"token string\">'pt-BR'<\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>robots <span class=\"token operator\">=<\/span> <span class=\"token string\">'index, follow'<\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>schema <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>changes <span class=\"token operator\">=<\/span> <span class=\"token string\">'weekly'<\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>priority <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h1<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">.<\/span>title<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>h1<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">.<\/span>description<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Page<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"eventos-personalizados\"><a href=\"#eventos-personalizados\">Eventos Personalizados<\/a><\/h2><p>Atualizando <code>page.title<\/code> gerará um evento personalizado.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Analytics<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">hydrate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    window<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span>page<span class=\"token punctuation\">.<\/span>event<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n      console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>page<span class=\"token punctuation\">.<\/span>title<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Analytics<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"p-ginas-de-erro\"><a href=\"#p-ginas-de-erro\">Páginas de erro<\/a><\/h2><p>Se durante o processo de <a href=\"/pt-br/renderizando-no-servidor\">renderização no lado do servidor<\/a> o <code>page.status<\/code> estiver com qualquer valor além de <code>200<\/code>, seu aplicativo receberá outra passagem na renderização e lhe possibilitará ajustar a interface de acordo com o status retornado.<\/p>\n<p>A chave <code>status<\/code> será gerada na resposta HTTP.<\/p>\n<p>O status da página será modificado para <code>500<\/code> e receberá outra passagem na renderização se a página gerar uma exceção enquanto renderiza.<\/p>\n<p>O status das respostas de <a href=\"/pt-br/funcoes-de-servidor\">funções do servidor<\/a> será definido no <code>page.status<\/code>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> ErrorPage <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./ErrorPage'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> HomePage <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./HomePage'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">.<\/span>status <span class=\"token operator\">!==<\/span> <span class=\"token number\">200<\/span> <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">ErrorPage<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>*<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">HomePage<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>🔥 A atribuição à chave <code>status<\/code> durante o modo <a href=\"/pt-br/ciclo-de-vida-full-stack\">aplicativo de página única<\/a> não terá efeito.<\/p>\n<\/blockquote>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo Passo<\/a><\/h2><p>⚔ Aprenda sobre a <a href=\"/pt-br/contexto-project\">chave <code>project<\/code> do contexto<\/a>.<\/p>\n","description":"O objeto page é um proxy no Contexto Nullstack disponível em ambos client e server e te dá informações sobre as metatags da head do documento","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"contexto-page"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/contexto-page/index.html b/docs/pt-br/contexto-page/index.html
index e5c6ad96..2e568ea4 100644
--- a/docs/pt-br/contexto-page/index.html
+++ b/docs/pt-br/contexto-page/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -144,15 +144,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo Passo</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Contexto Page - Nullstack","description":"O objeto page é um proxy no Contexto Nullstack disponível em ambos client e server e te dá informações sobre as metatags da head do documento"};
       window.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/contexto-page":{"title":"Contexto Page","html":"<ul>\n<li>Tipo: <code>object<\/code><\/li>\n<li>Origem: <a href=\"/pt-br/contexto#----contexto-nullstack\">Contexto Nullstack<\/a><\/li>\n<li>Disponibilidade: server/client<\/li>\n<li><strong>readwrite<\/strong> em ambos <strong>server<\/strong> e <strong>client<\/strong><\/li>\n<\/ul>\n<p>Ele fornece informações sobre as metatags da <code>head<\/code> do documento.<\/p>\n<p>Chaves de <code>page<\/code> serão usadas para gerar as metatags durante a <a href=\"/pt-br/renderizando-no-servidor\">renderização no lado do servidor<\/a> e devem ser atribuídas antes do ciclo <a href=\"/pt-br/ciclo-de-vida-full-stack\"><code>initiate<\/code><\/a> ser resolvido.<\/p>\n<p>As seguintes chaves estão disponíveis no objeto:<\/p>\n<ul>\n<li><strong>title<\/strong>: <code>string<\/code><\/li>\n<li><strong>image<\/strong>: <code>string<\/code> (URL absoluto ou relativo)<\/li>\n<li><strong>description<\/strong>: <code>string<\/code><\/li>\n<li><strong>canonical<\/strong>: <code>string<\/code> (URL absoluto ou relativo)<\/li>\n<li><strong>locale<\/strong>: <code>string<\/code><\/li>\n<li><strong>robots<\/strong>: <code>string<\/code><\/li>\n<li><strong>schema<\/strong>: <code>object<\/code><\/li>\n<li><strong>changes<\/strong>: <code>string<\/code><\/li>\n<li><strong>priority<\/strong>: <code>number<\/code><\/li>\n<li><strong>status<\/strong>: <code>number<\/code><\/li>\n<\/ul>\n<p>Quando a chave <code>title<\/code> é atribuída no lado do client, o título do documento será atualizado.<\/p>\n<p>Nullstack utiliza as chaves <code>changes<\/code> e <code>priority<\/code> para gerar o <strong>sitemap.xml<\/strong>.<\/p>\n<p>O mapa do site é gerado automaticamente apenas ao utilizar a <a href=\"/pt-br/geracao-de-sites-estaticos\">geração de site estático<\/a> e deve ser gerado manualmente em aplicativos com a <a href=\"/pt-br/renderizando-no-servidor\">renderização no lado do servidor<\/a>.<\/p>\n<p>A chave <code>changes<\/code> representa a chave <code>changefreq<\/code> no <strong>sitemap.xml<\/strong> e se for atribuída deverá ser um dos seguintes valores:<\/p>\n<ul>\n<li><strong>always<\/strong><\/li>\n<li><strong>hourly<\/strong><\/li>\n<li><strong>daily<\/strong><\/li>\n<li><strong>weekly<\/strong><\/li>\n<li><strong>monthly<\/strong><\/li>\n<li><strong>yearly<\/strong><\/li>\n<li><strong>never<\/strong><\/li>\n<\/ul>\n<p>A chave <code>priority<\/code> é um número entre <code>0.0<\/code> e <code>1.0<\/code> que representa a chave <code>priority<\/code> no <strong>sitemap.xml<\/strong>.<\/p>\n<p>Nullstack não define uma prioridade padrão, no entanto, sitemaps assumem uma prioridade <code>0.5<\/code> quando não são definidas explicitamente.<\/p>\n<p>Além de <code>title<\/code> e <code>locale<\/code>, todas as outras chaves tem padrões sensíveis e gerados com base no escopo do aplicativo.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Page<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>project<span class=\"token punctuation\">,<\/span> page<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    page<span class=\"token punctuation\">.<\/span>title <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>project<span class=\"token punctuation\">.<\/span>name<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\"> - Título da página<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>image <span class=\"token operator\">=<\/span> <span class=\"token string\">'/imagem.jpg'<\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>description <span class=\"token operator\">=<\/span> <span class=\"token string\">'Meta descrição da página'<\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>canonical <span class=\"token operator\">=<\/span> <span class=\"token string\">'http://absoluto.url/canonical-link'<\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>locale <span class=\"token operator\">=<\/span> <span class=\"token string\">'pt-BR'<\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>robots <span class=\"token operator\">=<\/span> <span class=\"token string\">'index, follow'<\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>schema <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>changes <span class=\"token operator\">=<\/span> <span class=\"token string\">'weekly'<\/span><span class=\"token punctuation\">;<\/span>\n    page<span class=\"token punctuation\">.<\/span>priority <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h1<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">.<\/span>title<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>h1<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">.<\/span>description<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Page<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"eventos-personalizados\"><a href=\"#eventos-personalizados\">Eventos Personalizados<\/a><\/h2><p>Atualizando <code>page.title<\/code> gerará um evento personalizado.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Analytics<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">hydrate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    window<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span>page<span class=\"token punctuation\">.<\/span>event<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n      console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>page<span class=\"token punctuation\">.<\/span>title<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Analytics<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"p-ginas-de-erro\"><a href=\"#p-ginas-de-erro\">Páginas de erro<\/a><\/h2><p>Se durante o processo de <a href=\"/pt-br/renderizando-no-servidor\">renderização no lado do servidor<\/a> o <code>page.status<\/code> estiver com qualquer valor além de <code>200<\/code>, seu aplicativo receberá outra passagem na renderização e lhe possibilitará ajustar a interface de acordo com o status retornado.<\/p>\n<p>A chave <code>status<\/code> será gerada na resposta HTTP.<\/p>\n<p>O status da página será modificado para <code>500<\/code> e receberá outra passagem na renderização se a página gerar uma exceção enquanto renderiza.<\/p>\n<p>O status das respostas de <a href=\"/pt-br/funcoes-de-servidor\">funções do servidor<\/a> será definido no <code>page.status<\/code>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> ErrorPage <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./ErrorPage'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> HomePage <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./HomePage'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">.<\/span>status <span class=\"token operator\">!==<\/span> <span class=\"token number\">200<\/span> <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">ErrorPage<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>*<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">HomePage<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>🔥 A atribuição à chave <code>status<\/code> durante o modo <a href=\"/pt-br/ciclo-de-vida-full-stack\">aplicativo de página única<\/a> não terá efeito.<\/p>\n<\/blockquote>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo Passo<\/a><\/h2><p>⚔ Aprenda sobre a <a href=\"/pt-br/contexto-project\">chave <code>project<\/code> do contexto<\/a>.<\/p>\n","description":"O objeto page é um proxy no Contexto Nullstack disponível em ambos client e server e te dá informações sobre as metatags da head do documento","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"contexto-page"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/contexto-project.html b/docs/pt-br/contexto-project.html
index 81eb219e..6fbf8e01 100644
--- a/docs/pt-br/contexto-project.html
+++ b/docs/pt-br/contexto-project.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -107,15 +107,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo Passo</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Contexto Project - Nullstack","description":"O objeto project é um proxy no Contexto Nullstack disponível em ambos client e server e te dá informações sobre o manifest do app e algumas metatags"};
       window.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/contexto-project":{"title":"Contexto Project","html":"<ul>\n<li>Tipo: <code>object<\/code><\/li>\n<li>Origem: <a href=\"/pt-br/contexto#----contexto-nullstack\">Contexto Nullstack<\/a><\/li>\n<li>Disponibilidade: server/client<\/li>\n<li><strong>readwrite<\/strong> no contexto do <strong>server<\/strong><\/li>\n<li><strong>readonly<\/strong> no contexto do <strong>client<\/strong><\/li>\n<\/ul>\n<p>Ele te dá informações sobre o manifest do app e algumas metatags.<\/p>\n<p>As chaves de <code>project<\/code> serão usadas para gerar metatags durante a renderização do lado do servidor e devem ser definidas antes que <a href=\"/pt-br/ciclo-de-vida-full-stack\"><code>initiate<\/code><\/a> seja resolvido.<\/p>\n<p>As chaves de <code>project<\/code> serão usadas para gerar o <strong>manifest<\/strong> do app e devem ser definidas durante a <a href=\"/pt-br/inicializacao-da-aplicacao\">inicialização da aplicação<\/a>.<\/p>\n<p>A chave <code>disallow<\/code> será usada para gerar o <strong>robots.txt<\/strong> e deverá ser definida durante a <a href=\"/pt-br/inicializacao-da-aplicacao\">inicialização da aplicação<\/a>.<\/p>\n<p>As chaves de <code>project<\/code> serão congeladas após a <a href=\"/pt-br/inicializacao-da-aplicacao\">inicialização da aplicação<\/a>.<\/p>\n<p>As chaves a seguir estão disponíveis no objeto:<\/p>\n<ul>\n<li><strong>domain<\/strong>: <code>string<\/code><\/li>\n<li><strong>name<\/strong>: <code>string<\/code><\/li>\n<li><strong>shortName<\/strong>: <code>string<\/code><\/li>\n<li><strong>color<\/strong>: <code>string<\/code><\/li>\n<li><strong>backgroundColor<\/strong>: <code>string<\/code><\/li>\n<li><strong>type<\/strong>: <code>string<\/code><\/li>\n<li><strong>display<\/strong>: <code>string<\/code><\/li>\n<li><strong>orientation<\/strong>: <code>string<\/code><\/li>\n<li><strong>scope<\/strong>: <code>string<\/code><\/li>\n<li><strong>root<\/strong>: <code>string<\/code><\/li>\n<li><strong>icons<\/strong>: <code>object<\/code><\/li>\n<li><strong>favicon<\/strong>: <code>string<\/code> (url relativo ou absoluto)<\/li>\n<li><strong>disallow<\/strong>: <code>array<\/code> de <code>string<\/code> (caminhos relativos)<\/li>\n<li><strong>sitemap<\/strong>: <code>boolean<\/code> ou <code>string<\/code> (url relativo ou absoluto)<\/li>\n<\/ul>\n<p>Além de <code>domain<\/code>, <code>name<\/code> and <code>color<\/code> todas as outras chaves tem padrões sensíveis gerados com base no escopo do aplicativo.<\/p>\n<p>Se você não declarar a chave <code>icons<\/code>, Nullstack irá escanear quaisquer ícones com o nome seguindo o padrão &quot;icon-[LARGURA]x[ALTURA].png&quot; na sua pasta <strong>public<\/strong>.<\/p>\n<p>Se a chave <code>sitemap<\/code> estiver definida como <code>true<\/code> o seu arquivo <strong>robots.txt<\/strong> irá apontar o sitemap para <code>https://${project.domain}/sitemap.xml<\/code>.<\/p>\n<p>A chave <code>cdn<\/code> irá prefixar seu pacote de assets e ficará disponível no contexto para que você possa manualmente prefixar outros ativos.<\/p>\n<p>A chave <code>protocol<\/code> é &quot;http&quot; no modo de desenvolvimento e &quot;https&quot; e no modo produção por predefinição.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>project<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    project<span class=\"token punctuation\">.<\/span>name <span class=\"token operator\">=<\/span> <span class=\"token string\">'Nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>shortName <span class=\"token operator\">=<\/span> <span class=\"token string\">'Nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>domain <span class=\"token operator\">=<\/span> <span class=\"token string\">'nullstack.app'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>color <span class=\"token operator\">=<\/span> <span class=\"token string\">'#d22365'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>backgroundColor <span class=\"token operator\">=<\/span> <span class=\"token string\">'#d22365'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>type <span class=\"token operator\">=<\/span> <span class=\"token string\">'website'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>display <span class=\"token operator\">=<\/span> <span class=\"token string\">'standalone'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>orientation <span class=\"token operator\">=<\/span> <span class=\"token string\">'portrait'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>scope <span class=\"token operator\">=<\/span> <span class=\"token string\">'/'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>root <span class=\"token operator\">=<\/span> <span class=\"token string\">'/'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>icons <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token string\">'72'<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">'/icon-72x72.png'<\/span><span class=\"token punctuation\">,<\/span>\n      <span class=\"token string\">'128'<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">'/icon-128x128.png'<\/span><span class=\"token punctuation\">,<\/span>\n      <span class=\"token string\">'512'<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">'/icon-512x512.png'<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>favicon <span class=\"token operator\">=<\/span> <span class=\"token string\">'/favicon.png'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>disallow <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token string\">'/admin'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>sitemap <span class=\"token operator\">=<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>cdn <span class=\"token operator\">=<\/span> <span class=\"token string\">'cdn.nullstack.app'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>protocol <span class=\"token operator\">=<\/span> <span class=\"token string\">'https'<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>project<span class=\"token punctuation\">,<\/span> page<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    page<span class=\"token punctuation\">.<\/span>title <span class=\"token operator\">=<\/span> project<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 Você pode substituir o <strong>manifest.json<\/strong> gerado automaticamente e <strong>robots.txt<\/strong> inserindo o seu próprio arquivo na pasta <strong>public<\/strong><\/p>\n<\/blockquote>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo Passo<\/a><\/h2><p>⚔ Aprenda sobre a <a href=\"/pt-br/contexto-settings\">chave <code>settings<\/code> do contexto<\/a>.<\/p>\n","description":"O objeto project é um proxy no Contexto Nullstack disponível em ambos client e server e te dá informações sobre o manifest do app e algumas metatags","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"contexto-project"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/contexto-project/index.html b/docs/pt-br/contexto-project/index.html
index 81eb219e..6fbf8e01 100644
--- a/docs/pt-br/contexto-project/index.html
+++ b/docs/pt-br/contexto-project/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -107,15 +107,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo Passo</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Contexto Project - Nullstack","description":"O objeto project é um proxy no Contexto Nullstack disponível em ambos client e server e te dá informações sobre o manifest do app e algumas metatags"};
       window.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/contexto-project":{"title":"Contexto Project","html":"<ul>\n<li>Tipo: <code>object<\/code><\/li>\n<li>Origem: <a href=\"/pt-br/contexto#----contexto-nullstack\">Contexto Nullstack<\/a><\/li>\n<li>Disponibilidade: server/client<\/li>\n<li><strong>readwrite<\/strong> no contexto do <strong>server<\/strong><\/li>\n<li><strong>readonly<\/strong> no contexto do <strong>client<\/strong><\/li>\n<\/ul>\n<p>Ele te dá informações sobre o manifest do app e algumas metatags.<\/p>\n<p>As chaves de <code>project<\/code> serão usadas para gerar metatags durante a renderização do lado do servidor e devem ser definidas antes que <a href=\"/pt-br/ciclo-de-vida-full-stack\"><code>initiate<\/code><\/a> seja resolvido.<\/p>\n<p>As chaves de <code>project<\/code> serão usadas para gerar o <strong>manifest<\/strong> do app e devem ser definidas durante a <a href=\"/pt-br/inicializacao-da-aplicacao\">inicialização da aplicação<\/a>.<\/p>\n<p>A chave <code>disallow<\/code> será usada para gerar o <strong>robots.txt<\/strong> e deverá ser definida durante a <a href=\"/pt-br/inicializacao-da-aplicacao\">inicialização da aplicação<\/a>.<\/p>\n<p>As chaves de <code>project<\/code> serão congeladas após a <a href=\"/pt-br/inicializacao-da-aplicacao\">inicialização da aplicação<\/a>.<\/p>\n<p>As chaves a seguir estão disponíveis no objeto:<\/p>\n<ul>\n<li><strong>domain<\/strong>: <code>string<\/code><\/li>\n<li><strong>name<\/strong>: <code>string<\/code><\/li>\n<li><strong>shortName<\/strong>: <code>string<\/code><\/li>\n<li><strong>color<\/strong>: <code>string<\/code><\/li>\n<li><strong>backgroundColor<\/strong>: <code>string<\/code><\/li>\n<li><strong>type<\/strong>: <code>string<\/code><\/li>\n<li><strong>display<\/strong>: <code>string<\/code><\/li>\n<li><strong>orientation<\/strong>: <code>string<\/code><\/li>\n<li><strong>scope<\/strong>: <code>string<\/code><\/li>\n<li><strong>root<\/strong>: <code>string<\/code><\/li>\n<li><strong>icons<\/strong>: <code>object<\/code><\/li>\n<li><strong>favicon<\/strong>: <code>string<\/code> (url relativo ou absoluto)<\/li>\n<li><strong>disallow<\/strong>: <code>array<\/code> de <code>string<\/code> (caminhos relativos)<\/li>\n<li><strong>sitemap<\/strong>: <code>boolean<\/code> ou <code>string<\/code> (url relativo ou absoluto)<\/li>\n<\/ul>\n<p>Além de <code>domain<\/code>, <code>name<\/code> and <code>color<\/code> todas as outras chaves tem padrões sensíveis gerados com base no escopo do aplicativo.<\/p>\n<p>Se você não declarar a chave <code>icons<\/code>, Nullstack irá escanear quaisquer ícones com o nome seguindo o padrão &quot;icon-[LARGURA]x[ALTURA].png&quot; na sua pasta <strong>public<\/strong>.<\/p>\n<p>Se a chave <code>sitemap<\/code> estiver definida como <code>true<\/code> o seu arquivo <strong>robots.txt<\/strong> irá apontar o sitemap para <code>https://${project.domain}/sitemap.xml<\/code>.<\/p>\n<p>A chave <code>cdn<\/code> irá prefixar seu pacote de assets e ficará disponível no contexto para que você possa manualmente prefixar outros ativos.<\/p>\n<p>A chave <code>protocol<\/code> é &quot;http&quot; no modo de desenvolvimento e &quot;https&quot; e no modo produção por predefinição.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>project<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    project<span class=\"token punctuation\">.<\/span>name <span class=\"token operator\">=<\/span> <span class=\"token string\">'Nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>shortName <span class=\"token operator\">=<\/span> <span class=\"token string\">'Nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>domain <span class=\"token operator\">=<\/span> <span class=\"token string\">'nullstack.app'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>color <span class=\"token operator\">=<\/span> <span class=\"token string\">'#d22365'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>backgroundColor <span class=\"token operator\">=<\/span> <span class=\"token string\">'#d22365'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>type <span class=\"token operator\">=<\/span> <span class=\"token string\">'website'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>display <span class=\"token operator\">=<\/span> <span class=\"token string\">'standalone'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>orientation <span class=\"token operator\">=<\/span> <span class=\"token string\">'portrait'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>scope <span class=\"token operator\">=<\/span> <span class=\"token string\">'/'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>root <span class=\"token operator\">=<\/span> <span class=\"token string\">'/'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>icons <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token string\">'72'<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">'/icon-72x72.png'<\/span><span class=\"token punctuation\">,<\/span>\n      <span class=\"token string\">'128'<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">'/icon-128x128.png'<\/span><span class=\"token punctuation\">,<\/span>\n      <span class=\"token string\">'512'<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">'/icon-512x512.png'<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>favicon <span class=\"token operator\">=<\/span> <span class=\"token string\">'/favicon.png'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>disallow <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token string\">'/admin'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>sitemap <span class=\"token operator\">=<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>cdn <span class=\"token operator\">=<\/span> <span class=\"token string\">'cdn.nullstack.app'<\/span><span class=\"token punctuation\">;<\/span>\n    project<span class=\"token punctuation\">.<\/span>protocol <span class=\"token operator\">=<\/span> <span class=\"token string\">'https'<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>project<span class=\"token punctuation\">,<\/span> page<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    page<span class=\"token punctuation\">.<\/span>title <span class=\"token operator\">=<\/span> project<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 Você pode substituir o <strong>manifest.json<\/strong> gerado automaticamente e <strong>robots.txt<\/strong> inserindo o seu próprio arquivo na pasta <strong>public<\/strong><\/p>\n<\/blockquote>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo Passo<\/a><\/h2><p>⚔ Aprenda sobre a <a href=\"/pt-br/contexto-settings\">chave <code>settings<\/code> do contexto<\/a>.<\/p>\n","description":"O objeto project é um proxy no Contexto Nullstack disponível em ambos client e server e te dá informações sobre o manifest do app e algumas metatags","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"contexto-project"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/contexto-secrets.html b/docs/pt-br/contexto-secrets.html
index 523c8831..4a51f126 100644
--- a/docs/pt-br/contexto-secrets.html
+++ b/docs/pt-br/contexto-secrets.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -79,15 +79,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo passo</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Contexto Secrets - Nullstack","description":"O objeto secrets é um proxy no Contexto Nullstack disponível no server que você pode usar para configurar dados sensíveis para sua aplicação"};
       window.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/contexto-secrets":{"title":"Contexto Secrets","html":"<ul>\n<li>Tipo: <code>object<\/code><\/li>\n<li>Origem: <a href=\"/pt-br/contexto#----contexto-nullstack\">Contexto Nullstack<\/a><\/li>\n<li>Disponibilidade: <strong>server<\/strong><\/li>\n<li><strong>readwrite<\/strong> no contexto do <strong>server<\/strong><\/li>\n<\/ul>\n<p>Você pode usá-lo para configurar dados sensíveis para sua aplicação.<\/p>\n<p>Chaves de <code>secrets<\/code> são congeladas depois da <a href=\"/pt-br/inicializacao-da-aplicacao\">inicialização da aplicação<\/a>.<\/p>\n<p>As seguintes chaves estão disponíveis no objeto:<\/p>\n<ul>\n<li><strong>development<\/strong>: <code>object<\/code><\/li>\n<li><strong>production<\/strong>: <code>object<\/code><\/li>\n<li><strong>[qualquerSegredo]<\/strong>: <code>any<\/code><\/li>\n<\/ul>\n<p>Você pode definir chaves diferentes para as chaves <code>development<\/code> e <code>production<\/code>, obtendo assim valores diferentes para cada <a href=\"/pt-br/contexto-environment\">ambiente<\/a>.<\/p>\n<p>Caso uma chave seja definida diretamente no objeto <code>secrets<\/code> ela ficará disponível para ambos os ambientes.<\/p>\n<p>A leitura das chaves deve ser feita diretamente do objeto <code>secrets<\/code>, pois o Nullstack vai retornar o valor referido de acordo com o <a href=\"/pt-br/contexto-environment\">ambiente<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>secrets<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    secrets<span class=\"token punctuation\">.<\/span>development<span class=\"token punctuation\">.<\/span>privateKey <span class=\"token operator\">=<\/span> <span class=\"token string\">'SANDBOX_API_KEY'<\/span><span class=\"token punctuation\">;<\/span>\n    secrets<span class=\"token punctuation\">.<\/span>production<span class=\"token punctuation\">.<\/span>privateKey <span class=\"token operator\">=<\/span> <span class=\"token string\">'PRODUCTION_API_KEY'<\/span><span class=\"token punctuation\">;<\/span>\n    secrets<span class=\"token punctuation\">.<\/span>endpoint <span class=\"token operator\">=<\/span> <span class=\"token string\">'https://domain.com/api'<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">fetchFromApi<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>secrets<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> response <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span>secrets<span class=\"token punctuation\">.<\/span>endpoint<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span>\n      headers<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span>\n        Authorization<span class=\"token operator\">:<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Bearer <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>secrets<span class=\"token punctuation\">.<\/span>privateKey<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span>\n      <span class=\"token punctuation\">}<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">await<\/span> response<span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Qualquer chave de ambiente iniciada por NULLSTACK_SECRETS_ será mapeada para o <em>secrets<\/em> de seu respectivo ambiente.<\/p>\n<blockquote>\n<p>🐱‍💻 NULLSTACK_SECRETS_PRIVATE_KEY será mapeada para <code>secrets.privateKey<\/code><\/p>\n<\/blockquote>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo passo<\/a><\/h2><p>⚔ Aprendendo sobre o <a href=\"/pt-br/instancia-self\"><code>self<\/code> da instância<\/a>.<\/p>\n","description":"O objeto secrets é um proxy no Contexto Nullstack disponível no server que você pode usar para configurar dados sensíveis para sua aplicação","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"contexto-secrets"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/contexto-secrets/index.html b/docs/pt-br/contexto-secrets/index.html
index 523c8831..4a51f126 100644
--- a/docs/pt-br/contexto-secrets/index.html
+++ b/docs/pt-br/contexto-secrets/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -79,15 +79,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo passo</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Contexto Secrets - Nullstack","description":"O objeto secrets é um proxy no Contexto Nullstack disponível no server que você pode usar para configurar dados sensíveis para sua aplicação"};
       window.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/contexto-secrets":{"title":"Contexto Secrets","html":"<ul>\n<li>Tipo: <code>object<\/code><\/li>\n<li>Origem: <a href=\"/pt-br/contexto#----contexto-nullstack\">Contexto Nullstack<\/a><\/li>\n<li>Disponibilidade: <strong>server<\/strong><\/li>\n<li><strong>readwrite<\/strong> no contexto do <strong>server<\/strong><\/li>\n<\/ul>\n<p>Você pode usá-lo para configurar dados sensíveis para sua aplicação.<\/p>\n<p>Chaves de <code>secrets<\/code> são congeladas depois da <a href=\"/pt-br/inicializacao-da-aplicacao\">inicialização da aplicação<\/a>.<\/p>\n<p>As seguintes chaves estão disponíveis no objeto:<\/p>\n<ul>\n<li><strong>development<\/strong>: <code>object<\/code><\/li>\n<li><strong>production<\/strong>: <code>object<\/code><\/li>\n<li><strong>[qualquerSegredo]<\/strong>: <code>any<\/code><\/li>\n<\/ul>\n<p>Você pode definir chaves diferentes para as chaves <code>development<\/code> e <code>production<\/code>, obtendo assim valores diferentes para cada <a href=\"/pt-br/contexto-environment\">ambiente<\/a>.<\/p>\n<p>Caso uma chave seja definida diretamente no objeto <code>secrets<\/code> ela ficará disponível para ambos os ambientes.<\/p>\n<p>A leitura das chaves deve ser feita diretamente do objeto <code>secrets<\/code>, pois o Nullstack vai retornar o valor referido de acordo com o <a href=\"/pt-br/contexto-environment\">ambiente<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>secrets<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    secrets<span class=\"token punctuation\">.<\/span>development<span class=\"token punctuation\">.<\/span>privateKey <span class=\"token operator\">=<\/span> <span class=\"token string\">'SANDBOX_API_KEY'<\/span><span class=\"token punctuation\">;<\/span>\n    secrets<span class=\"token punctuation\">.<\/span>production<span class=\"token punctuation\">.<\/span>privateKey <span class=\"token operator\">=<\/span> <span class=\"token string\">'PRODUCTION_API_KEY'<\/span><span class=\"token punctuation\">;<\/span>\n    secrets<span class=\"token punctuation\">.<\/span>endpoint <span class=\"token operator\">=<\/span> <span class=\"token string\">'https://domain.com/api'<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">fetchFromApi<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>secrets<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> response <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span>secrets<span class=\"token punctuation\">.<\/span>endpoint<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span>\n      headers<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span>\n        Authorization<span class=\"token operator\">:<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Bearer <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>secrets<span class=\"token punctuation\">.<\/span>privateKey<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span>\n      <span class=\"token punctuation\">}<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">await<\/span> response<span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Qualquer chave de ambiente iniciada por NULLSTACK_SECRETS_ será mapeada para o <em>secrets<\/em> de seu respectivo ambiente.<\/p>\n<blockquote>\n<p>🐱‍💻 NULLSTACK_SECRETS_PRIVATE_KEY será mapeada para <code>secrets.privateKey<\/code><\/p>\n<\/blockquote>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo passo<\/a><\/h2><p>⚔ Aprendendo sobre o <a href=\"/pt-br/instancia-self\"><code>self<\/code> da instância<\/a>.<\/p>\n","description":"O objeto secrets é um proxy no Contexto Nullstack disponível no server que você pode usar para configurar dados sensíveis para sua aplicação","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"contexto-secrets"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/contexto-settings.html b/docs/pt-br/contexto-settings.html
index 583ce670..a9c8ae12 100644
--- a/docs/pt-br/contexto-settings.html
+++ b/docs/pt-br/contexto-settings.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -80,15 +80,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo passo</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Contexto Settings - Nullstack","description":"O objeto settings é um proxy no Contexto Nullstack disponível em ambos client e server que você pode usar para configurar seu aplicativo com informações públicas"};
       window.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/contexto-settings":{"title":"Contexto Settings","html":"<ul>\n<li>Tipo: <code>object<\/code><\/li>\n<li>Origem: <a href=\"/pt-br/contexto#----contexto-nullstack\">Contexto Nullstack<\/a><\/li>\n<li>Disponibilidade: server/client<\/li>\n<li><strong>readwrite<\/strong> no contexto do <strong>server<\/strong><\/li>\n<li><strong>readonly<\/strong> no contexto do <strong>client<\/strong><\/li>\n<\/ul>\n<p>Você pode usá-lo para configurar seu aplicativo com informações públicas.<\/p>\n<p>Chaves de <code>settings<\/code> serão congeladas após a <a href=\"/pt-br/inicializacao-da-aplicacao\">inicialização do aplicativo<\/a>.<\/p>\n<p>As chaves a seguir estão disponíveis no objeto:<\/p>\n<ul>\n<li><strong>development<\/strong>: <code>object<\/code><\/li>\n<li><strong>production<\/strong>: <code>object<\/code><\/li>\n<li><strong>[anySetting]<\/strong>: <code>any<\/code><\/li>\n<\/ul>\n<p>Você pode declarar as chaves para as chaves <code>development<\/code> ou <code>production<\/code> para ter diferentes configurações por <a href=\"/pt-br/contexto-environment\">ambiente<\/a>.<\/p>\n<p>Se você declarar uma chave diretamente para o objeto <code>settings<\/code> ela ficará disponível em ambos os ambientes.<\/p>\n<p>Quando lendo de uma chave você deve ler diretamente do objeto <code>settings<\/code> e o Nullstack retornará o valor mais adequado para aquele <a href=\"/pt-br/contexto-environment\">ambiente<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>settings<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    settings<span class=\"token punctuation\">.<\/span>development<span class=\"token punctuation\">.<\/span>publicKey <span class=\"token operator\">=<\/span> <span class=\"token string\">'SANDBOX_API_KEY'<\/span><span class=\"token punctuation\">;<\/span>\n    settings<span class=\"token punctuation\">.<\/span>production<span class=\"token punctuation\">.<\/span>publicKey <span class=\"token operator\">=<\/span> <span class=\"token string\">'PRODUCTION_API_KEY'<\/span><span class=\"token punctuation\">;<\/span>\n    settings<span class=\"token punctuation\">.<\/span>endpoint <span class=\"token operator\">=<\/span> <span class=\"token string\">'https://domain.com/api'<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">hydrate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>settings<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> response <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span>settings<span class=\"token punctuation\">.<\/span>endpoint<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span>\n      headers<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span>\n        Authorization<span class=\"token operator\">:<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Bearer <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>settings<span class=\"token punctuation\">.<\/span>publicKey<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span>\n      <span class=\"token punctuation\">}<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>data <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> response<span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Qualquer chave de ambiente começando com NULLSTACK_SETTINGS_ será mapeado para as confirgurações daquele ambiente.<\/p>\n<blockquote>\n<p>🐱‍💻 NULLSTACK_SETTINGS_PUBLIC_KEY será mapeado para <code>settings.publicKey<\/code><\/p>\n<\/blockquote>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo passo<\/a><\/h2><p>⚔ Aprenda sobre a <a href=\"/pt-br/contexto-secrets\">chave <code>secrets<\/code> do contexto<\/a>.<\/p>\n","description":"O objeto settings é um proxy no Contexto Nullstack disponível em ambos client e server que você pode usar para configurar seu aplicativo com informações públicas","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"contexto-settings"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/contexto-settings/index.html b/docs/pt-br/contexto-settings/index.html
index 583ce670..a9c8ae12 100644
--- a/docs/pt-br/contexto-settings/index.html
+++ b/docs/pt-br/contexto-settings/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -80,15 +80,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo passo</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Contexto Settings - Nullstack","description":"O objeto settings é um proxy no Contexto Nullstack disponível em ambos client e server que você pode usar para configurar seu aplicativo com informações públicas"};
       window.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/contexto-settings":{"title":"Contexto Settings","html":"<ul>\n<li>Tipo: <code>object<\/code><\/li>\n<li>Origem: <a href=\"/pt-br/contexto#----contexto-nullstack\">Contexto Nullstack<\/a><\/li>\n<li>Disponibilidade: server/client<\/li>\n<li><strong>readwrite<\/strong> no contexto do <strong>server<\/strong><\/li>\n<li><strong>readonly<\/strong> no contexto do <strong>client<\/strong><\/li>\n<\/ul>\n<p>Você pode usá-lo para configurar seu aplicativo com informações públicas.<\/p>\n<p>Chaves de <code>settings<\/code> serão congeladas após a <a href=\"/pt-br/inicializacao-da-aplicacao\">inicialização do aplicativo<\/a>.<\/p>\n<p>As chaves a seguir estão disponíveis no objeto:<\/p>\n<ul>\n<li><strong>development<\/strong>: <code>object<\/code><\/li>\n<li><strong>production<\/strong>: <code>object<\/code><\/li>\n<li><strong>[anySetting]<\/strong>: <code>any<\/code><\/li>\n<\/ul>\n<p>Você pode declarar as chaves para as chaves <code>development<\/code> ou <code>production<\/code> para ter diferentes configurações por <a href=\"/pt-br/contexto-environment\">ambiente<\/a>.<\/p>\n<p>Se você declarar uma chave diretamente para o objeto <code>settings<\/code> ela ficará disponível em ambos os ambientes.<\/p>\n<p>Quando lendo de uma chave você deve ler diretamente do objeto <code>settings<\/code> e o Nullstack retornará o valor mais adequado para aquele <a href=\"/pt-br/contexto-environment\">ambiente<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>settings<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    settings<span class=\"token punctuation\">.<\/span>development<span class=\"token punctuation\">.<\/span>publicKey <span class=\"token operator\">=<\/span> <span class=\"token string\">'SANDBOX_API_KEY'<\/span><span class=\"token punctuation\">;<\/span>\n    settings<span class=\"token punctuation\">.<\/span>production<span class=\"token punctuation\">.<\/span>publicKey <span class=\"token operator\">=<\/span> <span class=\"token string\">'PRODUCTION_API_KEY'<\/span><span class=\"token punctuation\">;<\/span>\n    settings<span class=\"token punctuation\">.<\/span>endpoint <span class=\"token operator\">=<\/span> <span class=\"token string\">'https://domain.com/api'<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">hydrate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>settings<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> response <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span>settings<span class=\"token punctuation\">.<\/span>endpoint<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span>\n      headers<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span>\n        Authorization<span class=\"token operator\">:<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Bearer <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>settings<span class=\"token punctuation\">.<\/span>publicKey<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span>\n      <span class=\"token punctuation\">}<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>data <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> response<span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Qualquer chave de ambiente começando com NULLSTACK_SETTINGS_ será mapeado para as confirgurações daquele ambiente.<\/p>\n<blockquote>\n<p>🐱‍💻 NULLSTACK_SETTINGS_PUBLIC_KEY será mapeado para <code>settings.publicKey<\/code><\/p>\n<\/blockquote>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo passo<\/a><\/h2><p>⚔ Aprenda sobre a <a href=\"/pt-br/contexto-secrets\">chave <code>secrets<\/code> do contexto<\/a>.<\/p>\n","description":"O objeto settings é um proxy no Contexto Nullstack disponível em ambos client e server que você pode usar para configurar seu aplicativo com informações públicas","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"contexto-settings"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/contexto.html b/docs/pt-br/contexto.html
index a2cf113d..214f716a 100644
--- a/docs/pt-br/contexto.html
+++ b/docs/pt-br/contexto.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -183,15 +183,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo passo</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Contexto - Nullstack","description":"Cada função no Nullstack recebe um contexto como argumento."};
       window.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/contexto":{"title":"Contexto","html":"<p>Cada função no Nullstack recebe um contexto como argumento.<\/p>\n<p>Existem dois contextos, um para o cliente e outro para o servidor.<\/p>\n<p>O contexto do cliente dura enquanto a guia do navegador estiver aberta.<\/p>\n<p>O contexto do servidor dura enquanto o servidor estiver em execução.<\/p>\n<p>Ambos os contextos são proxies que mesclam as chaves de 3 objetos:<\/p>\n<h2 id=\"----contexto-nullstack\"><a href=\"#----contexto-nullstack\">1 - Contexto Nullstack<\/a><\/h2><p>Essas são as informações que o framework disponibiliza para você por padrão.<\/p>\n<h3 id=\"as-chaves-globais-dispon-veis-em-ambos-server-e-client-s-o-\"><a href=\"#as-chaves-globais-dispon-veis-em-ambos-server-e-client-s-o-\">As chaves globais disponíveis em ambos server e client são:<\/a><\/h3><ul>\n<li><a href=\"/pt-br/contexto-page\"><code>page<\/code><\/a><\/li>\n<li><a href=\"/pt-br/contexto-project\"><code>project<\/code><\/a><\/li>\n<li><a href=\"/pt-br/contexto-environment\"><code>environment<\/code><\/a><\/li>\n<li><a href=\"/pt-br/rotas-e-parametros#par-metros\"><code>params<\/code><\/a><\/li>\n<li><a href=\"/pt-br/rotas-e-parametros#roteador\"><code>router<\/code><\/a><\/li>\n<li><a href=\"/pt-br/contexto-settings\"><code>settings<\/code><\/a><\/li>\n<li><a href=\"/pt-br/service-worker\"><code>worker<\/code><\/a><\/li>\n<\/ul>\n<h3 id=\"as-chaves-dispon-veis-apenas-em-fun--es-do-servidor-s-o-\"><a href=\"#as-chaves-dispon-veis-apenas-em-fun--es-do-servidor-s-o-\">As chaves disponíveis apenas em funções do servidor são:<\/a><\/h3><ul>\n<li><a href=\"/pt-br/requisicao-e-resposta-do-servidor\"><code>server<\/code><\/a><\/li>\n<li><a href=\"/pt-br/requisicao-e-resposta-do-servidor#requisi--o-e-resposta\"><code>request<\/code><\/a><\/li>\n<li><a href=\"/pt-br/requisicao-e-resposta-do-servidor#requisi--o-e-resposta\"><code>response<\/code><\/a><\/li>\n<li><a href=\"/pt-br/contexto-secrets\"><code>secrets<\/code><\/a><\/li>\n<\/ul>\n<h3 id=\"a-chave-dispon-vel-apenas-no-cliente-\"><a href=\"#a-chave-dispon-vel-apenas-no-cliente-\">A chave disponível apenas no cliente:<\/a><\/h3><ul>\n<li><a href=\"/pt-br/contexto-instances\"><code>instances<\/code><\/a><\/li>\n<\/ul>\n<h2 id=\"----contexto-aplica--o\"><a href=\"#----contexto-aplica--o\">2 - Contexto Aplicação<\/a><\/h2><p>Quando você define uma chave para o contexto, ela fica disponível para desestruturação em qualquer profundidade da aplicação, até mesmo para os objetos pais ou aplicações de terceiros que montam seu componente.<\/p>\n<p>Atualizar uma chave no contexto faz com que a aplicação seja renderizada novamente automaticamente.<\/p>\n<p>Você pode pensar nisso como um único conceito para substituir <strong>stores<\/strong>, <strong>contexts<\/strong>, <strong>services<\/strong>, e <strong>reducers<\/strong> ao mesmo tempo, usando o padrão de injeção de dependência com objetos JavaScript padrão.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">updateTotalCount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>totalCount <span class=\"token operator\">+=<\/span> context<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">double<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">+=<\/span> context<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">updateTotalCount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>double<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Counter <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Counter'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>totalCount <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>count <span class=\"token operator\">||<\/span> count <span class=\"token operator\">&lt;<\/span> <span class=\"token number\">10<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Counter<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span><span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"----contexto-componente\"><a href=\"#----contexto-componente\">3 - Contexto Componente<\/a><\/h2><p>Este contém os atributos que você declara em sua tag, e incluindo:<\/p>\n<ul>\n<li><a href=\"/pt-br/contexto-data\"><code>data<\/code><\/a><\/li>\n<li><a href=\"/pt-br/instancia-self\"><code>self<\/code><\/a><\/li>\n<li><a href=\"/pt-br/componentes-renderizaveis#componentes-com-filhos\"><code>children<\/code><\/a><\/li>\n<\/ul>\n<p>Se o atributo é declarado em uma tag componente cada função desse componente terá acesso a esse atributo em seu contexto.<\/p>\n<p>Se o atributo for declarado em uma tag que possui um evento, ele será incorporado ao contexto da função de evento.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">add<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">+=<\/span> context<span class=\"token punctuation\">.<\/span>delta <span class=\"token operator\">+<\/span> context<span class=\"token punctuation\">.<\/span>amount<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">,<\/span> delta<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>add<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">amount<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        adicionar <span class=\"token punctuation\">{<\/span>delta<span class=\"token punctuation\">}<\/span> em <span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Counter <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Counter'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Counter<\/span><\/span> <span class=\"token attr-name\">delta<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"contexto-de-fun--es\"><a href=\"#contexto-de-fun--es\">Contexto de Funções<\/a><\/h2><p>Cada função das subclasses do Nullstack é injetada com uma cópia do contexto da instância mesclada com seus argumentos.<\/p>\n<p>Os argumentos são opcionais, mas se declarados, devem ser um único objeto com chaves de sua escolha.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">add<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">+=<\/span> context<span class=\"token punctuation\">.<\/span>amount <span class=\"token operator\">||<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">add<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>            <span class=\"token comment\">// soma 1<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">add<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>amount<span class=\"token operator\">:<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">// soma 2<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>context<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">// 3<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo passo<\/a><\/h2><p>⚔ Aprenda sobre <a href=\"/pt-br/rotas-e-parametros\">Rotas e Parâmetros<\/a>.<\/p>\n","description":"Cada função no Nullstack recebe um contexto como argumento.","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"contexto"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/contexto/index.html b/docs/pt-br/contexto/index.html
index a2cf113d..214f716a 100644
--- a/docs/pt-br/contexto/index.html
+++ b/docs/pt-br/contexto/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -183,15 +183,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo passo</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Contexto - Nullstack","description":"Cada função no Nullstack recebe um contexto como argumento."};
       window.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/contexto":{"title":"Contexto","html":"<p>Cada função no Nullstack recebe um contexto como argumento.<\/p>\n<p>Existem dois contextos, um para o cliente e outro para o servidor.<\/p>\n<p>O contexto do cliente dura enquanto a guia do navegador estiver aberta.<\/p>\n<p>O contexto do servidor dura enquanto o servidor estiver em execução.<\/p>\n<p>Ambos os contextos são proxies que mesclam as chaves de 3 objetos:<\/p>\n<h2 id=\"----contexto-nullstack\"><a href=\"#----contexto-nullstack\">1 - Contexto Nullstack<\/a><\/h2><p>Essas são as informações que o framework disponibiliza para você por padrão.<\/p>\n<h3 id=\"as-chaves-globais-dispon-veis-em-ambos-server-e-client-s-o-\"><a href=\"#as-chaves-globais-dispon-veis-em-ambos-server-e-client-s-o-\">As chaves globais disponíveis em ambos server e client são:<\/a><\/h3><ul>\n<li><a href=\"/pt-br/contexto-page\"><code>page<\/code><\/a><\/li>\n<li><a href=\"/pt-br/contexto-project\"><code>project<\/code><\/a><\/li>\n<li><a href=\"/pt-br/contexto-environment\"><code>environment<\/code><\/a><\/li>\n<li><a href=\"/pt-br/rotas-e-parametros#par-metros\"><code>params<\/code><\/a><\/li>\n<li><a href=\"/pt-br/rotas-e-parametros#roteador\"><code>router<\/code><\/a><\/li>\n<li><a href=\"/pt-br/contexto-settings\"><code>settings<\/code><\/a><\/li>\n<li><a href=\"/pt-br/service-worker\"><code>worker<\/code><\/a><\/li>\n<\/ul>\n<h3 id=\"as-chaves-dispon-veis-apenas-em-fun--es-do-servidor-s-o-\"><a href=\"#as-chaves-dispon-veis-apenas-em-fun--es-do-servidor-s-o-\">As chaves disponíveis apenas em funções do servidor são:<\/a><\/h3><ul>\n<li><a href=\"/pt-br/requisicao-e-resposta-do-servidor\"><code>server<\/code><\/a><\/li>\n<li><a href=\"/pt-br/requisicao-e-resposta-do-servidor#requisi--o-e-resposta\"><code>request<\/code><\/a><\/li>\n<li><a href=\"/pt-br/requisicao-e-resposta-do-servidor#requisi--o-e-resposta\"><code>response<\/code><\/a><\/li>\n<li><a href=\"/pt-br/contexto-secrets\"><code>secrets<\/code><\/a><\/li>\n<\/ul>\n<h3 id=\"a-chave-dispon-vel-apenas-no-cliente-\"><a href=\"#a-chave-dispon-vel-apenas-no-cliente-\">A chave disponível apenas no cliente:<\/a><\/h3><ul>\n<li><a href=\"/pt-br/contexto-instances\"><code>instances<\/code><\/a><\/li>\n<\/ul>\n<h2 id=\"----contexto-aplica--o\"><a href=\"#----contexto-aplica--o\">2 - Contexto Aplicação<\/a><\/h2><p>Quando você define uma chave para o contexto, ela fica disponível para desestruturação em qualquer profundidade da aplicação, até mesmo para os objetos pais ou aplicações de terceiros que montam seu componente.<\/p>\n<p>Atualizar uma chave no contexto faz com que a aplicação seja renderizada novamente automaticamente.<\/p>\n<p>Você pode pensar nisso como um único conceito para substituir <strong>stores<\/strong>, <strong>contexts<\/strong>, <strong>services<\/strong>, e <strong>reducers<\/strong> ao mesmo tempo, usando o padrão de injeção de dependência com objetos JavaScript padrão.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">updateTotalCount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>totalCount <span class=\"token operator\">+=<\/span> context<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">double<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">+=<\/span> context<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">updateTotalCount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>double<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Counter <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Counter'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>totalCount <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>count <span class=\"token operator\">||<\/span> count <span class=\"token operator\">&lt;<\/span> <span class=\"token number\">10<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Counter<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span><span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"----contexto-componente\"><a href=\"#----contexto-componente\">3 - Contexto Componente<\/a><\/h2><p>Este contém os atributos que você declara em sua tag, e incluindo:<\/p>\n<ul>\n<li><a href=\"/pt-br/contexto-data\"><code>data<\/code><\/a><\/li>\n<li><a href=\"/pt-br/instancia-self\"><code>self<\/code><\/a><\/li>\n<li><a href=\"/pt-br/componentes-renderizaveis#componentes-com-filhos\"><code>children<\/code><\/a><\/li>\n<\/ul>\n<p>Se o atributo é declarado em uma tag componente cada função desse componente terá acesso a esse atributo em seu contexto.<\/p>\n<p>Se o atributo for declarado em uma tag que possui um evento, ele será incorporado ao contexto da função de evento.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">add<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">+=<\/span> context<span class=\"token punctuation\">.<\/span>delta <span class=\"token operator\">+<\/span> context<span class=\"token punctuation\">.<\/span>amount<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">,<\/span> delta<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>add<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">amount<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        adicionar <span class=\"token punctuation\">{<\/span>delta<span class=\"token punctuation\">}<\/span> em <span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Counter <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Counter'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Counter<\/span><\/span> <span class=\"token attr-name\">delta<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"contexto-de-fun--es\"><a href=\"#contexto-de-fun--es\">Contexto de Funções<\/a><\/h2><p>Cada função das subclasses do Nullstack é injetada com uma cópia do contexto da instância mesclada com seus argumentos.<\/p>\n<p>Os argumentos são opcionais, mas se declarados, devem ser um único objeto com chaves de sua escolha.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">add<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">+=<\/span> context<span class=\"token punctuation\">.<\/span>amount <span class=\"token operator\">||<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">add<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>            <span class=\"token comment\">// soma 1<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">add<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>amount<span class=\"token operator\">:<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">// soma 2<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>context<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">// 3<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo passo<\/a><\/h2><p>⚔ Aprenda sobre <a href=\"/pt-br/rotas-e-parametros\">Rotas e Parâmetros<\/a>.<\/p>\n","description":"Cada função no Nullstack recebe um contexto como argumento.","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"contexto"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/contribuidores.html b/docs/pt-br/contribuidores.html
index 4e2c0223..f82dfc53 100644
--- a/docs/pt-br/contribuidores.html
+++ b/docs/pt-br/contribuidores.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -34,15 +34,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Contribuidores - Nullstack","description":"Encontrou um bug ou deseja uma feature nova? Torne-se um contribuidor!","locale":"pt-BR"};
       window.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-8/pt-br/contribuidores":{"documentation":[],"packages":[],"locale":"pt-BR","i18n":{"title":"Contribuidores","description":"Encontrou um bug ou deseja uma feature nova? Torne-se um contribuidor!","state":{"title":"O Estado do Nullstack","paragraphs":["O Nullstack está sendo desenvolvido desde janeiro de 2019 com recursos sendo extraídos de projetos freelance.","Nesse ponto, a API está estável, os métodos de ciclo de vida e as chaves de contexto estarão praticamente congelados.","Ainda não estamos na v1.0, mas muito perto, a única coisa que falta é testá-lo em aplicativos feitos fora da equipe principal para descobrir se ele atende às necessidades de outros programadores."]},"roadmap":{"title":"O Mapa da Estrada","paragraphs":["As próximas atualizações serão direcionadas a correções de quaisquer bugs encontrados e terão foco na qualidade de vida.","As atualizações listadas nas <a href=\"https://github.com/nullstack/nullstack/issues\" target=\"_blank\" rel=\"noopener\">issues do Nullstack<\/a> são as próximas etapas planejadas sem nenhuma ordem específica."]},"core":{"title":"A Equipe Principal","paragraphs":["O Nullstack foi desenvolvido por freelancers full-stacks neuroatípicos.","Com um histórico pesado em Rails, Ember.js, React.js e filosofia Vue.js as inspirações tiradas desses projetos podem ser óbvias."],"team":[{"name":"Christian Mortaro","role":"Autor Autista","github":"Mortaro","description":"Criador do conceito. Vai com novas propostas de API para seus patos de borracha favoritos e retorna com commits.","contribution":"Fez a engenharia reversa de código de pensamento positivo para sua existência e depois o refatorou em um framework."},{"name":"Dayson Marx","role":"Designer Distraído","github":"daysonmarx","description":"Pato de borracha com habilidades humanas, garante que o código não saia muito pra fora da caixa, então faz a caixa parecer legal.","contribution":"Revisor de API que desenvolveu projetos de terceiros para testar a prova de conceitos de uma perspectiva focada no front-end."},{"name":"Anny Figueira","role":"Adotante Autista","github":"AnnyFigueira","description":"Pato de borracha com um pescoço para encontrar inconsistências e problemas, esperando até que uma API seja aprovada para nos forçar a reescrever tudo.","contribution":"Adotante antecipada do framework que desenvolveu aplicações reais em produção para validar como as partes se encaixam."},{"name":"Bianca Augusta","role":"Artista Autista","github":"Bilkaya","description":"Ilustradora freelancer faz 10 anos. Viciada em Warcraft, aspirante a cosplayer e druida tanker no WoW.","contribution":"Mamãe da Nulla-Chan e volta e meia lê scripts por pura pressão do Mortaro."},{"name":"Guilherme Correia","role":"import Membro from <a href='https://github.com/vuejs-br' target='_blank' rel='noopener'>vuejs-br<\/a>","github":"GuiDevloper","description":"Experimentalista, escritor de universos, sonhador e desenvolvedor quando acha e toca a fita K7 sem título certa.","contribution":"Usuário de features não documentadas e criador de issues exigindo documentação que ele mesmo vai fazer."},{"name":"Alisson Suassuna","role":"Servo de Deus","github":"alissonsuassuna","description":"Instrutor da TipsCode. Desenvolvedor Full-stack JavaScript, apaixonado por tecnologia e servo do Senhor Jesus Cristo.","contribution":"Encarregado da criação de conteúdo sobre o Nullstack, aulas, dicas e tutoriais. Com objetivo de tornar o Nullstack fácil de usar."}]},"packages":{"title":"Contribuidores dos Pacotes"},"documentation":{"title":"Contribuidores da Documentação"},"instructions":{"title":"Como Contribuir","paragraphs":["É simples. Encontrou um bug ou deseja um novo recurso?","<a href=\"https://github.com/nullstack/nullstack/issues\" target=\"_blank\" rel=\"noopener\">Crie uma issue<\/a> ou <a href=\"https://github.com/nullstack/nullstack/pulls\" target=\"_blank\" rel=\"noopener\">envie uma pull request<\/a> com testes."]},"githubCacheWarning":"* A lista pode demorar um pouco para ser atualizada devido ao cache da API do GitHub"}},"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/contribuidores/index.html b/docs/pt-br/contribuidores/index.html
index 4e2c0223..f82dfc53 100644
--- a/docs/pt-br/contribuidores/index.html
+++ b/docs/pt-br/contribuidores/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -34,15 +34,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Contribuidores - Nullstack","description":"Encontrou um bug ou deseja uma feature nova? Torne-se um contribuidor!","locale":"pt-BR"};
       window.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-8/pt-br/contribuidores":{"documentation":[],"packages":[],"locale":"pt-BR","i18n":{"title":"Contribuidores","description":"Encontrou um bug ou deseja uma feature nova? Torne-se um contribuidor!","state":{"title":"O Estado do Nullstack","paragraphs":["O Nullstack está sendo desenvolvido desde janeiro de 2019 com recursos sendo extraídos de projetos freelance.","Nesse ponto, a API está estável, os métodos de ciclo de vida e as chaves de contexto estarão praticamente congelados.","Ainda não estamos na v1.0, mas muito perto, a única coisa que falta é testá-lo em aplicativos feitos fora da equipe principal para descobrir se ele atende às necessidades de outros programadores."]},"roadmap":{"title":"O Mapa da Estrada","paragraphs":["As próximas atualizações serão direcionadas a correções de quaisquer bugs encontrados e terão foco na qualidade de vida.","As atualizações listadas nas <a href=\"https://github.com/nullstack/nullstack/issues\" target=\"_blank\" rel=\"noopener\">issues do Nullstack<\/a> são as próximas etapas planejadas sem nenhuma ordem específica."]},"core":{"title":"A Equipe Principal","paragraphs":["O Nullstack foi desenvolvido por freelancers full-stacks neuroatípicos.","Com um histórico pesado em Rails, Ember.js, React.js e filosofia Vue.js as inspirações tiradas desses projetos podem ser óbvias."],"team":[{"name":"Christian Mortaro","role":"Autor Autista","github":"Mortaro","description":"Criador do conceito. Vai com novas propostas de API para seus patos de borracha favoritos e retorna com commits.","contribution":"Fez a engenharia reversa de código de pensamento positivo para sua existência e depois o refatorou em um framework."},{"name":"Dayson Marx","role":"Designer Distraído","github":"daysonmarx","description":"Pato de borracha com habilidades humanas, garante que o código não saia muito pra fora da caixa, então faz a caixa parecer legal.","contribution":"Revisor de API que desenvolveu projetos de terceiros para testar a prova de conceitos de uma perspectiva focada no front-end."},{"name":"Anny Figueira","role":"Adotante Autista","github":"AnnyFigueira","description":"Pato de borracha com um pescoço para encontrar inconsistências e problemas, esperando até que uma API seja aprovada para nos forçar a reescrever tudo.","contribution":"Adotante antecipada do framework que desenvolveu aplicações reais em produção para validar como as partes se encaixam."},{"name":"Bianca Augusta","role":"Artista Autista","github":"Bilkaya","description":"Ilustradora freelancer faz 10 anos. Viciada em Warcraft, aspirante a cosplayer e druida tanker no WoW.","contribution":"Mamãe da Nulla-Chan e volta e meia lê scripts por pura pressão do Mortaro."},{"name":"Guilherme Correia","role":"import Membro from <a href='https://github.com/vuejs-br' target='_blank' rel='noopener'>vuejs-br<\/a>","github":"GuiDevloper","description":"Experimentalista, escritor de universos, sonhador e desenvolvedor quando acha e toca a fita K7 sem título certa.","contribution":"Usuário de features não documentadas e criador de issues exigindo documentação que ele mesmo vai fazer."},{"name":"Alisson Suassuna","role":"Servo de Deus","github":"alissonsuassuna","description":"Instrutor da TipsCode. Desenvolvedor Full-stack JavaScript, apaixonado por tecnologia e servo do Senhor Jesus Cristo.","contribution":"Encarregado da criação de conteúdo sobre o Nullstack, aulas, dicas e tutoriais. Com objetivo de tornar o Nullstack fácil de usar."}]},"packages":{"title":"Contribuidores dos Pacotes"},"documentation":{"title":"Contribuidores da Documentação"},"instructions":{"title":"Como Contribuir","paragraphs":["É simples. Encontrou um bug ou deseja um novo recurso?","<a href=\"https://github.com/nullstack/nullstack/issues\" target=\"_blank\" rel=\"noopener\">Crie uma issue<\/a> ou <a href=\"https://github.com/nullstack/nullstack/pulls\" target=\"_blank\" rel=\"noopener\">envie uma pull request<\/a> com testes."]},"githubCacheWarning":"* A lista pode demorar um pouco para ser atualizada devido ao cache da API do GitHub"}},"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/documentacao.html b/docs/pt-br/documentacao.html
index 25f543a6..48488379 100644
--- a/docs/pt-br/documentacao.html
+++ b/docs/pt-br/documentacao.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -34,15 +34,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Documentação - Nullstack","description":"Siga esses passos e se torne um desenvolvedor full-stack javascript!","locale":"pt-BR"};
       window.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-4/pt-br/documentacao":{"locale":"pt-BR","i18n":{"title":"Documentação","description":"Siga esses passos e se torne um desenvolvedor full-stack javascript!","heading":"Documentação do Nullstack","tagline":"Siga esses passos e se torne um desenvolvedor full-stack javascript!","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/documentacao/index.html b/docs/pt-br/documentacao/index.html
index 25f543a6..48488379 100644
--- a/docs/pt-br/documentacao/index.html
+++ b/docs/pt-br/documentacao/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -34,15 +34,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Documentação - Nullstack","description":"Siga esses passos e se torne um desenvolvedor full-stack javascript!","locale":"pt-BR"};
       window.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-4/pt-br/documentacao":{"locale":"pt-BR","i18n":{"title":"Documentação","description":"Siga esses passos e se torne um desenvolvedor full-stack javascript!","heading":"Documentação do Nullstack","tagline":"Siga esses passos e se torne um desenvolvedor full-stack javascript!","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/estilos.html b/docs/pt-br/estilos.html
index 909f360c..8108aa47 100644
--- a/docs/pt-br/estilos.html
+++ b/docs/pt-br/estilos.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -53,15 +53,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo passo</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Estilos - Nullstack","description":"Usar estilos com o Nullstack é tão simples quanto importar um arquivo de estilo."};
       window.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/estilos":{"title":"Estilos","html":"<p>Usar estilos com o Nullstack é tão simples quanto importar um arquivo de estilo.<\/p>\n<p>O Nullstack vem com um loader <a href=\"https://sass-lang.com\" target=\"_blank\" rel=\"noopener\">SASS<\/a> por padrão, mas você ainda pode usar o CSS Vanilla.<\/p>\n<blockquote>\n<p>✨ É uma boa prática importar um arquivo com o mesmo nome do componente.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token string\">'./Header.scss'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Header<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token comment\">// ...<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Header<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>No modo de produção, o Nullstack usa <a href=\"https://purgecss.com\" target=\"_blank\" rel=\"noopener\">PurgeCSS<\/a>, que limpa seu arquivo <strong>client.css<\/strong>, mas tem alguns truques.<\/p>\n<blockquote>\n<p>✨ Saiba mais sobre <a href=\"https://purgecss.com/safelisting.html\" target=\"_blank\" rel=\"noopener\">fazendo uma safelist do seu css<\/a><\/p>\n<\/blockquote>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo passo<\/a><\/h2><p>⚔ Aprenda sobre a <a href=\"/pt-br/extensao-de-arquivo-njs\">extensão de arquivo NJS<\/a>.<\/p>\n","description":"Usar estilos com o Nullstack é tão simples quanto importar um arquivo de estilo.","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"estilos"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/estilos/index.html b/docs/pt-br/estilos/index.html
index 909f360c..8108aa47 100644
--- a/docs/pt-br/estilos/index.html
+++ b/docs/pt-br/estilos/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -53,15 +53,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo passo</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Estilos - Nullstack","description":"Usar estilos com o Nullstack é tão simples quanto importar um arquivo de estilo."};
       window.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/estilos":{"title":"Estilos","html":"<p>Usar estilos com o Nullstack é tão simples quanto importar um arquivo de estilo.<\/p>\n<p>O Nullstack vem com um loader <a href=\"https://sass-lang.com\" target=\"_blank\" rel=\"noopener\">SASS<\/a> por padrão, mas você ainda pode usar o CSS Vanilla.<\/p>\n<blockquote>\n<p>✨ É uma boa prática importar um arquivo com o mesmo nome do componente.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token string\">'./Header.scss'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Header<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token comment\">// ...<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Header<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>No modo de produção, o Nullstack usa <a href=\"https://purgecss.com\" target=\"_blank\" rel=\"noopener\">PurgeCSS<\/a>, que limpa seu arquivo <strong>client.css<\/strong>, mas tem alguns truques.<\/p>\n<blockquote>\n<p>✨ Saiba mais sobre <a href=\"https://purgecss.com/safelisting.html\" target=\"_blank\" rel=\"noopener\">fazendo uma safelist do seu css<\/a><\/p>\n<\/blockquote>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo passo<\/a><\/h2><p>⚔ Aprenda sobre a <a href=\"/pt-br/extensao-de-arquivo-njs\">extensão de arquivo NJS<\/a>.<\/p>\n","description":"Usar estilos com o Nullstack é tão simples quanto importar um arquivo de estilo.","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"estilos"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/extensao-de-arquivo-njs.html b/docs/pt-br/extensao-de-arquivo-njs.html
index a4095249..f0215e86 100644
--- a/docs/pt-br/extensao-de-arquivo-njs.html
+++ b/docs/pt-br/extensao-de-arquivo-njs.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -135,15 +135,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo Passo</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Extensão de arquivos NJS - Nullstack","description":"Os arquivos Nullstack permitem que o Webpack saiba quais carregadores usar no momento da transpilação"};
       window.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/extensao-de-arquivo-njs":{"title":"Extensão de arquivos NJS","html":"<p>Os arquivos do Nullstack permitem ao <a href=\"https://webpack.js.org\" target=\"_blank\" rel=\"noopener\">Webpack<\/a> saber quais carregadores usar no momento da transpilação.<\/p>\n<p>Os arquivos NJS devem importar o Nullstack ou uma de suas subclasses.<\/p>\n<p>Se apenas uma subclasse for importada, uma importação Nullstack será injetada no momento da transpilação.<\/p>\n<p>No momento da transpilação, as tags JSX serão substituídas por <code>Nullstack.element<\/code>.<\/p>\n<p>Essa extensão também permite que o Nullstack faça otimizações em tempo de transpilação, como a injeção de origem.<\/p>\n<blockquote>\n<p>🔥 Cada arquivo deve ter apenas uma classe declarada.<\/p>\n<\/blockquote>\n<ul>\n<li>No bundle <strong>server<\/strong>, as funções assíncronas estáticas são mapeadas em um registro para segurança.<\/li>\n<li>No bundle <strong>client<\/strong>, as funções assíncronas estáticas são removidas e substituídas por um método invoke.<\/li>\n<li>No bundle <strong>client<\/strong>, as funções assíncronas estáticas com o nome começando com <strong>&quot;start&quot;<\/strong> (e opcionalmente seguido por uma letra maiúscula) são completamente removidas.<\/li>\n<li>Nos bundles <strong>server<\/strong> e <strong>client<\/strong>, um hash com o md5 do código-fonte original é adicionado na classe.<\/li>\n<\/ul>\n<blockquote>\n<p>🐱‍💻 Abaixo um exemplo de arquivo .njs original.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> List <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./List'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span>readFileSync<span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'fs'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Tasks<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">List<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">getTasks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>limit<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> json <span class=\"token operator\">=<\/span> <span class=\"token function\">readFileSync<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'tasks.json'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'utf-8'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token constant\">JSON<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">parse<\/span><span class=\"token punctuation\">(<\/span>json<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span>tasks<span class=\"token punctuation\">.<\/span><span class=\"token function\">slice<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> limit<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>tasks <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>tasks <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getTasks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>limit<span class=\"token operator\">:<\/span> <span class=\"token number\">10<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">renderTask<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>task<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span> \n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>task<span class=\"token punctuation\">.<\/span>description<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token punctuation\">{<\/span>tasks<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">task<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Task<\/span><\/span> <span class=\"token attr-name\">task<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>task<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Tasks<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>🐱‍💻 Abaixo um exemplo do mesmo arquivo .njs transpilado.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> List <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./List'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Tasks<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">List<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> hash <span class=\"token operator\">=<\/span> <span class=\"token string\">'d493ac09d0d57574a30f136d31da455f'<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token keyword\">static<\/span> getTasks <span class=\"token operator\">=<\/span> Nullstack<span class=\"token punctuation\">.<\/span><span class=\"token function\">invoke<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'getTasks'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'d493ac09d0d57574a30f136d31da455f'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>tasks <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>tasks <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getTasks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>limit<span class=\"token operator\">:<\/span> <span class=\"token number\">10<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">renderTask<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>task<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span> \n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">source<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>task<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>description<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> Task <span class=\"token operator\">=<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>renderTask<span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token punctuation\">{<\/span>tasks<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">task<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Task<\/span><\/span> <span class=\"token attr-name\">task<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>task<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Tasks<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo Passo<\/a><\/h2><p>⚔ Aprenda mais sobre o <a href=\"/pt-br/service-worker\">service-worker<\/a>.<\/p>\n","description":"Os arquivos Nullstack permitem que o Webpack saiba quais carregadores usar no momento da transpilação","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"extensao-de-arquivo-njs"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/extensao-de-arquivo-njs/index.html b/docs/pt-br/extensao-de-arquivo-njs/index.html
index a4095249..f0215e86 100644
--- a/docs/pt-br/extensao-de-arquivo-njs/index.html
+++ b/docs/pt-br/extensao-de-arquivo-njs/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -135,15 +135,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo Passo</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Extensão de arquivos NJS - Nullstack","description":"Os arquivos Nullstack permitem que o Webpack saiba quais carregadores usar no momento da transpilação"};
       window.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/extensao-de-arquivo-njs":{"title":"Extensão de arquivos NJS","html":"<p>Os arquivos do Nullstack permitem ao <a href=\"https://webpack.js.org\" target=\"_blank\" rel=\"noopener\">Webpack<\/a> saber quais carregadores usar no momento da transpilação.<\/p>\n<p>Os arquivos NJS devem importar o Nullstack ou uma de suas subclasses.<\/p>\n<p>Se apenas uma subclasse for importada, uma importação Nullstack será injetada no momento da transpilação.<\/p>\n<p>No momento da transpilação, as tags JSX serão substituídas por <code>Nullstack.element<\/code>.<\/p>\n<p>Essa extensão também permite que o Nullstack faça otimizações em tempo de transpilação, como a injeção de origem.<\/p>\n<blockquote>\n<p>🔥 Cada arquivo deve ter apenas uma classe declarada.<\/p>\n<\/blockquote>\n<ul>\n<li>No bundle <strong>server<\/strong>, as funções assíncronas estáticas são mapeadas em um registro para segurança.<\/li>\n<li>No bundle <strong>client<\/strong>, as funções assíncronas estáticas são removidas e substituídas por um método invoke.<\/li>\n<li>No bundle <strong>client<\/strong>, as funções assíncronas estáticas com o nome começando com <strong>&quot;start&quot;<\/strong> (e opcionalmente seguido por uma letra maiúscula) são completamente removidas.<\/li>\n<li>Nos bundles <strong>server<\/strong> e <strong>client<\/strong>, um hash com o md5 do código-fonte original é adicionado na classe.<\/li>\n<\/ul>\n<blockquote>\n<p>🐱‍💻 Abaixo um exemplo de arquivo .njs original.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> List <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./List'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span>readFileSync<span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'fs'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Tasks<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">List<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">getTasks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>limit<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> json <span class=\"token operator\">=<\/span> <span class=\"token function\">readFileSync<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'tasks.json'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'utf-8'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token constant\">JSON<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">parse<\/span><span class=\"token punctuation\">(<\/span>json<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span>tasks<span class=\"token punctuation\">.<\/span><span class=\"token function\">slice<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> limit<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>tasks <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>tasks <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getTasks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>limit<span class=\"token operator\">:<\/span> <span class=\"token number\">10<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">renderTask<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>task<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span> \n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>task<span class=\"token punctuation\">.<\/span>description<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token punctuation\">{<\/span>tasks<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">task<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Task<\/span><\/span> <span class=\"token attr-name\">task<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>task<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Tasks<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>🐱‍💻 Abaixo um exemplo do mesmo arquivo .njs transpilado.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> List <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./List'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Tasks<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">List<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> hash <span class=\"token operator\">=<\/span> <span class=\"token string\">'d493ac09d0d57574a30f136d31da455f'<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token keyword\">static<\/span> getTasks <span class=\"token operator\">=<\/span> Nullstack<span class=\"token punctuation\">.<\/span><span class=\"token function\">invoke<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'getTasks'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'d493ac09d0d57574a30f136d31da455f'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>tasks <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>tasks <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getTasks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>limit<span class=\"token operator\">:<\/span> <span class=\"token number\">10<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">renderTask<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>task<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span> \n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">source<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>task<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>description<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> Task <span class=\"token operator\">=<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>renderTask<span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token punctuation\">{<\/span>tasks<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">task<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Task<\/span><\/span> <span class=\"token attr-name\">task<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>task<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Tasks<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo Passo<\/a><\/h2><p>⚔ Aprenda mais sobre o <a href=\"/pt-br/service-worker\">service-worker<\/a>.<\/p>\n","description":"Os arquivos Nullstack permitem que o Webpack saiba quais carregadores usar no momento da transpilação","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"extensao-de-arquivo-njs"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git "a/docs/pt-br/extens\303\243o-de-arquivo-njs.html" "b/docs/pt-br/extens\303\243o-de-arquivo-njs.html"
index 29b73389..b618969b 100644
--- "a/docs/pt-br/extens\303\243o-de-arquivo-njs.html"
+++ "b/docs/pt-br/extens\303\243o-de-arquivo-njs.html"
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -36,15 +36,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":404,"title":"Página Não Encontrada - Nullstack","description":"Desculpe, essa não é a página que você está procurando"};
       window.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/extensão-de-arquivo-njs":{"title":"Página Não Encontrada","html":"<p>Talvez você queira aprender <a href=\"/contexto-page\">como criar uma pagina 404 com Nullstack<\/a>?<\/p>\n<p>Se você está procurando por outra coisa, você deveria <a href=\"/pt-br/documentacao\">ler a documentação<\/a>.<\/p>\n","description":"Desculpe, essa não é a página que você está procurando","status":404,"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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"extensão-de-arquivo-njs"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git "a/docs/pt-br/extens\303\243o-de-arquivo-njs/index.html" "b/docs/pt-br/extens\303\243o-de-arquivo-njs/index.html"
index 29b73389..b618969b 100644
--- "a/docs/pt-br/extens\303\243o-de-arquivo-njs/index.html"
+++ "b/docs/pt-br/extens\303\243o-de-arquivo-njs/index.html"
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -36,15 +36,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":404,"title":"Página Não Encontrada - Nullstack","description":"Desculpe, essa não é a página que você está procurando"};
       window.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/extensão-de-arquivo-njs":{"title":"Página Não Encontrada","html":"<p>Talvez você queira aprender <a href=\"/contexto-page\">como criar uma pagina 404 com Nullstack<\/a>?<\/p>\n<p>Se você está procurando por outra coisa, você deveria <a href=\"/pt-br/documentacao\">ler a documentação<\/a>.<\/p>\n","description":"Desculpe, essa não é a página que você está procurando","status":404,"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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"extensão-de-arquivo-njs"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/funcoes-de-servidor.html b/docs/pt-br/funcoes-de-servidor.html
index 95b065ff..bed1af5f 100644
--- a/docs/pt-br/funcoes-de-servidor.html
+++ b/docs/pt-br/funcoes-de-servidor.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -182,15 +182,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Saiba mais sobr
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Funções de Servidor - Nullstack","description":"As funções do servidor são microsserviços especializados que no momento da transpilação são convertidos em pontos de entrada da API."};
       window.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/funcoes-de-servidor":{"title":"Funções de Servidor","html":"<p>As funções do servidor são microsserviços especializados que no momento da transpilação são convertidos em pontos de entrada da API.<\/p>\n<p>Para sinalizar uma função como uma função de servidor, você deve declará-la como <code>static async<\/code>.<\/p>\n<p>Ser uma função estática significa que ela não tem acesso ao escopo da instância.<\/p>\n<p>No entanto, em vez de chamar a versão estática da <em>classe<\/em>, você deve invocá-la como uma função de <em>instância<\/em>.<\/p>\n<p>As funções do servidor podem ser chamadas a qualquer momento em seu código e não estão limitadas a etapas de <a href=\"/pt-br/renderizando-no-servidor\">pré-processamento<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">increment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count<span class=\"token operator\">++<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">handleClick<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">increment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Aprenda mais sobre <a href=\"/pt-br/contexto\">contexto<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"comportamento-do-cliente\"><a href=\"#comportamento-do-cliente\">Comportamento do cliente<\/a><\/h2><p>Ao chamar uma função de servidor do cliente, os argumentos serão serializados como JSON.<\/p>\n<p>Os argumentos serão postados contra a API gerada automaticamente e mesclados com o contexto do servidor quando atingir o servidor.<\/p>\n<p>O valor de retorno da função do servidor será serializado de volta para o cliente e pode ser usado perfeitamente como se fosse uma função local.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">increment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count<span class=\"token operator\">++<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> context<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">handleClick<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">increment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"comportamento-do-servidor\"><a href=\"#comportamento-do-servidor\">Comportamento do servidor<\/a><\/h2><p>As funções de servidor serão usadas como funções locais, simplesmente criando um alias da chamada <em>instância<\/em> para a <em>classe<\/em> e mesclando os argumentos com o contexto do servidor.<\/p>\n<h2 id=\"date-convenience\"><a href=\"#date-convenience\">Date Convenience<\/a><\/h2><p>As datas são serializadas como UTC em JSON e desserializadas de volta para objetos <code>Date<\/code>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> date <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Date<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> verified <span class=\"token operator\">=<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">verifyDay<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>date<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">verifyDay<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>date<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> date<span class=\"token punctuation\">.<\/span><span class=\"token function\">getDay<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">===<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Date<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getDay<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"fetch-convenience\"><a href=\"#fetch-convenience\">Fetch Convenience<\/a><\/h2><p><code>fetch<\/code> está disponível em funções de servidor e cliente para fins de isomorfia.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> url <span class=\"token operator\">=<\/span> <span class=\"token string\">'https://api.github.com/repos/nullstack/nullstack/issues'<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> response <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span>url<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>issues <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> response<span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"importa--es-apenas-de-servidor\"><a href=\"#importa--es-apenas-de-servidor\">Importações apenas de servidor<\/a><\/h2><p>As dependências importadas que são usadas apenas dentro das funções do servidor serão excluídas do pacote do cliente.<\/p>\n<p>Isso é útil para acessar módulos exclusivos do node.js e reduzir o tamanho do pacote do cliente por meio do pré-processamento de dados, como o markdown, sem ter que expor a dependência ao usuário final.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span>readFileSync<span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'fs'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span>Remarkable<span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'remarkable'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">getTasks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> readme <span class=\"token operator\">=<\/span> <span class=\"token function\">readFileSync<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'README.md'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'utf-8'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Remarkable<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span>readme<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"seguran-a\"><a href=\"#seguran-a\">Segurança<\/a><\/h2><p>Lembre-se de que cada função do servidor é semelhante a uma rota do Express na API, e deve ser codificada sem depender da lógica de exibição para a segurança.<\/p>\n<blockquote>\n<p>🔒 As funções de servidor com o nome começando com &quot;start&quot; (e opcionalmente seguido por uma letra maiúscula) não geram um endpoint de API, para evitar inundação de contexto malicioso.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">getCount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>request<span class=\"token punctuation\">,<\/span> count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>request<span class=\"token punctuation\">.<\/span>session<span class=\"token punctuation\">.<\/span>user<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> count<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 As funções do servidor não são expostas ao cliente.<\/p>\n<\/blockquote>\n<blockquote>\n<p>✨ Aprenda mais sobre a <a href=\"/pt-br/extensao-de-arquivo-njs\">extensão de arquivo NJS<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"palavras-reservadas\"><a href=\"#palavras-reservadas\">Palavras reservadas<\/a><\/h2><p>Os nomes das funções do servidor não podem colidir com os nomes dos métodos de instância da classe atual ou de suas classes pai.<\/p>\n<p>As seguintes palavras não podem ser usadas em funções de servidor:<\/p>\n<ul>\n<li><code>prepare<\/code><\/li>\n<li><code>initiate<\/code><\/li>\n<li><code>hydrate<\/code><\/li>\n<li><code>update<\/code><\/li>\n<li><code>terminate<\/code><\/li>\n<\/ul>\n<p>As funções de servidor chamadas <code>start<\/code> não irão gerar um endpoint de API e só podem ser chamadas por outras funções de servidor.<\/p>\n<h2 id=\"ressalvas\"><a href=\"#ressalvas\">Ressalvas<\/a><\/h2><p>Os endpoints de API gerados automaticamente não devem ser usados por aplicativos de terceiros.<\/p>\n<p>A URL e a implementação podem mudar entre as versões do Nullstack.<\/p>\n<blockquote>\n<p>✨ Se você deseja construir uma API, aprenda mais sobre <a href=\"/pt-br/requisicao-e-resposta-do-servidor\">como criar uma API com o Nullstack<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Saiba mais sobre o <a href=\"/pt-br/contexto\">contexto<\/a>.<\/p>\n","description":"As funções do servidor são microsserviços especializados que no momento da transpilação são convertidos em pontos de entrada da API.","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"funcoes-de-servidor"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/funcoes-de-servidor/index.html b/docs/pt-br/funcoes-de-servidor/index.html
index 95b065ff..bed1af5f 100644
--- a/docs/pt-br/funcoes-de-servidor/index.html
+++ b/docs/pt-br/funcoes-de-servidor/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -182,15 +182,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Saiba mais sobr
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Funções de Servidor - Nullstack","description":"As funções do servidor são microsserviços especializados que no momento da transpilação são convertidos em pontos de entrada da API."};
       window.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/funcoes-de-servidor":{"title":"Funções de Servidor","html":"<p>As funções do servidor são microsserviços especializados que no momento da transpilação são convertidos em pontos de entrada da API.<\/p>\n<p>Para sinalizar uma função como uma função de servidor, você deve declará-la como <code>static async<\/code>.<\/p>\n<p>Ser uma função estática significa que ela não tem acesso ao escopo da instância.<\/p>\n<p>No entanto, em vez de chamar a versão estática da <em>classe<\/em>, você deve invocá-la como uma função de <em>instância<\/em>.<\/p>\n<p>As funções do servidor podem ser chamadas a qualquer momento em seu código e não estão limitadas a etapas de <a href=\"/pt-br/renderizando-no-servidor\">pré-processamento<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">increment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count<span class=\"token operator\">++<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">handleClick<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">increment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Aprenda mais sobre <a href=\"/pt-br/contexto\">contexto<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"comportamento-do-cliente\"><a href=\"#comportamento-do-cliente\">Comportamento do cliente<\/a><\/h2><p>Ao chamar uma função de servidor do cliente, os argumentos serão serializados como JSON.<\/p>\n<p>Os argumentos serão postados contra a API gerada automaticamente e mesclados com o contexto do servidor quando atingir o servidor.<\/p>\n<p>O valor de retorno da função do servidor será serializado de volta para o cliente e pode ser usado perfeitamente como se fosse uma função local.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">increment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count<span class=\"token operator\">++<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> context<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">handleClick<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">increment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"comportamento-do-servidor\"><a href=\"#comportamento-do-servidor\">Comportamento do servidor<\/a><\/h2><p>As funções de servidor serão usadas como funções locais, simplesmente criando um alias da chamada <em>instância<\/em> para a <em>classe<\/em> e mesclando os argumentos com o contexto do servidor.<\/p>\n<h2 id=\"date-convenience\"><a href=\"#date-convenience\">Date Convenience<\/a><\/h2><p>As datas são serializadas como UTC em JSON e desserializadas de volta para objetos <code>Date<\/code>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> date <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Date<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> verified <span class=\"token operator\">=<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">verifyDay<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>date<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">verifyDay<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>date<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> date<span class=\"token punctuation\">.<\/span><span class=\"token function\">getDay<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">===<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Date<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getDay<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"fetch-convenience\"><a href=\"#fetch-convenience\">Fetch Convenience<\/a><\/h2><p><code>fetch<\/code> está disponível em funções de servidor e cliente para fins de isomorfia.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> url <span class=\"token operator\">=<\/span> <span class=\"token string\">'https://api.github.com/repos/nullstack/nullstack/issues'<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> response <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span>url<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>issues <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> response<span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"importa--es-apenas-de-servidor\"><a href=\"#importa--es-apenas-de-servidor\">Importações apenas de servidor<\/a><\/h2><p>As dependências importadas que são usadas apenas dentro das funções do servidor serão excluídas do pacote do cliente.<\/p>\n<p>Isso é útil para acessar módulos exclusivos do node.js e reduzir o tamanho do pacote do cliente por meio do pré-processamento de dados, como o markdown, sem ter que expor a dependência ao usuário final.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span>readFileSync<span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'fs'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span>Remarkable<span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'remarkable'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">getTasks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> readme <span class=\"token operator\">=<\/span> <span class=\"token function\">readFileSync<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'README.md'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'utf-8'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Remarkable<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span>readme<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"seguran-a\"><a href=\"#seguran-a\">Segurança<\/a><\/h2><p>Lembre-se de que cada função do servidor é semelhante a uma rota do Express na API, e deve ser codificada sem depender da lógica de exibição para a segurança.<\/p>\n<blockquote>\n<p>🔒 As funções de servidor com o nome começando com &quot;start&quot; (e opcionalmente seguido por uma letra maiúscula) não geram um endpoint de API, para evitar inundação de contexto malicioso.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">getCount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>request<span class=\"token punctuation\">,<\/span> count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>request<span class=\"token punctuation\">.<\/span>session<span class=\"token punctuation\">.<\/span>user<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> count<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 As funções do servidor não são expostas ao cliente.<\/p>\n<\/blockquote>\n<blockquote>\n<p>✨ Aprenda mais sobre a <a href=\"/pt-br/extensao-de-arquivo-njs\">extensão de arquivo NJS<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"palavras-reservadas\"><a href=\"#palavras-reservadas\">Palavras reservadas<\/a><\/h2><p>Os nomes das funções do servidor não podem colidir com os nomes dos métodos de instância da classe atual ou de suas classes pai.<\/p>\n<p>As seguintes palavras não podem ser usadas em funções de servidor:<\/p>\n<ul>\n<li><code>prepare<\/code><\/li>\n<li><code>initiate<\/code><\/li>\n<li><code>hydrate<\/code><\/li>\n<li><code>update<\/code><\/li>\n<li><code>terminate<\/code><\/li>\n<\/ul>\n<p>As funções de servidor chamadas <code>start<\/code> não irão gerar um endpoint de API e só podem ser chamadas por outras funções de servidor.<\/p>\n<h2 id=\"ressalvas\"><a href=\"#ressalvas\">Ressalvas<\/a><\/h2><p>Os endpoints de API gerados automaticamente não devem ser usados por aplicativos de terceiros.<\/p>\n<p>A URL e a implementação podem mudar entre as versões do Nullstack.<\/p>\n<blockquote>\n<p>✨ Se você deseja construir uma API, aprenda mais sobre <a href=\"/pt-br/requisicao-e-resposta-do-servidor\">como criar uma API com o Nullstack<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Saiba mais sobre o <a href=\"/pt-br/contexto\">contexto<\/a>.<\/p>\n","description":"As funções do servidor são microsserviços especializados que no momento da transpilação são convertidos em pontos de entrada da API.","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"funcoes-de-servidor"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/geracao-de-sites-estaticos.html b/docs/pt-br/geracao-de-sites-estaticos.html
index a7116b84..01a80a14 100644
--- a/docs/pt-br/geracao-de-sites-estaticos.html
+++ b/docs/pt-br/geracao-de-sites-estaticos.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -68,15 +68,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo passo</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Geração de Site Estático - Nullstack","description":"Use Nullstack para gerar websites estáticos para aplicações estáticas ultrarrápidas usando todo o potencial de Nullstack sem a necessidade de ter um back-end de node.js"};
       window.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/geracao-de-sites-estaticos":{"title":"Geração de Site Estático","html":"<p>Use Nullstack para gerar websites estáticos para aplicações estáticas ultrarrápidas usando todo o potencial do cliente Nullstack sem a necessidade de haver um back-end de node.js.<\/p>\n<p>Websites estáticos são úteis para aplicações read-only como blogs e documentação<\/p>\n<blockquote>\n<p>💡 Esta documentação é na verdade um site estático gerado com Nullstack<\/p>\n<\/blockquote>\n<p>Todos os benefícios de <a href=\"/pt-br/renderizando-no-servidor\">renderização no lado do servidor<\/a> se aplicam para websites gerados estáticamente.<\/p>\n<p>Você pode gerar um website estático a partir da sua aplicação Nullstack com o seguinte comando <code>npx<\/code>:<\/p>\n<pre><code class=\"language-sh\">npx nullstack build <span class=\"token operator\">--<\/span>mode<span class=\"token operator\">=<\/span>ssg <span class=\"token operator\">--<\/span>output<span class=\"token operator\">=<\/span>ssg\n<\/code><\/pre>\n<blockquote>\n<p>🔥 Você deve estar em uma pasta de projeto Nullstack para executar esse comando.<\/p>\n<\/blockquote>\n<p>Por padrão, ele criará sua aplicação estática na pasta <strong>ssg<\/strong> que você pode sobrescrever com o sinalizador <code>--output<\/code>.<\/p>\n<p>O construtor executará seu aplicativo no modo de produção e rastreará todos os atributos <code>href<\/code> encontrados em seu DOM.<\/p>\n<p>O <a href=\"/pt-br/contexto-project\">manifest.json<\/a> e o conteúdo da pasta pública serão copiados para a pasta de destino.<\/p>\n<p>Além de gerar raw HTML também irá gerar um arquivo JSON para cada rota com uma cópia do estado.<\/p>\n<p>Na primeira visita para a sua aplicação estática, HTML será veiculado e hidratado.<\/p>\n<p>Nos pedidos subsequentes, Nullstack irá buscar o JSON gerado e atualizar o estado da aplicação sem que haja a necessidade de recarregar a página.<\/p>\n<p>Isso, na verdade, fornece não apenas um site gerado estático, mas uma API gerada estática com o estado calculado que alimenta a Single Page Application com custo zero.<\/p>\n<h2 id=\"boas-pr-ticas\"><a href=\"#boas-pr-ticas\">Boas Práticas<\/a><\/h2><p>Você pode adicionar um script para a sua <strong>package.json<\/strong> a fim de gerar o seu website estático em uma pasta personalizada:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token punctuation\">{<\/span>\n  <span class=\"token string\">\"name\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"nullstack.github.io\"<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token string\">\"scripts\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token string\">\"start\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"npx nullstack start\"<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token string\">\"build\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"npx nullstack build --mode=ssg --output=docs\"<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token operator\">...<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<\/code><\/pre>\n<h2 id=\"ressalvas\"><a href=\"#ressalvas\">Ressalvas<\/a><\/h2><p>Antes de gerar o HTML, o Nullstack irá esperar que <a href=\"/ciclo-de-vida-full-stack\"><code>prepare<\/code><\/a> e <a href=\"/ciclo-de-vida-full-stack\"><code>initiate<\/code><\/a> de todos os componentes dessa rota sejam resolvidos.<\/p>\n<p>Você pode misturar modos e solicitar outras funções de servidor apontando <code>worker.api<\/code> e hospedando o pacote do servidor em um ambiente node.js.<\/p>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo passo<\/a><\/h2><p>⚔ Aprenda mais sobre <a href=\"/pt-br/aplicacao-de-pagina-unica\">single page applications<\/a>.<\/p>\n","description":"Use Nullstack para gerar websites estáticos para aplicações estáticas ultrarrápidas usando todo o potencial de Nullstack sem a necessidade de ter um back-end de node.js","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"geracao-de-sites-estaticos"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/geracao-de-sites-estaticos/index.html b/docs/pt-br/geracao-de-sites-estaticos/index.html
index a7116b84..01a80a14 100644
--- a/docs/pt-br/geracao-de-sites-estaticos/index.html
+++ b/docs/pt-br/geracao-de-sites-estaticos/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -68,15 +68,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo passo</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Geração de Site Estático - Nullstack","description":"Use Nullstack para gerar websites estáticos para aplicações estáticas ultrarrápidas usando todo o potencial de Nullstack sem a necessidade de ter um back-end de node.js"};
       window.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/geracao-de-sites-estaticos":{"title":"Geração de Site Estático","html":"<p>Use Nullstack para gerar websites estáticos para aplicações estáticas ultrarrápidas usando todo o potencial do cliente Nullstack sem a necessidade de haver um back-end de node.js.<\/p>\n<p>Websites estáticos são úteis para aplicações read-only como blogs e documentação<\/p>\n<blockquote>\n<p>💡 Esta documentação é na verdade um site estático gerado com Nullstack<\/p>\n<\/blockquote>\n<p>Todos os benefícios de <a href=\"/pt-br/renderizando-no-servidor\">renderização no lado do servidor<\/a> se aplicam para websites gerados estáticamente.<\/p>\n<p>Você pode gerar um website estático a partir da sua aplicação Nullstack com o seguinte comando <code>npx<\/code>:<\/p>\n<pre><code class=\"language-sh\">npx nullstack build <span class=\"token operator\">--<\/span>mode<span class=\"token operator\">=<\/span>ssg <span class=\"token operator\">--<\/span>output<span class=\"token operator\">=<\/span>ssg\n<\/code><\/pre>\n<blockquote>\n<p>🔥 Você deve estar em uma pasta de projeto Nullstack para executar esse comando.<\/p>\n<\/blockquote>\n<p>Por padrão, ele criará sua aplicação estática na pasta <strong>ssg<\/strong> que você pode sobrescrever com o sinalizador <code>--output<\/code>.<\/p>\n<p>O construtor executará seu aplicativo no modo de produção e rastreará todos os atributos <code>href<\/code> encontrados em seu DOM.<\/p>\n<p>O <a href=\"/pt-br/contexto-project\">manifest.json<\/a> e o conteúdo da pasta pública serão copiados para a pasta de destino.<\/p>\n<p>Além de gerar raw HTML também irá gerar um arquivo JSON para cada rota com uma cópia do estado.<\/p>\n<p>Na primeira visita para a sua aplicação estática, HTML será veiculado e hidratado.<\/p>\n<p>Nos pedidos subsequentes, Nullstack irá buscar o JSON gerado e atualizar o estado da aplicação sem que haja a necessidade de recarregar a página.<\/p>\n<p>Isso, na verdade, fornece não apenas um site gerado estático, mas uma API gerada estática com o estado calculado que alimenta a Single Page Application com custo zero.<\/p>\n<h2 id=\"boas-pr-ticas\"><a href=\"#boas-pr-ticas\">Boas Práticas<\/a><\/h2><p>Você pode adicionar um script para a sua <strong>package.json<\/strong> a fim de gerar o seu website estático em uma pasta personalizada:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token punctuation\">{<\/span>\n  <span class=\"token string\">\"name\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"nullstack.github.io\"<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token string\">\"scripts\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token string\">\"start\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"npx nullstack start\"<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token string\">\"build\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"npx nullstack build --mode=ssg --output=docs\"<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token operator\">...<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<\/code><\/pre>\n<h2 id=\"ressalvas\"><a href=\"#ressalvas\">Ressalvas<\/a><\/h2><p>Antes de gerar o HTML, o Nullstack irá esperar que <a href=\"/ciclo-de-vida-full-stack\"><code>prepare<\/code><\/a> e <a href=\"/ciclo-de-vida-full-stack\"><code>initiate<\/code><\/a> de todos os componentes dessa rota sejam resolvidos.<\/p>\n<p>Você pode misturar modos e solicitar outras funções de servidor apontando <code>worker.api<\/code> e hospedando o pacote do servidor em um ambiente node.js.<\/p>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo passo<\/a><\/h2><p>⚔ Aprenda mais sobre <a href=\"/pt-br/aplicacao-de-pagina-unica\">single page applications<\/a>.<\/p>\n","description":"Use Nullstack para gerar websites estáticos para aplicações estáticas ultrarrápidas usando todo o potencial de Nullstack sem a necessidade de ter um back-end de node.js","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"geracao-de-sites-estaticos"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/index.html b/docs/pt-br/index.html
index 89990b88..a97d7a1d 100644
--- a/docs/pt-br/index.html
+++ b/docs/pt-br/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -119,15 +119,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Componentes JavaScript Full-stack - Nullstack","description":"Nullstack é um framework JavaScript full-stack para construir aplicações web progressivas","locale":"pt-BR"};
       window.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-2/pt-br":{"locale":"pt-BR","i18n":{"title":"Componentes JavaScript Full-stack","description":"Nullstack é um framework JavaScript full-stack para construir aplicações web progressivas","hero":{"heading":"Componentes JavaScript","subHeading":"Full-stack","tagline":"para exércitos de um dev só","descriptions":["Escreva o back-end e o front-end de um recurso em um único componente e deixe o framework decidir onde o código deve ser executado.","O Nullstack oferece todas as ferramentas que você precisa para manter o foco na lógica de negócios."],"callToAction":"npx create-nullstack-app","actionLink":"/pt-br/comecando","actionCallback":"Comando copiado, cole no terminal"},"trinity":{"heading":"A Santa Trindade","subHeading":"do desenvolvimento de aplicativos web progressivos","roles":[{"title":"Primeira visita otimizada","image":"/illustrations/nulla-tanker.webp","text":"Na primeira visita, você terá HTML pronto para SEO e otimizado para a primeira renderização de sua rota em uma única solicitação usando funções locais com nenhuma dependência de JavaScript no pacote do cliente"},{"title":"Experiência de PWA fluida","image":"/illustrations/nulla-healer.webp","text":"Depois que o conteúdo é servido e a rede está ociosa, o JavaScript do Nullstack é carregado, o estado da aplicação é restaurado por meio de hidratação e torna-se uma aplicação de página única (SPA)"},{"title":"Solicitações de API leves","image":"/illustrations/nulla-dps.webp","text":"As funções de servidor subsequentes buscarão JSON de uma API de microsserviços gerada automaticamente, desserializarão a resposta, atualizarão o estado da aplicação e renderizarão a página sem nenhum código adicional"}]},"features":[{"title":"Não perca mais tempo colando um código no outro","snippet":"GlueCode","image":"/illustrations/nulla-glue.webp","text":"Um ciclo de vida full-stack combinado com uma abordagem orientada a recursos permite que você escreva código limpo e reutilizável sem a necessidade de criar APIs manualmente."},{"title":"Torne-se um programador menos dependente de maneirismos","snippet":"Vanilla","image":"/illustrations/nulla-scrolls.webp","inverted":true,"text":"Seus componentes são apenas POJOs. Aproveite as vantagens do ecossistema existente enquanto escreve JavaScript como deve ser e veja o resultado refletido no dom."},{"title":"Você já sabe Nullstack","snippet":"Modern","image":"/illustrations/nulla-map.webp","text":"As rotas são atributos simples que você pode atribuir a qualquer tag, e os links são apenas tags 'a'. Você descobrirá que Nullstack é apenas uma versão moderna de sua stack atual."},{"title":"Todas as ferramentas que você precisa falando a mesma língua","snippet":"Batteries","image":"/illustrations/nulla-tools.webp","inverted":true,"text":"A maioria das tarefas são muito repetitivas. Economize sua energia para os desafios reais usando os atalhos que criamos, como eventos em objeto e vínculos bidirecionais."}],"playlist":{"heading":"Aprenda com nossos ","slang":"Dweebs","realWord":" Especialistas","videos":[{"title":"Full-stack com Nullstack","link":"https://www.youtube.com/watch?v=ieLVXZGXUkI&list=PL5ylYELQy1hz1tcnZcP44xRxETpH9bTUe","thumbnail":"/thumbnails/pt-br-pokepoll.webp"},{"title":"Open Source no Brasil - Ajude a traduzir o Nullstack","link":"https://www.youtube.com/watch?v=ud3IF5Xtd1s","thumbnail":"/thumbnails/pt-br-contribute.webp"},{"title":"O que são Componentes em JavaScript?","link":"https://www.youtube.com/watch?v=3yNwTz9w5Fw","thumbnail":"/thumbnails/pt-br-components.webp"}]}}},"GlueCode":{"html":"<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Feature<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// executa no servidor<\/span>\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token keyword\">delete<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> database <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    database<span class=\"token punctuation\">.<\/span><span class=\"token function\">query<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"DELETE * FROM WAIFUS\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// executa no client<\/span>\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">confirm<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token function\">confirm<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"Tem certeza? uwu\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">delete<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// executa onde for melhor<\/span>\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>confirm<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        Delete\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n<span class=\"token punctuation\">}<\/span>\n"},"Vanilla":{"html":"<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Vanilla<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// variáveis ​​são apenas variáveis<\/span>\n  count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token comment\">// mutações refletem no dom<\/span>\n  <span class=\"token function\">increment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token operator\">++<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// 'this' é vinculado por padrão<\/span>\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>increment<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> \n        <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>"},"Modern":{"html":"<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Modern<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// 'params' são injetados em cada função<\/span>\n  <span class=\"token function\">renderWaifu<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> params <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> Olá<span class=\"token punctuation\">,<\/span> eu sou a <span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">}<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// as rotas podem ter segmentos dinâmicos<\/span>\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Waifu<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/waifus/:name<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a<\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/waifus/Nulla<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n          NullaChan\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>a<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>"},"Batteries":{"html":"<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Batteries<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// variáveis ​​podem ser vinculadas ao dom<\/span>\n  name <span class=\"token operator\">=<\/span> <span class=\"token string\">'Nulla-Chan'<\/span><span class=\"token punctuation\">;<\/span>\n  isWaifu <span class=\"token operator\">=<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span>\n  \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token comment\">// preparando um evento em objeto<\/span>\n    <span class=\"token keyword\">const<\/span> isWaifu <span class=\"token operator\">=<\/span> <span class=\"token operator\">!<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>isWaifu<span class=\"token punctuation\">;<\/span>\n\n    <span class=\"token comment\">// eventos são evitados por padrão<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span>isWaifu<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n          Alternar Waifu\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>"},"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/inicializacao-da-aplicacao.html b/docs/pt-br/inicializacao-da-aplicacao.html
index 4924c824..b650286f 100644
--- a/docs/pt-br/inicializacao-da-aplicacao.html
+++ b/docs/pt-br/inicializacao-da-aplicacao.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -68,15 +68,15 @@ <h2 id="pr-xima-etapa"><a href="#pr-xima-etapa">Próxima Etapa</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Inicialização da Aplicação - Nullstack","description":"A função de inicialização será executada apenas uma vez quando sua aplicação for inicializada e é um bom lugar para configurar o contexto do seu servidor"};
       window.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/inicializacao-da-aplicacao":{"title":"Inicialização da Aplicação","html":"<p>O arquivo <strong>index.js<\/strong> na raiz da aplicação é responsável por iniciar a aplicação.<\/p>\n<p>Quando você executa a aplicação com <code>npm start<\/code> ou <code>node .production/server.js<\/code>, o <strong>index<\/strong> chama a função <code>start<\/code> em seu <strong>src/Application.js<\/strong>.<\/p>\n<p>A função <code>start<\/code> será executada apenas uma vez quando sua aplicação for inicializada e é um bom lugar para configurar seu <a href=\"/pt-br/contexto\">contexto de servidor<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> database <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./database'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>database <span class=\"token operator\">=<\/span> database<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"padr-o-de-inicializa--o-de-depend-ncia\"><a href=\"#padr-o-de-inicializa--o-de-depend-ncia\">Padrão de inicialização de dependência<\/a><\/h2><p>Um bom padrão para trabalhar com dependências que requerem configurações em tempo de inicialização é definir uma função <code>start<\/code> na dependência e chamá-la na função <code>start<\/code> da aplicação passando o <a href=\"/pt-br/contexto\">contexto do servidor<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Dependency <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Dependency'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    Dependency<span class=\"token punctuation\">.<\/span><span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span>context<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>🔒 As funções de servidor com o nome começando com &quot;start&quot; (e opcionalmente seguido por uma letra maiúscula) não geram um endpoint de API para evitar inundação de contexto malicioso.<\/p>\n<\/blockquote>\n<h2 id=\"pr-xima-etapa\"><a href=\"#pr-xima-etapa\">Próxima Etapa<\/a><\/h2><p>⚔ Aprenda sobre <a href=\"/pt-br/componentes-funcionais\">componentes funcionais<\/a>.<\/p>\n","description":"A função de inicialização será executada apenas uma vez quando sua aplicação for inicializada e é um bom lugar para configurar o contexto do seu servidor","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"inicializacao-da-aplicacao"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/inicializacao-da-aplicacao/index.html b/docs/pt-br/inicializacao-da-aplicacao/index.html
index 4924c824..b650286f 100644
--- a/docs/pt-br/inicializacao-da-aplicacao/index.html
+++ b/docs/pt-br/inicializacao-da-aplicacao/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -68,15 +68,15 @@ <h2 id="pr-xima-etapa"><a href="#pr-xima-etapa">Próxima Etapa</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Inicialização da Aplicação - Nullstack","description":"A função de inicialização será executada apenas uma vez quando sua aplicação for inicializada e é um bom lugar para configurar o contexto do seu servidor"};
       window.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/inicializacao-da-aplicacao":{"title":"Inicialização da Aplicação","html":"<p>O arquivo <strong>index.js<\/strong> na raiz da aplicação é responsável por iniciar a aplicação.<\/p>\n<p>Quando você executa a aplicação com <code>npm start<\/code> ou <code>node .production/server.js<\/code>, o <strong>index<\/strong> chama a função <code>start<\/code> em seu <strong>src/Application.js<\/strong>.<\/p>\n<p>A função <code>start<\/code> será executada apenas uma vez quando sua aplicação for inicializada e é um bom lugar para configurar seu <a href=\"/pt-br/contexto\">contexto de servidor<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> database <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./database'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>database <span class=\"token operator\">=<\/span> database<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"padr-o-de-inicializa--o-de-depend-ncia\"><a href=\"#padr-o-de-inicializa--o-de-depend-ncia\">Padrão de inicialização de dependência<\/a><\/h2><p>Um bom padrão para trabalhar com dependências que requerem configurações em tempo de inicialização é definir uma função <code>start<\/code> na dependência e chamá-la na função <code>start<\/code> da aplicação passando o <a href=\"/pt-br/contexto\">contexto do servidor<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Dependency <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Dependency'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    Dependency<span class=\"token punctuation\">.<\/span><span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span>context<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>🔒 As funções de servidor com o nome começando com &quot;start&quot; (e opcionalmente seguido por uma letra maiúscula) não geram um endpoint de API para evitar inundação de contexto malicioso.<\/p>\n<\/blockquote>\n<h2 id=\"pr-xima-etapa\"><a href=\"#pr-xima-etapa\">Próxima Etapa<\/a><\/h2><p>⚔ Aprenda sobre <a href=\"/pt-br/componentes-funcionais\">componentes funcionais<\/a>.<\/p>\n","description":"A função de inicialização será executada apenas uma vez quando sua aplicação for inicializada e é um bom lugar para configurar o contexto do seu servidor","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"inicializacao-da-aplicacao"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/instancia-self.html b/docs/pt-br/instancia-self.html
index 1bcf4f96..a5385efd 100644
--- a/docs/pt-br/instancia-self.html
+++ b/docs/pt-br/instancia-self.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -175,15 +175,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo passo</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"self da Instância - Nullstack","description":"O objeto self é um proxy no Contexto Nullstack disponível no client e te dá informações sobre o ciclo de vida da instância"};
       window.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/instancia-self":{"title":"self da Instância","html":"<ul>\n<li>Tipo: <code>object<\/code><\/li>\n<li>Origem: <a href=\"/pt-br/contexto#----contexto-nullstack\">Contexto Nullstack<\/a><\/li>\n<li>Disponibilidade: <strong>client<\/strong><\/li>\n<li><strong>readonly<\/strong> no contexto do <strong>client<\/strong><\/li>\n<\/ul>\n<p>Ele te dá informações sobre o ciclo de vida da instância e sua <a href=\"#key-da-inst-ncia\" target=\"_blank\" rel=\"noopener\"><code>key<\/code><\/a> única.<\/p>\n<p>Cada instância recebe seu própio objeto <code>self<\/code>.<\/p>\n<p>As seguintes <em>keys<\/em> estão disponíveis no objeto:<\/p>\n<ul>\n<li><strong>initiated<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>hydrated<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>prerendered<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>element<\/strong>: <code>HTMLElement<\/code><\/li>\n<li><a href=\"#key-da-inst-ncia\" target=\"_blank\" rel=\"noopener\"><code>key<\/code><\/a>: <code>string<\/code><\/li>\n<\/ul>\n<p>Quando um método do ciclo de vida é resolvido, mesmo que não declarado, uma chave equivalente é setada para <code>true<\/code> no <code>self<\/code>.<\/p>\n<p>Se o componente tiver sido renderizado no lado do servidor a chave <code>prerendered<\/code> continuará como <code>true<\/code> até que seja finalizado.<\/p>\n<p>A chave <code>element<\/code> aponta para o seletor na DOM e sua existência só é garantida quando o <code>hydrate<\/code> está sendo chamado, pois <code>prepare<\/code> e <code>initiate<\/code> podem estar rodando no servidor.<\/p>\n<blockquote>\n<p>💡 Não use a chave <code>element<\/code> para adivinhar o ambiente, ao invés use <a href=\"/pt-br/contexto-environment\"><code>environment<\/code><\/a> para isso.<\/p>\n<\/blockquote>\n<p>Observar o <code>self<\/code> é um bom jeito de evitar dar informações irrelevantes para o usuário final<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Page<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>price <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getPrice<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">hydrate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>self<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    self<span class=\"token punctuation\">.<\/span>element<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'input'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">focus<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>self<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>self<span class=\"token punctuation\">.<\/span>prerendered <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token operator\">!<\/span>self<span class=\"token punctuation\">.<\/span>initiated<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span> \n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>number<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>price<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">disabled<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token operator\">!<\/span>self<span class=\"token punctuation\">.<\/span>hydrated<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> \n          Save\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Page<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 Componentes que estão otimizados em <a href=\"/pt-br/componentes-renderizaveis\">functional components<\/a> não tem acesso ao <code>self<\/code>.<\/p>\n<\/blockquote>\n<h2 id=\"key-da-inst-ncia\"><a href=\"#key-da-inst-ncia\">key da Instância<\/a><\/h2><ul>\n<li>Tipo: <code>string<\/code><\/li>\n<li>Origem: <a href=\"/pt-br/contexto#----contexto-componente\">Contexto Componente<\/a><\/li>\n<li>Disponibilidade: <strong>client<\/strong><\/li>\n<li><strong>readonly<\/strong> no contexto do <strong>client<\/strong> ou depois de definido seu valor como atributo<\/li>\n<\/ul>\n<p>Ele permite que você persista a instância quando é movida no DOM.<\/p>\n<p>Você pode declarar uma <code>key<\/code> por instância.<\/p>\n<blockquote>\n<p>💡 Se você não declarar a <code>key<\/code> o nullstack irá gerar uma baseada na profundidade da dom.<\/p>\n<\/blockquote>\n<blockquote>\n<p>🔥 As <em>keys<\/em> não podem começar com &quot;_.&quot; para evitar conflito com as <em>keys<\/em> geradas pelo Nullstack<\/p>\n<\/blockquote>\n<p>As <em>keys<\/em> devem ser globalmente únicas já que o componente poderá ser movido para qualquer lugar da DOM e não apenas entre os componentes irmãos.<\/p>\n<h3 id=\"preservando-o-estado\"><a href=\"#preservando-o-estado\">Preservando o estado<\/a><\/h3><p>As <em>keys<\/em> são úteis para preservar o estado em <a href=\"/pt-br/componentes-com-estado\">componentes com estado<\/a> quando você os move para dentro da DOM.<\/p>\n<p>Isto é especialmente útil para listas com tamanho dinâmico que invocam os componentes.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Item <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Item'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">List<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>items <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getItems<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>self<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> componentKey <span class=\"token operator\">=<\/span> self<span class=\"token punctuation\">.<\/span>key<span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span> \n        <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>items<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">item<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">(<\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Item<\/span><\/span> <span class=\"token attr-name\">key<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>componentKey<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">-<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>item<span class=\"token punctuation\">.<\/span>id<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token spread\"><span class=\"token punctuation\">{<\/span><span class=\"token operator\">...<\/span>item<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Page<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h3 id=\"inst-ncias-compartilhadas\"><a href=\"#inst-ncias-compartilhadas\">Instâncias compartilhadas<\/a><\/h3><p>Você também pode usar as <em>keys<\/em> para compartilhar a instância entre dois elementos.<\/p>\n<p>Apenas o primeiro encontro da <code>key<\/code> irá executar o <a href=\"/pt-br/ciclo-de-vida-full-stack\">lifecycle<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>amount<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span>count<span class=\"token operator\">:<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token operator\">+<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span> x <span class=\"token punctuation\">{<\/span>amount<span class=\"token punctuation\">}<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">*<\/span> amount<span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>  \n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Counter <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Counter'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Counter<\/span><\/span> <span class=\"token attr-name\">key<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>a<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">amount<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Counter<\/span><\/span> <span class=\"token attr-name\">key<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>b<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">amount<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Counter<\/span><\/span> <span class=\"token attr-name\">key<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>b<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">amount<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">3<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo passo<\/a><\/h2><p>⚔ Aprenda sobre <a href=\"/pt-br/requisicao-e-resposta-do-servidor\">requisicao e resposta do servidor<\/a>.<\/p>\n","description":"O objeto self é um proxy no Contexto Nullstack disponível no client e te dá informações sobre o ciclo de vida da instância","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"instancia-self"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/instancia-self/index.html b/docs/pt-br/instancia-self/index.html
index 1bcf4f96..a5385efd 100644
--- a/docs/pt-br/instancia-self/index.html
+++ b/docs/pt-br/instancia-self/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -175,15 +175,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo passo</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"self da Instância - Nullstack","description":"O objeto self é um proxy no Contexto Nullstack disponível no client e te dá informações sobre o ciclo de vida da instância"};
       window.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/instancia-self":{"title":"self da Instância","html":"<ul>\n<li>Tipo: <code>object<\/code><\/li>\n<li>Origem: <a href=\"/pt-br/contexto#----contexto-nullstack\">Contexto Nullstack<\/a><\/li>\n<li>Disponibilidade: <strong>client<\/strong><\/li>\n<li><strong>readonly<\/strong> no contexto do <strong>client<\/strong><\/li>\n<\/ul>\n<p>Ele te dá informações sobre o ciclo de vida da instância e sua <a href=\"#key-da-inst-ncia\" target=\"_blank\" rel=\"noopener\"><code>key<\/code><\/a> única.<\/p>\n<p>Cada instância recebe seu própio objeto <code>self<\/code>.<\/p>\n<p>As seguintes <em>keys<\/em> estão disponíveis no objeto:<\/p>\n<ul>\n<li><strong>initiated<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>hydrated<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>prerendered<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>element<\/strong>: <code>HTMLElement<\/code><\/li>\n<li><a href=\"#key-da-inst-ncia\" target=\"_blank\" rel=\"noopener\"><code>key<\/code><\/a>: <code>string<\/code><\/li>\n<\/ul>\n<p>Quando um método do ciclo de vida é resolvido, mesmo que não declarado, uma chave equivalente é setada para <code>true<\/code> no <code>self<\/code>.<\/p>\n<p>Se o componente tiver sido renderizado no lado do servidor a chave <code>prerendered<\/code> continuará como <code>true<\/code> até que seja finalizado.<\/p>\n<p>A chave <code>element<\/code> aponta para o seletor na DOM e sua existência só é garantida quando o <code>hydrate<\/code> está sendo chamado, pois <code>prepare<\/code> e <code>initiate<\/code> podem estar rodando no servidor.<\/p>\n<blockquote>\n<p>💡 Não use a chave <code>element<\/code> para adivinhar o ambiente, ao invés use <a href=\"/pt-br/contexto-environment\"><code>environment<\/code><\/a> para isso.<\/p>\n<\/blockquote>\n<p>Observar o <code>self<\/code> é um bom jeito de evitar dar informações irrelevantes para o usuário final<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Page<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>price <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getPrice<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">hydrate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>self<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    self<span class=\"token punctuation\">.<\/span>element<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'input'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">focus<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>self<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>self<span class=\"token punctuation\">.<\/span>prerendered <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token operator\">!<\/span>self<span class=\"token punctuation\">.<\/span>initiated<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span> \n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>number<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>price<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">disabled<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token operator\">!<\/span>self<span class=\"token punctuation\">.<\/span>hydrated<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> \n          Save\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Page<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 Componentes que estão otimizados em <a href=\"/pt-br/componentes-renderizaveis\">functional components<\/a> não tem acesso ao <code>self<\/code>.<\/p>\n<\/blockquote>\n<h2 id=\"key-da-inst-ncia\"><a href=\"#key-da-inst-ncia\">key da Instância<\/a><\/h2><ul>\n<li>Tipo: <code>string<\/code><\/li>\n<li>Origem: <a href=\"/pt-br/contexto#----contexto-componente\">Contexto Componente<\/a><\/li>\n<li>Disponibilidade: <strong>client<\/strong><\/li>\n<li><strong>readonly<\/strong> no contexto do <strong>client<\/strong> ou depois de definido seu valor como atributo<\/li>\n<\/ul>\n<p>Ele permite que você persista a instância quando é movida no DOM.<\/p>\n<p>Você pode declarar uma <code>key<\/code> por instância.<\/p>\n<blockquote>\n<p>💡 Se você não declarar a <code>key<\/code> o nullstack irá gerar uma baseada na profundidade da dom.<\/p>\n<\/blockquote>\n<blockquote>\n<p>🔥 As <em>keys<\/em> não podem começar com &quot;_.&quot; para evitar conflito com as <em>keys<\/em> geradas pelo Nullstack<\/p>\n<\/blockquote>\n<p>As <em>keys<\/em> devem ser globalmente únicas já que o componente poderá ser movido para qualquer lugar da DOM e não apenas entre os componentes irmãos.<\/p>\n<h3 id=\"preservando-o-estado\"><a href=\"#preservando-o-estado\">Preservando o estado<\/a><\/h3><p>As <em>keys<\/em> são úteis para preservar o estado em <a href=\"/pt-br/componentes-com-estado\">componentes com estado<\/a> quando você os move para dentro da DOM.<\/p>\n<p>Isto é especialmente útil para listas com tamanho dinâmico que invocam os componentes.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Item <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Item'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">List<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>items <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getItems<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>self<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> componentKey <span class=\"token operator\">=<\/span> self<span class=\"token punctuation\">.<\/span>key<span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span> \n        <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>items<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">item<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">(<\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Item<\/span><\/span> <span class=\"token attr-name\">key<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>componentKey<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">-<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>item<span class=\"token punctuation\">.<\/span>id<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token spread\"><span class=\"token punctuation\">{<\/span><span class=\"token operator\">...<\/span>item<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Page<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h3 id=\"inst-ncias-compartilhadas\"><a href=\"#inst-ncias-compartilhadas\">Instâncias compartilhadas<\/a><\/h3><p>Você também pode usar as <em>keys<\/em> para compartilhar a instância entre dois elementos.<\/p>\n<p>Apenas o primeiro encontro da <code>key<\/code> irá executar o <a href=\"/pt-br/ciclo-de-vida-full-stack\">lifecycle<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>amount<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span>count<span class=\"token operator\">:<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token operator\">+<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span> x <span class=\"token punctuation\">{<\/span>amount<span class=\"token punctuation\">}<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">*<\/span> amount<span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>  \n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Counter <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Counter'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Counter<\/span><\/span> <span class=\"token attr-name\">key<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>a<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">amount<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Counter<\/span><\/span> <span class=\"token attr-name\">key<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>b<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">amount<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Counter<\/span><\/span> <span class=\"token attr-name\">key<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>b<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">amount<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">3<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo passo<\/a><\/h2><p>⚔ Aprenda sobre <a href=\"/pt-br/requisicao-e-resposta-do-servidor\">requisicao e resposta do servidor<\/a>.<\/p>\n","description":"O objeto self é um proxy no Contexto Nullstack disponível no client e te dá informações sobre o ciclo de vida da instância","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"instancia-self"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/nullstack-logo.html b/docs/pt-br/nullstack-logo.html
index 73e22ec6..4f965855 100644
--- a/docs/pt-br/nullstack-logo.html
+++ b/docs/pt-br/nullstack-logo.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -59,15 +59,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Logo Nullstack - Nullstack","description":"Nullstack vem com seu conjunto de logotipos prontos pra uso"};
       window.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/nullstack-logo":{"title":"Logo Nullstack","html":"<p>O Nullstack vem com seu conjunto de logotipos prontos para serem usados ​​como componentes:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Logo <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack/logo'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Logo<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">30<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">light<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Logo<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">30<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">monotone<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Logo<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">30<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">light<\/span> <span class=\"token attr-name\">monotone<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Logo<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">30<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">duotone<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Logo<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">30<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">light<\/span> <span class=\"token attr-name\">duotone<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Os componentes acima e seus atributos geram os seguintes logotipos:<\/p>\n<p><img src=\"/nullstack-logos.png\" alt=\"Nullstack Logos\"><\/p>\n<p>O logotipo usa largura total e cores de <code>duotone<\/code> por padrão.<\/p>\n","description":"Nullstack vem com seu conjunto de logotipos prontos pra uso","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"nullstack-logo"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/nullstack-logo/index.html b/docs/pt-br/nullstack-logo/index.html
index 73e22ec6..4f965855 100644
--- a/docs/pt-br/nullstack-logo/index.html
+++ b/docs/pt-br/nullstack-logo/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -59,15 +59,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Logo Nullstack - Nullstack","description":"Nullstack vem com seu conjunto de logotipos prontos pra uso"};
       window.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/nullstack-logo":{"title":"Logo Nullstack","html":"<p>O Nullstack vem com seu conjunto de logotipos prontos para serem usados ​​como componentes:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Logo <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack/logo'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Logo<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">30<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">light<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Logo<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">30<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">monotone<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Logo<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">30<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">light<\/span> <span class=\"token attr-name\">monotone<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Logo<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">30<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">duotone<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Logo<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">30<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">light<\/span> <span class=\"token attr-name\">duotone<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Os componentes acima e seus atributos geram os seguintes logotipos:<\/p>\n<p><img src=\"/nullstack-logos.png\" alt=\"Nullstack Logos\"><\/p>\n<p>O logotipo usa largura total e cores de <code>duotone<\/code> por padrão.<\/p>\n","description":"Nullstack vem com seu conjunto de logotipos prontos pra uso","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"nullstack-logo"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/renderizacao-no-servidor.html b/docs/pt-br/renderizacao-no-servidor.html
index 87e5c138..5d229692 100644
--- a/docs/pt-br/renderizacao-no-servidor.html
+++ b/docs/pt-br/renderizacao-no-servidor.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -36,15 +36,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":404,"title":"Página Não Encontrada - Nullstack","description":"Desculpe, essa não é a página que você está procurando"};
       window.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/renderizacao-no-servidor":{"title":"Página Não Encontrada","html":"<p>Talvez você queira aprender <a href=\"/contexto-page\">como criar uma pagina 404 com Nullstack<\/a>?<\/p>\n<p>Se você está procurando por outra coisa, você deveria <a href=\"/pt-br/documentacao\">ler a documentação<\/a>.<\/p>\n","description":"Desculpe, essa não é a página que você está procurando","status":404,"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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"renderizacao-no-servidor"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/renderizacao-no-servidor/index.html b/docs/pt-br/renderizacao-no-servidor/index.html
index 87e5c138..5d229692 100644
--- a/docs/pt-br/renderizacao-no-servidor/index.html
+++ b/docs/pt-br/renderizacao-no-servidor/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -36,15 +36,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":404,"title":"Página Não Encontrada - Nullstack","description":"Desculpe, essa não é a página que você está procurando"};
       window.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/renderizacao-no-servidor":{"title":"Página Não Encontrada","html":"<p>Talvez você queira aprender <a href=\"/contexto-page\">como criar uma pagina 404 com Nullstack<\/a>?<\/p>\n<p>Se você está procurando por outra coisa, você deveria <a href=\"/pt-br/documentacao\">ler a documentação<\/a>.<\/p>\n","description":"Desculpe, essa não é a página que você está procurando","status":404,"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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"renderizacao-no-servidor"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/renderizando-no-servidor.html b/docs/pt-br/renderizando-no-servidor.html
index 329810a0..60cb00b1 100644
--- a/docs/pt-br/renderizando-no-servidor.html
+++ b/docs/pt-br/renderizando-no-servidor.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -45,15 +45,15 @@ <h2 id="pr-ximos-passos"><a href="#pr-ximos-passos">Próximos passos</a></h2><p>
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Renderizando no servidor - Nullstack","description":"O Nullstack otimiza o SEO e também o tempo de resposta, gerando HTML para a rota de sua aplicação."};
       window.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/renderizando-no-servidor":{"title":"Renderizando no servidor","html":"<p>O Nullstack otimiza o SEO e também o tempo de resposta, gerando HTML para as <a href=\"/pt-br/rotas-e-parametros\">rotas<\/a> de sua aplicação.<\/p>\n<p>A renderização no servidor é excelente para o SEO, pois fornece marcação rastreável bem veloz para os mecanismos de busca.<\/p>\n<p>O Nullstack inicia a aplicação para o usuário servindo primeiro a página HTML solicitada, sem ocorrer sobrecarga.<\/p>\n<p>Antes de servir o HTML, o Nullstack esperará pela <a href=\"/pt-br/ciclo-de-vida-full-stack\">prepare<\/a> e <a href=\"/pt-br/ciclo-de-vida-full-stack\">initiate<\/a> de todos os componentes da rota a serem resolvidos.<\/p>\n<p>Durante a renderização, todas as funções do servidor são executadas localmente, sem a necessidade de buscar uma API, tornando o processo ainda mais rápido.<\/p>\n<p>Depois que o documento já está no navegador, o Nullstack carrega o pacote no lado do cliente e inicia o processo de <a href=\"/pt-br/ciclo-de-vida-full-stack\">hydration<\/a>.<\/p>\n<p>Nenhuma outra solicitação ao servidor é feita, para recuperar o estado da aplicação durante o <a href=\"/pt-br/ciclo-de-vida-full-stack\">hydration<\/a>.<\/p>\n<p>O head da página gerará as meta tags necessárias para SEO com base no conteúdo das chaves de contexto <a href=\"/context-project\"><code>project<\/code><\/a> e <a href=\"/context-page\"><code>page<\/code><\/a>.<\/p>\n<p>Este é o modo de construção padrão e também o modo usado para desenvolvimento.<\/p>\n<p>É uma boa prática seguir os padrões de SSR no desenvolvimento para poder mudar facilmente entre os modos de compilação na produção.<\/p>\n<h2 id=\"pr-ximos-passos\"><a href=\"#pr-ximos-passos\">Próximos passos<\/a><\/h2><p>⚔ Aprenda sobre <a href=\"/pt-br/geracao-de-sites-estaticos\">geração de site estático<\/a>.<\/p>\n","description":"O Nullstack otimiza o SEO e também o tempo de resposta, gerando HTML para a rota de sua aplicação.","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"renderizando-no-servidor"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/renderizando-no-servidor/index.html b/docs/pt-br/renderizando-no-servidor/index.html
index 329810a0..60cb00b1 100644
--- a/docs/pt-br/renderizando-no-servidor/index.html
+++ b/docs/pt-br/renderizando-no-servidor/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -45,15 +45,15 @@ <h2 id="pr-ximos-passos"><a href="#pr-ximos-passos">Próximos passos</a></h2><p>
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Renderizando no servidor - Nullstack","description":"O Nullstack otimiza o SEO e também o tempo de resposta, gerando HTML para a rota de sua aplicação."};
       window.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/renderizando-no-servidor":{"title":"Renderizando no servidor","html":"<p>O Nullstack otimiza o SEO e também o tempo de resposta, gerando HTML para as <a href=\"/pt-br/rotas-e-parametros\">rotas<\/a> de sua aplicação.<\/p>\n<p>A renderização no servidor é excelente para o SEO, pois fornece marcação rastreável bem veloz para os mecanismos de busca.<\/p>\n<p>O Nullstack inicia a aplicação para o usuário servindo primeiro a página HTML solicitada, sem ocorrer sobrecarga.<\/p>\n<p>Antes de servir o HTML, o Nullstack esperará pela <a href=\"/pt-br/ciclo-de-vida-full-stack\">prepare<\/a> e <a href=\"/pt-br/ciclo-de-vida-full-stack\">initiate<\/a> de todos os componentes da rota a serem resolvidos.<\/p>\n<p>Durante a renderização, todas as funções do servidor são executadas localmente, sem a necessidade de buscar uma API, tornando o processo ainda mais rápido.<\/p>\n<p>Depois que o documento já está no navegador, o Nullstack carrega o pacote no lado do cliente e inicia o processo de <a href=\"/pt-br/ciclo-de-vida-full-stack\">hydration<\/a>.<\/p>\n<p>Nenhuma outra solicitação ao servidor é feita, para recuperar o estado da aplicação durante o <a href=\"/pt-br/ciclo-de-vida-full-stack\">hydration<\/a>.<\/p>\n<p>O head da página gerará as meta tags necessárias para SEO com base no conteúdo das chaves de contexto <a href=\"/context-project\"><code>project<\/code><\/a> e <a href=\"/context-page\"><code>page<\/code><\/a>.<\/p>\n<p>Este é o modo de construção padrão e também o modo usado para desenvolvimento.<\/p>\n<p>É uma boa prática seguir os padrões de SSR no desenvolvimento para poder mudar facilmente entre os modos de compilação na produção.<\/p>\n<h2 id=\"pr-ximos-passos\"><a href=\"#pr-ximos-passos\">Próximos passos<\/a><\/h2><p>⚔ Aprenda sobre <a href=\"/pt-br/geracao-de-sites-estaticos\">geração de site estático<\/a>.<\/p>\n","description":"O Nullstack otimiza o SEO e também o tempo de resposta, gerando HTML para a rota de sua aplicação.","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"renderizando-no-servidor"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/requisicao-e-resposta-do-servidor.html b/docs/pt-br/requisicao-e-resposta-do-servidor.html
index 33509c51..6a312719 100644
--- a/docs/pt-br/requisicao-e-resposta-do-servidor.html
+++ b/docs/pt-br/requisicao-e-resposta-do-servidor.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -111,15 +111,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo passo</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Requisição e resposta do servidor - Nullstack","description":"A key do servidor é um proxy em volta da instância do express, que roda o Nullstack por baixo dos panos"};
       window.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/requisicao-e-resposta-do-servidor":{"title":"Requisição e resposta do servidor","html":"<h2 id=\"a-key-do-servidor\"><a href=\"#a-key-do-servidor\">A key do servidor<\/a><\/h2><p>A key do servidor é um proxy em volta de uma instância do <a href=\"https://expressjs.com\" target=\"_blank\" rel=\"noopener\">Express<\/a> que roda por baixo dos panos.<\/p>\n<p>O objeto do servidor está presente apenas no contexto do <em>servidor<\/em>.<\/p>\n<p>As seguintes funções são redirecionadas para o servidor Express:<\/p>\n<ul>\n<li><code>get<\/code><\/li>\n<li><code>post<\/code><\/li>\n<li><code>put<\/code><\/li>\n<li><code>patch<\/code><\/li>\n<li><code>delete<\/code><\/li>\n<li><code>options<\/code><\/li>\n<li><code>head<\/code><\/li>\n<li><code>use<\/code><\/li>\n<\/ul>\n<blockquote>\n<p>✨ Se você quer aprender como fazer uma API com Nullstack, este é o caminho.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>server<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    server<span class=\"token punctuation\">.<\/span><span class=\"token function\">get<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'/api/books'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">request<span class=\"token punctuation\">,<\/span> response<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n      response<span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>books<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Outras keys disponíveis são:<\/p>\n<ul>\n<li><strong>port<\/strong>: <code>integer<\/code><\/li>\n<li><strong>maximumPayloadSize<\/strong>: <code>string<\/code><\/li>\n<li><strong>cors<\/strong>: <code>object<\/code><\/li>\n<\/ul>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>server<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    server<span class=\"token punctuation\">.<\/span>port <span class=\"token operator\">=<\/span> <span class=\"token number\">3000<\/span><span class=\"token punctuation\">;<\/span>\n    server<span class=\"token punctuation\">.<\/span>maximumPayloadSize <span class=\"token operator\">=<\/span> <span class=\"token string\">'5mb'<\/span><span class=\"token punctuation\">;<\/span>\n    server<span class=\"token punctuation\">.<\/span>cors <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span>\n      origin<span class=\"token operator\">:<\/span> <span class=\"token string\">'http://localhost:6969'<\/span><span class=\"token punctuation\">,<\/span>\n      optionsSuccessStatus<span class=\"token operator\">:<\/span> <span class=\"token number\">200<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>O objeto <code>cors<\/code> será passado como argumento para o plugin do <a href=\"https://expressjs.com/en/resources/middleware/cors.html\" target=\"_blank\" rel=\"noopener\">cors no express<\/a>.<\/p>\n<h2 id=\"requisi--o-e-resposta\"><a href=\"#requisi--o-e-resposta\">Requisição e resposta<\/a><\/h2><p>Todo contexto de função do servidor é mesclado com os objetos <code>request<\/code> e <code>response<\/code> originais do Express.<\/p>\n<p>Se você der uma resposta manualmente ela irá sobrescrever a <code>response<\/code> <a href=\"/server-side-rendering\">server-side rendering<\/a> do framework.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">getBooks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>request<span class=\"token punctuation\">,<\/span> response<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>request<span class=\"token punctuation\">.<\/span>session<span class=\"token punctuation\">.<\/span>user<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      response<span class=\"token punctuation\">.<\/span><span class=\"token function\">status<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">401<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>unauthorized<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo passo<\/a><\/h2><p>⚔ Aprenda sobre <a href=\"/styles\">estilos<\/a>.<\/p>\n","description":"A key do servidor é um proxy em volta da instância do express, que roda o Nullstack por baixo dos panos","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"requisicao-e-resposta-do-servidor"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/requisicao-e-resposta-do-servidor/index.html b/docs/pt-br/requisicao-e-resposta-do-servidor/index.html
index 33509c51..6a312719 100644
--- a/docs/pt-br/requisicao-e-resposta-do-servidor/index.html
+++ b/docs/pt-br/requisicao-e-resposta-do-servidor/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -111,15 +111,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo passo</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Requisição e resposta do servidor - Nullstack","description":"A key do servidor é um proxy em volta da instância do express, que roda o Nullstack por baixo dos panos"};
       window.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/requisicao-e-resposta-do-servidor":{"title":"Requisição e resposta do servidor","html":"<h2 id=\"a-key-do-servidor\"><a href=\"#a-key-do-servidor\">A key do servidor<\/a><\/h2><p>A key do servidor é um proxy em volta de uma instância do <a href=\"https://expressjs.com\" target=\"_blank\" rel=\"noopener\">Express<\/a> que roda por baixo dos panos.<\/p>\n<p>O objeto do servidor está presente apenas no contexto do <em>servidor<\/em>.<\/p>\n<p>As seguintes funções são redirecionadas para o servidor Express:<\/p>\n<ul>\n<li><code>get<\/code><\/li>\n<li><code>post<\/code><\/li>\n<li><code>put<\/code><\/li>\n<li><code>patch<\/code><\/li>\n<li><code>delete<\/code><\/li>\n<li><code>options<\/code><\/li>\n<li><code>head<\/code><\/li>\n<li><code>use<\/code><\/li>\n<\/ul>\n<blockquote>\n<p>✨ Se você quer aprender como fazer uma API com Nullstack, este é o caminho.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>server<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    server<span class=\"token punctuation\">.<\/span><span class=\"token function\">get<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'/api/books'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">request<span class=\"token punctuation\">,<\/span> response<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n      response<span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>books<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Outras keys disponíveis são:<\/p>\n<ul>\n<li><strong>port<\/strong>: <code>integer<\/code><\/li>\n<li><strong>maximumPayloadSize<\/strong>: <code>string<\/code><\/li>\n<li><strong>cors<\/strong>: <code>object<\/code><\/li>\n<\/ul>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>server<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    server<span class=\"token punctuation\">.<\/span>port <span class=\"token operator\">=<\/span> <span class=\"token number\">3000<\/span><span class=\"token punctuation\">;<\/span>\n    server<span class=\"token punctuation\">.<\/span>maximumPayloadSize <span class=\"token operator\">=<\/span> <span class=\"token string\">'5mb'<\/span><span class=\"token punctuation\">;<\/span>\n    server<span class=\"token punctuation\">.<\/span>cors <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span>\n      origin<span class=\"token operator\">:<\/span> <span class=\"token string\">'http://localhost:6969'<\/span><span class=\"token punctuation\">,<\/span>\n      optionsSuccessStatus<span class=\"token operator\">:<\/span> <span class=\"token number\">200<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>O objeto <code>cors<\/code> será passado como argumento para o plugin do <a href=\"https://expressjs.com/en/resources/middleware/cors.html\" target=\"_blank\" rel=\"noopener\">cors no express<\/a>.<\/p>\n<h2 id=\"requisi--o-e-resposta\"><a href=\"#requisi--o-e-resposta\">Requisição e resposta<\/a><\/h2><p>Todo contexto de função do servidor é mesclado com os objetos <code>request<\/code> e <code>response<\/code> originais do Express.<\/p>\n<p>Se você der uma resposta manualmente ela irá sobrescrever a <code>response<\/code> <a href=\"/server-side-rendering\">server-side rendering<\/a> do framework.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">getBooks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>request<span class=\"token punctuation\">,<\/span> response<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>request<span class=\"token punctuation\">.<\/span>session<span class=\"token punctuation\">.<\/span>user<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      response<span class=\"token punctuation\">.<\/span><span class=\"token function\">status<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">401<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>unauthorized<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo passo<\/a><\/h2><p>⚔ Aprenda sobre <a href=\"/styles\">estilos<\/a>.<\/p>\n","description":"A key do servidor é um proxy em volta da instância do express, que roda o Nullstack por baixo dos panos","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"requisicao-e-resposta-do-servidor"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/rotas-e-parametros.html b/docs/pt-br/rotas-e-parametros.html
index 872f1f6c..5c200c62 100644
--- a/docs/pt-br/rotas-e-parametros.html
+++ b/docs/pt-br/rotas-e-parametros.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -280,15 +280,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo passo</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Rotas e Parâmetros - Nullstack","description":"Nullstack tem rotas embutidas, não faria sentido não ser assim já que se espera que aplicações web tenham hyperlinks."};
       window.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/rotas-e-parametros":{"title":"Rotas e Parâmetros","html":"<p>Nullstack tem rotas embutidas, não faria sentido não ser assim já que se espera que aplicações web tenham hyperlinks.<\/p>\n<p>Qualquer tag pode receber um atributo <code>route<\/code>, seja um componente, componente interno ou uma tag HTML simples.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Page <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Page'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">renderHome<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>section<\/span><span class=\"token punctuation\">><\/span><\/span> Home <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>section<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Home<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Page<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/page<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>abbr<\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/abbreviations<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Abreviações <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>abbr<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"links\"><a href=\"#links\">Links<\/a><\/h2><p>Links no Nullstack são tags <code>a<\/code> simples com o valor de <code>href<\/code> começando com &quot;/&quot;.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a<\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/page/about<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token constant\">P<\/span>ágina About <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>a<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 No lado do cliente o evento de clique modificará o histórico sem recarregar a página.<\/p>\n<\/blockquote>\n<blockquote>\n<p>✨ Você ainda pode atribuir seu próprio evento de clique para a tag sem perder o comportamento do framework.<\/p>\n<\/blockquote>\n<h2 id=\"par-metros\"><a href=\"#par-metros\">Parâmetros<\/a><\/h2><p>A chave <code>params<\/code> é um proxy de objeto injetado em cada instância de cliente.<\/p>\n<p>Cada parâmetro da string de <em>query<\/em> é mapeado para esse objeto.<\/p>\n<p>Por padrão qualquer chave requisitada deste objeto retornará uma string.<\/p>\n<p>Se o valor for <code>undefined<\/code> retornará uma string vazia.<\/p>\n<p>Se o valor for <code>true<\/code> ou <code>false<\/code> retornará um boleano, ao invés de uma string.<\/p>\n<blockquote>\n<p>🐱‍💻 Abaixo um exemplo que visita &quot;/books?expanded=true&amp;page=2&quot;:<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Books<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span>params<span class=\"token punctuation\">.<\/span>expanded<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">const<\/span> page <span class=\"token operator\">=<\/span> <span class=\"token function\">parseInt<\/span><span class=\"token punctuation\">(<\/span>params<span class=\"token punctuation\">.<\/span>page<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">||<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>books <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getBooks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Books<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Realizar atribuição para uma chave de <code>params<\/code> causará um redirecionamento para a rota com os parâmetros atualizados.<\/p>\n<p>Quando realizar atribuição para um parâmetro, o valor será convertido para JSON antes de ser definido.<\/p>\n<blockquote>\n<p>💡 Redirecionamentos funcionam em lotes, então não há perca de performance em multiplas atribuições.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Paginator<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">handleClick<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    params<span class=\"token punctuation\">.<\/span>filter <span class=\"token operator\">=<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">;<\/span>\n    params<span class=\"token punctuation\">.<\/span>page <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Paginator<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Atribuir uma string vazia a um parâmetro irá removê-lo da url.<\/p>\n<h2 id=\"segmentos-din-micos\"><a href=\"#segmentos-din-micos\">Segmentos Dinâmicos<\/a><\/h2><p>Parte da rota pode ser uma expressão começada com &quot;:&quot; segida por um nome de parâmetro.<\/p>\n<p>Esse valor será comparado com qualquer string na mesma posição de diretório.<\/p>\n<p>O valor da string na URL será atribuído para o <a href=\"/pt-br/contexto\">contexto<\/a>, parâmetros e funções abaixo desse ponto na hierarquia terão acesso a nova chave.<\/p>\n<blockquote>\n<p>🐱‍💻 Abaixo um exemplo que visita &quot;/category/suspense?page=2&quot;:<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Books<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> page <span class=\"token operator\">=<\/span> <span class=\"token function\">parseInt<\/span><span class=\"token punctuation\">(<\/span>params<span class=\"token punctuation\">.<\/span>page<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">||<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> category <span class=\"token operator\">=<\/span> params<span class=\"token punctuation\">.<\/span>slug<span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>books <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getBooks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>category<span class=\"token punctuation\">,<\/span> page<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Books<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Books <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Books'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Books<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/category/:slug<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Quando um segmento dinâmico é alterado, como por exemplo mover de &quot;/category/suspense&quot; para &quot;/category/comedy&quot;, o componente será desfeito e uma nova instância será criada.<\/p>\n<p>Mudar um parâmetro de consulta não re-instnaciará o componente.<\/p>\n<p>Os filhos do componente não serão re-instanciados automaticamente, você pode definir a mesma rota para os filhos ou fazer isso manualmente se desejar esse comportamento.<\/p>\n<blockquote>\n<p>💡 O comportamento mencionado acima resolve muitos dos problemas que você teria normalmente que lidar manualmente.<\/p>\n<\/blockquote>\n<h2 id=\"curingas\"><a href=\"#curingas\">Curingas<\/a><\/h2><p>Curingas são rotas declaradas com &quot;*&quot; como valor do atributo<\/p>\n<p>Essas rotas corresponderão a qualquer coisa se nada acima delas corresponder a URL requisitada.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Home <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Home'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Home<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>*<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Curinga <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<p>Curingas podem ser prefixados com um segmento.<\/p>\n<blockquote>\n<p>✨ Isso é especialmente útil para engines que podem ser montadas em suas aplicações.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Home <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Home'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> BlogEngine <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./BlogEngine'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Home<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">BlogEngine<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/blog/*<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<h2 id=\"roteador\"><a href=\"#roteador\">Roteador<\/a><\/h2><p>A chave <code>router<\/code> é um proxy de objeto injetado em cada instância de cliente.<\/p>\n<p>O <code>router<\/code> tem duas chaves:<\/p>\n<ul>\n<li><strong><code>url<\/code><\/strong><\/li>\n<li><strong><code>path<\/code><\/strong><\/li>\n<\/ul>\n<p>A chave <code>url<\/code> retorna tudo depois do domínio, incluindo o caminho e os parâmetros de query como uma string.<\/p>\n<p>A chave <code>path<\/code> retorna apenas o caminho sem os parâmetros de consulta.<\/p>\n<blockquote>\n<p>💡 Ambas as chaves acima automaticamente removem a barra final por conveniência.<\/p>\n<\/blockquote>\n<p>Atribuir a <code>url<\/code> ou <code>path<\/code> causará redirecionamento.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>router<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span>router<span class=\"token punctuation\">.<\/span>path <span class=\"token operator\">==<\/span> <span class=\"token string\">'/'<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      router<span class=\"token punctuation\">.<\/span>path <span class=\"token operator\">=<\/span> <span class=\"token string\">'/dashboard'<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 Por baixo dos panos tags <code>a<\/code> e <code>params<\/code> usam o <code>router<\/code>.<\/p>\n<\/blockquote>\n<h2 id=\"eventos-customizados\"><a href=\"#eventos-customizados\">Eventos customizados<\/a><\/h2><p>Atualizar <code>router.url<\/code> ou <code>router.path<\/code> irá gerar um evento personalizado.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Analytics<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">hydrate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>router<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    window<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span>router<span class=\"token punctuation\">.<\/span>event<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n      console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>router<span class=\"token punctuation\">.<\/span>url<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Analytics<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"-ncoras-especiais\"><a href=\"#-ncoras-especiais\">Âncoras especiais<\/a><\/h2><p>Tags de âncora aceitam somente alguns atributos especiais convenientes além do <code>href<\/code> comum.<\/p>\n<p>Você pode atribuir o atributo <code>params<\/code> com um objeto como valor.<\/p>\n<p>O caminho permanecerá o mesmo do caminho atual do roteador, mas os <code>params<\/code> serão substituídos pelos novos parâmetros que você especificar.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a<\/span> <span class=\"token attr-name\">params<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span>page<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Primeira <span class=\"token constant\">P<\/span>ágina <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>a<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<p>E você deseja apenas atualizar alguns parâmetros e manter outros, você pode usar o operador JavaScript <em>spread<\/em> para isso.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a<\/span> <span class=\"token attr-name\">params<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span><span class=\"token operator\">...<\/span>params<span class=\"token punctuation\">,<\/span> page<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Primeira <span class=\"token constant\">P<\/span>ágina <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>a<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<p>Você pode definir o atributo <code>path<\/code> com uma string começando com &quot;/&quot; e sem parâmetros de query.<\/p>\n<p>Os parâmetros permanecerão os mesmos, mas, o <code>path<\/code> será atualizado.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a<\/span> <span class=\"token attr-name\">path<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/category/suspense<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Livros de Suspense <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>a<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<p>Ambos os atributos acima podem ser utilizados ao mesmo tempo.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a<\/span> <span class=\"token attr-name\">path<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/category/suspense<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">params<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span><span class=\"token operator\">...<\/span>params<span class=\"token punctuation\">,<\/span> page<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Livros de Suspense <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>a<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<h2 id=\"rotas-aninhadas\"><a href=\"#rotas-aninhadas\">Rotas aninhadas<\/a><\/h2><p>A primeira rota a ser correspondida será renderizada.<\/p>\n<p>Os outros elementos com uma rota não serão renderizados, no entanto, os elementos no mesmo nível sem um atributo <code>route<\/code> serão renderizados normalmente.<\/p>\n<p>O roteador irá procurar uma rota por nível de profundidade DOM, isso permite que você tenha um comportamento de roteamento aninhado.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Home <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Home'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">renderPage<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>section<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/page/about<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> About Page <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/page/contact<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Contact Page <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>section<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Home<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Page<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/page/:slug<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo passo<\/a><\/h2><p>⚔ Aprenda sobre <a href=\"/pt-br/vinculo-bidirecional\">vínculos bidirecionais<\/a>.<\/p>\n","description":"Nullstack tem rotas embutidas, não faria sentido não ser assim já que se espera que aplicações web tenham hyperlinks.","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"rotas-e-parametros"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/rotas-e-parametros/index.html b/docs/pt-br/rotas-e-parametros/index.html
index 872f1f6c..5c200c62 100644
--- a/docs/pt-br/rotas-e-parametros/index.html
+++ b/docs/pt-br/rotas-e-parametros/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -280,15 +280,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo passo</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Rotas e Parâmetros - Nullstack","description":"Nullstack tem rotas embutidas, não faria sentido não ser assim já que se espera que aplicações web tenham hyperlinks."};
       window.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/rotas-e-parametros":{"title":"Rotas e Parâmetros","html":"<p>Nullstack tem rotas embutidas, não faria sentido não ser assim já que se espera que aplicações web tenham hyperlinks.<\/p>\n<p>Qualquer tag pode receber um atributo <code>route<\/code>, seja um componente, componente interno ou uma tag HTML simples.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Page <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Page'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">renderHome<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>section<\/span><span class=\"token punctuation\">><\/span><\/span> Home <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>section<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Home<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Page<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/page<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>abbr<\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/abbreviations<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Abreviações <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>abbr<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"links\"><a href=\"#links\">Links<\/a><\/h2><p>Links no Nullstack são tags <code>a<\/code> simples com o valor de <code>href<\/code> começando com &quot;/&quot;.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a<\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/page/about<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token constant\">P<\/span>ágina About <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>a<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 No lado do cliente o evento de clique modificará o histórico sem recarregar a página.<\/p>\n<\/blockquote>\n<blockquote>\n<p>✨ Você ainda pode atribuir seu próprio evento de clique para a tag sem perder o comportamento do framework.<\/p>\n<\/blockquote>\n<h2 id=\"par-metros\"><a href=\"#par-metros\">Parâmetros<\/a><\/h2><p>A chave <code>params<\/code> é um proxy de objeto injetado em cada instância de cliente.<\/p>\n<p>Cada parâmetro da string de <em>query<\/em> é mapeado para esse objeto.<\/p>\n<p>Por padrão qualquer chave requisitada deste objeto retornará uma string.<\/p>\n<p>Se o valor for <code>undefined<\/code> retornará uma string vazia.<\/p>\n<p>Se o valor for <code>true<\/code> ou <code>false<\/code> retornará um boleano, ao invés de uma string.<\/p>\n<blockquote>\n<p>🐱‍💻 Abaixo um exemplo que visita &quot;/books?expanded=true&amp;page=2&quot;:<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Books<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span>params<span class=\"token punctuation\">.<\/span>expanded<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">const<\/span> page <span class=\"token operator\">=<\/span> <span class=\"token function\">parseInt<\/span><span class=\"token punctuation\">(<\/span>params<span class=\"token punctuation\">.<\/span>page<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">||<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>books <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getBooks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Books<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Realizar atribuição para uma chave de <code>params<\/code> causará um redirecionamento para a rota com os parâmetros atualizados.<\/p>\n<p>Quando realizar atribuição para um parâmetro, o valor será convertido para JSON antes de ser definido.<\/p>\n<blockquote>\n<p>💡 Redirecionamentos funcionam em lotes, então não há perca de performance em multiplas atribuições.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Paginator<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">handleClick<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    params<span class=\"token punctuation\">.<\/span>filter <span class=\"token operator\">=<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">;<\/span>\n    params<span class=\"token punctuation\">.<\/span>page <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Paginator<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Atribuir uma string vazia a um parâmetro irá removê-lo da url.<\/p>\n<h2 id=\"segmentos-din-micos\"><a href=\"#segmentos-din-micos\">Segmentos Dinâmicos<\/a><\/h2><p>Parte da rota pode ser uma expressão começada com &quot;:&quot; segida por um nome de parâmetro.<\/p>\n<p>Esse valor será comparado com qualquer string na mesma posição de diretório.<\/p>\n<p>O valor da string na URL será atribuído para o <a href=\"/pt-br/contexto\">contexto<\/a>, parâmetros e funções abaixo desse ponto na hierarquia terão acesso a nova chave.<\/p>\n<blockquote>\n<p>🐱‍💻 Abaixo um exemplo que visita &quot;/category/suspense?page=2&quot;:<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Books<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> page <span class=\"token operator\">=<\/span> <span class=\"token function\">parseInt<\/span><span class=\"token punctuation\">(<\/span>params<span class=\"token punctuation\">.<\/span>page<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">||<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> category <span class=\"token operator\">=<\/span> params<span class=\"token punctuation\">.<\/span>slug<span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>books <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getBooks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>category<span class=\"token punctuation\">,<\/span> page<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Books<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Books <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Books'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Books<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/category/:slug<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Quando um segmento dinâmico é alterado, como por exemplo mover de &quot;/category/suspense&quot; para &quot;/category/comedy&quot;, o componente será desfeito e uma nova instância será criada.<\/p>\n<p>Mudar um parâmetro de consulta não re-instnaciará o componente.<\/p>\n<p>Os filhos do componente não serão re-instanciados automaticamente, você pode definir a mesma rota para os filhos ou fazer isso manualmente se desejar esse comportamento.<\/p>\n<blockquote>\n<p>💡 O comportamento mencionado acima resolve muitos dos problemas que você teria normalmente que lidar manualmente.<\/p>\n<\/blockquote>\n<h2 id=\"curingas\"><a href=\"#curingas\">Curingas<\/a><\/h2><p>Curingas são rotas declaradas com &quot;*&quot; como valor do atributo<\/p>\n<p>Essas rotas corresponderão a qualquer coisa se nada acima delas corresponder a URL requisitada.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Home <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Home'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Home<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>*<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Curinga <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<p>Curingas podem ser prefixados com um segmento.<\/p>\n<blockquote>\n<p>✨ Isso é especialmente útil para engines que podem ser montadas em suas aplicações.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Home <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Home'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> BlogEngine <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./BlogEngine'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Home<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">BlogEngine<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/blog/*<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<h2 id=\"roteador\"><a href=\"#roteador\">Roteador<\/a><\/h2><p>A chave <code>router<\/code> é um proxy de objeto injetado em cada instância de cliente.<\/p>\n<p>O <code>router<\/code> tem duas chaves:<\/p>\n<ul>\n<li><strong><code>url<\/code><\/strong><\/li>\n<li><strong><code>path<\/code><\/strong><\/li>\n<\/ul>\n<p>A chave <code>url<\/code> retorna tudo depois do domínio, incluindo o caminho e os parâmetros de query como uma string.<\/p>\n<p>A chave <code>path<\/code> retorna apenas o caminho sem os parâmetros de consulta.<\/p>\n<blockquote>\n<p>💡 Ambas as chaves acima automaticamente removem a barra final por conveniência.<\/p>\n<\/blockquote>\n<p>Atribuir a <code>url<\/code> ou <code>path<\/code> causará redirecionamento.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>router<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span>router<span class=\"token punctuation\">.<\/span>path <span class=\"token operator\">==<\/span> <span class=\"token string\">'/'<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      router<span class=\"token punctuation\">.<\/span>path <span class=\"token operator\">=<\/span> <span class=\"token string\">'/dashboard'<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 Por baixo dos panos tags <code>a<\/code> e <code>params<\/code> usam o <code>router<\/code>.<\/p>\n<\/blockquote>\n<h2 id=\"eventos-customizados\"><a href=\"#eventos-customizados\">Eventos customizados<\/a><\/h2><p>Atualizar <code>router.url<\/code> ou <code>router.path<\/code> irá gerar um evento personalizado.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Analytics<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">hydrate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>router<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    window<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span>router<span class=\"token punctuation\">.<\/span>event<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n      console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>router<span class=\"token punctuation\">.<\/span>url<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Analytics<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"-ncoras-especiais\"><a href=\"#-ncoras-especiais\">Âncoras especiais<\/a><\/h2><p>Tags de âncora aceitam somente alguns atributos especiais convenientes além do <code>href<\/code> comum.<\/p>\n<p>Você pode atribuir o atributo <code>params<\/code> com um objeto como valor.<\/p>\n<p>O caminho permanecerá o mesmo do caminho atual do roteador, mas os <code>params<\/code> serão substituídos pelos novos parâmetros que você especificar.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a<\/span> <span class=\"token attr-name\">params<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span>page<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Primeira <span class=\"token constant\">P<\/span>ágina <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>a<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<p>E você deseja apenas atualizar alguns parâmetros e manter outros, você pode usar o operador JavaScript <em>spread<\/em> para isso.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a<\/span> <span class=\"token attr-name\">params<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span><span class=\"token operator\">...<\/span>params<span class=\"token punctuation\">,<\/span> page<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Primeira <span class=\"token constant\">P<\/span>ágina <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>a<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<p>Você pode definir o atributo <code>path<\/code> com uma string começando com &quot;/&quot; e sem parâmetros de query.<\/p>\n<p>Os parâmetros permanecerão os mesmos, mas, o <code>path<\/code> será atualizado.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a<\/span> <span class=\"token attr-name\">path<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/category/suspense<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Livros de Suspense <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>a<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<p>Ambos os atributos acima podem ser utilizados ao mesmo tempo.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a<\/span> <span class=\"token attr-name\">path<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/category/suspense<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">params<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span><span class=\"token operator\">...<\/span>params<span class=\"token punctuation\">,<\/span> page<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Livros de Suspense <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>a<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<h2 id=\"rotas-aninhadas\"><a href=\"#rotas-aninhadas\">Rotas aninhadas<\/a><\/h2><p>A primeira rota a ser correspondida será renderizada.<\/p>\n<p>Os outros elementos com uma rota não serão renderizados, no entanto, os elementos no mesmo nível sem um atributo <code>route<\/code> serão renderizados normalmente.<\/p>\n<p>O roteador irá procurar uma rota por nível de profundidade DOM, isso permite que você tenha um comportamento de roteamento aninhado.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Home <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Home'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">renderPage<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>section<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/page/about<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> About Page <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/page/contact<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Contact Page <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>section<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Home<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Page<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/page/:slug<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo passo<\/a><\/h2><p>⚔ Aprenda sobre <a href=\"/pt-br/vinculo-bidirecional\">vínculos bidirecionais<\/a>.<\/p>\n","description":"Nullstack tem rotas embutidas, não faria sentido não ser assim já que se espera que aplicações web tenham hyperlinks.","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"rotas-e-parametros"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/service-worker.html b/docs/pt-br/service-worker.html
index 2f79da95..aae307f5 100644
--- a/docs/pt-br/service-worker.html
+++ b/docs/pt-br/service-worker.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -281,15 +281,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo passo</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Contexto Service Worker - Nullstack","description":"O objeto worker é um proxy no Contexto Nullstack disponível em ambos client e server e te dá controle granular do comportamento do seu PWA"};
       window.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/service-worker":{"title":"Contexto Service Worker","html":"<ul>\n<li>Tipo: <code>object<\/code><\/li>\n<li>Origem: <a href=\"/pt-br/contexto#----contexto-nullstack\">Contexto Nullstack<\/a><\/li>\n<li>Disponibilidade: server/client<\/li>\n<li><strong>readwrite<\/strong> no contexto do <strong>server<\/strong><\/li>\n<li><strong>readonly<\/strong> no contexto do <strong>client<\/strong><\/li>\n<\/ul>\n<p>Ele te dá controle granular do comportamento do seu PWA.<\/p>\n<p>Chaves do <code>worker<\/code> serão usadas para gerar o arquivo do service worker e devem ser setadas durante o <a href=\"/pt-br/inicializacao-da-aplicacao\">processo de inicialização<\/a>.<\/p>\n<p>Chaves do <code>worker<\/code> são congeladas após o <a href=\"/pt-br/inicializacao-da-aplicacao\">processo de inicialização<\/a>.<\/p>\n<p>As seguintes keys estão disponíveis no objeto durante a inicialização:<\/p>\n<ul>\n<li><strong>enabled<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>preload<\/strong>: <code>string array<\/code> (relative paths)<\/li>\n<li><strong>headers<\/strong>: <code>object<\/code><\/li>\n<li><strong>cdn<\/strong>: <code>string<\/code> (absolute url)<\/li>\n<li><strong>api<\/strong>: <code>string<\/code> (absolute url)<\/li>\n<li><strong>protocol<\/strong>: <code>string<\/code> (http or https)<\/li>\n<\/ul>\n<p>A chave <code>enabled<\/code> define se o service worker será registrado automaticamente pelo Nullstack.<\/p>\n<p>Por padrão a chave <code>enabled<\/code> é setada como <code>true<\/code> no modo de produção e <code>false<\/code> no modo de desenvolvimento.<\/p>\n<p>O array <code>preload<\/code> é composto por caminhos que serão cacheados quando o service worker for instalado.<\/p>\n<p>Os assets requeridos para inicializar a aplicação serão pré-carregados automaticamente, e você deverá apenas as páginas extras que você quer que estejam disponíveis em modo offline.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> path <span class=\"token keyword\">from<\/span> <span class=\"token string\">'path'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span>readdirSync<span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'fs'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>worker<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> articles <span class=\"token operator\">=<\/span> <span class=\"token function\">readdirSync<\/span><span class=\"token punctuation\">(<\/span>path<span class=\"token punctuation\">.<\/span><span class=\"token function\">join<\/span><span class=\"token punctuation\">(<\/span>__dirname<span class=\"token punctuation\">,<\/span> <span class=\"token string\">'..'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'articles'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    worker<span class=\"token punctuation\">.<\/span>preload <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span>\n      <span class=\"token operator\">...<\/span>articles<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">article<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token string\">'/'<\/span> <span class=\"token operator\">+<\/span> article<span class=\"token punctuation\">.<\/span><span class=\"token function\">replace<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'.md'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span>\n      <span class=\"token string\">'/nullstack.svg'<\/span><span class=\"token punctuation\">,<\/span>\n      <span class=\"token string\">'/documentation'<\/span><span class=\"token punctuation\">,<\/span>\n      <span class=\"token string\">'/components'<\/span>\n    <span class=\"token punctuation\">]<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 O exemplo acima foi extraido deste repositório e permite que a documentação esteja totalmente acessível em modo offline.<\/p>\n<\/blockquote>\n<p>As seguintes chaves estão disponíveis como <strong>readonly<\/strong> no contexto do cliente:<\/p>\n<ul>\n<li><strong>enabled<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>preload<\/strong>: <code>string array<\/code> (relative paths)<\/li>\n<li><strong>online<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>fetching<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>responsive<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>installation<\/strong>: <code>BeforeInstallPromptEvent<\/code><\/li>\n<li><strong>registration<\/strong>: <code>ServiceWorkerRegistration<\/code><\/li>\n<li><strong>queues<\/strong>: <code>object<\/code><\/li>\n<\/ul>\n<p>As seguintes chaves estão disponíveis como <strong>readwrite<\/strong> no contexto do cliente:<\/p>\n<ul>\n<li><strong>headers<\/strong>: <code>object<\/code><\/li>\n<\/ul>\n<p>A chave <code>responsive<\/code> determina se a aplicação tem todas as respostas necessárias para renderizar a página atual.<\/p>\n<p>O Nullstack irá tentar manter sua aplicação respondendo o maior tempo possível e setará a chave para <code>false<\/code> somente quando não houver mais alternativas de recuperar qualquer resposta da rede ou offline usando a estratégia de busca para o <a href=\"/pt-br/contexto-environment\">ambiente<\/a>.<\/p>\n<p>A chave <code>online<\/code> irá monitorar os eventos da rede e re-renderizar a aplicação quando o valor de <code>navigator.onLine<\/code> mudar.<\/p>\n<p>Quando a aplicação voltar a ficar online o Nullstack irá tentar fazer a aplicação responder novamente e re-renderizar se necessário.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token comment\">// ...<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n \n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>worker<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>worker<span class=\"token punctuation\">.<\/span>responsive<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">return<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">OfflineWarning<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n    <span class=\"token punctuation\">}<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Home<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<p>Você pode acessar a <strong>registration<\/strong> e <strong>installation<\/strong> do service worker atual pela chave <code>worker<\/code> para controlar o fluxo do seu PWA.<\/p>\n<p>A chave <code>registration<\/code> se refere ao registro do service worker e só estará disponível uma vez que o processo de registro esteja completo.<\/p>\n<p>A chave <code>installation<\/code> se refere a instalação delegada no evento do prompt e apenas estará disponível se o evento <code>beforeinstallprompt<\/code> ocorrer.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">PWAInstaller<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  installed <span class=\"token operator\">=<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span>\n  hidden <span class=\"token operator\">=<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">prompt<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>worker<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">try<\/span> <span class=\"token punctuation\">{<\/span>\n      worker<span class=\"token punctuation\">.<\/span>installation<span class=\"token punctuation\">.<\/span><span class=\"token function\">prompt<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span>outcome<span class=\"token punctuation\">}<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> worker<span class=\"token punctuation\">.<\/span>installation<span class=\"token punctuation\">.<\/span>userChoice<span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>outcome <span class=\"token operator\">===<\/span> <span class=\"token string\">'accepted'<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n        console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'User accepted the A2HS prompt'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token punctuation\">{<\/span>\n        console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'User dismissed the A2HS prompt'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token punctuation\">}<\/span>\n    <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">finally<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>hidden <span class=\"token operator\">=<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>worker<span class=\"token punctuation\">,<\/span> project<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>hidden<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>worker<span class=\"token punctuation\">.<\/span>installation<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>img<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>project<span class=\"token punctuation\">.<\/span>favicon<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> Do you want to add <span class=\"token punctuation\">{<\/span>project<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">}<\/span> to your home screen<span class=\"token operator\">?<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>prompt<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Install <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span>hidden<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Not Now <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> PWAInstaller<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"telas-de-carregamento\"><a href=\"#telas-de-carregamento\">Telas de Carregamento<\/a><\/h2><p>Quando uma <a href=\"/pt-br/funcoes-de-servidor\">função do servidor<\/a> é chamada o <code>fetching<\/code> será setado como <code>true<\/code> até a requisição ser resolvida.<\/p>\n<p>Quando uma <a href=\"/pt-br/funcoes-de-servidor\">função do servidor<\/a> é chamada uma chave com o nome da <a href=\"/pt-br/funcoes-de-servidor\">função do servidor<\/a> invocada será setada no objeto <code>queues<\/code> até a requisição ser resolvida.<\/p>\n<p>A chave será um array com todos os argumentos passados ​​para a função do servidor.<\/p>\n<p>Qualquer chave que for chamada no objeto <code>queues<\/code> sempre irá retornar um array ao invés de <code>undefined<\/code> por consistência.<\/p>\n<p>Quando o servidor estiver emulando o contexto do cliente para <a href=\"/pt-br/renderizando-no-servidor\">renderização no lado do servidor<\/a>, todas as chaves de <code>queues<\/code> vão sempre retornar um array vazio, pulando múltiplos ciclos de render por performance.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Page<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">save<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> valid <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token comment\">// ...<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">submit<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">save<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> valid<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> worker <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> loadingValidSave <span class=\"token operator\">=<\/span> <span class=\"token operator\">!<\/span><span class=\"token operator\">!<\/span>worker<span class=\"token punctuation\">.<\/span>queues<span class=\"token punctuation\">.<\/span>save\n      <span class=\"token punctuation\">.<\/span><span class=\"token function\">find<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">args<\/span> <span class=\"token operator\">=><\/span> args<span class=\"token punctuation\">.<\/span>valid<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>form<\/span> <span class=\"token attr-name\">onsubmit<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>submit<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token punctuation\">{<\/span>worker<span class=\"token punctuation\">.<\/span>fetching <span class=\"token operator\">&amp;&amp;<\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>span<\/span><span class=\"token punctuation\">><\/span><\/span> carregando<span class=\"token operator\">...<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>span<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">disabled<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>loadingValidSave<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n          Salvar\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Page<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"headers-customizadas\"><a href=\"#headers-customizadas\">Headers customizadas<\/a><\/h2><p>Você pode usar a chave <code>headers<\/code> para configurar as headers que o <em>worker<\/em> usará na requisição para uma função do servidor<\/p>\n<blockquote>\n<p>🔥 headers serão ignorados quando uma função do servidor for chamada durante o processo de <a href=\"/pt-br/renderizando-no-servidor\">renderização do lado do servidor<\/a><\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">LoginPage<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">submit<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>worker<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token comment\">// ...<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>headers<span class=\"token punctuation\">[<\/span><span class=\"token string\">'Authorization'<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Bearer <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>token<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token comment\">// ...<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">authorize<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>request<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> authorization <span class=\"token operator\">=<\/span> request<span class=\"token punctuation\">.<\/span>headers<span class=\"token punctuation\">[<\/span><span class=\"token string\">'Authorization'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token comment\">// ...<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> LoginPage<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Aprenda mais sobre o <a href=\"/pt-br/requisicao-e-resposta-do-servidor\">requisições e respostas do servidor<\/a><\/p>\n<\/blockquote>\n<h2 id=\"estrat-gia-de-renderiza--o-server-side\"><a href=\"#estrat-gia-de-renderiza--o-server-side\">Estratégia de renderização Server-side<\/a><\/h2><ul>\n<li>Requisições de diferentes origens serão realizadas normalmente;<\/li>\n<li>Requisições diferentes do método GET serão realizadas normalmente;<\/li>\n<li>Assets com Fingerprints serão carregados no cache no momento da instalação;<\/li>\n<li>Assets com Fingerprints serão carregados do cache primeiro, e só então retornados para a rede, se necessário;<\/li>\n<li>Caminhos com uma extensão serão recuperados e atualizarão o cache em segundo plano para uma requisição subsequente;<\/li>\n<li>Os caminhos navegados serão carregados da rede e se falhar serão retornados do cache para a página na qual o <code>worker.responsive<\/code> e o <code>worker.online<\/code> estiverem setados como <code>false<\/code>;<\/li>\n<\/ul>\n<h2 id=\"estrat-gia-de-gera--o-de-site-est-tico\"><a href=\"#estrat-gia-de-gera--o-de-site-est-tico\">Estratégia de geração de site estático<\/a><\/h2><ul>\n<li>Requisições de diferentes origens serão realizadas normalmente;<\/li>\n<li>Requisições diferentes do método GET serão realizadas normalmente;<\/li>\n<li>Assets com Fingerprints serão carregados no cache no momento da instalação;<\/li>\n<li>Assets com Fingerprints serão carregados do cache primeiro, e só então retornados para a rede, se necessário;<\/li>\n<li>Caminhos com uma extensão serão recuperaados e atualizarão o cache em segundo plano para uma requisição subsequente;<\/li>\n<li>A página inicial será carregada na rede primeiro, e se necessário será retornada uma cópia em cache;<\/li>\n<li>Caminhos navegados irão carregar apenas os dados da API estática e mesclar com o template da aplicação para gerar a resposta.<\/li>\n<li>Navegar para uma rota estática irá fazer cache apenas dos dados daquela página;<\/li>\n<li>Quando os dados estiverem indisponíveis no cache ou na rede irá retornar uma página na qual <code>worker.responsive<\/code> e <code>worker.online<\/code> estiverem setados como <code>false<\/code>;<\/li>\n<\/ul>\n<h2 id=\"estrat-gia-customizada\"><a href=\"#estrat-gia-customizada\">Estratégia customizada<\/a><\/h2><p>O Nullstack irá instalar automaticamente seu service worker se <code>enabled<\/code> estiver setado como <code>true<\/code> com os seguintes eventos:<\/p>\n<ul>\n<li><code>install<\/code><\/li>\n<li><code>activate<\/code><\/li>\n<li><code>fetch<\/code><\/li>\n<\/ul>\n<p>Você pode sobreescrever qualquer um desses eventos criando um <strong>service-worker.js<\/strong> na pasta public;<\/p>\n<p>Se qualquer uma das palavras chaves acima for encontrada o Nullstack injetará sua função no código do service worker ao invés do padrão.<\/p>\n<p>Por conveniência uma chave chamada <code>context<\/code> é injetada no <code>self<\/code> do service worker com as seguintes chaves:<\/p>\n<ul>\n<li><code>worker<\/code><\/li>\n<li><a href=\"/pt-br/contexto-project\"><code>project<\/code><\/a><\/li>\n<li><a href=\"/pt-br/contexto-environment\"><code>environment<\/code><\/a><\/li>\n<\/ul>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">function<\/span> <span class=\"token function\">activate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">event<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  event<span class=\"token punctuation\">.<\/span><span class=\"token function\">waitUntil<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> cacheNames <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> caches<span class=\"token punctuation\">.<\/span><span class=\"token function\">keys<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> cachesToDelete <span class=\"token operator\">=<\/span> cacheNames<span class=\"token punctuation\">.<\/span><span class=\"token function\">filter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">cacheName<\/span> <span class=\"token operator\">=><\/span> cacheName <span class=\"token operator\">!==<\/span> self<span class=\"token punctuation\">.<\/span>context<span class=\"token punctuation\">.<\/span>environment<span class=\"token punctuation\">.<\/span>key<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">await<\/span> Promise<span class=\"token punctuation\">.<\/span><span class=\"token function\">all<\/span><span class=\"token punctuation\">(<\/span>cachesToDelete<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">cacheName<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> caches<span class=\"token punctuation\">.<\/span><span class=\"token function\">delete<\/span><span class=\"token punctuation\">(<\/span>cacheName<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>self<span class=\"token punctuation\">.<\/span>registration<span class=\"token punctuation\">.<\/span>navigationPreload<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">await<\/span> self<span class=\"token punctuation\">.<\/span>registration<span class=\"token punctuation\">.<\/span>navigationPreload<span class=\"token punctuation\">.<\/span><span class=\"token function\">enable<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n    self<span class=\"token punctuation\">.<\/span>clients<span class=\"token punctuation\">.<\/span><span class=\"token function\">claim<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\nself<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'activate'<\/span><span class=\"token punctuation\">,<\/span> activate<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 O exemplo acima foi extraido do service worker gerado e usa <code>self.context.enviroment.key<\/code><\/p>\n<\/blockquote>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo passo<\/a><\/h2><p>⚔ Aprenda <a href=\"/pt-br/como-fazer-deploy-de-aplicacao-nullstack\">Como fazer o deploy de uma aplicação Nullstack<\/a>.<\/p>\n","description":"O objeto worker é um proxy no Contexto Nullstack disponível em ambos client e server e te dá controle granular do comportamento do seu PWA","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"service-worker"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/service-worker/index.html b/docs/pt-br/service-worker/index.html
index 2f79da95..aae307f5 100644
--- a/docs/pt-br/service-worker/index.html
+++ b/docs/pt-br/service-worker/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -281,15 +281,15 @@ <h2 id="pr-ximo-passo"><a href="#pr-ximo-passo">Próximo passo</a></h2><p>⚔ Ap
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Contexto Service Worker - Nullstack","description":"O objeto worker é um proxy no Contexto Nullstack disponível em ambos client e server e te dá controle granular do comportamento do seu PWA"};
       window.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/service-worker":{"title":"Contexto Service Worker","html":"<ul>\n<li>Tipo: <code>object<\/code><\/li>\n<li>Origem: <a href=\"/pt-br/contexto#----contexto-nullstack\">Contexto Nullstack<\/a><\/li>\n<li>Disponibilidade: server/client<\/li>\n<li><strong>readwrite<\/strong> no contexto do <strong>server<\/strong><\/li>\n<li><strong>readonly<\/strong> no contexto do <strong>client<\/strong><\/li>\n<\/ul>\n<p>Ele te dá controle granular do comportamento do seu PWA.<\/p>\n<p>Chaves do <code>worker<\/code> serão usadas para gerar o arquivo do service worker e devem ser setadas durante o <a href=\"/pt-br/inicializacao-da-aplicacao\">processo de inicialização<\/a>.<\/p>\n<p>Chaves do <code>worker<\/code> são congeladas após o <a href=\"/pt-br/inicializacao-da-aplicacao\">processo de inicialização<\/a>.<\/p>\n<p>As seguintes keys estão disponíveis no objeto durante a inicialização:<\/p>\n<ul>\n<li><strong>enabled<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>preload<\/strong>: <code>string array<\/code> (relative paths)<\/li>\n<li><strong>headers<\/strong>: <code>object<\/code><\/li>\n<li><strong>cdn<\/strong>: <code>string<\/code> (absolute url)<\/li>\n<li><strong>api<\/strong>: <code>string<\/code> (absolute url)<\/li>\n<li><strong>protocol<\/strong>: <code>string<\/code> (http or https)<\/li>\n<\/ul>\n<p>A chave <code>enabled<\/code> define se o service worker será registrado automaticamente pelo Nullstack.<\/p>\n<p>Por padrão a chave <code>enabled<\/code> é setada como <code>true<\/code> no modo de produção e <code>false<\/code> no modo de desenvolvimento.<\/p>\n<p>O array <code>preload<\/code> é composto por caminhos que serão cacheados quando o service worker for instalado.<\/p>\n<p>Os assets requeridos para inicializar a aplicação serão pré-carregados automaticamente, e você deverá apenas as páginas extras que você quer que estejam disponíveis em modo offline.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> path <span class=\"token keyword\">from<\/span> <span class=\"token string\">'path'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span>readdirSync<span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'fs'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>worker<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> articles <span class=\"token operator\">=<\/span> <span class=\"token function\">readdirSync<\/span><span class=\"token punctuation\">(<\/span>path<span class=\"token punctuation\">.<\/span><span class=\"token function\">join<\/span><span class=\"token punctuation\">(<\/span>__dirname<span class=\"token punctuation\">,<\/span> <span class=\"token string\">'..'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'articles'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    worker<span class=\"token punctuation\">.<\/span>preload <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span>\n      <span class=\"token operator\">...<\/span>articles<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">article<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token string\">'/'<\/span> <span class=\"token operator\">+<\/span> article<span class=\"token punctuation\">.<\/span><span class=\"token function\">replace<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'.md'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span>\n      <span class=\"token string\">'/nullstack.svg'<\/span><span class=\"token punctuation\">,<\/span>\n      <span class=\"token string\">'/documentation'<\/span><span class=\"token punctuation\">,<\/span>\n      <span class=\"token string\">'/components'<\/span>\n    <span class=\"token punctuation\">]<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 O exemplo acima foi extraido deste repositório e permite que a documentação esteja totalmente acessível em modo offline.<\/p>\n<\/blockquote>\n<p>As seguintes chaves estão disponíveis como <strong>readonly<\/strong> no contexto do cliente:<\/p>\n<ul>\n<li><strong>enabled<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>preload<\/strong>: <code>string array<\/code> (relative paths)<\/li>\n<li><strong>online<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>fetching<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>responsive<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>installation<\/strong>: <code>BeforeInstallPromptEvent<\/code><\/li>\n<li><strong>registration<\/strong>: <code>ServiceWorkerRegistration<\/code><\/li>\n<li><strong>queues<\/strong>: <code>object<\/code><\/li>\n<\/ul>\n<p>As seguintes chaves estão disponíveis como <strong>readwrite<\/strong> no contexto do cliente:<\/p>\n<ul>\n<li><strong>headers<\/strong>: <code>object<\/code><\/li>\n<\/ul>\n<p>A chave <code>responsive<\/code> determina se a aplicação tem todas as respostas necessárias para renderizar a página atual.<\/p>\n<p>O Nullstack irá tentar manter sua aplicação respondendo o maior tempo possível e setará a chave para <code>false<\/code> somente quando não houver mais alternativas de recuperar qualquer resposta da rede ou offline usando a estratégia de busca para o <a href=\"/pt-br/contexto-environment\">ambiente<\/a>.<\/p>\n<p>A chave <code>online<\/code> irá monitorar os eventos da rede e re-renderizar a aplicação quando o valor de <code>navigator.onLine<\/code> mudar.<\/p>\n<p>Quando a aplicação voltar a ficar online o Nullstack irá tentar fazer a aplicação responder novamente e re-renderizar se necessário.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token comment\">// ...<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n \n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>worker<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>worker<span class=\"token punctuation\">.<\/span>responsive<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">return<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">OfflineWarning<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n    <span class=\"token punctuation\">}<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Home<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<p>Você pode acessar a <strong>registration<\/strong> e <strong>installation<\/strong> do service worker atual pela chave <code>worker<\/code> para controlar o fluxo do seu PWA.<\/p>\n<p>A chave <code>registration<\/code> se refere ao registro do service worker e só estará disponível uma vez que o processo de registro esteja completo.<\/p>\n<p>A chave <code>installation<\/code> se refere a instalação delegada no evento do prompt e apenas estará disponível se o evento <code>beforeinstallprompt<\/code> ocorrer.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">PWAInstaller<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  installed <span class=\"token operator\">=<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span>\n  hidden <span class=\"token operator\">=<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">prompt<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>worker<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">try<\/span> <span class=\"token punctuation\">{<\/span>\n      worker<span class=\"token punctuation\">.<\/span>installation<span class=\"token punctuation\">.<\/span><span class=\"token function\">prompt<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span>outcome<span class=\"token punctuation\">}<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> worker<span class=\"token punctuation\">.<\/span>installation<span class=\"token punctuation\">.<\/span>userChoice<span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>outcome <span class=\"token operator\">===<\/span> <span class=\"token string\">'accepted'<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n        console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'User accepted the A2HS prompt'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token punctuation\">{<\/span>\n        console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'User dismissed the A2HS prompt'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token punctuation\">}<\/span>\n    <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">finally<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>hidden <span class=\"token operator\">=<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>worker<span class=\"token punctuation\">,<\/span> project<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>hidden<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>worker<span class=\"token punctuation\">.<\/span>installation<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>img<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>project<span class=\"token punctuation\">.<\/span>favicon<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> Do you want to add <span class=\"token punctuation\">{<\/span>project<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">}<\/span> to your home screen<span class=\"token operator\">?<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>prompt<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Install <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span>hidden<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Not Now <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> PWAInstaller<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"telas-de-carregamento\"><a href=\"#telas-de-carregamento\">Telas de Carregamento<\/a><\/h2><p>Quando uma <a href=\"/pt-br/funcoes-de-servidor\">função do servidor<\/a> é chamada o <code>fetching<\/code> será setado como <code>true<\/code> até a requisição ser resolvida.<\/p>\n<p>Quando uma <a href=\"/pt-br/funcoes-de-servidor\">função do servidor<\/a> é chamada uma chave com o nome da <a href=\"/pt-br/funcoes-de-servidor\">função do servidor<\/a> invocada será setada no objeto <code>queues<\/code> até a requisição ser resolvida.<\/p>\n<p>A chave será um array com todos os argumentos passados ​​para a função do servidor.<\/p>\n<p>Qualquer chave que for chamada no objeto <code>queues<\/code> sempre irá retornar um array ao invés de <code>undefined<\/code> por consistência.<\/p>\n<p>Quando o servidor estiver emulando o contexto do cliente para <a href=\"/pt-br/renderizando-no-servidor\">renderização no lado do servidor<\/a>, todas as chaves de <code>queues<\/code> vão sempre retornar um array vazio, pulando múltiplos ciclos de render por performance.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Page<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">save<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> valid <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token comment\">// ...<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">submit<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">save<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> valid<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> worker <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> loadingValidSave <span class=\"token operator\">=<\/span> <span class=\"token operator\">!<\/span><span class=\"token operator\">!<\/span>worker<span class=\"token punctuation\">.<\/span>queues<span class=\"token punctuation\">.<\/span>save\n      <span class=\"token punctuation\">.<\/span><span class=\"token function\">find<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">args<\/span> <span class=\"token operator\">=><\/span> args<span class=\"token punctuation\">.<\/span>valid<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>form<\/span> <span class=\"token attr-name\">onsubmit<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>submit<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token punctuation\">{<\/span>worker<span class=\"token punctuation\">.<\/span>fetching <span class=\"token operator\">&amp;&amp;<\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>span<\/span><span class=\"token punctuation\">><\/span><\/span> carregando<span class=\"token operator\">...<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>span<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">disabled<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>loadingValidSave<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n          Salvar\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Page<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"headers-customizadas\"><a href=\"#headers-customizadas\">Headers customizadas<\/a><\/h2><p>Você pode usar a chave <code>headers<\/code> para configurar as headers que o <em>worker<\/em> usará na requisição para uma função do servidor<\/p>\n<blockquote>\n<p>🔥 headers serão ignorados quando uma função do servidor for chamada durante o processo de <a href=\"/pt-br/renderizando-no-servidor\">renderização do lado do servidor<\/a><\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">LoginPage<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">submit<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>worker<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token comment\">// ...<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>headers<span class=\"token punctuation\">[<\/span><span class=\"token string\">'Authorization'<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Bearer <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>token<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token comment\">// ...<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">authorize<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>request<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> authorization <span class=\"token operator\">=<\/span> request<span class=\"token punctuation\">.<\/span>headers<span class=\"token punctuation\">[<\/span><span class=\"token string\">'Authorization'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token comment\">// ...<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> LoginPage<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Aprenda mais sobre o <a href=\"/pt-br/requisicao-e-resposta-do-servidor\">requisições e respostas do servidor<\/a><\/p>\n<\/blockquote>\n<h2 id=\"estrat-gia-de-renderiza--o-server-side\"><a href=\"#estrat-gia-de-renderiza--o-server-side\">Estratégia de renderização Server-side<\/a><\/h2><ul>\n<li>Requisições de diferentes origens serão realizadas normalmente;<\/li>\n<li>Requisições diferentes do método GET serão realizadas normalmente;<\/li>\n<li>Assets com Fingerprints serão carregados no cache no momento da instalação;<\/li>\n<li>Assets com Fingerprints serão carregados do cache primeiro, e só então retornados para a rede, se necessário;<\/li>\n<li>Caminhos com uma extensão serão recuperados e atualizarão o cache em segundo plano para uma requisição subsequente;<\/li>\n<li>Os caminhos navegados serão carregados da rede e se falhar serão retornados do cache para a página na qual o <code>worker.responsive<\/code> e o <code>worker.online<\/code> estiverem setados como <code>false<\/code>;<\/li>\n<\/ul>\n<h2 id=\"estrat-gia-de-gera--o-de-site-est-tico\"><a href=\"#estrat-gia-de-gera--o-de-site-est-tico\">Estratégia de geração de site estático<\/a><\/h2><ul>\n<li>Requisições de diferentes origens serão realizadas normalmente;<\/li>\n<li>Requisições diferentes do método GET serão realizadas normalmente;<\/li>\n<li>Assets com Fingerprints serão carregados no cache no momento da instalação;<\/li>\n<li>Assets com Fingerprints serão carregados do cache primeiro, e só então retornados para a rede, se necessário;<\/li>\n<li>Caminhos com uma extensão serão recuperaados e atualizarão o cache em segundo plano para uma requisição subsequente;<\/li>\n<li>A página inicial será carregada na rede primeiro, e se necessário será retornada uma cópia em cache;<\/li>\n<li>Caminhos navegados irão carregar apenas os dados da API estática e mesclar com o template da aplicação para gerar a resposta.<\/li>\n<li>Navegar para uma rota estática irá fazer cache apenas dos dados daquela página;<\/li>\n<li>Quando os dados estiverem indisponíveis no cache ou na rede irá retornar uma página na qual <code>worker.responsive<\/code> e <code>worker.online<\/code> estiverem setados como <code>false<\/code>;<\/li>\n<\/ul>\n<h2 id=\"estrat-gia-customizada\"><a href=\"#estrat-gia-customizada\">Estratégia customizada<\/a><\/h2><p>O Nullstack irá instalar automaticamente seu service worker se <code>enabled<\/code> estiver setado como <code>true<\/code> com os seguintes eventos:<\/p>\n<ul>\n<li><code>install<\/code><\/li>\n<li><code>activate<\/code><\/li>\n<li><code>fetch<\/code><\/li>\n<\/ul>\n<p>Você pode sobreescrever qualquer um desses eventos criando um <strong>service-worker.js<\/strong> na pasta public;<\/p>\n<p>Se qualquer uma das palavras chaves acima for encontrada o Nullstack injetará sua função no código do service worker ao invés do padrão.<\/p>\n<p>Por conveniência uma chave chamada <code>context<\/code> é injetada no <code>self<\/code> do service worker com as seguintes chaves:<\/p>\n<ul>\n<li><code>worker<\/code><\/li>\n<li><a href=\"/pt-br/contexto-project\"><code>project<\/code><\/a><\/li>\n<li><a href=\"/pt-br/contexto-environment\"><code>environment<\/code><\/a><\/li>\n<\/ul>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">function<\/span> <span class=\"token function\">activate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">event<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  event<span class=\"token punctuation\">.<\/span><span class=\"token function\">waitUntil<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> cacheNames <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> caches<span class=\"token punctuation\">.<\/span><span class=\"token function\">keys<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> cachesToDelete <span class=\"token operator\">=<\/span> cacheNames<span class=\"token punctuation\">.<\/span><span class=\"token function\">filter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">cacheName<\/span> <span class=\"token operator\">=><\/span> cacheName <span class=\"token operator\">!==<\/span> self<span class=\"token punctuation\">.<\/span>context<span class=\"token punctuation\">.<\/span>environment<span class=\"token punctuation\">.<\/span>key<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">await<\/span> Promise<span class=\"token punctuation\">.<\/span><span class=\"token function\">all<\/span><span class=\"token punctuation\">(<\/span>cachesToDelete<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">cacheName<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> caches<span class=\"token punctuation\">.<\/span><span class=\"token function\">delete<\/span><span class=\"token punctuation\">(<\/span>cacheName<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>self<span class=\"token punctuation\">.<\/span>registration<span class=\"token punctuation\">.<\/span>navigationPreload<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">await<\/span> self<span class=\"token punctuation\">.<\/span>registration<span class=\"token punctuation\">.<\/span>navigationPreload<span class=\"token punctuation\">.<\/span><span class=\"token function\">enable<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n    self<span class=\"token punctuation\">.<\/span>clients<span class=\"token punctuation\">.<\/span><span class=\"token function\">claim<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\nself<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'activate'<\/span><span class=\"token punctuation\">,<\/span> activate<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 O exemplo acima foi extraido do service worker gerado e usa <code>self.context.enviroment.key<\/code><\/p>\n<\/blockquote>\n<h2 id=\"pr-ximo-passo\"><a href=\"#pr-ximo-passo\">Próximo passo<\/a><\/h2><p>⚔ Aprenda <a href=\"/pt-br/como-fazer-deploy-de-aplicacao-nullstack\">Como fazer o deploy de uma aplicação Nullstack<\/a>.<\/p>\n","description":"O objeto worker é um proxy no Contexto Nullstack disponível em ambos client e server e te dá controle granular do comportamento do seu PWA","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"service-worker"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/vinculo-bidirecional.html b/docs/pt-br/vinculo-bidirecional.html
index deebb282..7a6c1cef 100644
--- a/docs/pt-br/vinculo-bidirecional.html
+++ b/docs/pt-br/vinculo-bidirecional.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -269,15 +269,15 @@ <h2 id="pr-ximos-passos"><a href="#pr-ximos-passos">Próximos passos</a></h2><bl
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Vínculo Bidirecional - Nullstack","description":"O atributo bind reduz drasticamente a quantidade de \"glue code\" que você precisa digitar em sua aplicação."};
       window.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/vinculo-bidirecional":{"title":"Vínculo Bidirecional","html":"<p>Grandes pedaços de código em uma <code>Progressive Web Application (PWA)<\/code> são dedicados a reagir as entradas do usuário.<\/p>\n<p>O processo de controlar a entrada do usuário pode ser dividido em 3 etapas tediosas:<\/p>\n<ul>\n<li>Declarar uma variável com o valor inicial;<\/li>\n<li>Passar o valor inicial para a entrada;<\/li>\n<li>Observar as mudanças na entrada e atribuir o novo valor à variável.<\/li>\n<\/ul>\n<p>A última etapa pode incluir modelagem e outros tratamentos de valor.<\/p>\n<p>Este processo no qual você faz manualmente todas essas etapas é chamado de <em>one-way binding<\/em>, é o padrão em muitos frameworks, e é possível no Nullstack.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Form<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  number <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n  string <span class=\"token operator\">=<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">updateString<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>event<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>string <span class=\"token operator\">=<\/span> event<span class=\"token punctuation\">.<\/span>target<span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">updateNumber<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>event<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>number <span class=\"token operator\">=<\/span> <span class=\"token function\">parseInt<\/span><span class=\"token punctuation\">(<\/span>event<span class=\"token punctuation\">.<\/span>target<span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span>\n          <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>text<span class=\"token punctuation\">\"<\/span><\/span>\n          <span class=\"token attr-name\">name<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>string<span class=\"token punctuation\">\"<\/span><\/span>\n          <span class=\"token attr-name\">value<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>string<span class=\"token punctuation\">}<\/span><\/span>\n          <span class=\"token attr-name\">oninput<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>updateString<span class=\"token punctuation\">}<\/span><\/span>\n        <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span>\n          <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>number<span class=\"token punctuation\">\"<\/span><\/span>\n          <span class=\"token attr-name\">name<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>number<span class=\"token punctuation\">\"<\/span><\/span>\n          <span class=\"token attr-name\">value<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>number<span class=\"token punctuation\">}<\/span><\/span>\n          <span class=\"token attr-name\">oninput<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>updateNumber<span class=\"token punctuation\">}<\/span><\/span>\n        <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Form<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"o-atributo-bind\"><a href=\"#o-atributo-bind\">O atributo bind<\/a><\/h2><p>O atributo <code>bind<\/code> reduz drasticamente a quantidade de 'glue code' que você precisa digitar em sua aplicação.<\/p>\n<p>Você pode criar um atalho para definir um <code>value<\/code>, <code>name<\/code> e evento com o atributo <code>bind<\/code>.<\/p>\n<blockquote>\n<p>💡O Nullstack simplesmente substituirá o atributo <code>bind<\/code> pelo <code>value<\/code>, <code>name<\/code> e evento subjacente.<\/p>\n<\/blockquote>\n<p>O <code>bind<\/code> irá gerar um evento que automaticamente retornará para o tipo primitivo anterior que o valor era.<\/p>\n<p>Você pode passar qualquer variável para o <code>bind<\/code>, desde que seu objeto pai seja mencionado.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Form<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  number <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n  string <span class=\"token operator\">=<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">;<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>text<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>string<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>number<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>number<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Form<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"eventos-vinculados\"><a href=\"#eventos-vinculados\">Eventos vinculados<\/a><\/h2><p>Os seguintes eventos são definidos para cada tipo de entrada:<\/p>\n<ul>\n<li><code>onclick<\/code> para entradas com o tipo de caixa de seleção<\/li>\n<li><code>oninput<\/code> para outras entradas e áreas de texto<\/li>\n<li><code>onchange<\/code> para qualquer outra coisa<\/li>\n<\/ul>\n<p>Você ainda pode declarar um atributo com o mesmo evento vinculado.<\/p>\n<p>Os eventos não substituirão o evento vinculado, em vez disso, serão executados depois que o vínculo transformar a variável.<\/p>\n<p>O novo valor será mesclado na função <a href=\"/pt-br/contexto\">contexto<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Form<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  name <span class=\"token operator\">=<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">compare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>value<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>name <span class=\"token operator\">===<\/span> value<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">oninput<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>compare<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Form<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"fonte-de-vincula--o\"><a href=\"#fonte-de-vincula--o\">Fonte de vinculação<\/a><\/h2><p>O <code>bind<\/code> também pode receber um atributo <code>source<\/code>.<\/p>\n<blockquote>\n<p>💡 Se você não declarar um <code>source<\/code> para o <code>bind<\/code>, o Nullstack injetará um <code>source = {this}<\/code> no tempo de transpilação para pular completamente o processo de pesquisa em tempo de execução!<\/p>\n<\/blockquote>\n<p>Se você declarar um <code>source<\/code>, o <code>bind<\/code> deverá ser uma string com o nome da chave que será modificada.<\/p>\n<p>A fonte será mesclada no  <a href=\"/pt-br/contexto\">contexto<\/a> de eventos.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Paginator<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">validate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>source<span class=\"token punctuation\">,<\/span> params<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>source<span class=\"token punctuation\">.<\/span>page<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      params<span class=\"token punctuation\">.<\/span>page <span class=\"token operator\">=<\/span> <span class=\"token string\">'1'<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> \n        <span class=\"token attr-name\">source<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span>\n        <span class=\"token attr-name\">bind<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>page<span class=\"token punctuation\">\"<\/span><\/span>\n        <span class=\"token attr-name\">oninput<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>validate<span class=\"token punctuation\">}<\/span><\/span>\n      <span class=\"token punctuation\">/><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Paginator<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 A vinculação por referência é possível porque todas as vinculações são convertidas para o formato acima no momento da transpilação.<\/p>\n<\/blockquote>\n<p>Qualquer objeto que responde a uma chamada de tecla com &quot;[]&quot; pode ser vinculado.<\/p>\n<p>O atributo <code>name<\/code> pode ser substituído.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Form<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  number <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n  boolean <span class=\"token operator\">=<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span>\n  character <span class=\"token operator\">=<\/span> <span class=\"token string\">'a'<\/span><span class=\"token punctuation\">;<\/span>\n  text <span class=\"token operator\">=<\/span> <span class=\"token string\">'aaaa'<\/span><span class=\"token punctuation\">;<\/span>\n  \n  object <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span>count<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n  array <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token string\">'a'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'b'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'c'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>number<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>textarea<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>text<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>select<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>character<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>array<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">character<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>option<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>character<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>option<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>select<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>select<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>boolean<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">name<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>boolean-select<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>option<\/span> <span class=\"token attr-name\">value<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token boolean\">true<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token boolean\">true<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>option<\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>option<\/span> <span class=\"token attr-name\">value<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token boolean\">false<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token boolean\">false<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>option<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>select<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>boolean<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>checkbox<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>object<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>array<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">value<span class=\"token punctuation\">,<\/span> index<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">(<\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>array<span class=\"token punctuation\">[<\/span>index<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">.<\/span>page<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Form<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"objeto-de-eventos\"><a href=\"#objeto-de-eventos\">Objeto de Eventos<\/a><\/h2><p>Você pode usar o <a href=\"/pt-br/componentes-com-estado\">objeto de eventos<\/a> ao lado do <code>bind<\/code> normalmente.<\/p>\n<p>O evento será executado após a alteração da variável.<\/p>\n<p>O evento irá compartilhar a fonte do <code>bind<\/code>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Paginator<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">.<\/span>filter<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">oninput<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span>page<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Paginator<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"componentes-vincul-veis\"><a href=\"#componentes-vincul-veis\">Componentes vinculáveis<\/a><\/h2><p>Você pode criar seu próprio componente vinculável recebendo os atributos gerados pelo <code>bind<\/code>.<\/p>\n<p>Você deve responder chamando <code>onchange<\/code> com uma chave <code>value<\/code>.<\/p>\n<p>Você também pode mesclar quaisquer outras chaves que deseja enviar ao usuário do componente.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">CurrencyInput<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">parse<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>event<span class=\"token punctuation\">,<\/span> onchange<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> normalized <span class=\"token operator\">=<\/span> event<span class=\"token punctuation\">.<\/span>target<span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">.<\/span><span class=\"token function\">replace<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">','<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">padStart<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">3<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'0'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> whole <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token function\">parseInt<\/span><span class=\"token punctuation\">(<\/span>normalized<span class=\"token punctuation\">.<\/span><span class=\"token function\">slice<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span><span class=\"token operator\">-<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">||<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">toString<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> decimal <span class=\"token operator\">=<\/span> normalized<span class=\"token punctuation\">.<\/span><span class=\"token function\">slice<\/span><span class=\"token punctuation\">(<\/span>normalized<span class=\"token punctuation\">.<\/span>length <span class=\"token operator\">-<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> value <span class=\"token operator\">=<\/span> <span class=\"token function\">parseFloat<\/span><span class=\"token punctuation\">(<\/span>whole<span class=\"token operator\">+<\/span><span class=\"token string\">'.'<\/span><span class=\"token operator\">+<\/span>decimal<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> bringsHappyness <span class=\"token operator\">=<\/span> value <span class=\"token operator\">>=<\/span> <span class=\"token number\">1000000<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token function\">onchange<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>value<span class=\"token punctuation\">,<\/span> bringsHappyness<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>value<span class=\"token punctuation\">,<\/span> name<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> formatted <span class=\"token operator\">=<\/span> value<span class=\"token punctuation\">.<\/span><span class=\"token function\">toFixed<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">replace<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'.'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">','<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">name<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>name<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">value<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>formatted<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">oninput<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>parse<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> CurrencyInput <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./CurrencyInput'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Form<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  balance <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">CurrencyInput<\/span><\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>balance<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Form<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"pr-ximos-passos\"><a href=\"#pr-ximos-passos\">Próximos passos<\/a><\/h2><blockquote>\n<p>🎉 <strong>Parabéns!<\/strong> Você concluiu os conceitos básicos!<\/p>\n<\/blockquote>\n<p>⚔ Aprenda sobre a <a href=\"/pt-br/inicializacao-da-aplicacao\">inicialização da aplicação<\/a>.<\/p>\n","description":"O atributo bind reduz drasticamente a quantidade de \"glue code\" que você precisa digitar em sua aplicação.","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"vinculo-bidirecional"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/vinculo-bidirecional/index.html b/docs/pt-br/vinculo-bidirecional/index.html
index deebb282..7a6c1cef 100644
--- a/docs/pt-br/vinculo-bidirecional/index.html
+++ b/docs/pt-br/vinculo-bidirecional/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -269,15 +269,15 @@ <h2 id="pr-ximos-passos"><a href="#pr-ximos-passos">Próximos passos</a></h2><bl
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Vínculo Bidirecional - Nullstack","description":"O atributo bind reduz drasticamente a quantidade de \"glue code\" que você precisa digitar em sua aplicação."};
       window.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/vinculo-bidirecional":{"title":"Vínculo Bidirecional","html":"<p>Grandes pedaços de código em uma <code>Progressive Web Application (PWA)<\/code> são dedicados a reagir as entradas do usuário.<\/p>\n<p>O processo de controlar a entrada do usuário pode ser dividido em 3 etapas tediosas:<\/p>\n<ul>\n<li>Declarar uma variável com o valor inicial;<\/li>\n<li>Passar o valor inicial para a entrada;<\/li>\n<li>Observar as mudanças na entrada e atribuir o novo valor à variável.<\/li>\n<\/ul>\n<p>A última etapa pode incluir modelagem e outros tratamentos de valor.<\/p>\n<p>Este processo no qual você faz manualmente todas essas etapas é chamado de <em>one-way binding<\/em>, é o padrão em muitos frameworks, e é possível no Nullstack.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Form<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  number <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n  string <span class=\"token operator\">=<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">updateString<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>event<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>string <span class=\"token operator\">=<\/span> event<span class=\"token punctuation\">.<\/span>target<span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">updateNumber<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>event<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>number <span class=\"token operator\">=<\/span> <span class=\"token function\">parseInt<\/span><span class=\"token punctuation\">(<\/span>event<span class=\"token punctuation\">.<\/span>target<span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span>\n          <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>text<span class=\"token punctuation\">\"<\/span><\/span>\n          <span class=\"token attr-name\">name<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>string<span class=\"token punctuation\">\"<\/span><\/span>\n          <span class=\"token attr-name\">value<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>string<span class=\"token punctuation\">}<\/span><\/span>\n          <span class=\"token attr-name\">oninput<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>updateString<span class=\"token punctuation\">}<\/span><\/span>\n        <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span>\n          <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>number<span class=\"token punctuation\">\"<\/span><\/span>\n          <span class=\"token attr-name\">name<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>number<span class=\"token punctuation\">\"<\/span><\/span>\n          <span class=\"token attr-name\">value<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>number<span class=\"token punctuation\">}<\/span><\/span>\n          <span class=\"token attr-name\">oninput<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>updateNumber<span class=\"token punctuation\">}<\/span><\/span>\n        <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Form<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"o-atributo-bind\"><a href=\"#o-atributo-bind\">O atributo bind<\/a><\/h2><p>O atributo <code>bind<\/code> reduz drasticamente a quantidade de 'glue code' que você precisa digitar em sua aplicação.<\/p>\n<p>Você pode criar um atalho para definir um <code>value<\/code>, <code>name<\/code> e evento com o atributo <code>bind<\/code>.<\/p>\n<blockquote>\n<p>💡O Nullstack simplesmente substituirá o atributo <code>bind<\/code> pelo <code>value<\/code>, <code>name<\/code> e evento subjacente.<\/p>\n<\/blockquote>\n<p>O <code>bind<\/code> irá gerar um evento que automaticamente retornará para o tipo primitivo anterior que o valor era.<\/p>\n<p>Você pode passar qualquer variável para o <code>bind<\/code>, desde que seu objeto pai seja mencionado.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Form<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  number <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n  string <span class=\"token operator\">=<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">;<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>text<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>string<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>number<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>number<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Form<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"eventos-vinculados\"><a href=\"#eventos-vinculados\">Eventos vinculados<\/a><\/h2><p>Os seguintes eventos são definidos para cada tipo de entrada:<\/p>\n<ul>\n<li><code>onclick<\/code> para entradas com o tipo de caixa de seleção<\/li>\n<li><code>oninput<\/code> para outras entradas e áreas de texto<\/li>\n<li><code>onchange<\/code> para qualquer outra coisa<\/li>\n<\/ul>\n<p>Você ainda pode declarar um atributo com o mesmo evento vinculado.<\/p>\n<p>Os eventos não substituirão o evento vinculado, em vez disso, serão executados depois que o vínculo transformar a variável.<\/p>\n<p>O novo valor será mesclado na função <a href=\"/pt-br/contexto\">contexto<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Form<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  name <span class=\"token operator\">=<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">compare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>value<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>name <span class=\"token operator\">===<\/span> value<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">oninput<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>compare<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Form<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"fonte-de-vincula--o\"><a href=\"#fonte-de-vincula--o\">Fonte de vinculação<\/a><\/h2><p>O <code>bind<\/code> também pode receber um atributo <code>source<\/code>.<\/p>\n<blockquote>\n<p>💡 Se você não declarar um <code>source<\/code> para o <code>bind<\/code>, o Nullstack injetará um <code>source = {this}<\/code> no tempo de transpilação para pular completamente o processo de pesquisa em tempo de execução!<\/p>\n<\/blockquote>\n<p>Se você declarar um <code>source<\/code>, o <code>bind<\/code> deverá ser uma string com o nome da chave que será modificada.<\/p>\n<p>A fonte será mesclada no  <a href=\"/pt-br/contexto\">contexto<\/a> de eventos.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Paginator<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">validate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>source<span class=\"token punctuation\">,<\/span> params<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>source<span class=\"token punctuation\">.<\/span>page<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      params<span class=\"token punctuation\">.<\/span>page <span class=\"token operator\">=<\/span> <span class=\"token string\">'1'<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> \n        <span class=\"token attr-name\">source<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span>\n        <span class=\"token attr-name\">bind<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>page<span class=\"token punctuation\">\"<\/span><\/span>\n        <span class=\"token attr-name\">oninput<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>validate<span class=\"token punctuation\">}<\/span><\/span>\n      <span class=\"token punctuation\">/><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Paginator<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 A vinculação por referência é possível porque todas as vinculações são convertidas para o formato acima no momento da transpilação.<\/p>\n<\/blockquote>\n<p>Qualquer objeto que responde a uma chamada de tecla com &quot;[]&quot; pode ser vinculado.<\/p>\n<p>O atributo <code>name<\/code> pode ser substituído.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Form<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  number <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n  boolean <span class=\"token operator\">=<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span>\n  character <span class=\"token operator\">=<\/span> <span class=\"token string\">'a'<\/span><span class=\"token punctuation\">;<\/span>\n  text <span class=\"token operator\">=<\/span> <span class=\"token string\">'aaaa'<\/span><span class=\"token punctuation\">;<\/span>\n  \n  object <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span>count<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n  array <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token string\">'a'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'b'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'c'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>number<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>textarea<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>text<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>select<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>character<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>array<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">character<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>option<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>character<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>option<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>select<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>select<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>boolean<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">name<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>boolean-select<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>option<\/span> <span class=\"token attr-name\">value<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token boolean\">true<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token boolean\">true<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>option<\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>option<\/span> <span class=\"token attr-name\">value<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token boolean\">false<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token boolean\">false<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>option<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>select<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>boolean<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>checkbox<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>object<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>array<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">value<span class=\"token punctuation\">,<\/span> index<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">(<\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>array<span class=\"token punctuation\">[<\/span>index<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">.<\/span>page<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Form<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"objeto-de-eventos\"><a href=\"#objeto-de-eventos\">Objeto de Eventos<\/a><\/h2><p>Você pode usar o <a href=\"/pt-br/componentes-com-estado\">objeto de eventos<\/a> ao lado do <code>bind<\/code> normalmente.<\/p>\n<p>O evento será executado após a alteração da variável.<\/p>\n<p>O evento irá compartilhar a fonte do <code>bind<\/code>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Paginator<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">.<\/span>filter<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">oninput<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span>page<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Paginator<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"componentes-vincul-veis\"><a href=\"#componentes-vincul-veis\">Componentes vinculáveis<\/a><\/h2><p>Você pode criar seu próprio componente vinculável recebendo os atributos gerados pelo <code>bind<\/code>.<\/p>\n<p>Você deve responder chamando <code>onchange<\/code> com uma chave <code>value<\/code>.<\/p>\n<p>Você também pode mesclar quaisquer outras chaves que deseja enviar ao usuário do componente.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">CurrencyInput<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">parse<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>event<span class=\"token punctuation\">,<\/span> onchange<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> normalized <span class=\"token operator\">=<\/span> event<span class=\"token punctuation\">.<\/span>target<span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">.<\/span><span class=\"token function\">replace<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">','<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">padStart<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">3<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'0'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> whole <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token function\">parseInt<\/span><span class=\"token punctuation\">(<\/span>normalized<span class=\"token punctuation\">.<\/span><span class=\"token function\">slice<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span><span class=\"token operator\">-<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">||<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">toString<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> decimal <span class=\"token operator\">=<\/span> normalized<span class=\"token punctuation\">.<\/span><span class=\"token function\">slice<\/span><span class=\"token punctuation\">(<\/span>normalized<span class=\"token punctuation\">.<\/span>length <span class=\"token operator\">-<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> value <span class=\"token operator\">=<\/span> <span class=\"token function\">parseFloat<\/span><span class=\"token punctuation\">(<\/span>whole<span class=\"token operator\">+<\/span><span class=\"token string\">'.'<\/span><span class=\"token operator\">+<\/span>decimal<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> bringsHappyness <span class=\"token operator\">=<\/span> value <span class=\"token operator\">>=<\/span> <span class=\"token number\">1000000<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token function\">onchange<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>value<span class=\"token punctuation\">,<\/span> bringsHappyness<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>value<span class=\"token punctuation\">,<\/span> name<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> formatted <span class=\"token operator\">=<\/span> value<span class=\"token punctuation\">.<\/span><span class=\"token function\">toFixed<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">replace<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'.'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">','<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">name<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>name<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">value<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>formatted<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">oninput<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>parse<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> CurrencyInput <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./CurrencyInput'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Form<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  balance <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">CurrencyInput<\/span><\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>balance<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Form<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"pr-ximos-passos\"><a href=\"#pr-ximos-passos\">Próximos passos<\/a><\/h2><blockquote>\n<p>🎉 <strong>Parabéns!<\/strong> Você concluiu os conceitos básicos!<\/p>\n<\/blockquote>\n<p>⚔ Aprenda sobre a <a href=\"/pt-br/inicializacao-da-aplicacao\">inicialização da aplicação<\/a>.<\/p>\n","description":"O atributo bind reduz drasticamente a quantidade de \"glue code\" que você precisa digitar em sua aplicação.","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"vinculo-bidirecional"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/waifu.html b/docs/pt-br/waifu.html
index f7155154..b902c490 100644
--- a/docs/pt-br/waifu.html
+++ b/docs/pt-br/waifu.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -34,15 +34,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Nulla-Chan - Nullstack","description":"Waifu oficial do Nullstack","locale":"pt-BR"};
       window.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-10/pt-br/waifu":{"fanarts":["carolrennhack.webp","der_kly.webp","jaderpinnart.webp","kiro_[dot]art.webp","leeoutlaws.webp","milk_lillyum.webp","misthyart.webp","myumiifox.webp","paulomazzoco01.webp","poploopsarts.webp","raquelroxo.webp","roboilustrador.webp","saltiboki.webp","soyu_ngk.webp","tiago_franceschi.webp","tirythdm.webp","[u]__[dot]vers[dot]___.webp"],"locale":"pt-BR","i18n":{"title":"Nulla-Chan","description":"Waifu oficial do Nullstack","attributes":[{"label":"🕐 Idade","value":"19"},{"label":"♒ Signo","value":"Aquário"},{"label":"🎂 Aniversário","value":"28 de Janeiro"},{"label":"💖 Tipo Sanguíneo","value":"A"},{"label":"📏 Altura","value":"1,55m"},{"label":"🍨 Comida Favorita","value":"Qualquer coisa com sabor de baunilha"},{"label":"🧩 Hobby","value":"Reinventar Rodas"},{"label":"🧠 Neurodivergências","value":"TDAH e TEA"}],"artist":{"label":"🎨 Criada por:","href":"https://www.instagram.com/biancazanette","text":"Bilkaya"},"concept":{"label":"👀 Confira:","href":"https://www.artstation.com/artwork/Vg4o6R","text":"Conceito da Personagem"},"descriptions":["Uma doce e tímida waifu perfeita, está sempre hiperfocada em seus estudos, mas de alguma forma distraída ao mesmo tempo.","Está sempre alegre... até que ela tenha que enfrentar código grudento ou ver um post dizendo que tecnologia ela deve usar.","GitHub é a casa dela e o LinkedIn a deixa depressiva."],"fanarts":{"heading":"Fanarts","tagline":"Feitas por artistas maravilhosos ❤️"}}},"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/pt-br/waifu/index.html b/docs/pt-br/waifu/index.html
index f7155154..b902c490 100644
--- a/docs/pt-br/waifu/index.html
+++ b/docs/pt-br/waifu/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -34,15 +34,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Nulla-Chan - Nullstack","description":"Waifu oficial do Nullstack","locale":"pt-BR"};
       window.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-10/pt-br/waifu":{"fanarts":["carolrennhack.webp","der_kly.webp","jaderpinnart.webp","kiro_[dot]art.webp","leeoutlaws.webp","milk_lillyum.webp","misthyart.webp","myumiifox.webp","paulomazzoco01.webp","poploopsarts.webp","raquelroxo.webp","roboilustrador.webp","saltiboki.webp","soyu_ngk.webp","tiago_franceschi.webp","tirythdm.webp","[u]__[dot]vers[dot]___.webp"],"locale":"pt-BR","i18n":{"title":"Nulla-Chan","description":"Waifu oficial do Nullstack","attributes":[{"label":"🕐 Idade","value":"19"},{"label":"♒ Signo","value":"Aquário"},{"label":"🎂 Aniversário","value":"28 de Janeiro"},{"label":"💖 Tipo Sanguíneo","value":"A"},{"label":"📏 Altura","value":"1,55m"},{"label":"🍨 Comida Favorita","value":"Qualquer coisa com sabor de baunilha"},{"label":"🧩 Hobby","value":"Reinventar Rodas"},{"label":"🧠 Neurodivergências","value":"TDAH e TEA"}],"artist":{"label":"🎨 Criada por:","href":"https://www.instagram.com/biancazanette","text":"Bilkaya"},"concept":{"label":"👀 Confira:","href":"https://www.artstation.com/artwork/Vg4o6R","text":"Conceito da Personagem"},"descriptions":["Uma doce e tímida waifu perfeita, está sempre hiperfocada em seus estudos, mas de alguma forma distraída ao mesmo tempo.","Está sempre alegre... até que ela tenha que enfrentar código grudento ou ver um post dizendo que tecnologia ela deve usar.","GitHub é a casa dela e o LinkedIn a deixa depressiva."],"fanarts":{"heading":"Fanarts","tagline":"Feitas por artistas maravilhosos ❤️"}}},"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/renderable-components.html b/docs/renderable-components.html
index 3f3262c1..e2592c0a 100644
--- a/docs/renderable-components.html
+++ b/docs/renderable-components.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -307,15 +307,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Add state to yo
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Renderable Components - Nullstack","description":"Renderable components are very similar to web components they give you the ability to create new HTML tags that shortcut a group of other HTML tags"};
       window.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/renderable-components":{"title":"Renderable Components","html":"<p>The simplest component you can make is a renderable component, with exception of <a href=\"/functional-components\">functional components<\/a>.<\/p>\n<p>Renderable components are very similar to web components, they give you the ability to create new HTML tags that shortcut a group of other HTML tags.<\/p>\n<p>Create a file in your src folder with the name of your component and the <a href=\"/njs-file-extension\">njs extension<\/a>.<\/p>\n<p>In this example it is going to be called HelloWorld.njs.<\/p>\n<p>All you have to do is to import Nullstack or any of its subclasses and extend your class from it, define an instance method called render that returns any JSX, and export the component.<\/p>\n<blockquote>\n<p>✨ Install the official <a href=\"https://marketplace.visualstudio.com/items?itemName=ChristianMortaro.vscode-nullstack\" target=\"_blank\" rel=\"noopener\">Nullstack VSCode Extension<\/a> to generate classes with a snippet.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">HelloWorld<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span> Hello World <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> HelloWorld<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>The code above is just declaring the component, you still have to use it.<\/p>\n<p>Importing the component in your application gives you the ability to use a new tag in your render.<\/p>\n<p>This tag will be replaced with whatever you returned in your component render.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">import<\/span> <span class=\"token string\">'./Application.scss'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">import<\/span> HelloWorld <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./HelloWorld'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h1<\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">.<\/span>title<span class=\"token punctuation\">}<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>h1<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a<\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>https://nullstack.app/documentation<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">target<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>_blank<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Read the documentation <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>a<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">HelloWorld<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"using-html-attributes\"><a href=\"#using-html-attributes\">Using HTML attributes<\/a><\/h2><p>Nullstack JSX deviates a little from the spec.<\/p>\n<p>You can use the normal HTML attributes like <code>class<\/code> and <code>for<\/code> directly.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>label<\/span> <span class=\"token attr-name\">for<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>input<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>dont-label-me<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token constant\">I<\/span> am a label <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>label<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<h2 id=\"headless-components\"><a href=\"#headless-components\">Headless components<\/a><\/h2><p>If you want to skip rendering the component at all you can simply return <code>false<\/code> from the render.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Headless<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Headless<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>This will allocate DOM space for when you decide to render markup there.<\/p>\n<p>This is also useful for conditional rendering.<\/p>\n<p>If all you want to do is to generate an invisible component you can skip defining the render method at all.<\/p>\n<h2 id=\"inner-components\"><a href=\"#inner-components\">Inner components<\/a><\/h2><p>Instead of creating a new component just to organize code-splitting, you can create an inner component.<\/p>\n<p>Inner components are any method that the name starts with <code>render<\/code> followed by an uppercase character.<\/p>\n<p>Inner components share the same instance and scope as the main component, therefore, are very convenient to avoid problems like props drilling.<\/p>\n<p>To invoke the inner component use a JSX tag with the method name without the <code>render<\/code> prefix.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Post<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">renderArticle<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>article<\/span><span class=\"token punctuation\">><\/span><\/span> Content <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>article<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">renderAside<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>aside<\/span><span class=\"token punctuation\">><\/span><\/span> Related content <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>aside<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Article<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Aside<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> HelloWorld<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 Nullstack will inject a constant reference to the function at transpile time in order to completely skip the runtime lookup process!<\/p>\n<\/blockquote>\n<h2 id=\"boolean-attributes\"><a href=\"#boolean-attributes\">Boolean attributes<\/a><\/h2><p>Attributes can be assigned as a boolean.<\/p>\n<p>When the value is <code>false<\/code> the attribute will not be rendered at all.<\/p>\n<p>When the value is <code>true<\/code> it will be rendered as a boolean attribute without a string value.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">disabled<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token boolean\">false<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Button <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<p>You can shortcut attributes when you know the value will always be true.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">disabled<\/span><span class=\"token punctuation\">><\/span><\/span> Button <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Learn more about <a href=\"/context\">attributes<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"element-tag\"><a href=\"#element-tag\">Element tag<\/a><\/h2><p>If you need to decide the tag name at runtime, you can use the element tag and set the tag attribute conditionally.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>element<\/span> <span class=\"token attr-name\">tag<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token operator\">!<\/span><span class=\"token operator\">!<\/span>link <span class=\"token operator\">?<\/span> <span class=\"token string\">'a'<\/span> <span class=\"token operator\">:<\/span> <span class=\"token string\">'span'<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>link <span class=\"token operator\">||<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n  some arbitrary text\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>element<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<p>When the tag attribute is omitted, Nullstack will default to a <code>div<\/code>.<\/p>\n<h2 id=\"fragments\"><a href=\"#fragments\">Fragments<\/a><\/h2><p>Fragments are elements that renders it's contents in the parent component.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">Fragmented<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token constant\">I<\/span>'m a button<span class=\"token operator\">!<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> Paragraph<span class=\"token operator\">!<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span>\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<p>Wherever it is used, the above functional component will be rendered as follows:<\/p>\n<pre><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token constant\">I<\/span>'m a button<span class=\"token operator\">!<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> Paragraph<span class=\"token operator\">!<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<h2 id=\"svg-elements\"><a href=\"#svg-elements\">SVG Elements<\/a><\/h2><p>SVG can be used as if it were any regular HTML tag.<\/p>\n<p>You can manipulate the SVG using attributes and events normally.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>svg<\/span> <span class=\"token attr-name\">height<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>size<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">viewBox<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>0 0 100 100<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>circle<\/span> <span class=\"token attr-name\">cx<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>50<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">cy<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>50<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">r<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>40<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>grow<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>svg<\/span><span class=\"token punctuation\">><\/span><\/span> \n<\/code><\/pre>\n<blockquote>\n<p>✨ Learn more about <a href=\"/stateful-components\">events<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"components-with-children\"><a href=\"#components-with-children\">Components with children<\/a><\/h2><p>Your component can be invoked passing a block of content.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Header<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> \n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h1<\/span><span class=\"token punctuation\">><\/span><\/span> Hello World <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>h1<\/span><span class=\"token punctuation\">><\/span><\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span><span class=\"token class-name\">Header<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<p>This doesn't automatically render the block since it wouldn't know where to place it.<\/p>\n<p>You can destructure the children on the render method and place it in your markup.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Header<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>children<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>children<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Header<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ This is possible because the <code>children<\/code> key is part of the <a href=\"/context#the-available-instance-client-keys-are-\">instance context<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"lists\"><a href=\"#lists\">Lists<\/a><\/h2><p>You can map over lists without declaring a <code>key<\/code>.<\/p>\n<p>Lists that may change length must be wrapped in a parent element just for them.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">{<\/span>list<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">item<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>item<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<p>You can emulate a fixed-size list by returning <code>false<\/code> instead of an element to reserve dom space.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token punctuation\">{<\/span>list<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">item<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">(<\/span>\n  item<span class=\"token punctuation\">.<\/span>visible <span class=\"token operator\">?<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>item<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token operator\">:<\/span> <span class=\"token boolean\">false<\/span>\n<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<p>It's a nice practice to use inner components combined with lists to clean up your code.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">List<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  items <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span>\n    <span class=\"token punctuation\">{<\/span>visible<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span> number<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token punctuation\">{<\/span>visible<span class=\"token operator\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span> number<span class=\"token operator\">:<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token punctuation\">{<\/span>visible<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span> number<span class=\"token operator\">:<\/span> <span class=\"token number\">3<\/span><span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">]<\/span>\n\n  <span class=\"token function\">renderItem<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>visible<span class=\"token punctuation\">,<\/span> number<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>visible<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token punctuation\">{<\/span>number<span class=\"token punctuation\">}<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>items<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">item<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Item<\/span><\/span> <span class=\"token spread\"><span class=\"token punctuation\">{<\/span><span class=\"token operator\">...<\/span>item<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> List<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Sometimes you will notice keys in the map. Learn more about the <a href=\"/instance-self#instance-key\">instance key<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"inner-html\"><a href=\"#inner-html\">Inner HTML<\/a><\/h2><p>You can set the inner HTML of an element with the <code>html<\/code> attribute.<\/p>\n<p>Links inside the HTML string will be replaced with <a href=\"/routes-and-params\">routable anchors<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Post<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  content <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">\n    &lt;h1> This is a Post &lt;/h1>\n    &lt;a href=\"/other-post\">\n      Check this other post\n    &lt;/a>\n  <\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>article<\/span> <span class=\"token attr-name\">html<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>content<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Post<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>🔥 Be careful! When using user-generated HTML you are in risk of script injection<\/p>\n<\/blockquote>\n<h2 id=\"the-head-tag\"><a href=\"#the-head-tag\">The head tag<\/a><\/h2><p>Renderable components can render inside the <code>head<\/code> tag an unlimited number of times at any depth of the application.<\/p>\n<p>The <code>head<\/code> tag will only be updated during the <a href=\"/server-side-rendering\">server-side rendering<\/a> process and changes will be ignored after the <a href=\"/full-stack-lifecycle\">hydration<\/a> process.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>head<\/span><span class=\"token punctuation\">><\/span><\/span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>link<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>preconnect<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>https://www.googletagmanager.com<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>head<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>head<\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>link<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>preload<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/roboto-v20-latin-300.woff2<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">as<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>font<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>font/woff2<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">crossorigin<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>link<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>preload<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/crete-round-v9-latin-regular.woff2<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">as<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>font<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>font/woff2<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">crossorigin<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>head<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>🔥 You should not use the <code>head<\/code> tag to update <a href=\"/context-page\">metatags<\/a> that Nullstack already controls<\/p>\n<\/blockquote>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Add state to your component using <a href=\"/stateful-components\">stateful components<\/a>.<\/p>\n","description":"Renderable components are very similar to web components they give you the ability to create new HTML tags that shortcut a group of other HTML tags","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"renderable-components"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/renderable-components/index.html b/docs/renderable-components/index.html
index 3f3262c1..e2592c0a 100644
--- a/docs/renderable-components/index.html
+++ b/docs/renderable-components/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -307,15 +307,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Add state to yo
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Renderable Components - Nullstack","description":"Renderable components are very similar to web components they give you the ability to create new HTML tags that shortcut a group of other HTML tags"};
       window.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/renderable-components":{"title":"Renderable Components","html":"<p>The simplest component you can make is a renderable component, with exception of <a href=\"/functional-components\">functional components<\/a>.<\/p>\n<p>Renderable components are very similar to web components, they give you the ability to create new HTML tags that shortcut a group of other HTML tags.<\/p>\n<p>Create a file in your src folder with the name of your component and the <a href=\"/njs-file-extension\">njs extension<\/a>.<\/p>\n<p>In this example it is going to be called HelloWorld.njs.<\/p>\n<p>All you have to do is to import Nullstack or any of its subclasses and extend your class from it, define an instance method called render that returns any JSX, and export the component.<\/p>\n<blockquote>\n<p>✨ Install the official <a href=\"https://marketplace.visualstudio.com/items?itemName=ChristianMortaro.vscode-nullstack\" target=\"_blank\" rel=\"noopener\">Nullstack VSCode Extension<\/a> to generate classes with a snippet.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">HelloWorld<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span> Hello World <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> HelloWorld<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>The code above is just declaring the component, you still have to use it.<\/p>\n<p>Importing the component in your application gives you the ability to use a new tag in your render.<\/p>\n<p>This tag will be replaced with whatever you returned in your component render.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">import<\/span> <span class=\"token string\">'./Application.scss'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">import<\/span> HelloWorld <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./HelloWorld'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h1<\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">.<\/span>title<span class=\"token punctuation\">}<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>h1<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a<\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>https://nullstack.app/documentation<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">target<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>_blank<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Read the documentation <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>a<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">HelloWorld<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"using-html-attributes\"><a href=\"#using-html-attributes\">Using HTML attributes<\/a><\/h2><p>Nullstack JSX deviates a little from the spec.<\/p>\n<p>You can use the normal HTML attributes like <code>class<\/code> and <code>for<\/code> directly.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>label<\/span> <span class=\"token attr-name\">for<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>input<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>dont-label-me<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token constant\">I<\/span> am a label <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>label<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<h2 id=\"headless-components\"><a href=\"#headless-components\">Headless components<\/a><\/h2><p>If you want to skip rendering the component at all you can simply return <code>false<\/code> from the render.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Headless<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Headless<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>This will allocate DOM space for when you decide to render markup there.<\/p>\n<p>This is also useful for conditional rendering.<\/p>\n<p>If all you want to do is to generate an invisible component you can skip defining the render method at all.<\/p>\n<h2 id=\"inner-components\"><a href=\"#inner-components\">Inner components<\/a><\/h2><p>Instead of creating a new component just to organize code-splitting, you can create an inner component.<\/p>\n<p>Inner components are any method that the name starts with <code>render<\/code> followed by an uppercase character.<\/p>\n<p>Inner components share the same instance and scope as the main component, therefore, are very convenient to avoid problems like props drilling.<\/p>\n<p>To invoke the inner component use a JSX tag with the method name without the <code>render<\/code> prefix.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Post<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">renderArticle<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>article<\/span><span class=\"token punctuation\">><\/span><\/span> Content <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>article<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">renderAside<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>aside<\/span><span class=\"token punctuation\">><\/span><\/span> Related content <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>aside<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Article<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Aside<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> HelloWorld<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 Nullstack will inject a constant reference to the function at transpile time in order to completely skip the runtime lookup process!<\/p>\n<\/blockquote>\n<h2 id=\"boolean-attributes\"><a href=\"#boolean-attributes\">Boolean attributes<\/a><\/h2><p>Attributes can be assigned as a boolean.<\/p>\n<p>When the value is <code>false<\/code> the attribute will not be rendered at all.<\/p>\n<p>When the value is <code>true<\/code> it will be rendered as a boolean attribute without a string value.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">disabled<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token boolean\">false<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Button <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<p>You can shortcut attributes when you know the value will always be true.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">disabled<\/span><span class=\"token punctuation\">><\/span><\/span> Button <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Learn more about <a href=\"/context\">attributes<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"element-tag\"><a href=\"#element-tag\">Element tag<\/a><\/h2><p>If you need to decide the tag name at runtime, you can use the element tag and set the tag attribute conditionally.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>element<\/span> <span class=\"token attr-name\">tag<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token operator\">!<\/span><span class=\"token operator\">!<\/span>link <span class=\"token operator\">?<\/span> <span class=\"token string\">'a'<\/span> <span class=\"token operator\">:<\/span> <span class=\"token string\">'span'<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>link <span class=\"token operator\">||<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n  some arbitrary text\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>element<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<p>When the tag attribute is omitted, Nullstack will default to a <code>div<\/code>.<\/p>\n<h2 id=\"fragments\"><a href=\"#fragments\">Fragments<\/a><\/h2><p>Fragments are elements that renders it's contents in the parent component.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">Fragmented<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token constant\">I<\/span>'m a button<span class=\"token operator\">!<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> Paragraph<span class=\"token operator\">!<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span>\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<p>Wherever it is used, the above functional component will be rendered as follows:<\/p>\n<pre><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token constant\">I<\/span>'m a button<span class=\"token operator\">!<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> Paragraph<span class=\"token operator\">!<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<h2 id=\"svg-elements\"><a href=\"#svg-elements\">SVG Elements<\/a><\/h2><p>SVG can be used as if it were any regular HTML tag.<\/p>\n<p>You can manipulate the SVG using attributes and events normally.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>svg<\/span> <span class=\"token attr-name\">height<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>size<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">viewBox<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>0 0 100 100<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>circle<\/span> <span class=\"token attr-name\">cx<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>50<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">cy<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>50<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">r<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>40<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>grow<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>svg<\/span><span class=\"token punctuation\">><\/span><\/span> \n<\/code><\/pre>\n<blockquote>\n<p>✨ Learn more about <a href=\"/stateful-components\">events<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"components-with-children\"><a href=\"#components-with-children\">Components with children<\/a><\/h2><p>Your component can be invoked passing a block of content.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Header<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> \n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h1<\/span><span class=\"token punctuation\">><\/span><\/span> Hello World <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>h1<\/span><span class=\"token punctuation\">><\/span><\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span><span class=\"token class-name\">Header<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<p>This doesn't automatically render the block since it wouldn't know where to place it.<\/p>\n<p>You can destructure the children on the render method and place it in your markup.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Header<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>children<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>children<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Header<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ This is possible because the <code>children<\/code> key is part of the <a href=\"/context#the-available-instance-client-keys-are-\">instance context<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"lists\"><a href=\"#lists\">Lists<\/a><\/h2><p>You can map over lists without declaring a <code>key<\/code>.<\/p>\n<p>Lists that may change length must be wrapped in a parent element just for them.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">{<\/span>list<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">item<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>item<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<p>You can emulate a fixed-size list by returning <code>false<\/code> instead of an element to reserve dom space.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token punctuation\">{<\/span>list<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">item<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">(<\/span>\n  item<span class=\"token punctuation\">.<\/span>visible <span class=\"token operator\">?<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>item<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token operator\">:<\/span> <span class=\"token boolean\">false<\/span>\n<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<p>It's a nice practice to use inner components combined with lists to clean up your code.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">List<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  items <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span>\n    <span class=\"token punctuation\">{<\/span>visible<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span> number<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token punctuation\">{<\/span>visible<span class=\"token operator\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span> number<span class=\"token operator\">:<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token punctuation\">{<\/span>visible<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span> number<span class=\"token operator\">:<\/span> <span class=\"token number\">3<\/span><span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">]<\/span>\n\n  <span class=\"token function\">renderItem<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>visible<span class=\"token punctuation\">,<\/span> number<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>visible<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span> <span class=\"token punctuation\">{<\/span>number<span class=\"token punctuation\">}<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>li<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>items<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">item<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Item<\/span><\/span> <span class=\"token spread\"><span class=\"token punctuation\">{<\/span><span class=\"token operator\">...<\/span>item<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>ul<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> List<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Sometimes you will notice keys in the map. Learn more about the <a href=\"/instance-self#instance-key\">instance key<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"inner-html\"><a href=\"#inner-html\">Inner HTML<\/a><\/h2><p>You can set the inner HTML of an element with the <code>html<\/code> attribute.<\/p>\n<p>Links inside the HTML string will be replaced with <a href=\"/routes-and-params\">routable anchors<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Post<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  content <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">\n    &lt;h1> This is a Post &lt;/h1>\n    &lt;a href=\"/other-post\">\n      Check this other post\n    &lt;/a>\n  <\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>article<\/span> <span class=\"token attr-name\">html<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>content<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Post<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>🔥 Be careful! When using user-generated HTML you are in risk of script injection<\/p>\n<\/blockquote>\n<h2 id=\"the-head-tag\"><a href=\"#the-head-tag\">The head tag<\/a><\/h2><p>Renderable components can render inside the <code>head<\/code> tag an unlimited number of times at any depth of the application.<\/p>\n<p>The <code>head<\/code> tag will only be updated during the <a href=\"/server-side-rendering\">server-side rendering<\/a> process and changes will be ignored after the <a href=\"/full-stack-lifecycle\">hydration<\/a> process.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>head<\/span><span class=\"token punctuation\">><\/span><\/span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>link<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>preconnect<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>https://www.googletagmanager.com<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>head<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>head<\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>link<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>preload<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/roboto-v20-latin-300.woff2<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">as<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>font<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>font/woff2<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">crossorigin<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>link<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>preload<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/crete-round-v9-latin-regular.woff2<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">as<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>font<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>font/woff2<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">crossorigin<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>head<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>🔥 You should not use the <code>head<\/code> tag to update <a href=\"/context-page\">metatags<\/a> that Nullstack already controls<\/p>\n<\/blockquote>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Add state to your component using <a href=\"/stateful-components\">stateful components<\/a>.<\/p>\n","description":"Renderable components are very similar to web components they give you the ability to create new HTML tags that shortcut a group of other HTML tags","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"renderable-components"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/routes-and-params.html b/docs/routes-and-params.html
index 8f65f61a..38937a9d 100644
--- a/docs/routes-and-params.html
+++ b/docs/routes-and-params.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -280,15 +280,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about <a
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Routes and Params - Nullstack","description":"Nullstack has built-in routes, it would make no sense otherwise since web applications are expected to have hyperlinks."};
       window.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/routes-and-params":{"title":"Routes and Params","html":"<p>Nullstack has built-in routes, it would make no sense otherwise since web applications are expected to have hyperlinks.<\/p>\n<p>Any tag can receive a <code>route<\/code> attribute, be it a component, inner component, or simple HTML tag.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Page <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Page'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">renderHome<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>section<\/span><span class=\"token punctuation\">><\/span><\/span> Home <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>section<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Home<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Page<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/page<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>abbr<\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/abbreviations<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Abbreviations <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>abbr<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"links\"><a href=\"#links\">Links<\/a><\/h2><p>Links on Nullstack are simple <code>a<\/code> tags with the <code>href<\/code> value starting with &quot;/&quot;.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a<\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/page/about<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> About Page <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>a<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 On the client side the click event will push history without reloading the page.<\/p>\n<\/blockquote>\n<blockquote>\n<p>✨ You can still assign your own click event to the tag without losing the framework behavior.<\/p>\n<\/blockquote>\n<h2 id=\"params\"><a href=\"#params\">Params<\/a><\/h2><p>The <code>params<\/code> key is an object proxy injected into every client instance.<\/p>\n<p>Each query string param is mapped to this object.<\/p>\n<p>By default any key you request from this object will return a string.<\/p>\n<p>If the value is <code>undefined<\/code> it will return an empty string.<\/p>\n<p>If the value is <code>true<\/code> or <code>false<\/code> it will return a boolean instead.<\/p>\n<blockquote>\n<p>🐱‍💻 Bellow an exemple that visits &quot;/books?expanded=true&amp;page=2&quot;:<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Books<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span>params<span class=\"token punctuation\">.<\/span>expanded<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">const<\/span> page <span class=\"token operator\">=<\/span> <span class=\"token function\">parseInt<\/span><span class=\"token punctuation\">(<\/span>params<span class=\"token punctuation\">.<\/span>page<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">||<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>books <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getBooks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Books<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Assigning to a params key will cause a redirect to the route with updated params.<\/p>\n<p>When you assign to a param, the value will be converted to JSON before being set.<\/p>\n<blockquote>\n<p>💡 Redirects work in batches, so there is no performance loss in multiple assignments.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Paginator<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">handleClick<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    params<span class=\"token punctuation\">.<\/span>filter <span class=\"token operator\">=<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">;<\/span>\n    params<span class=\"token punctuation\">.<\/span>page <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Paginator<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Assigning an empty string to a param will remove it from the url.<\/p>\n<h2 id=\"dynamic-segments\"><a href=\"#dynamic-segments\">Dynamic Segments<\/a><\/h2><p>Part of the route can be an expression started with &quot;:&quot; followed by a param name.<\/p>\n<p>This value will be matched against any string in the same directory position.<\/p>\n<p>The value of the string in the URL will be assigned to the <a href=\"/context\">context<\/a> params and functions below this point in the hierarchy will have access to the new key.<\/p>\n<blockquote>\n<p>🐱‍💻 Bellow an example that visits &quot;/category/suspense?page=2&quot;:<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Books<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> page <span class=\"token operator\">=<\/span> <span class=\"token function\">parseInt<\/span><span class=\"token punctuation\">(<\/span>params<span class=\"token punctuation\">.<\/span>page<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">||<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> category <span class=\"token operator\">=<\/span> params<span class=\"token punctuation\">.<\/span>slug<span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>books <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getBooks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>category<span class=\"token punctuation\">,<\/span> page<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Books<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Books <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Books'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Books<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/category/:slug<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>When a dynamic segment is changed, as for example moving from &quot;/category/suspense&quot; to &quot;/category/comedy&quot;, the component will be terminated and a new instance will be created.<\/p>\n<p>Changing a query param will not re-instantiate the component.<\/p>\n<p>Children of the component will not be re-instantiated automatically, you can set the same route to the children or do it manually if you desire this behavior.<\/p>\n<blockquote>\n<p>💡 The behavior mentioned above solves many of the problems you have to normally deal with manually.<\/p>\n<\/blockquote>\n<h2 id=\"wildcards\"><a href=\"#wildcards\">Wildcards<\/a><\/h2><p>Wildcards are routes declared with &quot;*&quot; as the attribute value.<\/p>\n<p>These routes will match anything if nothing above it matches the requested URL.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Home <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Home'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Home<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>*<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Wildcard <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<p>Wildcards can be prefixed with a segment.<\/p>\n<blockquote>\n<p>✨ this is especially useful for engines that can be mounted in your application.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Home <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Home'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> BlogEngine <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./BlogEngine'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Home<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">BlogEngine<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/blog/*<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<h2 id=\"router\"><a href=\"#router\">Router<\/a><\/h2><p>The <code>router<\/code> key is an object proxy injected into every client instance.<\/p>\n<p>The <code>router<\/code> has two keys:<\/p>\n<ul>\n<li><strong><code>url<\/code><\/strong><\/li>\n<li><strong><code>path<\/code><\/strong><\/li>\n<\/ul>\n<p>The <code>url<\/code> key returns everything after the domain including the path and the query params as a string.<\/p>\n<p>The <code>path<\/code> key returns only the path without query params.<\/p>\n<blockquote>\n<p>💡 Both keys above automatically remove the trailing slash for convenience.<\/p>\n<\/blockquote>\n<p>Assigning to <code>url<\/code> or <code>path<\/code> will cause a redirect.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>router<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span>router<span class=\"token punctuation\">.<\/span>path <span class=\"token operator\">==<\/span> <span class=\"token string\">'/'<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      router<span class=\"token punctuation\">.<\/span>path <span class=\"token operator\">=<\/span> <span class=\"token string\">'/dashboard'<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 Under the hood <code>a<\/code> tags with <code>params<\/code> use the <code>router<\/code>.<\/p>\n<\/blockquote>\n<h2 id=\"custom-events\"><a href=\"#custom-events\">Custom Events<\/a><\/h2><p>Updating <code>router.url<\/code> or <code>router.path<\/code> will raise a custom event.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Analytics<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">hydrate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>router<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    window<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span>router<span class=\"token punctuation\">.<\/span>event<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n      console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>router<span class=\"token punctuation\">.<\/span>url<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Analytics<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"special-anchors\"><a href=\"#special-anchors\">Special anchors<\/a><\/h2><p>Anchor tags accept some convenient special attributes besides the regular <code>href<\/code>.<\/p>\n<p>You can set the <code>params<\/code> attribute with an object as the value.<\/p>\n<p>The path will remain the same as the current router path, but the <code>params<\/code> will be replaced by the new params you specify.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a<\/span> <span class=\"token attr-name\">params<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span>page<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> First Page <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>a<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<p>If you wish to just update some params and keep the others, you can use the JavaScript spread operator for that.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a<\/span> <span class=\"token attr-name\">params<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span><span class=\"token operator\">...<\/span>params<span class=\"token punctuation\">,<\/span> page<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> First Page <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>a<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<p>You can set the <code>path<\/code> attribute with a string starting with &quot;/&quot; and no query params.<\/p>\n<p>The params will remain the same, but the <code>path<\/code> will be updated.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a<\/span> <span class=\"token attr-name\">path<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/category/suspense<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Suspense Books <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>a<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<p>Both attributes above can be used at the same time.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a<\/span> <span class=\"token attr-name\">path<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/category/suspense<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">params<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span><span class=\"token operator\">...<\/span>params<span class=\"token punctuation\">,<\/span> page<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Suspense Books <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>a<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<h2 id=\"nested-routes\"><a href=\"#nested-routes\">Nested routes<\/a><\/h2><p>The first route to be matched will be rendered.<\/p>\n<p>The other elements with a route will not be rendered, however, elements on the same level without a <code>route<\/code> attribute will render normally.<\/p>\n<p>The router will lookup for one route per dom depth level, this allows you to have nested routing behavior.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Home <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Home'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">renderPage<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>section<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/page/about<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> About Page <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/page/contact<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Contact Page <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>section<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Home<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Page<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/page/:slug<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about <a href=\"/two-way-bindings\">two-way bindings<\/a>.<\/p>\n","description":"Nullstack has built-in routes, it would make no sense otherwise since web applications are expected to have hyperlinks.","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"routes-and-params"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/routes-and-params/index.html b/docs/routes-and-params/index.html
index 8f65f61a..38937a9d 100644
--- a/docs/routes-and-params/index.html
+++ b/docs/routes-and-params/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -280,15 +280,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about <a
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Routes and Params - Nullstack","description":"Nullstack has built-in routes, it would make no sense otherwise since web applications are expected to have hyperlinks."};
       window.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/routes-and-params":{"title":"Routes and Params","html":"<p>Nullstack has built-in routes, it would make no sense otherwise since web applications are expected to have hyperlinks.<\/p>\n<p>Any tag can receive a <code>route<\/code> attribute, be it a component, inner component, or simple HTML tag.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Page <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Page'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">renderHome<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>section<\/span><span class=\"token punctuation\">><\/span><\/span> Home <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>section<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Home<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Page<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/page<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>abbr<\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/abbreviations<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Abbreviations <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>abbr<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"links\"><a href=\"#links\">Links<\/a><\/h2><p>Links on Nullstack are simple <code>a<\/code> tags with the <code>href<\/code> value starting with &quot;/&quot;.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a<\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/page/about<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> About Page <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>a<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 On the client side the click event will push history without reloading the page.<\/p>\n<\/blockquote>\n<blockquote>\n<p>✨ You can still assign your own click event to the tag without losing the framework behavior.<\/p>\n<\/blockquote>\n<h2 id=\"params\"><a href=\"#params\">Params<\/a><\/h2><p>The <code>params<\/code> key is an object proxy injected into every client instance.<\/p>\n<p>Each query string param is mapped to this object.<\/p>\n<p>By default any key you request from this object will return a string.<\/p>\n<p>If the value is <code>undefined<\/code> it will return an empty string.<\/p>\n<p>If the value is <code>true<\/code> or <code>false<\/code> it will return a boolean instead.<\/p>\n<blockquote>\n<p>🐱‍💻 Bellow an exemple that visits &quot;/books?expanded=true&amp;page=2&quot;:<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Books<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span>params<span class=\"token punctuation\">.<\/span>expanded<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">const<\/span> page <span class=\"token operator\">=<\/span> <span class=\"token function\">parseInt<\/span><span class=\"token punctuation\">(<\/span>params<span class=\"token punctuation\">.<\/span>page<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">||<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>books <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getBooks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>page<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Books<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Assigning to a params key will cause a redirect to the route with updated params.<\/p>\n<p>When you assign to a param, the value will be converted to JSON before being set.<\/p>\n<blockquote>\n<p>💡 Redirects work in batches, so there is no performance loss in multiple assignments.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Paginator<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">handleClick<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    params<span class=\"token punctuation\">.<\/span>filter <span class=\"token operator\">=<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">;<\/span>\n    params<span class=\"token punctuation\">.<\/span>page <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Paginator<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Assigning an empty string to a param will remove it from the url.<\/p>\n<h2 id=\"dynamic-segments\"><a href=\"#dynamic-segments\">Dynamic Segments<\/a><\/h2><p>Part of the route can be an expression started with &quot;:&quot; followed by a param name.<\/p>\n<p>This value will be matched against any string in the same directory position.<\/p>\n<p>The value of the string in the URL will be assigned to the <a href=\"/context\">context<\/a> params and functions below this point in the hierarchy will have access to the new key.<\/p>\n<blockquote>\n<p>🐱‍💻 Bellow an example that visits &quot;/category/suspense?page=2&quot;:<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Books<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> page <span class=\"token operator\">=<\/span> <span class=\"token function\">parseInt<\/span><span class=\"token punctuation\">(<\/span>params<span class=\"token punctuation\">.<\/span>page<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">||<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> category <span class=\"token operator\">=<\/span> params<span class=\"token punctuation\">.<\/span>slug<span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>books <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getBooks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>category<span class=\"token punctuation\">,<\/span> page<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Books<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Books <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Books'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Books<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/category/:slug<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>When a dynamic segment is changed, as for example moving from &quot;/category/suspense&quot; to &quot;/category/comedy&quot;, the component will be terminated and a new instance will be created.<\/p>\n<p>Changing a query param will not re-instantiate the component.<\/p>\n<p>Children of the component will not be re-instantiated automatically, you can set the same route to the children or do it manually if you desire this behavior.<\/p>\n<blockquote>\n<p>💡 The behavior mentioned above solves many of the problems you have to normally deal with manually.<\/p>\n<\/blockquote>\n<h2 id=\"wildcards\"><a href=\"#wildcards\">Wildcards<\/a><\/h2><p>Wildcards are routes declared with &quot;*&quot; as the attribute value.<\/p>\n<p>These routes will match anything if nothing above it matches the requested URL.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Home <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Home'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Home<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>*<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Wildcard <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<p>Wildcards can be prefixed with a segment.<\/p>\n<blockquote>\n<p>✨ this is especially useful for engines that can be mounted in your application.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Home <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Home'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> BlogEngine <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./BlogEngine'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Home<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">BlogEngine<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/blog/*<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<h2 id=\"router\"><a href=\"#router\">Router<\/a><\/h2><p>The <code>router<\/code> key is an object proxy injected into every client instance.<\/p>\n<p>The <code>router<\/code> has two keys:<\/p>\n<ul>\n<li><strong><code>url<\/code><\/strong><\/li>\n<li><strong><code>path<\/code><\/strong><\/li>\n<\/ul>\n<p>The <code>url<\/code> key returns everything after the domain including the path and the query params as a string.<\/p>\n<p>The <code>path<\/code> key returns only the path without query params.<\/p>\n<blockquote>\n<p>💡 Both keys above automatically remove the trailing slash for convenience.<\/p>\n<\/blockquote>\n<p>Assigning to <code>url<\/code> or <code>path<\/code> will cause a redirect.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">prepare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>router<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span>router<span class=\"token punctuation\">.<\/span>path <span class=\"token operator\">==<\/span> <span class=\"token string\">'/'<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      router<span class=\"token punctuation\">.<\/span>path <span class=\"token operator\">=<\/span> <span class=\"token string\">'/dashboard'<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 Under the hood <code>a<\/code> tags with <code>params<\/code> use the <code>router<\/code>.<\/p>\n<\/blockquote>\n<h2 id=\"custom-events\"><a href=\"#custom-events\">Custom Events<\/a><\/h2><p>Updating <code>router.url<\/code> or <code>router.path<\/code> will raise a custom event.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Analytics<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">hydrate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>router<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    window<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span>router<span class=\"token punctuation\">.<\/span>event<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n      console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>router<span class=\"token punctuation\">.<\/span>url<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Analytics<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"special-anchors\"><a href=\"#special-anchors\">Special anchors<\/a><\/h2><p>Anchor tags accept some convenient special attributes besides the regular <code>href<\/code>.<\/p>\n<p>You can set the <code>params<\/code> attribute with an object as the value.<\/p>\n<p>The path will remain the same as the current router path, but the <code>params<\/code> will be replaced by the new params you specify.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a<\/span> <span class=\"token attr-name\">params<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span>page<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> First Page <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>a<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<p>If you wish to just update some params and keep the others, you can use the JavaScript spread operator for that.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a<\/span> <span class=\"token attr-name\">params<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span><span class=\"token operator\">...<\/span>params<span class=\"token punctuation\">,<\/span> page<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> First Page <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>a<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<p>You can set the <code>path<\/code> attribute with a string starting with &quot;/&quot; and no query params.<\/p>\n<p>The params will remain the same, but the <code>path<\/code> will be updated.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a<\/span> <span class=\"token attr-name\">path<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/category/suspense<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Suspense Books <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>a<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<p>Both attributes above can be used at the same time.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a<\/span> <span class=\"token attr-name\">path<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/category/suspense<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">params<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span><span class=\"token operator\">...<\/span>params<span class=\"token punctuation\">,<\/span> page<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Suspense Books <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>a<\/span><span class=\"token punctuation\">><\/span><\/span>\n<\/code><\/pre>\n<h2 id=\"nested-routes\"><a href=\"#nested-routes\">Nested routes<\/a><\/h2><p>The first route to be matched will be rendered.<\/p>\n<p>The other elements with a route will not be rendered, however, elements on the same level without a <code>route<\/code> attribute will render normally.<\/p>\n<p>The router will lookup for one route per dom depth level, this allows you to have nested routing behavior.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Home <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./Home'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">renderPage<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>section<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/page/about<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> About Page <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/page/contact<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Contact Page <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>section<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Home<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Page<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/page/:slug<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about <a href=\"/two-way-bindings\">two-way bindings<\/a>.<\/p>\n","description":"Nullstack has built-in routes, it would make no sense otherwise since web applications are expected to have hyperlinks.","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"routes-and-params"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/server-functions.html b/docs/server-functions.html
index 8ffd53d6..db38709d 100644
--- a/docs/server-functions.html
+++ b/docs/server-functions.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -182,15 +182,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about the
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Server Functions - Nullstack","description":"Server functions are specialized microservices that at transpile time are converted into API entry points"};
       window.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/server-functions":{"title":"Server Functions","html":"<p>Server functions are specialized microservices that at transpile time are converted into API entry points.<\/p>\n<p>To flag a function as a server function, you must declare it as <code>static async<\/code>.<\/p>\n<p>Being a static function means it has no access to the instance scope.<\/p>\n<p>However, instead of calling the static version from the <em>class<\/em>, you must invoke it as an <em>instance<\/em> function.<\/p>\n<p>Server functions can be called anytime in your code and are not limited to <a href=\"/server-side-rendering\">prerender<\/a> steps.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">increment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count<span class=\"token operator\">++<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">handleClick<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">increment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Learn more about the <a href=\"/context\">server context<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"client-behavior\"><a href=\"#client-behavior\">Client behavior<\/a><\/h2><p>When you call a server function from the client, the arguments will be serialized as JSON.<\/p>\n<p>The arguments will be posted against the automatically generated API and merged with the server context when it reaches the server.<\/p>\n<p>The return value of the server function will be serialized back to the client and can be seamlessly used as if it were a local function.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">increment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count<span class=\"token operator\">++<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> context<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">handleClick<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">increment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"server-behavior\"><a href=\"#server-behavior\">Server behavior<\/a><\/h2><p>Server functions will be used as local functions, simply aliasing the <em>instance<\/em> call to the <em>class<\/em> and merging the arguments with the server context.<\/p>\n<h2 id=\"date-convenience\"><a href=\"#date-convenience\">Date Convenience<\/a><\/h2><p>Dates are serialized as UTC in JSON and deserialized back to <code>Date<\/code> objects.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> date <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Date<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> verified <span class=\"token operator\">=<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">verifyDay<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>date<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">verifyDay<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>date<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> date<span class=\"token punctuation\">.<\/span><span class=\"token function\">getDay<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">===<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Date<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getDay<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"fetch-convenience\"><a href=\"#fetch-convenience\">Fetch Convenience<\/a><\/h2><p><code>fetch<\/code> is available in both server and client functions for the sake of isomorphy.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> url <span class=\"token operator\">=<\/span> <span class=\"token string\">'https://api.github.com/repos/nullstack/nullstack/issues'<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> response <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span>url<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>issues <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> response<span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"server-only-imports\"><a href=\"#server-only-imports\">Server only imports<\/a><\/h2><p>Imported dependencies that are only used inside server functions will be excluded from the client bundle.<\/p>\n<p>This is useful for both accessing node.js exclusive modules and reducing the client bundle size by preprocessing data like markdown without having to expose the dependency to the end-user.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span>readFileSync<span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'fs'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span>Remarkable<span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'remarkable'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">getTasks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> readme <span class=\"token operator\">=<\/span> <span class=\"token function\">readFileSync<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'README.md'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'utf-8'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Remarkable<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span>readme<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"security\"><a href=\"#security\">Security<\/a><\/h2><p>Keep in mind that every server function is similar to an Express route in API and must be coded without depending on view logic for security.<\/p>\n<blockquote>\n<p>🔒 Server functions with the name starting with &quot;start&quot; (and optionally followed by an uppercase letter) do not generate an API endpoint to avoid malicious context flooding.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">getCount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>request<span class=\"token punctuation\">,<\/span> count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>request<span class=\"token punctuation\">.<\/span>session<span class=\"token punctuation\">.<\/span>user<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> count<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 Server functions are not exposed to the client.<\/p>\n<\/blockquote>\n<blockquote>\n<p>✨ Learn more about the <a href=\"/njs-file-extension\">NJS file extension<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"reserved-words\"><a href=\"#reserved-words\">Reserved words<\/a><\/h2><p>Server function names cannot collide with instance method names from the current class or its parent classes.<\/p>\n<p>The following words cannot be used in server functions:<\/p>\n<ul>\n<li><code>prepare<\/code><\/li>\n<li><code>initiate<\/code><\/li>\n<li><code>hydrate<\/code><\/li>\n<li><code>update<\/code><\/li>\n<li><code>terminate<\/code><\/li>\n<\/ul>\n<p>Server functions named <code>start<\/code> will not generate an API endpoint and can only be called by other server functions.<\/p>\n<h2 id=\"caveats\"><a href=\"#caveats\">Caveats<\/a><\/h2><p>Automatically generated API endpoints are not meant to be used by 3rd-party apps.<\/p>\n<p>The URL and implementation may change between versions of Nullstack.<\/p>\n<blockquote>\n<p>✨ If you want to build an API, learn more about <a href=\"/server-request-and-response\">how to create an API with Nullstack<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about the <a href=\"/context\">context<\/a>.<\/p>\n","description":"Server functions are specialized microservices that at transpile time are converted into API entry points","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"server-functions"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/server-functions/index.html b/docs/server-functions/index.html
index 8ffd53d6..db38709d 100644
--- a/docs/server-functions/index.html
+++ b/docs/server-functions/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -182,15 +182,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about the
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Server Functions - Nullstack","description":"Server functions are specialized microservices that at transpile time are converted into API entry points"};
       window.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/server-functions":{"title":"Server Functions","html":"<p>Server functions are specialized microservices that at transpile time are converted into API entry points.<\/p>\n<p>To flag a function as a server function, you must declare it as <code>static async<\/code>.<\/p>\n<p>Being a static function means it has no access to the instance scope.<\/p>\n<p>However, instead of calling the static version from the <em>class<\/em>, you must invoke it as an <em>instance<\/em> function.<\/p>\n<p>Server functions can be called anytime in your code and are not limited to <a href=\"/server-side-rendering\">prerender<\/a> steps.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">increment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count<span class=\"token operator\">++<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">handleClick<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">increment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Learn more about the <a href=\"/context\">server context<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"client-behavior\"><a href=\"#client-behavior\">Client behavior<\/a><\/h2><p>When you call a server function from the client, the arguments will be serialized as JSON.<\/p>\n<p>The arguments will be posted against the automatically generated API and merged with the server context when it reaches the server.<\/p>\n<p>The return value of the server function will be serialized back to the client and can be seamlessly used as if it were a local function.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">increment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">context<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    context<span class=\"token punctuation\">.<\/span>count<span class=\"token operator\">++<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> context<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">handleClick<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">increment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"server-behavior\"><a href=\"#server-behavior\">Server behavior<\/a><\/h2><p>Server functions will be used as local functions, simply aliasing the <em>instance<\/em> call to the <em>class<\/em> and merging the arguments with the server context.<\/p>\n<h2 id=\"date-convenience\"><a href=\"#date-convenience\">Date Convenience<\/a><\/h2><p>Dates are serialized as UTC in JSON and deserialized back to <code>Date<\/code> objects.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> date <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Date<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> verified <span class=\"token operator\">=<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">verifyDay<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>date<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">verifyDay<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>date<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> date<span class=\"token punctuation\">.<\/span><span class=\"token function\">getDay<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">===<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Date<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getDay<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"fetch-convenience\"><a href=\"#fetch-convenience\">Fetch Convenience<\/a><\/h2><p><code>fetch<\/code> is available in both server and client functions for the sake of isomorphy.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">initiate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> url <span class=\"token operator\">=<\/span> <span class=\"token string\">'https://api.github.com/repos/nullstack/nullstack/issues'<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> response <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span>url<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>issues <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> response<span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"server-only-imports\"><a href=\"#server-only-imports\">Server only imports<\/a><\/h2><p>Imported dependencies that are only used inside server functions will be excluded from the client bundle.<\/p>\n<p>This is useful for both accessing node.js exclusive modules and reducing the client bundle size by preprocessing data like markdown without having to expose the dependency to the end-user.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span>readFileSync<span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'fs'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span>Remarkable<span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'remarkable'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">getTasks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> readme <span class=\"token operator\">=<\/span> <span class=\"token function\">readFileSync<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'README.md'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'utf-8'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Remarkable<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span>readme<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"security\"><a href=\"#security\">Security<\/a><\/h2><p>Keep in mind that every server function is similar to an Express route in API and must be coded without depending on view logic for security.<\/p>\n<blockquote>\n<p>🔒 Server functions with the name starting with &quot;start&quot; (and optionally followed by an uppercase letter) do not generate an API endpoint to avoid malicious context flooding.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">getCount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>request<span class=\"token punctuation\">,<\/span> count<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>request<span class=\"token punctuation\">.<\/span>session<span class=\"token punctuation\">.<\/span>user<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> count<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Component<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 Server functions are not exposed to the client.<\/p>\n<\/blockquote>\n<blockquote>\n<p>✨ Learn more about the <a href=\"/njs-file-extension\">NJS file extension<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"reserved-words\"><a href=\"#reserved-words\">Reserved words<\/a><\/h2><p>Server function names cannot collide with instance method names from the current class or its parent classes.<\/p>\n<p>The following words cannot be used in server functions:<\/p>\n<ul>\n<li><code>prepare<\/code><\/li>\n<li><code>initiate<\/code><\/li>\n<li><code>hydrate<\/code><\/li>\n<li><code>update<\/code><\/li>\n<li><code>terminate<\/code><\/li>\n<\/ul>\n<p>Server functions named <code>start<\/code> will not generate an API endpoint and can only be called by other server functions.<\/p>\n<h2 id=\"caveats\"><a href=\"#caveats\">Caveats<\/a><\/h2><p>Automatically generated API endpoints are not meant to be used by 3rd-party apps.<\/p>\n<p>The URL and implementation may change between versions of Nullstack.<\/p>\n<blockquote>\n<p>✨ If you want to build an API, learn more about <a href=\"/server-request-and-response\">how to create an API with Nullstack<\/a>.<\/p>\n<\/blockquote>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about the <a href=\"/context\">context<\/a>.<\/p>\n","description":"Server functions are specialized microservices that at transpile time are converted into API entry points","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"server-functions"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/server-request-and-response.html b/docs/server-request-and-response.html
index 3a55cc99..d1dcb9ea 100644
--- a/docs/server-request-and-response.html
+++ b/docs/server-request-and-response.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -111,15 +111,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about <a
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Server request and response - Nullstack","description":"The server key is a proxy around the express instance that runs Nullstack under the hood"};
       window.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/server-request-and-response":{"title":"Server request and response","html":"<h2 id=\"the-server-key\"><a href=\"#the-server-key\">The server key<\/a><\/h2><p>The server key is a proxy around the <a href=\"https://expressjs.com\" target=\"_blank\" rel=\"noopener\">Express<\/a> instance that runs Nullstack under the hood.<\/p>\n<p>The server object is present only in the <em>server<\/em> context.<\/p>\n<p>The following functions are tunneled back to the Express server:<\/p>\n<ul>\n<li><code>get<\/code><\/li>\n<li><code>post<\/code><\/li>\n<li><code>put<\/code><\/li>\n<li><code>patch<\/code><\/li>\n<li><code>delete<\/code><\/li>\n<li><code>options<\/code><\/li>\n<li><code>head<\/code><\/li>\n<li><code>use<\/code><\/li>\n<\/ul>\n<blockquote>\n<p>✨ If you wanna know how to make an API with Nullstack, this is the way.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>server<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    server<span class=\"token punctuation\">.<\/span><span class=\"token function\">get<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'/api/books'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">request<span class=\"token punctuation\">,<\/span> response<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n      response<span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>books<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Other available keys are:<\/p>\n<ul>\n<li><strong>port<\/strong>: <code>integer<\/code><\/li>\n<li><strong>maximumPayloadSize<\/strong>: <code>string<\/code><\/li>\n<li><strong>cors<\/strong>: <code>object<\/code><\/li>\n<\/ul>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>server<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    server<span class=\"token punctuation\">.<\/span>port <span class=\"token operator\">=<\/span> <span class=\"token number\">3000<\/span><span class=\"token punctuation\">;<\/span>\n    server<span class=\"token punctuation\">.<\/span>maximumPayloadSize <span class=\"token operator\">=<\/span> <span class=\"token string\">'5mb'<\/span><span class=\"token punctuation\">;<\/span>\n    server<span class=\"token punctuation\">.<\/span>cors <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span>\n      origin<span class=\"token operator\">:<\/span> <span class=\"token string\">'http://localhost:6969'<\/span><span class=\"token punctuation\">,<\/span>\n      optionsSuccessStatus<span class=\"token operator\">:<\/span> <span class=\"token number\">200<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>The <code>cors<\/code> object will be passed as the argument to <a href=\"https://expressjs.com/en/resources/middleware/cors.html\" target=\"_blank\" rel=\"noopener\">express cors plugin<\/a>.<\/p>\n<h2 id=\"request-and-response\"><a href=\"#request-and-response\">Request and Response<\/a><\/h2><p>Every server function context is merged with the original <code>request<\/code> and <code>response<\/code> objects from Express.<\/p>\n<p>If you raise a response manually it will override the framework's <a href=\"/server-side-rendering\">server-side rendering<\/a> <code>response<\/code>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">getBooks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>request<span class=\"token punctuation\">,<\/span> response<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>request<span class=\"token punctuation\">.<\/span>session<span class=\"token punctuation\">.<\/span>user<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      response<span class=\"token punctuation\">.<\/span><span class=\"token function\">status<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">401<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>unauthorized<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about <a href=\"/styles\">styles<\/a>.<\/p>\n","description":"The server key is a proxy around the express instance that runs Nullstack under the hood","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"server-request-and-response"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/server-request-and-response/index.html b/docs/server-request-and-response/index.html
index 3a55cc99..d1dcb9ea 100644
--- a/docs/server-request-and-response/index.html
+++ b/docs/server-request-and-response/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -111,15 +111,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about <a
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Server request and response - Nullstack","description":"The server key is a proxy around the express instance that runs Nullstack under the hood"};
       window.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/server-request-and-response":{"title":"Server request and response","html":"<h2 id=\"the-server-key\"><a href=\"#the-server-key\">The server key<\/a><\/h2><p>The server key is a proxy around the <a href=\"https://expressjs.com\" target=\"_blank\" rel=\"noopener\">Express<\/a> instance that runs Nullstack under the hood.<\/p>\n<p>The server object is present only in the <em>server<\/em> context.<\/p>\n<p>The following functions are tunneled back to the Express server:<\/p>\n<ul>\n<li><code>get<\/code><\/li>\n<li><code>post<\/code><\/li>\n<li><code>put<\/code><\/li>\n<li><code>patch<\/code><\/li>\n<li><code>delete<\/code><\/li>\n<li><code>options<\/code><\/li>\n<li><code>head<\/code><\/li>\n<li><code>use<\/code><\/li>\n<\/ul>\n<blockquote>\n<p>✨ If you wanna know how to make an API with Nullstack, this is the way.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>server<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    server<span class=\"token punctuation\">.<\/span><span class=\"token function\">get<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'/api/books'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">request<span class=\"token punctuation\">,<\/span> response<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n      response<span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>books<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Other available keys are:<\/p>\n<ul>\n<li><strong>port<\/strong>: <code>integer<\/code><\/li>\n<li><strong>maximumPayloadSize<\/strong>: <code>string<\/code><\/li>\n<li><strong>cors<\/strong>: <code>object<\/code><\/li>\n<\/ul>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>server<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    server<span class=\"token punctuation\">.<\/span>port <span class=\"token operator\">=<\/span> <span class=\"token number\">3000<\/span><span class=\"token punctuation\">;<\/span>\n    server<span class=\"token punctuation\">.<\/span>maximumPayloadSize <span class=\"token operator\">=<\/span> <span class=\"token string\">'5mb'<\/span><span class=\"token punctuation\">;<\/span>\n    server<span class=\"token punctuation\">.<\/span>cors <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span>\n      origin<span class=\"token operator\">:<\/span> <span class=\"token string\">'http://localhost:6969'<\/span><span class=\"token punctuation\">,<\/span>\n      optionsSuccessStatus<span class=\"token operator\">:<\/span> <span class=\"token number\">200<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>The <code>cors<\/code> object will be passed as the argument to <a href=\"https://expressjs.com/en/resources/middleware/cors.html\" target=\"_blank\" rel=\"noopener\">express cors plugin<\/a>.<\/p>\n<h2 id=\"request-and-response\"><a href=\"#request-and-response\">Request and Response<\/a><\/h2><p>Every server function context is merged with the original <code>request<\/code> and <code>response<\/code> objects from Express.<\/p>\n<p>If you raise a response manually it will override the framework's <a href=\"/server-side-rendering\">server-side rendering<\/a> <code>response<\/code>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">getBooks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>request<span class=\"token punctuation\">,<\/span> response<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>request<span class=\"token punctuation\">.<\/span>session<span class=\"token punctuation\">.<\/span>user<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      response<span class=\"token punctuation\">.<\/span><span class=\"token function\">status<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">401<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>unauthorized<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about <a href=\"/styles\">styles<\/a>.<\/p>\n","description":"The server key is a proxy around the express instance that runs Nullstack under the hood","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"server-request-and-response"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/server-side-rendering.html b/docs/server-side-rendering.html
index ac568207..f5b7d80b 100644
--- a/docs/server-side-rendering.html
+++ b/docs/server-side-rendering.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -45,15 +45,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about <a
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Server-Side Rendering - Nullstack","description":"Nullstack optimizes SEO and response times out of the box by generating HTML for the route that you enter the application from"};
       window.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/server-side-rendering":{"title":"Server-Side Rendering","html":"<p>Nullstack optimizes SEO and response times out of the box by generating HTML for the <a href=\"/routes-and-params\">route<\/a> that you enter the application from.<\/p>\n<p>Server-side rendering is good for SEO since it gives as fast as possible crawlable markup for search engines.<\/p>\n<p>Nullstack starts the application for the user by first serving HTML of only the requested page with no overhead.<\/p>\n<p>Before serving the HTML, Nullstack will wait for <a href=\"/full-stack-lifecycle\"><code>prepare<\/code><\/a> and <a href=\"/full-stack-lifecycle\"><code>initiate<\/code><\/a> of all components of that route to be resolved.<\/p>\n<p>While server-side rendering all server functions run locally without the need to fetch an API, making the process even faster.<\/p>\n<p>After the document is already painted in the browser, Nullstack loads the JavaScript client bundle and starts the <a href=\"/full-stack-lifecycle\">hydration<\/a> process.<\/p>\n<p>No further requests to the server are made to recover the application state during <a href=\"/full-stack-lifecycle\">hydration<\/a>.<\/p>\n<p>The page head will generate the necessary meta tags for SEO based on the contents of the <a href=\"/context-project\"><code>project<\/code><\/a> and <a href=\"/context-page\"><code>page<\/code><\/a> context keys.<\/p>\n<p>This is the default build mode and also the mode used for development.<\/p>\n<p>It is a good pratice to follow SSR patterns in development in order to be able to easily change betweeb build modes in production.<\/p>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about <a href=\"/static-site-generation\">static site generation<\/a>.<\/p>\n","description":"Nullstack optimizes SEO and response times out of the box by generating HTML for the route that you enter the application from","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"server-side-rendering"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/server-side-rendering/index.html b/docs/server-side-rendering/index.html
index ac568207..f5b7d80b 100644
--- a/docs/server-side-rendering/index.html
+++ b/docs/server-side-rendering/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -45,15 +45,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about <a
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Server-Side Rendering - Nullstack","description":"Nullstack optimizes SEO and response times out of the box by generating HTML for the route that you enter the application from"};
       window.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/server-side-rendering":{"title":"Server-Side Rendering","html":"<p>Nullstack optimizes SEO and response times out of the box by generating HTML for the <a href=\"/routes-and-params\">route<\/a> that you enter the application from.<\/p>\n<p>Server-side rendering is good for SEO since it gives as fast as possible crawlable markup for search engines.<\/p>\n<p>Nullstack starts the application for the user by first serving HTML of only the requested page with no overhead.<\/p>\n<p>Before serving the HTML, Nullstack will wait for <a href=\"/full-stack-lifecycle\"><code>prepare<\/code><\/a> and <a href=\"/full-stack-lifecycle\"><code>initiate<\/code><\/a> of all components of that route to be resolved.<\/p>\n<p>While server-side rendering all server functions run locally without the need to fetch an API, making the process even faster.<\/p>\n<p>After the document is already painted in the browser, Nullstack loads the JavaScript client bundle and starts the <a href=\"/full-stack-lifecycle\">hydration<\/a> process.<\/p>\n<p>No further requests to the server are made to recover the application state during <a href=\"/full-stack-lifecycle\">hydration<\/a>.<\/p>\n<p>The page head will generate the necessary meta tags for SEO based on the contents of the <a href=\"/context-project\"><code>project<\/code><\/a> and <a href=\"/context-page\"><code>page<\/code><\/a> context keys.<\/p>\n<p>This is the default build mode and also the mode used for development.<\/p>\n<p>It is a good pratice to follow SSR patterns in development in order to be able to easily change betweeb build modes in production.<\/p>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about <a href=\"/static-site-generation\">static site generation<\/a>.<\/p>\n","description":"Nullstack optimizes SEO and response times out of the box by generating HTML for the route that you enter the application from","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"server-side-rendering"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/service-worker.html b/docs/service-worker.html
index 13c3e161..677ee6de 100644
--- a/docs/service-worker.html
+++ b/docs/service-worker.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -281,15 +281,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn <a href="
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Context Service Worker - Nullstack","description":"The worker object is a proxy in the Nullstack Context available in both client and server and gives you granular control of your PWA behavior"};
       window.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/service-worker":{"title":"Context Service Worker","html":"<ul>\n<li>Type: <code>object<\/code><\/li>\n<li>Origin: <a href=\"/context#----nullstack-context\">Nullstack Context<\/a><\/li>\n<li>Availability: server/client<\/li>\n<li><strong>readwrite<\/strong> in <strong>server<\/strong> context<\/li>\n<li><strong>readonly<\/strong> in <strong>client<\/strong> context<\/li>\n<\/ul>\n<p>It gives you granular control of your PWA behavior.<\/p>\n<p><code>worker<\/code> keys will be used to generate the service worker file and should be set during the <a href=\"/application-startup\">application startup<\/a>.<\/p>\n<p><code>worker<\/code> keys are frozen after the <a href=\"/application-startup\">application startup<\/a>.<\/p>\n<p>The following keys are available in the object during the startup:<\/p>\n<ul>\n<li><strong>enabled<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>preload<\/strong>: <code>string array<\/code> (relative paths)<\/li>\n<li><strong>headers<\/strong>: <code>object<\/code><\/li>\n<li><strong>cdn<\/strong>: <code>string<\/code> (absolute url)<\/li>\n<li><strong>api<\/strong>: <code>string<\/code> (absolute url)<\/li>\n<li><strong>protocol<\/strong>: <code>string<\/code> (http or https)<\/li>\n<\/ul>\n<p>The <code>enabled<\/code> key defines if the service worker will be automatically registered by Nullstack.<\/p>\n<p>By default <code>enabled<\/code> is set to <code>true<\/code> on production mode and <code>false<\/code> on development mode.<\/p>\n<p><code>preload<\/code> is an array of paths that will be cached when the service worker is installed.<\/p>\n<p>The assets required to start the application will be preloaded automatically, and you should configure only the extra pages you want to have available offline.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> path <span class=\"token keyword\">from<\/span> <span class=\"token string\">'path'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span>readdirSync<span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'fs'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>worker<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> articles <span class=\"token operator\">=<\/span> <span class=\"token function\">readdirSync<\/span><span class=\"token punctuation\">(<\/span>path<span class=\"token punctuation\">.<\/span><span class=\"token function\">join<\/span><span class=\"token punctuation\">(<\/span>__dirname<span class=\"token punctuation\">,<\/span> <span class=\"token string\">'..'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'articles'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    worker<span class=\"token punctuation\">.<\/span>preload <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span>\n      <span class=\"token operator\">...<\/span>articles<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">article<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token string\">'/'<\/span> <span class=\"token operator\">+<\/span> article<span class=\"token punctuation\">.<\/span><span class=\"token function\">replace<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'.md'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span>\n      <span class=\"token string\">'/nullstack.svg'<\/span><span class=\"token punctuation\">,<\/span>\n      <span class=\"token string\">'/documentation'<\/span><span class=\"token punctuation\">,<\/span>\n      <span class=\"token string\">'/components'<\/span>\n    <span class=\"token punctuation\">]<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 the example above is extracted from this repository and allows the documentation to be fully accessible offline.<\/p>\n<\/blockquote>\n<p>The following keys are available as <strong>readonly<\/strong> in the client context:<\/p>\n<ul>\n<li><strong>enabled<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>preload<\/strong>: <code>string array<\/code> (relative paths)<\/li>\n<li><strong>online<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>fetching<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>responsive<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>installation<\/strong>: <code>BeforeInstallPromptEvent<\/code><\/li>\n<li><strong>registration<\/strong>: <code>ServiceWorkerRegistration<\/code><\/li>\n<li><strong>queues<\/strong>: <code>object<\/code><\/li>\n<\/ul>\n<p>The following keys are available as <strong>readwrite<\/strong> in the client context:<\/p>\n<ul>\n<li><strong>headers<\/strong>: <code>object<\/code><\/li>\n<\/ul>\n<p>The <code>responsive<\/code> key determines if the application has all the responses it needs to render the current page.<\/p>\n<p>Nullstack will try to keep your application responsive as long as possible and set the key to <code>false<\/code> only when there are no ways of retrieving any response from the network or offline according to the fetch strategy for the <a href=\"/context-environment\">environment<\/a>.<\/p>\n<p>The <code>online<\/code> key will listen for network events and rerender the application when <code>navigator.onLine<\/code> value changes.<\/p>\n<p>When the application is back online Nullstack will try to make the application responsive again and rerender if necessary.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token comment\">// ...<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n \n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>worker<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>worker<span class=\"token punctuation\">.<\/span>responsive<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">return<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">OfflineWarning<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n    <span class=\"token punctuation\">}<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Home<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<p>You can access the current service worker <strong>registration<\/strong> and <strong>installation<\/strong> from the <code>worker<\/code> key to control the flow of your PWA.<\/p>\n<p>The <code>registration<\/code> key refers to the service worker registration and will be only available once the registration process is complete.<\/p>\n<p>The <code>installation<\/code> key refers to the deferred installation prompt event and will only be available if the <code>beforeinstallprompt<\/code> event is triggered.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">PWAInstaller<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  installed <span class=\"token operator\">=<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span>\n  hidden <span class=\"token operator\">=<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">prompt<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>worker<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">try<\/span> <span class=\"token punctuation\">{<\/span>\n      worker<span class=\"token punctuation\">.<\/span>installation<span class=\"token punctuation\">.<\/span><span class=\"token function\">prompt<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span>outcome<span class=\"token punctuation\">}<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> worker<span class=\"token punctuation\">.<\/span>installation<span class=\"token punctuation\">.<\/span>userChoice<span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>outcome <span class=\"token operator\">===<\/span> <span class=\"token string\">'accepted'<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n        console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'User accepted the A2HS prompt'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token punctuation\">{<\/span>\n        console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'User dismissed the A2HS prompt'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token punctuation\">}<\/span>\n    <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">finally<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>hidden <span class=\"token operator\">=<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>worker<span class=\"token punctuation\">,<\/span> project<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>hidden<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>worker<span class=\"token punctuation\">.<\/span>installation<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>img<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>project<span class=\"token punctuation\">.<\/span>favicon<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> Do you want to add <span class=\"token punctuation\">{<\/span>project<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">}<\/span> to your home screen<span class=\"token operator\">?<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>prompt<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Install <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span>hidden<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Not Now <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> PWAInstaller<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"loading-screens\"><a href=\"#loading-screens\">Loading Screens<\/a><\/h2><p>When a <a href=\"/server-functions\">server function<\/a> is called <code>fetching<\/code> will be set to <code>true<\/code> until the response is resolved.<\/p>\n<p>When a <a href=\"/server-functions\">server function<\/a> is called a key with the name of the <a href=\"/server-functions\">server function<\/a> invoked will be set in the <code>queues<\/code> object until the response is resolved.<\/p>\n<p>The key will be an array with all arguments passed to the server function.<\/p>\n<p>Any key you invoke on the <code>queues<\/code> object will always return an array instead of <code>undefined<\/code> for consistency.<\/p>\n<p>When the server is emulating the client context for <a href=\"/server-side-rendering\">server-side rendering<\/a>, every key of the <code>queues<\/code> object will always return an empty array, saving multiple render cycles in performance.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Page<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">save<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> valid <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token comment\">// ...<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">submit<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">save<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> valid<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> worker <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> loadingValidSave <span class=\"token operator\">=<\/span> <span class=\"token operator\">!<\/span><span class=\"token operator\">!<\/span>worker<span class=\"token punctuation\">.<\/span>queues<span class=\"token punctuation\">.<\/span>save\n      <span class=\"token punctuation\">.<\/span><span class=\"token function\">find<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">args<\/span> <span class=\"token operator\">=><\/span> args<span class=\"token punctuation\">.<\/span>valid<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>form<\/span> <span class=\"token attr-name\">onsubmit<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>submit<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token punctuation\">{<\/span>worker<span class=\"token punctuation\">.<\/span>fetching <span class=\"token operator\">&amp;&amp;<\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>span<\/span><span class=\"token punctuation\">><\/span><\/span> loading<span class=\"token operator\">...<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>span<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">disabled<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>loadingValidSave<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n          Save\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Page<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"custom-headers\"><a href=\"#custom-headers\">Custom headers<\/a><\/h2><p>You can use the <code>headers<\/code> key to configure the headers that the worker will use when fetching a server function.<\/p>\n<blockquote>\n<p>🔥 Headers will be ignored when a server function is called during the <a href=\"/server-side-rendering\">server-side rendering<\/a> process.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">LoginPage<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">submit<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>worker<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token comment\">// ...<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>headers<span class=\"token punctuation\">[<\/span><span class=\"token string\">'Authorization'<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Bearer <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>token<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token comment\">// ...<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">authorize<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>request<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> authorization <span class=\"token operator\">=<\/span> request<span class=\"token punctuation\">.<\/span>headers<span class=\"token punctuation\">[<\/span><span class=\"token string\">'Authorization'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token comment\">// ...<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> LoginPage<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Learn more about the <a href=\"/server-request-and-response\">server request and response<\/a><\/p>\n<\/blockquote>\n<h2 id=\"server-side-render-strategy\"><a href=\"#server-side-render-strategy\">Server-side render strategy<\/a><\/h2><ul>\n<li>Requests for different origins will be fetched normally;<\/li>\n<li>Requests that are not GET will be fetched normally;<\/li>\n<li>Fingerprinted assets will be loaded into cache at installation time;<\/li>\n<li>Fingerprinted assets will be loaded from cache first then fallback to the network if needed;<\/li>\n<li>Paths with an extension will be retrieved stale and update the cache in the background for subsequent request;<\/li>\n<li>Navigation paths will be loaded from the network then fallback to a page in which <code>worker.responsive<\/code> and <code>worker.online<\/code> are set to <code>false<\/code>;<\/li>\n<\/ul>\n<h2 id=\"static-site-generation-strategy\"><a href=\"#static-site-generation-strategy\">Static-site generation strategy<\/a><\/h2><ul>\n<li>Requests for different origins will be fetched normally;<\/li>\n<li>Requests that are not GET will be fetched normally;<\/li>\n<li>Fingerprinted assets will be loaded into cache at installation time;<\/li>\n<li>Fingerprinted assets will be loaded from cache first then fallback to the network if needed;<\/li>\n<li>Paths with an extension will be retrieved stale and update the cache in the background for subsequent request;<\/li>\n<li>The home page will be loaded network first and then fallback to a cached copy if needed;<\/li>\n<li>Navigation paths will instead load only the static API data and merge it with the application template to generate a response.<\/li>\n<li>Navigating to a static route will cache only the data of that page;<\/li>\n<li>When data is not available in the cache or network it will fallback to a page in which <code>worker.responsive<\/code> and <code>worker.online<\/code> are set to <code>false<\/code>;<\/li>\n<\/ul>\n<h2 id=\"custom-strategy\"><a href=\"#custom-strategy\">Custom Strategy<\/a><\/h2><p>Nullstack will install automatically your service worker if <code>enabled<\/code> is set to <code>true<\/code> with the following events:<\/p>\n<ul>\n<li><code>install<\/code><\/li>\n<li><code>activate<\/code><\/li>\n<li><code>fetch<\/code><\/li>\n<\/ul>\n<p>You can override any of those events by creating a <strong>service-worker.js<\/strong> in the public folder;<\/p>\n<p>If any of the keywords above are found Nullstack will inject your function in the service worker code instead of the default.<\/p>\n<p>For convenience a <code>context<\/code> key is injected in the service worker <code>self<\/code> with the following keys:<\/p>\n<ul>\n<li><code>worker<\/code><\/li>\n<li><a href=\"/context-project\"><code>project<\/code><\/a><\/li>\n<li><a href=\"/context-environment\"><code>environment<\/code><\/a><\/li>\n<\/ul>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">function<\/span> <span class=\"token function\">activate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">event<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  event<span class=\"token punctuation\">.<\/span><span class=\"token function\">waitUntil<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> cacheNames <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> caches<span class=\"token punctuation\">.<\/span><span class=\"token function\">keys<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> cachesToDelete <span class=\"token operator\">=<\/span> cacheNames<span class=\"token punctuation\">.<\/span><span class=\"token function\">filter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">cacheName<\/span> <span class=\"token operator\">=><\/span> cacheName <span class=\"token operator\">!==<\/span> self<span class=\"token punctuation\">.<\/span>context<span class=\"token punctuation\">.<\/span>environment<span class=\"token punctuation\">.<\/span>key<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">await<\/span> Promise<span class=\"token punctuation\">.<\/span><span class=\"token function\">all<\/span><span class=\"token punctuation\">(<\/span>cachesToDelete<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">cacheName<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> caches<span class=\"token punctuation\">.<\/span><span class=\"token function\">delete<\/span><span class=\"token punctuation\">(<\/span>cacheName<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>self<span class=\"token punctuation\">.<\/span>registration<span class=\"token punctuation\">.<\/span>navigationPreload<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">await<\/span> self<span class=\"token punctuation\">.<\/span>registration<span class=\"token punctuation\">.<\/span>navigationPreload<span class=\"token punctuation\">.<\/span><span class=\"token function\">enable<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n    self<span class=\"token punctuation\">.<\/span>clients<span class=\"token punctuation\">.<\/span><span class=\"token function\">claim<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\nself<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'activate'<\/span><span class=\"token punctuation\">,<\/span> activate<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 The example above is extracted from the generated service worker and uses <code>self.context.environment.key<\/code><\/p>\n<\/blockquote>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn <a href=\"/how-to-deploy-a-nullstack-application\">how to deploy a Nullstack application<\/a>.<\/p>\n","description":"The worker object is a proxy in the Nullstack Context available in both client and server and gives you granular control of your PWA behavior","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"service-worker"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/service-worker.js b/docs/service-worker.js
index 7ff36a9e..5d8444af 100644
--- a/docs/service-worker.js
+++ b/docs/service-worker.js
@@ -5,7 +5,7 @@ self.context = {
     "development": false,
     "production": true,
     "mode": "ssg",
-    "key": "360045b75355bf43c2fdd604465e03af35097bee"
+    "key": "dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"
   },
   "project": {
     "domain": "nullstack.app",
@@ -32,7 +32,10 @@ self.context = {
     },
     "backgroundColor": "#2d3748"
   },
-  "settings": {},
+  "settings": {
+    "production": {},
+    "development": {}
+  },
   "worker": {
     "enabled": true,
     "fetching": false,
@@ -196,9 +199,6 @@ function install(event) {
   const urls = [
     '/',
     ...self.context.worker.preload.map(toAPI),
-    '/nullstack/' + self.context.environment.key + '/offline/index.html',
-    '/nullstack/' + self.context.environment.key + '/client.css',
-    '/nullstack/' + self.context.environment.key + '/client.js',
     '/manifest.json'
   ];
   event.waitUntil(async function () {
diff --git a/docs/service-worker/index.html b/docs/service-worker/index.html
index 13c3e161..677ee6de 100644
--- a/docs/service-worker/index.html
+++ b/docs/service-worker/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -281,15 +281,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn <a href="
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Context Service Worker - Nullstack","description":"The worker object is a proxy in the Nullstack Context available in both client and server and gives you granular control of your PWA behavior"};
       window.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/service-worker":{"title":"Context Service Worker","html":"<ul>\n<li>Type: <code>object<\/code><\/li>\n<li>Origin: <a href=\"/context#----nullstack-context\">Nullstack Context<\/a><\/li>\n<li>Availability: server/client<\/li>\n<li><strong>readwrite<\/strong> in <strong>server<\/strong> context<\/li>\n<li><strong>readonly<\/strong> in <strong>client<\/strong> context<\/li>\n<\/ul>\n<p>It gives you granular control of your PWA behavior.<\/p>\n<p><code>worker<\/code> keys will be used to generate the service worker file and should be set during the <a href=\"/application-startup\">application startup<\/a>.<\/p>\n<p><code>worker<\/code> keys are frozen after the <a href=\"/application-startup\">application startup<\/a>.<\/p>\n<p>The following keys are available in the object during the startup:<\/p>\n<ul>\n<li><strong>enabled<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>preload<\/strong>: <code>string array<\/code> (relative paths)<\/li>\n<li><strong>headers<\/strong>: <code>object<\/code><\/li>\n<li><strong>cdn<\/strong>: <code>string<\/code> (absolute url)<\/li>\n<li><strong>api<\/strong>: <code>string<\/code> (absolute url)<\/li>\n<li><strong>protocol<\/strong>: <code>string<\/code> (http or https)<\/li>\n<\/ul>\n<p>The <code>enabled<\/code> key defines if the service worker will be automatically registered by Nullstack.<\/p>\n<p>By default <code>enabled<\/code> is set to <code>true<\/code> on production mode and <code>false<\/code> on development mode.<\/p>\n<p><code>preload<\/code> is an array of paths that will be cached when the service worker is installed.<\/p>\n<p>The assets required to start the application will be preloaded automatically, and you should configure only the extra pages you want to have available offline.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> path <span class=\"token keyword\">from<\/span> <span class=\"token string\">'path'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span>readdirSync<span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'fs'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>worker<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> articles <span class=\"token operator\">=<\/span> <span class=\"token function\">readdirSync<\/span><span class=\"token punctuation\">(<\/span>path<span class=\"token punctuation\">.<\/span><span class=\"token function\">join<\/span><span class=\"token punctuation\">(<\/span>__dirname<span class=\"token punctuation\">,<\/span> <span class=\"token string\">'..'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'articles'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    worker<span class=\"token punctuation\">.<\/span>preload <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span>\n      <span class=\"token operator\">...<\/span>articles<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">article<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token string\">'/'<\/span> <span class=\"token operator\">+<\/span> article<span class=\"token punctuation\">.<\/span><span class=\"token function\">replace<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'.md'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span>\n      <span class=\"token string\">'/nullstack.svg'<\/span><span class=\"token punctuation\">,<\/span>\n      <span class=\"token string\">'/documentation'<\/span><span class=\"token punctuation\">,<\/span>\n      <span class=\"token string\">'/components'<\/span>\n    <span class=\"token punctuation\">]<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 the example above is extracted from this repository and allows the documentation to be fully accessible offline.<\/p>\n<\/blockquote>\n<p>The following keys are available as <strong>readonly<\/strong> in the client context:<\/p>\n<ul>\n<li><strong>enabled<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>preload<\/strong>: <code>string array<\/code> (relative paths)<\/li>\n<li><strong>online<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>fetching<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>responsive<\/strong>: <code>boolean<\/code><\/li>\n<li><strong>installation<\/strong>: <code>BeforeInstallPromptEvent<\/code><\/li>\n<li><strong>registration<\/strong>: <code>ServiceWorkerRegistration<\/code><\/li>\n<li><strong>queues<\/strong>: <code>object<\/code><\/li>\n<\/ul>\n<p>The following keys are available as <strong>readwrite<\/strong> in the client context:<\/p>\n<ul>\n<li><strong>headers<\/strong>: <code>object<\/code><\/li>\n<\/ul>\n<p>The <code>responsive<\/code> key determines if the application has all the responses it needs to render the current page.<\/p>\n<p>Nullstack will try to keep your application responsive as long as possible and set the key to <code>false<\/code> only when there are no ways of retrieving any response from the network or offline according to the fetch strategy for the <a href=\"/context-environment\">environment<\/a>.<\/p>\n<p>The <code>online<\/code> key will listen for network events and rerender the application when <code>navigator.onLine<\/code> value changes.<\/p>\n<p>When the application is back online Nullstack will try to make the application responsive again and rerender if necessary.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token comment\">// ...<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n \n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>worker<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>worker<span class=\"token punctuation\">.<\/span>responsive<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">return<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">OfflineWarning<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n    <span class=\"token punctuation\">}<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Home<\/span><\/span> <span class=\"token attr-name\">route<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>/<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<p>You can access the current service worker <strong>registration<\/strong> and <strong>installation<\/strong> from the <code>worker<\/code> key to control the flow of your PWA.<\/p>\n<p>The <code>registration<\/code> key refers to the service worker registration and will be only available once the registration process is complete.<\/p>\n<p>The <code>installation<\/code> key refers to the deferred installation prompt event and will only be available if the <code>beforeinstallprompt<\/code> event is triggered.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">PWAInstaller<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  installed <span class=\"token operator\">=<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span>\n  hidden <span class=\"token operator\">=<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">prompt<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>worker<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">try<\/span> <span class=\"token punctuation\">{<\/span>\n      worker<span class=\"token punctuation\">.<\/span>installation<span class=\"token punctuation\">.<\/span><span class=\"token function\">prompt<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span>outcome<span class=\"token punctuation\">}<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> worker<span class=\"token punctuation\">.<\/span>installation<span class=\"token punctuation\">.<\/span>userChoice<span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>outcome <span class=\"token operator\">===<\/span> <span class=\"token string\">'accepted'<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n        console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'User accepted the A2HS prompt'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token punctuation\">{<\/span>\n        console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'User dismissed the A2HS prompt'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token punctuation\">}<\/span>\n    <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">finally<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>hidden <span class=\"token operator\">=<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>worker<span class=\"token punctuation\">,<\/span> project<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>hidden<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>worker<span class=\"token punctuation\">.<\/span>installation<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>img<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>project<span class=\"token punctuation\">.<\/span>favicon<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span> Do you want to add <span class=\"token punctuation\">{<\/span>project<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">}<\/span> to your home screen<span class=\"token operator\">?<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>prompt<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Install <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span>hidden<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> Not Now <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> PWAInstaller<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"loading-screens\"><a href=\"#loading-screens\">Loading Screens<\/a><\/h2><p>When a <a href=\"/server-functions\">server function<\/a> is called <code>fetching<\/code> will be set to <code>true<\/code> until the response is resolved.<\/p>\n<p>When a <a href=\"/server-functions\">server function<\/a> is called a key with the name of the <a href=\"/server-functions\">server function<\/a> invoked will be set in the <code>queues<\/code> object until the response is resolved.<\/p>\n<p>The key will be an array with all arguments passed to the server function.<\/p>\n<p>Any key you invoke on the <code>queues<\/code> object will always return an array instead of <code>undefined<\/code> for consistency.<\/p>\n<p>When the server is emulating the client context for <a href=\"/server-side-rendering\">server-side rendering<\/a>, every key of the <code>queues<\/code> object will always return an empty array, saving multiple render cycles in performance.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Page<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">save<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> valid <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token comment\">// ...<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">submit<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">save<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> valid<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> worker <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> loadingValidSave <span class=\"token operator\">=<\/span> <span class=\"token operator\">!<\/span><span class=\"token operator\">!<\/span>worker<span class=\"token punctuation\">.<\/span>queues<span class=\"token punctuation\">.<\/span>save\n      <span class=\"token punctuation\">.<\/span><span class=\"token function\">find<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">args<\/span> <span class=\"token operator\">=><\/span> args<span class=\"token punctuation\">.<\/span>valid<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>form<\/span> <span class=\"token attr-name\">onsubmit<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>submit<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token punctuation\">{<\/span>worker<span class=\"token punctuation\">.<\/span>fetching <span class=\"token operator\">&amp;&amp;<\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>span<\/span><span class=\"token punctuation\">><\/span><\/span> loading<span class=\"token operator\">...<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>span<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">disabled<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>loadingValidSave<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n          Save\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Page<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"custom-headers\"><a href=\"#custom-headers\">Custom headers<\/a><\/h2><p>You can use the <code>headers<\/code> key to configure the headers that the worker will use when fetching a server function.<\/p>\n<blockquote>\n<p>🔥 Headers will be ignored when a server function is called during the <a href=\"/server-side-rendering\">server-side rendering<\/a> process.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">LoginPage<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token comment\">// ...<\/span>\n\n  <span class=\"token keyword\">async<\/span> <span class=\"token function\">submit<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>worker<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token comment\">// ...<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>headers<span class=\"token punctuation\">[<\/span><span class=\"token string\">'Authorization'<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Bearer <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>token<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token comment\">// ...<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">authorize<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>request<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> authorization <span class=\"token operator\">=<\/span> request<span class=\"token punctuation\">.<\/span>headers<span class=\"token punctuation\">[<\/span><span class=\"token string\">'Authorization'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token comment\">// ...<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token comment\">// ...<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> LoginPage<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Learn more about the <a href=\"/server-request-and-response\">server request and response<\/a><\/p>\n<\/blockquote>\n<h2 id=\"server-side-render-strategy\"><a href=\"#server-side-render-strategy\">Server-side render strategy<\/a><\/h2><ul>\n<li>Requests for different origins will be fetched normally;<\/li>\n<li>Requests that are not GET will be fetched normally;<\/li>\n<li>Fingerprinted assets will be loaded into cache at installation time;<\/li>\n<li>Fingerprinted assets will be loaded from cache first then fallback to the network if needed;<\/li>\n<li>Paths with an extension will be retrieved stale and update the cache in the background for subsequent request;<\/li>\n<li>Navigation paths will be loaded from the network then fallback to a page in which <code>worker.responsive<\/code> and <code>worker.online<\/code> are set to <code>false<\/code>;<\/li>\n<\/ul>\n<h2 id=\"static-site-generation-strategy\"><a href=\"#static-site-generation-strategy\">Static-site generation strategy<\/a><\/h2><ul>\n<li>Requests for different origins will be fetched normally;<\/li>\n<li>Requests that are not GET will be fetched normally;<\/li>\n<li>Fingerprinted assets will be loaded into cache at installation time;<\/li>\n<li>Fingerprinted assets will be loaded from cache first then fallback to the network if needed;<\/li>\n<li>Paths with an extension will be retrieved stale and update the cache in the background for subsequent request;<\/li>\n<li>The home page will be loaded network first and then fallback to a cached copy if needed;<\/li>\n<li>Navigation paths will instead load only the static API data and merge it with the application template to generate a response.<\/li>\n<li>Navigating to a static route will cache only the data of that page;<\/li>\n<li>When data is not available in the cache or network it will fallback to a page in which <code>worker.responsive<\/code> and <code>worker.online<\/code> are set to <code>false<\/code>;<\/li>\n<\/ul>\n<h2 id=\"custom-strategy\"><a href=\"#custom-strategy\">Custom Strategy<\/a><\/h2><p>Nullstack will install automatically your service worker if <code>enabled<\/code> is set to <code>true<\/code> with the following events:<\/p>\n<ul>\n<li><code>install<\/code><\/li>\n<li><code>activate<\/code><\/li>\n<li><code>fetch<\/code><\/li>\n<\/ul>\n<p>You can override any of those events by creating a <strong>service-worker.js<\/strong> in the public folder;<\/p>\n<p>If any of the keywords above are found Nullstack will inject your function in the service worker code instead of the default.<\/p>\n<p>For convenience a <code>context<\/code> key is injected in the service worker <code>self<\/code> with the following keys:<\/p>\n<ul>\n<li><code>worker<\/code><\/li>\n<li><a href=\"/context-project\"><code>project<\/code><\/a><\/li>\n<li><a href=\"/context-environment\"><code>environment<\/code><\/a><\/li>\n<\/ul>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">function<\/span> <span class=\"token function\">activate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">event<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  event<span class=\"token punctuation\">.<\/span><span class=\"token function\">waitUntil<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> cacheNames <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> caches<span class=\"token punctuation\">.<\/span><span class=\"token function\">keys<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> cachesToDelete <span class=\"token operator\">=<\/span> cacheNames<span class=\"token punctuation\">.<\/span><span class=\"token function\">filter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">cacheName<\/span> <span class=\"token operator\">=><\/span> cacheName <span class=\"token operator\">!==<\/span> self<span class=\"token punctuation\">.<\/span>context<span class=\"token punctuation\">.<\/span>environment<span class=\"token punctuation\">.<\/span>key<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">await<\/span> Promise<span class=\"token punctuation\">.<\/span><span class=\"token function\">all<\/span><span class=\"token punctuation\">(<\/span>cachesToDelete<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">cacheName<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> caches<span class=\"token punctuation\">.<\/span><span class=\"token function\">delete<\/span><span class=\"token punctuation\">(<\/span>cacheName<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>self<span class=\"token punctuation\">.<\/span>registration<span class=\"token punctuation\">.<\/span>navigationPreload<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">await<\/span> self<span class=\"token punctuation\">.<\/span>registration<span class=\"token punctuation\">.<\/span>navigationPreload<span class=\"token punctuation\">.<\/span><span class=\"token function\">enable<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n    self<span class=\"token punctuation\">.<\/span>clients<span class=\"token punctuation\">.<\/span><span class=\"token function\">claim<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\nself<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'activate'<\/span><span class=\"token punctuation\">,<\/span> activate<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 The example above is extracted from the generated service worker and uses <code>self.context.environment.key<\/code><\/p>\n<\/blockquote>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn <a href=\"/how-to-deploy-a-nullstack-application\">how to deploy a Nullstack application<\/a>.<\/p>\n","description":"The worker object is a proxy in the Nullstack Context available in both client and server and gives you granular control of your PWA behavior","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"service-worker"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/single-page-applications.html b/docs/single-page-applications.html
index 1ffca626..78da2611 100644
--- a/docs/single-page-applications.html
+++ b/docs/single-page-applications.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -63,15 +63,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn <a href="
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Single Page Applications - Nullstack","description":"Use Nullstack to generate single page applications that can connect to any API or server functions"};
       window.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/single-page-applications":{"title":"Single Page Applications","html":"<p>Use Nullstack to generate single page applications that can connect to any API or server functions.<\/p>\n<p>Single page applications are useful for environments that should not use <a href=\"/server-side-rendering\">server-side rendering<\/a>, like native applications.<\/p>\n<p>You can easily move your application from SSR to SPA by changing the build command.<\/p>\n<pre><code class=\"language-sh\">npx nullstack build <span class=\"token operator\">--<\/span>mode<span class=\"token operator\">=<\/span>spa <span class=\"token operator\">--<\/span>output<span class=\"token operator\">=<\/span>spa\n<\/code><\/pre>\n<blockquote>\n<p>🔥 You must be in a Nullstack project folder to run this command.<\/p>\n<\/blockquote>\n<p>By default, it will create your single page application in the <strong>spa<\/strong> folder you can override this with the <code>--output<\/code> flag.<\/p>\n<p>The builder will run your application in production mode and generate an empty index.html that is prepared to become a Nullstack client-only application.<\/p>\n<p>The <a href=\"/context-project\">manifest.json<\/a> and the contents of the public folder will be copied into the target folder.<\/p>\n<p>On the first visit to your static application the JavaScript bundle will be loaded and start a SPA.<\/p>\n<p>On the subsequent requests, Nullstack will push history and update the application state without ever reloading the page.<\/p>\n<h2 id=\"good-pratices\"><a href=\"#good-pratices\">Good Pratices<\/a><\/h2><p>You can add a script to your <strong>package.json<\/strong> to generate your static website in a custom folder:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token punctuation\">{<\/span>\n  <span class=\"token string\">\"name\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"nullstack.github.io\"<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token string\">\"scripts\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token string\">\"start\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"npx nullstack start\"<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token string\">\"build\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"npx nullstack build --mode=spa --output=web\"<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token operator\">...<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<\/code><\/pre>\n<h2 id=\"caveats\"><a href=\"#caveats\">Caveats<\/a><\/h2><p>In SPA mode both <a href=\"/full-stack-lifecycle\"><code>prepare<\/code><\/a> and <a href=\"/full-stack-lifecycle\"><code>initiate<\/code><\/a> will always run in the client.\nHowever it is a good pratice to follow SSR patterns in order to be able to easily change the build mode.<\/p>\n<p>You can mix modes and request further server functions by pointing <code>worker.api<\/code> and hosting the server bundle in a node.js environment.<\/p>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn <a href=\"/how-to-use-mongodb-with-nullstack\">how to use MongoDB with Nullstack<\/a>.<\/p>\n","description":"Use Nullstack to generate single page applications that can connect to any API or server functions","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"single-page-applications"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/single-page-applications/index.html b/docs/single-page-applications/index.html
index 1ffca626..78da2611 100644
--- a/docs/single-page-applications/index.html
+++ b/docs/single-page-applications/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -63,15 +63,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn <a href="
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Single Page Applications - Nullstack","description":"Use Nullstack to generate single page applications that can connect to any API or server functions"};
       window.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/single-page-applications":{"title":"Single Page Applications","html":"<p>Use Nullstack to generate single page applications that can connect to any API or server functions.<\/p>\n<p>Single page applications are useful for environments that should not use <a href=\"/server-side-rendering\">server-side rendering<\/a>, like native applications.<\/p>\n<p>You can easily move your application from SSR to SPA by changing the build command.<\/p>\n<pre><code class=\"language-sh\">npx nullstack build <span class=\"token operator\">--<\/span>mode<span class=\"token operator\">=<\/span>spa <span class=\"token operator\">--<\/span>output<span class=\"token operator\">=<\/span>spa\n<\/code><\/pre>\n<blockquote>\n<p>🔥 You must be in a Nullstack project folder to run this command.<\/p>\n<\/blockquote>\n<p>By default, it will create your single page application in the <strong>spa<\/strong> folder you can override this with the <code>--output<\/code> flag.<\/p>\n<p>The builder will run your application in production mode and generate an empty index.html that is prepared to become a Nullstack client-only application.<\/p>\n<p>The <a href=\"/context-project\">manifest.json<\/a> and the contents of the public folder will be copied into the target folder.<\/p>\n<p>On the first visit to your static application the JavaScript bundle will be loaded and start a SPA.<\/p>\n<p>On the subsequent requests, Nullstack will push history and update the application state without ever reloading the page.<\/p>\n<h2 id=\"good-pratices\"><a href=\"#good-pratices\">Good Pratices<\/a><\/h2><p>You can add a script to your <strong>package.json<\/strong> to generate your static website in a custom folder:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token punctuation\">{<\/span>\n  <span class=\"token string\">\"name\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"nullstack.github.io\"<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token string\">\"scripts\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token string\">\"start\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"npx nullstack start\"<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token string\">\"build\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"npx nullstack build --mode=spa --output=web\"<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token operator\">...<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<\/code><\/pre>\n<h2 id=\"caveats\"><a href=\"#caveats\">Caveats<\/a><\/h2><p>In SPA mode both <a href=\"/full-stack-lifecycle\"><code>prepare<\/code><\/a> and <a href=\"/full-stack-lifecycle\"><code>initiate<\/code><\/a> will always run in the client.\nHowever it is a good pratice to follow SSR patterns in order to be able to easily change the build mode.<\/p>\n<p>You can mix modes and request further server functions by pointing <code>worker.api<\/code> and hosting the server bundle in a node.js environment.<\/p>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn <a href=\"/how-to-use-mongodb-with-nullstack\">how to use MongoDB with Nullstack<\/a>.<\/p>\n","description":"Use Nullstack to generate single page applications that can connect to any API or server functions","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"single-page-applications"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/sitemap.xml b/docs/sitemap.xml
index 3886195c..34c8e216 100644
--- a/docs/sitemap.xml
+++ b/docs/sitemap.xml
@@ -1 +1 @@
-<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><url><loc>https://nullstack.app/</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/getting-started</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/components</loc><lastmod>2021-10-27</lastmod><priority>0.3</priority></url><url><loc>https://nullstack.app/contributors</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/waifu</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/renderable-components</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/stateful-components</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/full-stack-lifecycle</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/server-functions</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/context</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/routes-and-params</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/two-way-bindings</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/application-startup</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/functional-components</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/context-data</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/context-instances</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/context-environment</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/context-page</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/context-project</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/context-settings</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/context-secrets</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/instance-self</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/server-request-and-response</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/styles</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/njs-file-extension</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/service-worker</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/how-to-deploy-a-nullstack-application</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/server-side-rendering</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/static-site-generation</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/single-page-applications</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/how-to-use-mongodb-with-nullstack</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/how-to-use-google-analytics-with-nullstack</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/how-to-use-facebook-pixel-with-nullstack</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/nullstack-logo</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/comecando</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/componentes</loc><lastmod>2021-10-27</lastmod><priority>0.3</priority></url><url><loc>https://nullstack.app/pt-br/contribuidores</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/waifu</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/other-post</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/componentes-renderizaveis</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/componentes-com-estado</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/ciclo-de-vida-full-stack</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/funcoes-de-servidor</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/contexto</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/rotas-e-parametros</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/vinculo-bidirecional</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/inicializacao-da-aplicacao</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/componentes-funcionais</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/contexto-data</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/contexto-instances</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/contexto-environment</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/contexto-page</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/contexto-project</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/contexto-settings</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/contexto-secrets</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/instancia-self</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/requisicao-e-resposta-do-servidor</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/estilos</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/extensao-de-arquivo-njs</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/service-worker</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/como-fazer-deploy-de-aplicacao-nullstack</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/renderizando-no-servidor</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/geracao-de-sites-estaticos</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/aplicacao-de-pagina-unica</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/como-usar-mongodb-com-nullstack</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/como-usar-google-analytics-no-nullstack</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/como-usar-facebook-pixel-no-nullstack</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/nullstack-logo</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/documentation</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/extensão-de-arquivo-njs</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/renderizacao-no-servidor</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/ciclo-de-vida-full-stack</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/contexto-page</loc><lastmod>2021-10-27</lastmod></url><url><loc>https://nullstack.app/pt-br/documentacao</loc><lastmod>2021-10-27</lastmod></url></urlset>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><url><loc>https://nullstack.app/</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/getting-started</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/components</loc><lastmod>2021-11-25</lastmod><priority>0.3</priority></url><url><loc>https://nullstack.app/contributors</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/waifu</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/renderable-components</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/stateful-components</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/full-stack-lifecycle</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/server-functions</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/context</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/routes-and-params</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/two-way-bindings</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/application-startup</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/functional-components</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/context-data</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/context-instances</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/context-environment</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/context-page</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/context-project</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/context-settings</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/context-secrets</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/instance-self</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/server-request-and-response</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/styles</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/njs-file-extension</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/service-worker</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/how-to-deploy-a-nullstack-application</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/server-side-rendering</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/static-site-generation</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/single-page-applications</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/how-to-use-mongodb-with-nullstack</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/how-to-use-google-analytics-with-nullstack</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/how-to-use-facebook-pixel-with-nullstack</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/nullstack-logo</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/comecando</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/componentes</loc><lastmod>2021-11-25</lastmod><priority>0.3</priority></url><url><loc>https://nullstack.app/pt-br/contribuidores</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/waifu</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/other-post</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/componentes-renderizaveis</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/componentes-com-estado</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/ciclo-de-vida-full-stack</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/funcoes-de-servidor</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/contexto</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/rotas-e-parametros</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/vinculo-bidirecional</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/inicializacao-da-aplicacao</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/componentes-funcionais</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/contexto-data</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/contexto-instances</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/contexto-environment</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/contexto-page</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/contexto-project</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/contexto-settings</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/contexto-secrets</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/instancia-self</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/requisicao-e-resposta-do-servidor</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/estilos</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/extensao-de-arquivo-njs</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/service-worker</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/como-fazer-deploy-de-aplicacao-nullstack</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/renderizando-no-servidor</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/geracao-de-sites-estaticos</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/aplicacao-de-pagina-unica</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/como-usar-mongodb-com-nullstack</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/como-usar-google-analytics-no-nullstack</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/como-usar-facebook-pixel-no-nullstack</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/nullstack-logo</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/documentation</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/extensão-de-arquivo-njs</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/renderizacao-no-servidor</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/ciclo-de-vida-full-stack</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/contexto-page</loc><lastmod>2021-11-25</lastmod></url><url><loc>https://nullstack.app/pt-br/documentacao</loc><lastmod>2021-11-25</lastmod></url></urlset>
\ No newline at end of file
diff --git a/docs/stateful-components.html b/docs/stateful-components.html
index ad441968..da28f96f 100644
--- a/docs/stateful-components.html
+++ b/docs/stateful-components.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -163,15 +163,15 @@ <h2 id="next-steps"><a href="#next-steps">Next steps</a></h2><p>⚔ Learn about
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Stateful Components - Nullstack","description":"A productive full-stack web framework should not force you to think about framework details"};
       window.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/stateful-components":{"title":"Stateful Components","html":"<p>A productive full-stack web framework should not force you to think about framework details.<\/p>\n<p>Nullstack takes control of its subclasses and generates a proxy for each instance.<\/p>\n<p>When you call anything on your class you are actually telling Nullstack what to do with the environment behind the scenes.<\/p>\n<p>This allows you to use vanilla JavaScript operations like assigning to a variable and see the reflection in the dom.<\/p>\n<h2 id=\"mutability\"><a href=\"#mutability\">Mutability<\/a><\/h2><p>You can mutate instance variables to update your application state.<\/p>\n<p>Functions are automatically bound to the instance proxy and can be passed as a reference to events.<\/p>\n<p>Events are declared like normal HTML attributes.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">increment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token operator\">++<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>increment<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> \n        <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 Updates are made in batches, usually while awaiting async calls, so making multiple assignments have no performance costs!<\/p>\n<\/blockquote>\n<h2 id=\"object-events\"><a href=\"#object-events\">Object Events<\/a><\/h2><p>You can shortcut events that are simple assignments by passing an object to the event.<\/p>\n<p>Each key of the object will be assigned to the instance.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n  \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span>count<span class=\"token operator\">:<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">+<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> \n        <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"event-source\"><a href=\"#event-source\">Event Source<\/a><\/h2><p>By default, events refer to <code>this<\/code> when you pass an object.<\/p>\n<p>You can use the <code>source<\/code> attribute to define which object will receive the assignments.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Paginator<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n  \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">source<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span>page<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> \n        First Page\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Paginator<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Learn more about <a href=\"/routes-and-params\">context <code>params<\/code><\/a>.<\/p>\n<\/blockquote>\n<blockquote>\n<p>💡 If you do not declare a source to the event, Nullstack will inject a <code>source={this}<\/code> at transpile time in order to completely skip the runtime lookup process!<\/p>\n<\/blockquote>\n<h2 id=\"event-context\"><a href=\"#event-context\">Event Context<\/a><\/h2><p>Attributes of the event target will be merged to the instance context and can be destructured in the function signature.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">increment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>delta<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">+=<\/span> delta<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>increment<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">delta<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> \n        <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 Any attribute with primitive value will be added to the DOM.<\/p>\n<\/blockquote>\n<blockquote>\n<p>✨ Consider using <a href=\"/context-data\"><code>data<\/code> attributes<\/a> to make your html valid.<\/p>\n<\/blockquote>\n<h2 id=\"original-event\"><a href=\"#original-event\">Original Event<\/a><\/h2><p>The browser default behavior is prevented by default.<\/p>\n<p>You can opt-out of this by declaring a <code>default<\/code> attribute to the event element.<\/p>\n<p>A reference to the original event is always merged with the function context.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Form<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">submit<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>event<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    event<span class=\"token punctuation\">.<\/span><span class=\"token function\">preventDefault<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>form<\/span> <span class=\"token attr-name\">onsubmit<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>submit<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">default<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span> Submit <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Form<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"next-steps\"><a href=\"#next-steps\">Next steps<\/a><\/h2><p>⚔ Learn about the <a href=\"/full-stack-lifecycle\">full-stack lifecycle<\/a>.<\/p>\n","description":"A productive full-stack web framework should not force you to think about framework details","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"stateful-components"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/stateful-components/index.html b/docs/stateful-components/index.html
index ad441968..da28f96f 100644
--- a/docs/stateful-components/index.html
+++ b/docs/stateful-components/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -163,15 +163,15 @@ <h2 id="next-steps"><a href="#next-steps">Next steps</a></h2><p>⚔ Learn about
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Stateful Components - Nullstack","description":"A productive full-stack web framework should not force you to think about framework details"};
       window.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/stateful-components":{"title":"Stateful Components","html":"<p>A productive full-stack web framework should not force you to think about framework details.<\/p>\n<p>Nullstack takes control of its subclasses and generates a proxy for each instance.<\/p>\n<p>When you call anything on your class you are actually telling Nullstack what to do with the environment behind the scenes.<\/p>\n<p>This allows you to use vanilla JavaScript operations like assigning to a variable and see the reflection in the dom.<\/p>\n<h2 id=\"mutability\"><a href=\"#mutability\">Mutability<\/a><\/h2><p>You can mutate instance variables to update your application state.<\/p>\n<p>Functions are automatically bound to the instance proxy and can be passed as a reference to events.<\/p>\n<p>Events are declared like normal HTML attributes.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">increment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token operator\">++<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>increment<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> \n        <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 Updates are made in batches, usually while awaiting async calls, so making multiple assignments have no performance costs!<\/p>\n<\/blockquote>\n<h2 id=\"object-events\"><a href=\"#object-events\">Object Events<\/a><\/h2><p>You can shortcut events that are simple assignments by passing an object to the event.<\/p>\n<p>Each key of the object will be assigned to the instance.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n  \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span>count<span class=\"token operator\">:<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">+<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> \n        <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"event-source\"><a href=\"#event-source\">Event Source<\/a><\/h2><p>By default, events refer to <code>this<\/code> when you pass an object.<\/p>\n<p>You can use the <code>source<\/code> attribute to define which object will receive the assignments.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Paginator<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n  \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">source<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span>page<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> \n        First Page\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Paginator<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>✨ Learn more about <a href=\"/routes-and-params\">context <code>params<\/code><\/a>.<\/p>\n<\/blockquote>\n<blockquote>\n<p>💡 If you do not declare a source to the event, Nullstack will inject a <code>source={this}<\/code> at transpile time in order to completely skip the runtime lookup process!<\/p>\n<\/blockquote>\n<h2 id=\"event-context\"><a href=\"#event-context\">Event Context<\/a><\/h2><p>Attributes of the event target will be merged to the instance context and can be destructured in the function signature.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Counter<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">increment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>delta<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">+=<\/span> delta<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>increment<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">delta<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span> \n        <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Counter<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 Any attribute with primitive value will be added to the DOM.<\/p>\n<\/blockquote>\n<blockquote>\n<p>✨ Consider using <a href=\"/context-data\"><code>data<\/code> attributes<\/a> to make your html valid.<\/p>\n<\/blockquote>\n<h2 id=\"original-event\"><a href=\"#original-event\">Original Event<\/a><\/h2><p>The browser default behavior is prevented by default.<\/p>\n<p>You can opt-out of this by declaring a <code>default<\/code> attribute to the event element.<\/p>\n<p>A reference to the original event is always merged with the function context.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Form<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">submit<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>event<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    event<span class=\"token punctuation\">.<\/span><span class=\"token function\">preventDefault<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>form<\/span> <span class=\"token attr-name\">onsubmit<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>submit<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">default<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span> Submit <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Form<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"next-steps\"><a href=\"#next-steps\">Next steps<\/a><\/h2><p>⚔ Learn about the <a href=\"/full-stack-lifecycle\">full-stack lifecycle<\/a>.<\/p>\n","description":"A productive full-stack web framework should not force you to think about framework details","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"stateful-components"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/static-site-generation.html b/docs/static-site-generation.html
index 114a3135..e939979b 100644
--- a/docs/static-site-generation.html
+++ b/docs/static-site-generation.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -69,15 +69,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn more abou
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Static Site Generation - Nullstack","description":"Use Nullstack to generate static websites for lightning-fast static applications using the full power of Nullstack without the need for a node.js back-end"};
       window.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/static-site-generation":{"title":"Static Site Generation","html":"<p>Use Nullstack to generate static websites for lightning-fast static applications using the full power of the Nullstack client without the need for a node.js back-end.<\/p>\n<p>Static sites are useful for read-only applications like blogs and documentation.<\/p>\n<blockquote>\n<p>💡 This documentation is actually a static site generated with Nullstack.<\/p>\n<\/blockquote>\n<p>All the benefits of <a href=\"/server-side-rendering\">server-side rendering<\/a> apply to static generated sites.<\/p>\n<p>You can generate a static website from your Nullstack application with the following <code>npx<\/code> command:<\/p>\n<pre><code class=\"language-sh\">npx nullstack build <span class=\"token operator\">--<\/span>mode<span class=\"token operator\">=<\/span>ssg <span class=\"token operator\">--<\/span>output<span class=\"token operator\">=<\/span>ssg\n<\/code><\/pre>\n<blockquote>\n<p>🔥 You must be in a Nullstack project folder to run this command.<\/p>\n<\/blockquote>\n<p>By default, it will create your static application in the <strong>ssg<\/strong> folder you can override this with the <code>--output<\/code> flag.<\/p>\n<p>The builder will run your application in production mode and crawl every <code>href<\/code> attribute it finds in your DOM.<\/p>\n<p>The <a href=\"/context-project\">manifest.json<\/a> and the contents of the public folder will be copied into the target folder.<\/p>\n<p>Besides generating raw HTML it will also generate a JSON file for each route with a copy of the state.<\/p>\n<p>On the first visit to your static application, HTML will be served and hydrated.<\/p>\n<p>On the subsequent requests, Nullstack will fetch the generated JSON and update the application state without ever reloading the page.<\/p>\n<p>This, in fact, gives you not only a static generated site, but a static generated API with the calculated state that feeds a Single Page Application with zero costs.<\/p>\n<h2 id=\"good-pratices\"><a href=\"#good-pratices\">Good Pratices<\/a><\/h2><p>You can add a script to your <strong>package.json<\/strong> to generate your static website in a custom folder:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token punctuation\">{<\/span>\n  <span class=\"token string\">\"name\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"nullstack.github.io\"<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token string\">\"scripts\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token string\">\"start\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"npx nullstack start\"<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token string\">\"build\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"npx nullstack build --mode=ssg --output=docs\"<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token operator\">...<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<\/code><\/pre>\n<h2 id=\"caveats\"><a href=\"#caveats\">Caveats<\/a><\/h2><p>Before generating the HTML, Nullstack will wait for <a href=\"/full-stack-lifecycle\"><code>prepare<\/code><\/a> and <a href=\"/full-stack-lifecycle\"><code>initiate<\/code><\/a> of all components of that route to be resolved.<\/p>\n<p>You can mix modes and request further server functions by pointing <code>worker.api<\/code> and hosting the server bundle in a node.js environment.<\/p>\n<p>Nullstatic will crawl a &quot;/404&quot; URL and generate both a &quot;/404.html&quot; and a &quot;/404/index.html&quot;.<\/p>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn more about <a href=\"/single-page-applications\">single page applications<\/a>.<\/p>\n","description":"Use Nullstack to generate static websites for lightning-fast static applications using the full power of Nullstack without the need for a node.js back-end","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"static-site-generation"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/static-site-generation/index.html b/docs/static-site-generation/index.html
index 114a3135..e939979b 100644
--- a/docs/static-site-generation/index.html
+++ b/docs/static-site-generation/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -69,15 +69,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn more abou
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Static Site Generation - Nullstack","description":"Use Nullstack to generate static websites for lightning-fast static applications using the full power of Nullstack without the need for a node.js back-end"};
       window.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/static-site-generation":{"title":"Static Site Generation","html":"<p>Use Nullstack to generate static websites for lightning-fast static applications using the full power of the Nullstack client without the need for a node.js back-end.<\/p>\n<p>Static sites are useful for read-only applications like blogs and documentation.<\/p>\n<blockquote>\n<p>💡 This documentation is actually a static site generated with Nullstack.<\/p>\n<\/blockquote>\n<p>All the benefits of <a href=\"/server-side-rendering\">server-side rendering<\/a> apply to static generated sites.<\/p>\n<p>You can generate a static website from your Nullstack application with the following <code>npx<\/code> command:<\/p>\n<pre><code class=\"language-sh\">npx nullstack build <span class=\"token operator\">--<\/span>mode<span class=\"token operator\">=<\/span>ssg <span class=\"token operator\">--<\/span>output<span class=\"token operator\">=<\/span>ssg\n<\/code><\/pre>\n<blockquote>\n<p>🔥 You must be in a Nullstack project folder to run this command.<\/p>\n<\/blockquote>\n<p>By default, it will create your static application in the <strong>ssg<\/strong> folder you can override this with the <code>--output<\/code> flag.<\/p>\n<p>The builder will run your application in production mode and crawl every <code>href<\/code> attribute it finds in your DOM.<\/p>\n<p>The <a href=\"/context-project\">manifest.json<\/a> and the contents of the public folder will be copied into the target folder.<\/p>\n<p>Besides generating raw HTML it will also generate a JSON file for each route with a copy of the state.<\/p>\n<p>On the first visit to your static application, HTML will be served and hydrated.<\/p>\n<p>On the subsequent requests, Nullstack will fetch the generated JSON and update the application state without ever reloading the page.<\/p>\n<p>This, in fact, gives you not only a static generated site, but a static generated API with the calculated state that feeds a Single Page Application with zero costs.<\/p>\n<h2 id=\"good-pratices\"><a href=\"#good-pratices\">Good Pratices<\/a><\/h2><p>You can add a script to your <strong>package.json<\/strong> to generate your static website in a custom folder:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token punctuation\">{<\/span>\n  <span class=\"token string\">\"name\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"nullstack.github.io\"<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token string\">\"scripts\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token string\">\"start\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"npx nullstack start\"<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token string\">\"build\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"npx nullstack build --mode=ssg --output=docs\"<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token operator\">...<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<\/code><\/pre>\n<h2 id=\"caveats\"><a href=\"#caveats\">Caveats<\/a><\/h2><p>Before generating the HTML, Nullstack will wait for <a href=\"/full-stack-lifecycle\"><code>prepare<\/code><\/a> and <a href=\"/full-stack-lifecycle\"><code>initiate<\/code><\/a> of all components of that route to be resolved.<\/p>\n<p>You can mix modes and request further server functions by pointing <code>worker.api<\/code> and hosting the server bundle in a node.js environment.<\/p>\n<p>Nullstatic will crawl a &quot;/404&quot; URL and generate both a &quot;/404.html&quot; and a &quot;/404/index.html&quot;.<\/p>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn more about <a href=\"/single-page-applications\">single page applications<\/a>.<\/p>\n","description":"Use Nullstack to generate static websites for lightning-fast static applications using the full power of Nullstack without the need for a node.js back-end","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"static-site-generation"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/styles.html b/docs/styles.html
index 9546e8eb..947349cf 100644
--- a/docs/styles.html
+++ b/docs/styles.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -53,15 +53,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about the
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Styles - Nullstack","description":"Using styles with Nullstack is as simple as importing a style file"};
       window.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/styles":{"title":"Styles","html":"<p>Using styles with Nullstack is as simple as importing a style file.<\/p>\n<p>Nullstack comes with a <a href=\"https://sass-lang.com\" target=\"_blank\" rel=\"noopener\">SASS<\/a> loader by default, but you can still use vanilla CSS.<\/p>\n<blockquote>\n<p>✨ It's a good practice to import a file with the same name as the component.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token string\">'./Header.scss'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Header<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token comment\">// ...<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Header<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>In production mode Nullstack uses <a href=\"https://purgecss.com\" target=\"_blank\" rel=\"noopener\">PurceCSS<\/a>, which cleans your <strong>client.css<\/strong> file, but has some gotchas.<\/p>\n<blockquote>\n<p>✨ Learn more about <a href=\"https://purgecss.com/safelisting.html\" target=\"_blank\" rel=\"noopener\">safelisting your css<\/a><\/p>\n<\/blockquote>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about the <a href=\"/njs-file-extension\">NJS file extension<\/a>.<\/p>\n","description":"Using styles with Nullstack is as simple as importing a style file","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"styles"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/styles/index.html b/docs/styles/index.html
index 9546e8eb..947349cf 100644
--- a/docs/styles/index.html
+++ b/docs/styles/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -53,15 +53,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Learn about the
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Styles - Nullstack","description":"Using styles with Nullstack is as simple as importing a style file"};
       window.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/styles":{"title":"Styles","html":"<p>Using styles with Nullstack is as simple as importing a style file.<\/p>\n<p>Nullstack comes with a <a href=\"https://sass-lang.com\" target=\"_blank\" rel=\"noopener\">SASS<\/a> loader by default, but you can still use vanilla CSS.<\/p>\n<blockquote>\n<p>✨ It's a good practice to import a file with the same name as the component.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token string\">'./Header.scss'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Header<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token comment\">// ...<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Header<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>In production mode Nullstack uses <a href=\"https://purgecss.com\" target=\"_blank\" rel=\"noopener\">PurceCSS<\/a>, which cleans your <strong>client.css<\/strong> file, but has some gotchas.<\/p>\n<blockquote>\n<p>✨ Learn more about <a href=\"https://purgecss.com/safelisting.html\" target=\"_blank\" rel=\"noopener\">safelisting your css<\/a><\/p>\n<\/blockquote>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><p>⚔ Learn about the <a href=\"/njs-file-extension\">NJS file extension<\/a>.<\/p>\n","description":"Using styles with Nullstack is as simple as importing a style file","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"styles"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/two-way-bindings.html b/docs/two-way-bindings.html
index 9600dc8d..139a13b4 100644
--- a/docs/two-way-bindings.html
+++ b/docs/two-way-bindings.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -269,15 +269,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><blockquote>
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Two-Way Binding - Nullstack","description":"Bind reduces drastically the amount of glue code you have to type in your application."};
       window.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/two-way-bindings":{"title":"Two-Way Binding","html":"<p>Big chunks of code in a progressive web application is dedicated to reacting to user input.<\/p>\n<p>The process of controlling user input can be broken into 3 tedious steps:<\/p>\n<ul>\n<li>Declaring a variable with the initial value;<\/li>\n<li>Passing the initial value to the input;<\/li>\n<li>Observing changes in the input and assigning the new value to the variable.<\/li>\n<\/ul>\n<p>The last step might include typecasting and other value treatments.<\/p>\n<p>This process in which you manually do all these steps is called <em>one-way binding<\/em>, it is the default in many frameworks, and is possible in Nullstack.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Form<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  number <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n  string <span class=\"token operator\">=<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">updateString<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>event<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>string <span class=\"token operator\">=<\/span> event<span class=\"token punctuation\">.<\/span>target<span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">updateNumber<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>event<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>number <span class=\"token operator\">=<\/span> <span class=\"token function\">parseInt<\/span><span class=\"token punctuation\">(<\/span>event<span class=\"token punctuation\">.<\/span>target<span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span>\n          <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>text<span class=\"token punctuation\">\"<\/span><\/span>\n          <span class=\"token attr-name\">name<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>string<span class=\"token punctuation\">\"<\/span><\/span>\n          <span class=\"token attr-name\">value<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>string<span class=\"token punctuation\">}<\/span><\/span>\n          <span class=\"token attr-name\">oninput<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>updateString<span class=\"token punctuation\">}<\/span><\/span>\n        <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span>\n          <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>number<span class=\"token punctuation\">\"<\/span><\/span>\n          <span class=\"token attr-name\">name<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>number<span class=\"token punctuation\">\"<\/span><\/span>\n          <span class=\"token attr-name\">value<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>number<span class=\"token punctuation\">}<\/span><\/span>\n          <span class=\"token attr-name\">oninput<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>updateNumber<span class=\"token punctuation\">}<\/span><\/span>\n        <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Form<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"the-bind-attribute\"><a href=\"#the-bind-attribute\">The bind attribute<\/a><\/h2><p>Bind reduces drastically the amount of glue code you have to type in your application.<\/p>\n<p>You can shortcut setting a <code>value<\/code>, <code>name<\/code>, and event with the <code>bind<\/code> attribute.<\/p>\n<blockquote>\n<p>💡 Nullstack will simply replace <code>bind<\/code> with the <code>value<\/code>, <code>name<\/code>, and event under the hood.<\/p>\n<\/blockquote>\n<p>Bind will generate an event that automatically typecasts to the previous primitive type the value was.<\/p>\n<p>You can pass any variable to the <code>bind<\/code> as long as its parent object is mentioned.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Form<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  number <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n  string <span class=\"token operator\">=<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">;<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>text<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>string<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>number<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>number<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Form<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"bound-events\"><a href=\"#bound-events\">Bound Events<\/a><\/h2><p>The following events are set for each type of input:<\/p>\n<ul>\n<li><code>onclick<\/code> for inputs with the checkbox type<\/li>\n<li><code>oninput<\/code> for other inputs and textareas<\/li>\n<li><code>onchange<\/code> for anything else<\/li>\n<\/ul>\n<p>You can still declare an attribute with the same bound event.<\/p>\n<p>Events will not override the bound event, instead, it will be executed after bind mutates the variable.<\/p>\n<p>The new value will be merged into the function <a href=\"/context\">context<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Form<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  name <span class=\"token operator\">=<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">compare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>value<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>name <span class=\"token operator\">===<\/span> value<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">oninput<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>compare<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Form<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"bind-source\"><a href=\"#bind-source\">Bind source<\/a><\/h2><p>Bind can take a <code>source<\/code> attribute as well.<\/p>\n<blockquote>\n<p>💡 If you do not declare a source to the bind, Nullstack will inject a <code>source={this}<\/code> at transpile time in order to completely skip the runtime lookup process!<\/p>\n<\/blockquote>\n<p>If you declare a source, <code>bind<\/code> must be a string with the name of the key that will be mutated.<\/p>\n<p>The source will be merged into the <a href=\"/context\">context<\/a> of events.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Paginator<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">validate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>source<span class=\"token punctuation\">,<\/span> params<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>source<span class=\"token punctuation\">.<\/span>page<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      params<span class=\"token punctuation\">.<\/span>page <span class=\"token operator\">=<\/span> <span class=\"token string\">'1'<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> \n        <span class=\"token attr-name\">source<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span>\n        <span class=\"token attr-name\">bind<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>page<span class=\"token punctuation\">\"<\/span><\/span>\n        <span class=\"token attr-name\">oninput<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>validate<span class=\"token punctuation\">}<\/span><\/span>\n      <span class=\"token punctuation\">/><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Paginator<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 Binding by reference is possible because all binds are converted to the format above at transpile time.<\/p>\n<\/blockquote>\n<p>Any object that responds to a key call with &quot;[]&quot; can be bound.<\/p>\n<p>The <code>name<\/code> attribute can be overwritten.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Form<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  number <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n  boolean <span class=\"token operator\">=<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span>\n  character <span class=\"token operator\">=<\/span> <span class=\"token string\">'a'<\/span><span class=\"token punctuation\">;<\/span>\n  text <span class=\"token operator\">=<\/span> <span class=\"token string\">'aaaa'<\/span><span class=\"token punctuation\">;<\/span>\n  \n  object <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span>count<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n  array <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token string\">'a'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'b'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'c'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>number<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>textarea<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>text<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>select<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>character<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>array<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">character<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>option<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>character<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>option<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>select<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>select<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>boolean<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">name<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>boolean-select<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>option<\/span> <span class=\"token attr-name\">value<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token boolean\">true<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token boolean\">true<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>option<\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>option<\/span> <span class=\"token attr-name\">value<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token boolean\">false<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token boolean\">false<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>option<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>select<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>boolean<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>checkbox<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>object<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>array<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">value<span class=\"token punctuation\">,<\/span> index<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">(<\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>array<span class=\"token punctuation\">[<\/span>index<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">.<\/span>page<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Form<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"object-events\"><a href=\"#object-events\">Object Events<\/a><\/h2><p>You can use <a href=\"/stateful-components\">object events<\/a> alongside <code>bind<\/code> normally.<\/p>\n<p>The event will run after the variable is mutated.<\/p>\n<p>The event will share the <code>bind<\/code> source.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Paginator<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">.<\/span>filter<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">oninput<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span>page<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Paginator<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"bindable-components\"><a href=\"#bindable-components\">Bindable Components<\/a><\/h2><p>You can create your own bindable component by receiving the attributes that <code>bind<\/code> generates.<\/p>\n<p>You must respond by calling <code>onchange<\/code> with a <code>value<\/code> key.<\/p>\n<p>You can also merge any other keys you wish to send to the component user.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">CurrencyInput<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">parse<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>event<span class=\"token punctuation\">,<\/span> onchange<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> normalized <span class=\"token operator\">=<\/span> event<span class=\"token punctuation\">.<\/span>target<span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">.<\/span><span class=\"token function\">replace<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">','<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">padStart<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">3<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'0'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> whole <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token function\">parseInt<\/span><span class=\"token punctuation\">(<\/span>normalized<span class=\"token punctuation\">.<\/span><span class=\"token function\">slice<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span><span class=\"token operator\">-<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">||<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">toString<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> decimal <span class=\"token operator\">=<\/span> normalized<span class=\"token punctuation\">.<\/span><span class=\"token function\">slice<\/span><span class=\"token punctuation\">(<\/span>normalized<span class=\"token punctuation\">.<\/span>length <span class=\"token operator\">-<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> value <span class=\"token operator\">=<\/span> <span class=\"token function\">parseFloat<\/span><span class=\"token punctuation\">(<\/span>whole<span class=\"token operator\">+<\/span><span class=\"token string\">'.'<\/span><span class=\"token operator\">+<\/span>decimal<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> bringsHappyness <span class=\"token operator\">=<\/span> value <span class=\"token operator\">>=<\/span> <span class=\"token number\">1000000<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token function\">onchange<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>value<span class=\"token punctuation\">,<\/span> bringsHappyness<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>value<span class=\"token punctuation\">,<\/span> name<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> formatted <span class=\"token operator\">=<\/span> value<span class=\"token punctuation\">.<\/span><span class=\"token function\">toFixed<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">replace<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'.'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">','<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">name<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>name<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">value<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>formatted<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">oninput<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>parse<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> CurrencyInput <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./CurrencyInput'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Form<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  balance <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">CurrencyInput<\/span><\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>balance<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Form<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><blockquote>\n<p>🎉 <strong>Congratulations!<\/strong>. You are done with the core concepts!<\/p>\n<\/blockquote>\n<p>⚔ Learn about the <a href=\"/application-startup\">application startup<\/a>.<\/p>\n","description":"Bind reduces drastically the amount of glue code you have to type in your application.","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"two-way-bindings"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/two-way-bindings/index.html b/docs/two-way-bindings/index.html
index 9600dc8d..139a13b4 100644
--- a/docs/two-way-bindings/index.html
+++ b/docs/two-way-bindings/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -269,15 +269,15 @@ <h2 id="next-step"><a href="#next-step">Next step</a></h2><blockquote>
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Two-Way Binding - Nullstack","description":"Bind reduces drastically the amount of glue code you have to type in your application."};
       window.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/two-way-bindings":{"title":"Two-Way Binding","html":"<p>Big chunks of code in a progressive web application is dedicated to reacting to user input.<\/p>\n<p>The process of controlling user input can be broken into 3 tedious steps:<\/p>\n<ul>\n<li>Declaring a variable with the initial value;<\/li>\n<li>Passing the initial value to the input;<\/li>\n<li>Observing changes in the input and assigning the new value to the variable.<\/li>\n<\/ul>\n<p>The last step might include typecasting and other value treatments.<\/p>\n<p>This process in which you manually do all these steps is called <em>one-way binding<\/em>, it is the default in many frameworks, and is possible in Nullstack.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Form<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  number <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n  string <span class=\"token operator\">=<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">updateString<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>event<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>string <span class=\"token operator\">=<\/span> event<span class=\"token punctuation\">.<\/span>target<span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">updateNumber<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>event<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>number <span class=\"token operator\">=<\/span> <span class=\"token function\">parseInt<\/span><span class=\"token punctuation\">(<\/span>event<span class=\"token punctuation\">.<\/span>target<span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span>\n          <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>text<span class=\"token punctuation\">\"<\/span><\/span>\n          <span class=\"token attr-name\">name<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>string<span class=\"token punctuation\">\"<\/span><\/span>\n          <span class=\"token attr-name\">value<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>string<span class=\"token punctuation\">}<\/span><\/span>\n          <span class=\"token attr-name\">oninput<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>updateString<span class=\"token punctuation\">}<\/span><\/span>\n        <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span>\n          <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>number<span class=\"token punctuation\">\"<\/span><\/span>\n          <span class=\"token attr-name\">name<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>number<span class=\"token punctuation\">\"<\/span><\/span>\n          <span class=\"token attr-name\">value<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>number<span class=\"token punctuation\">}<\/span><\/span>\n          <span class=\"token attr-name\">oninput<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>updateNumber<span class=\"token punctuation\">}<\/span><\/span>\n        <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Form<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"the-bind-attribute\"><a href=\"#the-bind-attribute\">The bind attribute<\/a><\/h2><p>Bind reduces drastically the amount of glue code you have to type in your application.<\/p>\n<p>You can shortcut setting a <code>value<\/code>, <code>name<\/code>, and event with the <code>bind<\/code> attribute.<\/p>\n<blockquote>\n<p>💡 Nullstack will simply replace <code>bind<\/code> with the <code>value<\/code>, <code>name<\/code>, and event under the hood.<\/p>\n<\/blockquote>\n<p>Bind will generate an event that automatically typecasts to the previous primitive type the value was.<\/p>\n<p>You can pass any variable to the <code>bind<\/code> as long as its parent object is mentioned.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Form<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  number <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n  string <span class=\"token operator\">=<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">;<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>text<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>string<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>number<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>number<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>form<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Form<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"bound-events\"><a href=\"#bound-events\">Bound Events<\/a><\/h2><p>The following events are set for each type of input:<\/p>\n<ul>\n<li><code>onclick<\/code> for inputs with the checkbox type<\/li>\n<li><code>oninput<\/code> for other inputs and textareas<\/li>\n<li><code>onchange<\/code> for anything else<\/li>\n<\/ul>\n<p>You can still declare an attribute with the same bound event.<\/p>\n<p>Events will not override the bound event, instead, it will be executed after bind mutates the variable.<\/p>\n<p>The new value will be merged into the function <a href=\"/context\">context<\/a>.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Form<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  name <span class=\"token operator\">=<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">compare<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>value<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>name <span class=\"token operator\">===<\/span> value<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">oninput<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>compare<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Form<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"bind-source\"><a href=\"#bind-source\">Bind source<\/a><\/h2><p>Bind can take a <code>source<\/code> attribute as well.<\/p>\n<blockquote>\n<p>💡 If you do not declare a source to the bind, Nullstack will inject a <code>source={this}<\/code> at transpile time in order to completely skip the runtime lookup process!<\/p>\n<\/blockquote>\n<p>If you declare a source, <code>bind<\/code> must be a string with the name of the key that will be mutated.<\/p>\n<p>The source will be merged into the <a href=\"/context\">context<\/a> of events.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Paginator<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">validate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>source<span class=\"token punctuation\">,<\/span> params<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>source<span class=\"token punctuation\">.<\/span>page<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      params<span class=\"token punctuation\">.<\/span>page <span class=\"token operator\">=<\/span> <span class=\"token string\">'1'<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> \n        <span class=\"token attr-name\">source<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span>\n        <span class=\"token attr-name\">bind<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>page<span class=\"token punctuation\">\"<\/span><\/span>\n        <span class=\"token attr-name\">oninput<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>validate<span class=\"token punctuation\">}<\/span><\/span>\n      <span class=\"token punctuation\">/><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Paginator<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<blockquote>\n<p>💡 Binding by reference is possible because all binds are converted to the format above at transpile time.<\/p>\n<\/blockquote>\n<p>Any object that responds to a key call with &quot;[]&quot; can be bound.<\/p>\n<p>The <code>name<\/code> attribute can be overwritten.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Form<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  number <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span>\n  boolean <span class=\"token operator\">=<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span>\n  character <span class=\"token operator\">=<\/span> <span class=\"token string\">'a'<\/span><span class=\"token punctuation\">;<\/span>\n  text <span class=\"token operator\">=<\/span> <span class=\"token string\">'aaaa'<\/span><span class=\"token punctuation\">;<\/span>\n  \n  object <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span>count<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n  array <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token string\">'a'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'b'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'c'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>number<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>textarea<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>text<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>select<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>character<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>array<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">character<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>option<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>character<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>option<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>select<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>select<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>boolean<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">name<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>boolean-select<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>option<\/span> <span class=\"token attr-name\">value<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token boolean\">true<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token boolean\">true<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>option<\/span><span class=\"token punctuation\">><\/span><\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>option<\/span> <span class=\"token attr-name\">value<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token boolean\">false<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token boolean\">false<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>option<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>select<\/span><span class=\"token punctuation\">><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>boolean<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>checkbox<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>object<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>array<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">value<span class=\"token punctuation\">,<\/span> index<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">(<\/span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>array<span class=\"token punctuation\">[<\/span>index<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n        <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">.<\/span>page<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Form<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"object-events\"><a href=\"#object-events\">Object Events<\/a><\/h2><p>You can use <a href=\"/stateful-components\">object events<\/a> alongside <code>bind<\/code> normally.<\/p>\n<p>The event will run after the variable is mutated.<\/p>\n<p>The event will share the <code>bind<\/code> source.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Paginator<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>params<span class=\"token punctuation\">.<\/span>filter<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">oninput<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span>page<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Paginator<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"bindable-components\"><a href=\"#bindable-components\">Bindable Components<\/a><\/h2><p>You can create your own bindable component by receiving the attributes that <code>bind<\/code> generates.<\/p>\n<p>You must respond by calling <code>onchange<\/code> with a <code>value<\/code> key.<\/p>\n<p>You can also merge any other keys you wish to send to the component user.<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">CurrencyInput<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">parse<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>event<span class=\"token punctuation\">,<\/span> onchange<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> normalized <span class=\"token operator\">=<\/span> event<span class=\"token punctuation\">.<\/span>target<span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">.<\/span><span class=\"token function\">replace<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">','<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">padStart<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">3<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'0'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> whole <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token function\">parseInt<\/span><span class=\"token punctuation\">(<\/span>normalized<span class=\"token punctuation\">.<\/span><span class=\"token function\">slice<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span><span class=\"token operator\">-<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">||<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">toString<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> decimal <span class=\"token operator\">=<\/span> normalized<span class=\"token punctuation\">.<\/span><span class=\"token function\">slice<\/span><span class=\"token punctuation\">(<\/span>normalized<span class=\"token punctuation\">.<\/span>length <span class=\"token operator\">-<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> value <span class=\"token operator\">=<\/span> <span class=\"token function\">parseFloat<\/span><span class=\"token punctuation\">(<\/span>whole<span class=\"token operator\">+<\/span><span class=\"token string\">'.'<\/span><span class=\"token operator\">+<\/span>decimal<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> bringsHappyness <span class=\"token operator\">=<\/span> value <span class=\"token operator\">>=<\/span> <span class=\"token number\">1000000<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token function\">onchange<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>value<span class=\"token punctuation\">,<\/span> bringsHappyness<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>value<span class=\"token punctuation\">,<\/span> name<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> formatted <span class=\"token operator\">=<\/span> value<span class=\"token punctuation\">.<\/span><span class=\"token function\">toFixed<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">replace<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'.'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">','<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">name<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>name<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">value<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>formatted<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">oninput<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>parse<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> CurrencyInput <span class=\"token keyword\">from<\/span> <span class=\"token string\">'./CurrencyInput'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Form<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n  balance <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">CurrencyInput<\/span><\/span> <span class=\"token attr-name\">bind<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>balance<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">/><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Form<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step<\/a><\/h2><blockquote>\n<p>🎉 <strong>Congratulations!<\/strong>. You are done with the core concepts!<\/p>\n<\/blockquote>\n<p>⚔ Learn about the <a href=\"/application-startup\">application startup<\/a>.<\/p>\n","description":"Bind reduces drastically the amount of glue code you have to type in your application.","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":"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {"slug":"two-way-bindings"};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/waifu.html b/docs/waifu.html
index ca53ac97..142583e2 100644
--- a/docs/waifu.html
+++ b/docs/waifu.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -34,15 +34,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Nulla-Chan - Nullstack","description":"Nullstack's official waifu","locale":"en-US"};
       window.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-9/waifu":{"fanarts":["carolrennhack.webp","der_kly.webp","jaderpinnart.webp","kiro_[dot]art.webp","leeoutlaws.webp","milk_lillyum.webp","misthyart.webp","myumiifox.webp","paulomazzoco01.webp","poploopsarts.webp","raquelroxo.webp","roboilustrador.webp","saltiboki.webp","soyu_ngk.webp","tiago_franceschi.webp","tirythdm.webp","[u]__[dot]vers[dot]___.webp"],"locale":"en-US","i18n":{"title":"Nulla-Chan","description":"Nullstack's official waifu","attributes":[{"label":"🕐 Age","value":"19"},{"label":"♒ Sign","value":"Aquarius"},{"label":"🎂 Birthday","value":"January 28"},{"label":"💖 Blood Type","value":"A"},{"label":"📏 Height","value":"1.55m"},{"label":"🍨 Fav Food","value":"Anything vanilla flavored"},{"label":"🧩 Hobby","value":"Reinventing Wheels"},{"label":"🧠 Neurodivergences","value":"ASD and ADHD"}],"artist":{"label":"🎨 Created by:","href":"https://www.instagram.com/biancazanette","text":"Bilkaya"},"concept":{"label":"👀 Check out:","href":"https://www.artstation.com/artwork/Vg4o6R","text":"Character Concept"},"descriptions":["A sweet and shy perfect waifu, is always hyperfocused in her studies but somehow distracted at the same time.","She is always cheerful... until she has to face glue code or sees a post telling her which tech she should use.","GitHub is her home and LinkedIn makes her depressed."],"fanarts":{"heading":"Fanarts","tagline":"Made by amazing artirts ❤️"}}},"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/docs/waifu/index.html b/docs/waifu/index.html
index ca53ac97..142583e2 100644
--- a/docs/waifu/index.html
+++ b/docs/waifu/index.html
@@ -23,7 +23,7 @@
     
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.css" integrity="" crossorigin="anonymous">
+    <link rel="stylesheet" href="/client.css?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc" integrity="" crossorigin="anonymous">
     
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
     <meta name="msapplication-TileColor" content="#2d3748">
@@ -34,15 +34,15 @@
     <script async>
       window.page = {"image":"/image-1200x630.png","status":200,"title":"Nulla-Chan - Nullstack","description":"Nullstack's official waifu","locale":"en-US"};
       window.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-9/waifu":{"fanarts":["carolrennhack.webp","der_kly.webp","jaderpinnart.webp","kiro_[dot]art.webp","leeoutlaws.webp","milk_lillyum.webp","misthyart.webp","myumiifox.webp","paulomazzoco01.webp","poploopsarts.webp","raquelroxo.webp","roboilustrador.webp","saltiboki.webp","soyu_ngk.webp","tiago_franceschi.webp","tirythdm.webp","[u]__[dot]vers[dot]___.webp"],"locale":"en-US","i18n":{"title":"Nulla-Chan","description":"Nullstack's official waifu","attributes":[{"label":"🕐 Age","value":"19"},{"label":"♒ Sign","value":"Aquarius"},{"label":"🎂 Birthday","value":"January 28"},{"label":"💖 Blood Type","value":"A"},{"label":"📏 Height","value":"1.55m"},{"label":"🍨 Fav Food","value":"Anything vanilla flavored"},{"label":"🧩 Hobby","value":"Reinventing Wheels"},{"label":"🧠 Neurodivergences","value":"ASD and ADHD"}],"artist":{"label":"🎨 Created by:","href":"https://www.instagram.com/biancazanette","text":"Bilkaya"},"concept":{"label":"👀 Check out:","href":"https://www.artstation.com/artwork/Vg4o6R","text":"Character Concept"},"descriptions":["A sweet and shy perfect waifu, is always hyperfocused in her studies but somehow distracted at the same time.","She is always cheerful... until she has to face glue code or sees a post telling her which tech she should use.","GitHub is her home and LinkedIn makes her depressed."],"fanarts":{"heading":"Fanarts","tagline":"Made by amazing artirts ❤️"}}},"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"}}}};
-      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"360045b75355bf43c2fdd604465e03af35097bee"};
-      window.settings = {};
+      window.environment = {"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"dd981f7940e4d78bac6ca2abe788cc0438f7d9dc"};
+      window.settings = {"production":{},"development":{}};
       window.worker = {"enabled":true,"fetching":false,"preload":["/404","/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/functional-components","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/nullstack-logo","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/documentation","/components","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true};
       window.params = {};
       window.project = {"domain":"nullstack.app","name":"Nullstack","color":"#d22365","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"};
       window.context = {"mode":"light","oppositeMode":"dark"};
       document.addEventListener('DOMContentLoaded', () => {
         const script = window.document.createElement('script');
-        script.src = '/nullstack/360045b75355bf43c2fdd604465e03af35097bee/client.js';
+        script.src = '/client.js?fingerpring=dd981f7940e4d78bac6ca2abe788cc0438f7d9dc';
         script.integrity = '';
         script.crossOrigin = 'anonymous';
         document.body.append(script);
diff --git a/package.json b/package.json
index 20202a4e..7ae01d7a 100644
--- a/package.json
+++ b/package.json
@@ -26,4 +26,4 @@
     "remarkable-meta": "^1.0.1",
     "yaml": "^1.10.0"
   }
-}
+}
\ No newline at end of file
diff --git a/server.js b/server.js
new file mode 100644
index 00000000..0a39d299
--- /dev/null
+++ b/server.js
@@ -0,0 +1,32 @@
+import { readdirSync } from 'fs';
+import Nullstack from "nullstack";
+import path from 'path';
+import Application from "./src/Application";
+
+const context = Nullstack.start(Application);
+
+const { worker, project } = context;
+
+const articles = readdirSync(path.join(__dirname, '../i18n/en-US', 'articles'));
+const illustrations = readdirSync(path.join(__dirname, '../public', 'illustrations'));
+
+worker.preload = [
+  ...articles.map((article) => '/' + article.replace('.md', '')),
+  ...illustrations.map((illustration) => '/illustrations/' + illustration),
+  '/arrow.webp',
+  '/stars.webp',
+  '/footer.webp',
+  '/documentation',
+  '/components',
+  '/contributors',
+  '/roboto-v20-latin-300.woff2',
+  '/roboto-v20-latin-500.woff2',
+  '/crete-round-v9-latin-regular.woff2',
+]
+
+project.name = 'Nullstack';
+project.domain = 'nullstack.app';
+project.color = '#d22365';
+project.backgroundColor = '#2d3748';
+
+export default context
\ No newline at end of file
diff --git a/src/Application.njs b/src/Application.njs
index 65ab453b..a065d594 100644
--- a/src/Application.njs
+++ b/src/Application.njs
@@ -1,49 +1,19 @@
 import Nullstack from 'nullstack';
+import GoogleAnalytics from 'nullstack-google-analytics';
 import './Application.scss';
-import Documentation from './Documentation';
-import Components from './Components'
 import Article from './Article';
-import Header from './Header';
+import Components from './Components';
+import Contributors from './Contributors';
+import Documentation from './Documentation';
 import Footer from './Footer';
+import Header from './Header';
 import Home from './Home';
-import Waifu from './Waifu';
-import Contributors from './Contributors';
 import Loader from './Loader';
-import GoogleAnalytics from 'nullstack-google-analytics';
-import path from 'path';
-import {readdirSync} from 'fs';
-
-class Application extends Nullstack {
-
-  static async startWorker({worker}) {
-    const articles = readdirSync(path.join(__dirname, '../i18n/en-US', 'articles'));
-    const illustrations = readdirSync(path.join(__dirname, '../public', 'illustrations'));
-    worker.preload = [
-      ...articles.map((article) => '/' + article.replace('.md', '')),
-      ...illustrations.map((illustration) => '/illustrations/' + illustration),
-      '/arrow.webp',
-      '/stars.webp',
-      '/footer.webp',
-      '/documentation',
-      '/components',
-      '/contributors',
-      '/roboto-v20-latin-300.woff2',
-      '/roboto-v20-latin-500.woff2',
-      '/crete-round-v9-latin-regular.woff2',
-    ]
-  }
+import "./tailwind.css";
+import Waifu from './Waifu';
 
-  static async startProject({project}) {
-    project.name = 'Nullstack';
-    project.domain = 'nullstack.app';
-    project.color = '#d22365';
-    project.backgroundColor = '#2d3748';
-  }
 
-  static async start(context) {
-    await this.startProject(context);
-    await this.startWorker(context);
-  }
+class Application extends Nullstack {
 
   renderPreloader() {
     return (
@@ -61,15 +31,15 @@ class Application extends Nullstack {
   }
 
   hydrate(context) {
-    if(localStorage['mode']) {
+    if (localStorage['mode']) {
       context.mode = localStorage['mode'];
-      if(context.mode === 'dark') {
+      if (context.mode === 'dark') {
         context.oppositeMode = 'light';
       }
     }
   }
 
-  render({router, mode}) {
+  render({ router, mode }) {
     const locale = router.url.startsWith('/pt-br') ? 'pt-BR' : 'en-US';
     return (
       <main class={mode}>