René's URL Explorer Experiment


Title: Proxy - Nullstack

Open Graph Title: Proxy - Nullstack

Description: Proxies are the basic mechanism that allow Nullstack to implement rendering and context

Open Graph Description: Proxies are the basic mechanism that allow Nullstack to implement rendering and context

Opengraph URL: https://nullstack.app/proxy

Generator: Created with Nullstack - https://nullstack.app

direct link

Domain: nullstack.app

og:imagehttps://nullstack.app/image-1200x630.png
og:typewebsite
og:site_nameNullstack
og:localeen-US
mobile-web-app-capableyes
apple-mobile-web-app-capableyes
application-nameNullstack
apple-mobile-web-app-titleNullstack
msapplication-starturl/
msapplication-TileColor#2d3748
nullstack{"page":{"image":"/image-1200x630.png","status":200,"locale":"en-US","title":"Proxy - Nullstack","description":"Proxies are the basic mechanism that allow Nullstack to implement rendering and context"},"environment":{"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"23ad2dd940244ab04e281282c05613bd73043c4f","name":""},"settings":{},"worker":{"enabled":true,"fetching":false,"preload":["/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/frequently-asked-questions","/full-stack-lifecycle","/getting-started","/how-to-customize-webpack","/how-to-deploy-a-nullstack-application","/jsx-elements","/nullstack-logo","/persistent-components","/proxy","/refs","/routes-and-params","/script-runner","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/stateless-components","/static-site-generation","/styles","/transpilation-and-security","/two-way-bindings","/typescript","/what-is-nullstack","/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","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"staleWhileRevalidate":[],"cacheFirst":[],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true},"params":{"slug":"proxy"},"project":{"domain":"nullstack.app","name":"Nullstack","color":"#d22365","viewport":"width=device-width, initial-scale=1, shrink-to-fit=no","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"},"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/proxy":{"title":"Proxy","html":"

Proxies are the basic mechanism that allow Nullstack to implement rendering and context<\\/p>\n

Understanding the proxy<\\/a><\\/h2>

Nullstack has some conventions over when to proxy an object<\\/p>\n

Any mutations to a proxy will trigger a rerender cycle<\\/p>\n

Instances of Nullstack class are always proxied<\\/p>\n

import<\\/span> Nullstack from<\\/span> 'nullstack'<\\/span>;<\\/span>\n\nclass<\\/span> Component<\\/span> extends<\\/span> Nullstack<\\/span> {<\\/span>\n\n  // standard javascript objects are proxied<\\/span>\n  standardObjects =<\\/span> {<\\/span> key<\\/span>:<\\/span> 'value'<\\/span> }<\\/span>\n\n  // nested standard javascript objects are proxied<\\/span>\n  nestedObjects =<\\/span> {<\\/span>nested<\\/span>:<\\/span> {<\\/span> key<\\/span>:<\\/span> 'value'<\\/span> }<\\/span>}<\\/span>\n\n  // standard arrays are proxied<\\/span>\n  standardArray =<\\/span> [<\\/span>1<\\/span>,<\\/span> 2<\\/span>,<\\/span> 3<\\/span>]<\\/span>\n\n  // nested standard arrays are proxied<\\/span>\n  nestedArray =<\\/span> [<\\/span>[<\\/span>1<\\/span>,<\\/span> 2<\\/span>,<\\/span> 3<\\/span>]<\\/span>]<\\/span>\n\n  // custom classes are not proxied<\\/span>\n  customClassInstance =<\\/span> new<\\/span> CustomClass<\\/span>(<\\/span>)<\\/span>\n\n  // uderscored properties are never proxied<\\/span>\n  _underscoredArray =<\\/span> [<\\/span>]<\\/span>\n  _underscoredObject =<\\/span> {<\\/span>}<\\/span>\n\n  // dom references are not proxied<\\/span>\n  element =<\\/span> null<\\/span>\n\n  render<\\/span>(<\\/span>)<\\/span> {<\\/span>\n    <<\\/span>div<\\/span> ref<\\/span>=<\\/span>{<\\/span>this<\\/span>.<\\/span>element}<\\/span><\\/span>><\\/span><\\/span> element </<\\/span>div<\\/span>><\\/span><\\/span>\n  }<\\/span>\n\n}<\\/span>\n\nexport<\\/span> default<\\/span> Component;<\\/span>\n<\\/code><\\/pre>\n
Understanding the functions scope<\\/a><\\/h2>
Nullstack has some conventions over when to expose the context to a function<\\/p>\n
import<\\/span> Nullstack from<\\/span> 'nullstack'<\\/span>;<\\/span>\n\nclass<\\/span> Component<\\/span> extends<\\/span> Nullstack<\\/span> {<\\/span>\n\n  static<\\/span> async<\\/span> staticAsyncFunction<\\/span>(<\\/span>serverContext<\\/span>)<\\/span> {<\\/span>\n    // static and async functions have access to the server context<\\/span>\n    // an instance method reflection of this function is created<\\/span>\n    // this will be bound to the Component class<\\/span>\n  }<\\/span>\n\n  static<\\/span> async<\\/span> _underscoredStaticAsyncFunction<\\/span>(<\\/span>)<\\/span> {<\\/span>\n    // static and async and underscored functions have no access to context<\\/span>\n    // this will be bound to the Component class<\\/span>\n  }<\\/span>\n\n  static<\\/span> staticFunction<\\/span>(<\\/span>)<\\/span> {<\\/span>\n    // static only functions have no access to context<\\/span>\n    // this will be bound to the Component class<\\/span>\n  }<\\/span>\n\n  static<\\/span> _underscoredStaticFunction<\\/span>(<\\/span>)<\\/span> {<\\/span>\n    // static only and underscored functions have no access to context<\\/span>\n    // this will be bound to the Component class<\\/span>\n  }<\\/span>\n\n  method<\\/span>(<\\/span>clientContext<\\/span>)<\\/span> {<\\/span>\n    // methods have access to the client context<\\/span>\n    // this will be bound to the instance<\\/span>\n  }<\\/span>\n\n  _underscoredMethod<\\/span>(<\\/span>)<\\/span> {<\\/span>\n    // underscored methods have no access to the client context<\\/span>\n    // this will be bound to the instance<\\/span>\n  }<\\/span>\n\n  async<\\/span> asyncMethod<\\/span>(<\\/span>clientContext<\\/span>)<\\/span> {<\\/span>\n    // async methods have access to the client context<\\/span>\n    // this will be bound to the instance<\\/span>\n  }<\\/span>\n   \n  async<\\/span> _underscoredAsyncMethod<\\/span>(<\\/span>)<\\/span> {<\\/span>\n    // underscored async methods have no access to the client context<\\/span>\n    // this will be bound to the instance<\\/span>\n  }<\\/span>\n\n}<\\/span>\n\nexport<\\/span> default<\\/span> Component;<\\/span>\n<\\/code><\\/pre>\n
Underscored tricks<\\/a><\\/h2>
You can create a method starting with _<\\/code>, that means you're creating vanilla JS code that ignores proxies.<\\/p>\n
With that you'll be able to add or remove the event listener.<\\/p>\n
import<\\/span> Nullstack from<\\/span> \"Nullstack\"<\\/span>;<\\/span>\n\nclass<\\/span> Application<\\/span> extends<\\/span> Nullstack<\\/span> {<\\/span>\n  _listener<\\/span>(<\\/span>)<\\/span> {<\\/span>\n    // do something<\\/span>\n  }<\\/span>\n\n  async<\\/span> hydrate<\\/span>(<\\/span>)<\\/span> {<\\/span>\n    window.<\\/span>addEventListener<\\/span>(<\\/span>\"resize\"<\\/span>,<\\/span> this<\\/span>.<\\/span>_listener,<\\/span> false<\\/span>)<\\/span>;<\\/span>\n  }<\\/span>\n\n  async<\\/span> terminate<\\/span>(<\\/span>)<\\/span> {<\\/span>\n    window.<\\/span>removeEventListener<\\/span>(<\\/span>\"resize\"<\\/span>,<\\/span> this<\\/span>.<\\/span>_listener,<\\/span> false<\\/span>)<\\/span>;<\\/span>\n  }<\\/span>\n\n  render<\\/span>(<\\/span>)<\\/span> {<\\/span>\n    return<\\/span> <<\\/span>main<\\/span>><\\/span><\\/span>Content</<\\/span>main<\\/span>><\\/span><\\/span>;<\\/span>\n  }<\\/span>\n}<\\/span>\n\nexport<\\/span> default<\\/span> Application;<\\/span>\n<\\/code><\\/pre>\n
You can also use it to ignore the context<\\/p>\n
import<\\/span> Nullstack from<\\/span> \"Nullstack\"<\\/span>;<\\/span>\n\nclass<\\/span> Application<\\/span> extends<\\/span> Nullstack<\\/span> {<\\/span>\n  _method<\\/span>(<\\/span>prop<\\/span>)<\\/span> {<\\/span>\n    // do something<\\/span>\n  }<\\/span>\n\n  async<\\/span> hydrate<\\/span>(<\\/span>)<\\/span> {<\\/span>\n    // notice its not passing an object as context normally requires<\\/span>\n    this<\\/span>.<\\/span>_method<\\/span>(<\\/span>true<\\/span>)<\\/span>\n  }<\\/span>\n\n}<\\/span>\n\nexport<\\/span> default<\\/span> Application;<\\/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":"Proxies are the basic mechanism that allow Nullstack to implement rendering and context","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"}}}},"context":{"mode":"light","oppositeMode":"dark"}}

