📝 unstable next docs

i18n/en-US/articles/context-data.md

@@ -14,9 +14,7 @@ You can use this key to avoid polluting your DOM with invalid attributes.
 
 > 💡 This helps Nullstack set attributes without wasting time validating them.
 
-Any `data-*` attributes will receive a respective camelized key on the `data` object.
-
-You can assign `data` attributes both via `data-*` and a `data` key that accepts an object with camelized keys.
+Any `data-*` attributes will receive a respective camelized key on the `data` object when passed to an event context.
 
 The kebab version is also available in the context.
 
@@ -30,25 +28,13 @@ class ContextData extends Nullstack {
   calculate({data}) {
     this.count = this.count * data.multiply + data.sum;
   }
-
-  renderInner(context) {
-    const {data} = context;
-    return (
-      <div data={data}>
-        {data.frameworkName}
-        is same as
-        {context['data-framework-name']}
-      </div>
-    )
-  }
 
   render({data}) {
     return (
       <div> 
         <button onclick={this.calculate} data-multiply={3} data={{sum: 2}}>
           Calculate
         </button>
-        <Inner data-framework-name="Nullstack" />
       </div>
     )
   }

i18n/en-US/articles/context-environment.md

@@ -18,6 +18,7 @@ The following keys are available in the object:
 - **production**: `boolean`
 - **static**: `boolean`
 - **key**: `string`
+- **hot** `boolean`
 
 ```jsx
 import Nullstack from 'nullstack';
@@ -44,6 +45,29 @@ export default Page;
 
 The environment *key* is an md5 hash of the current environment folder outputs. The key is appended to [assets](/styles) and [static API](/static-site-generation) path to assist cache control.
 
+The environment *hot* is boolean that identifies if hot reload is enabled and is available only in development mode.
+
+## Custom Events
+
+During development any updates to tracked files will raise a custom event you can use to facilitate development flow.
+
+```jsx
+import Nullstack from 'nullstack';
+
+class BlogArticle extends Nullstack {
+
+  hydrate({environment}) {
+    if(!environment.hot) return
+    window.addEventListener(environment.event, this.initiate);
+  }
+
+}
+
+export default BlogArticle;
+```
+
+> 🔥 `environment.event` is only available in client functions/lifecycles.
+
 ## Next step
 
 ⚔ Learn about the [context `page`](/context-page).

i18n/en-US/articles/context-secrets.md

@@ -56,4 +56,4 @@ Any environment variable starting with NULLSTACK_SECRETS_ will be mapped to the
 
 ## Next step
 
-⚔ Learn about the [instance self](/instance-self).
+⚔ Learn about the [server request and response](/server-request-and-response).

i18n/en-US/articles/full-stack-lifecycle.md

@@ -47,6 +47,8 @@ Nullstack will wait till the promise is resolved and then finally generate the H
 
 If the user is navigating from another route this method will run in the client.
 
+After this method promise is fulfilled `this.initiated` will be set to true
+
 ```jsx
 import Nullstack from 'nullstack';
 
@@ -60,7 +62,12 @@ class Component extends Nullstack {
     });
   }
 
-  // ...
+  render() {
+    if(!this.initiated) return false
+    return (
+      <p> {this.task.description} </p>
+    )
+  }
 
 }
 
@@ -103,6 +110,8 @@ This method will always run no matter which environment started the component.
 
 This is a good place to trigger dependencies that manipulate the dom or can only run on the client-side.
 
+After this method promise is fulfilled `this.hydrated` will be set to true
+
 ```jsx
 import Nullstack from 'nullstack';
 
@@ -116,7 +125,12 @@ class Component extends Nullstack {
     }, 1000);
   }
 
-  // ...
+  render() {
+    if(!this.hydrated) return false
+    return (
+      <p> timer id: {this.timer} </p>
+    )
+  }
 
 }
 
@@ -169,6 +183,8 @@ This is the place to clean up whatever you set up in the `hydrate` method.
 
 The instance will be garbage collected after the `Promise` is resolved.
 
+After this method promise is fulfilled `this.terminated` will be set to true which is useful in the case of [persistent components](/persistent-components)
+
 ```jsx
 import Nullstack from 'nullstack';
 
@@ -180,6 +196,12 @@ class Component extends Nullstack {
     clearInterval(this.timer);
   }
 
+  executeBackgroundTask() {
+    if(!this.terminated) {
+      // ...
+    }
+  }
+
   // ...
 
 }

i18n/en-US/articles/jsx-elements.md

@@ -225,11 +225,39 @@ export default Post;
 
 > 🔥 Be careful! When using user-generated HTML you are in risk of script injection
 
-## The head tag
+## Body tag
 
-Renderable components can render inside the `head` tag an unlimited number of times at any depth of the application.
+Renderable components can render a `body` tag an unlimited number of times at any depth of the application.
+
+The `body` attributes of the body tag that are rendered will be merged into the real body tag in the DOM
+
+```jsx
+import Nullstack from 'nullstack';
 
-The `head` tag will only be updated during the [server-side rendering](/server-side-rendering) process and changes will be ignored after the [hydration](/full-stack-lifecycle) process.
+class Application extends Nullstack {
+
+  // ...
+
+  render() {
+    return (
+      <body class="bg-black">
+        {this.modalOpen &&
+          <body class="overflow-hidden">
+            <div class="modal"> modal here <div>
+          </body>
+        }
+      </body>
+    )
+  }
+
+}
+
+export default Application;
+```
+
+## Head tag
+
+Renderable components can render inside the `head` tag an unlimited number of times at any depth of the application.
 
 ```jsx
 import Nullstack from 'nullstack';
@@ -264,4 +292,4 @@ export default Application;
 
 ## Next step
 
-⚔ Learn about the [Nullstack with TypeScript](/typescript).
+⚔ Learn about [refs](/refs).