{"instances":{"application":{"persistent":false},"Header/0-0-0-0":{"expanded":false,"persistent":false,"locale":"en-US","i18n":{"home":{"title":"Nullstack","href":"/"},"links":[{"title":"What is Nullstack?","href":"/what-is-nullstack"},{"title":"Documentation","href":"/getting-started"},{"title":"Examples","href":"/examples"},{"title":"Contributors","href":"/contributors"},{"title":"F.A.Q","href":"/frequently-asked-questions"},{"title":"Waifu","href":"/waifu"}],"menu":{"title":"Toggle Menu"},"action":{"title":"Get Started","href":"/getting-started"},"search":{"title":"Search [ctrl + k]"},"language":{"title":"Português","href":"/pt-br"},"mode":{"dark":"Night Mode","light":"Day Mode"}}},"Article/0-0-0-18/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 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>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=\"/jsx-elements#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><span class=\"token literal-property property\">amount<\\/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 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","persistent":true,"locale":"en-US","i18n":{"lead":"Have any questions or suggestions?","cta":"Join our Discord","next":"Next Step","learn":"Learn more about"},"description":"Every function in Nullstack receives a context as the argument.","topics":[{"title":"About Nullstack","links":[{"title":"What is Nullstack?","href":"/what-is-nullstack"},{"title":"Getting started","href":"/getting-started"}]},{"title":"Core Features","links":[{"title":"Stateless Components","href":"/stateless-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":"Two-way bindings","href":"/two-way-bindings"},{"title":"JSX elements","href":"/jsx-elements"},{"title":"Refs","href":"/refs"},{"title":"Styles","href":"/styles"},{"title":"Persistent Components","href":"/persistent-components"}]},{"title":"Context Keys","links":[{"title":"Routes and params","href":"/routes-and-params"},{"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":"Server request and response","href":"/server-request-and-response"},{"title":"Service Worker","href":"/service-worker"}]},{"title":"Advanced concepts","links":[{"title":"Proxy","href":"/proxy"},{"title":"Application Startup","href":"/application-startup"},{"title":"Script runner","href":"/script-runner"},{"title":"How to customize Webpack","href":"/how-to-customize-webpack"},{"title":"Transpilation and Security","href":"/transpilation-and-security"},{"title":"TypeScript","href":"/typescript"}]},{"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":"Other","links":[{"title":"Nullstack Logo","href":"/nullstack-logo"},{"title":"How to deploy","href":"/how-to-deploy-a-nullstack-application"}]}]},"GoogleAnalytics/0-0-0-19":{"persistent":false},"Loader/0-0-0-21":{"persistent":false},"Footer/0-0-0-22":{"persistent":false,"locale":"en-US","i18n":{"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}],"star":{"story":"Want to show your love and help us spread the word?","action":"Leave a star on GitHub"}}}},"page":{"image":"/image-1200x630.png","status":200,"locale":"en-US","title":"Context - Nullstack","description":"Every function in Nullstack receives a context as the argument."}}