Links:

Nullstack https://nullstack.app/
What is Nullstack?https://nullstack.app/what-is-nullstack
Documentationhttps://nullstack.app/getting-started
Exampleshttps://nullstack.app/examples
Contributorshttps://nullstack.app/contributors
F.A.Qhttps://nullstack.app/frequently-asked-questions
Waifuhttps://nullstack.app/waifu
Portuguêshttps://nullstack.app/pt-br
🇧🇷https://nullstack.app/pt-br
https://discord.gg/eDZfKz264v
Starhttps://github.com/nullstack/nullstack
What is Nullstack?https://nullstack.app/what-is-nullstack
Getting startedhttps://nullstack.app/getting-started
Stateless Componentshttps://nullstack.app/stateless-components
Stateful componentshttps://nullstack.app/stateful-components
Full stack lifecyclehttps://nullstack.app/full-stack-lifecycle
Server functionshttps://nullstack.app/server-functions
Contexthttps://nullstack.app/context
Two-way bindingshttps://nullstack.app/two-way-bindings
JSX elementshttps://nullstack.app/jsx-elements
Refshttps://nullstack.app/refs
Styleshttps://nullstack.app/styles
Persistent Componentshttps://nullstack.app/persistent-components
Routes and paramshttps://nullstack.app/routes-and-params
Context datahttps://nullstack.app/context-data
Context instanceshttps://nullstack.app/context-instances
Context environmenthttps://nullstack.app/context-environment
Context pagehttps://nullstack.app/context-page
Context projecthttps://nullstack.app/context-project
Context settingshttps://nullstack.app/context-settings
Context secretshttps://nullstack.app/context-secrets
Server request and responsehttps://nullstack.app/server-request-and-response
Service Workerhttps://nullstack.app/service-worker
Proxyhttps://nullstack.app/proxy
Application Startuphttps://nullstack.app/application-startup
Script runnerhttps://nullstack.app/script-runner
How to customize Webpackhttps://nullstack.app/how-to-customize-webpack
Transpilation and Securityhttps://nullstack.app/transpilation-and-security
TypeScripthttps://nullstack.app/typescript
Server-side renderinghttps://nullstack.app/server-side-rendering
Static site generationhttps://nullstack.app/static-site-generation
Single page applicationshttps://nullstack.app/single-page-applications
Nullstack Logohttps://nullstack.app/nullstack-logo
How to deployhttps://nullstack.app/how-to-deploy-a-nullstack-application
Understanding the proxyhttps://nullstack.app/proxy#understanding-the-proxy
Understanding the functions scopehttps://nullstack.app/proxy#understanding-the-functions-scope
Underscored trickshttps://nullstack.app/proxy#underscored-tricks
Next Step https://nullstack.app/proxy#next-step
Advanced concepts: Application Startuphttps://nullstack.app/application-startup
Join our Discordhttps://discord.gg/eDZfKz264v
https://twitter.com/nullstackapp
https://github.com/nullstack/nullstack
https://discord.gg/eDZfKz264v
https://www.youtube.com/nullstack
https://www.linkedin.com/company/nullstack-app
Leave a star on GitHubhttps://github.com/nullstack/nullstack/stargazers

Viewport: width=device-width, initial-scale=1, shrink-to-fit=no

URLs of crawlers that visited me.