marko 5.22.9 → 5.24.0

package/dist/runtime/components/renderer.js

@@ -220,7 +220,8 @@ renderingLogic)
     out,
     componentDef,
     component,
-    component._u_);
+    component._u_,
+    out.global);
 
 
     endComponent(out, componentDef);

package/docs/class-components.md

@@ -565,7 +565,7 @@ this.setStateDirty("numbers");
 
 ### `this.input`
 
-The current input for the component. Setting `this.input` will rerender the component. If a `$global` property is set, `out.global` will also be updated during the rerender, otherwise the existing `$global` is used.
+The current input for the component. Setting `this.input` will rerender the component which can be useful for testing, but generally avoided (prefer `state` instead).
 
 ## Variables
 

package/docs/express.md

@@ -29,7 +29,7 @@ Express’s builtin view engine may be asynchronous, but it doesn’t support st
 
 [The `@marko/express` package](https://www.npmjs.com/package/@marko/express) adds a `res.marko()` method to [Express’s response object](https://expressjs.com/en/api.html#res). This method works like [`res.render()`](https://expressjs.com/en/api.html#res.render), but without the restrictions of Express’s view engine, letting you take full advantage of Marko’s streaming and modular template organization.
 
-> **ProTip**: By using `res.marko()`, properties from [`app.locals`](https://expressjs.com/en/api.html#app.locals) and [`res.locals`](https://expressjs.com/en/api.html#res.locals) are automatically [available on `out.global`](https://markojs.com/docs/rendering/#global-data).
+> **ProTip**: By using `res.marko()`, properties from [`app.locals`](https://expressjs.com/en/api.html#app.locals) and [`res.locals`](https://expressjs.com/en/api.html#res.locals) are automatically [available on `$global`](https://markojs.com/docs/rendering/#global-data).
 
 ```js
 import express from "express";
@@ -50,7 +50,7 @@ app.get("/", function (req, res) {
 app.listen(8080);
 ```
 
-> **Note**: Older versions of `@marko/express` used to also attach Express’s `app`, `req`, and `res` objects onto `out.global`. This meant uncontrolled network data could cause new and exciting surprises in your app code. Nowadays we recommend explicitly accessing the specific pieces of the HTTP exchange you’re interested in, like this:
+> **Note**: Older versions of `@marko/express` used to also attach Express’s `app`, `req`, and `res` objects onto `$global`. This meant uncontrolled network data could cause new and exciting surprises in your app code. Nowadays we recommend explicitly accessing the specific pieces of the HTTP exchange you’re interested in, like this:
 >
 > ```js
 > app.get("/", function (req, res) {

package/docs/fastify.md

@@ -21,7 +21,7 @@ npm install marko @marko/fastify fastify --save
 
 The [`@marko/fastify`](https://github.com/marko-js/fastify/) adds a `reply.marko` decorator to the `reply` object. This function allows us to pass in a Marko template and supports Marko's streaming and modular approach to templates.
 
-By using `reply.marko` you'll automatically have access to `app.locals`, and `reply.locals` from within your Marko template and custom tags. These values are added to `out.global`.
+By using `reply.marko` you'll automatically have access to `app.locals`, and `reply.locals` from within your Marko template and custom tags. These values are added to `$global`.
 
 ```javascript
 import fastify from "fastify";

package/docs/rendering.md

@@ -209,7 +209,7 @@ This method is available on the server, but not available by default in the brow
 
 ## Global data
 
-If you need to make data available to all rendered views, use the `$global` property on the input data object. This property will be removed from `input` and merged into the `out.global` property.
+If you need to make data available to all rendered views, use the `$global` property on the input data object. This property will be removed from `input` and provided to the template through a variable called `$global`. It is also made available on the `out.global` property.
 
 Global values persist across renders.
 
@@ -221,11 +221,21 @@ View.render({
 });
 ```
 
+Within the template you can access `$global` similar to accessing `input`.
+
+```marko
+<div>
+  You are on ${$global.flags.includes("mobile") ? "mobile" : "desktop"}
+</div>
+```
+
+> **Note:** `$global` is not available within [`static`](./syntax.md#static-javascript) parts of the template. In order to reference `$global` within the component class you must use `out.global` from one of the lifecycle methods that provide it.
+
 > **Warning:** Use `$global` with caution; it is visible in any component.
 
 ### Sending global data to browsers
 
-⚠️ To prevent accidentally exposing sensitive data, by default **no keys** in `out.global` are sent to browsers. To serialize data to the frontend, name the desired properties in `$global.serializedGlobals`.
+⚠️ To prevent accidentally exposing sensitive data, by default **no keys** in `$global` are sent to browsers. To serialize data to the frontend, name the desired properties in `$global.serializedGlobals`.
 
 Values must be serializable by [the `warp10` module](https://www.npmjs.com/package/warp10).
 
@@ -238,8 +248,8 @@ app.get("/", (req, res) => {
   Page.render(
     {
       $global: {
-        isIos: /iPad|iPhone/.test(ua), // Serialized and available on the server and browser as `out.global.isIos`
-        isAndroid: /Android/.test(ua), // Serialized and available on the server and browser as `out.global.isAndroid`
+        isIos: /iPad|iPhone/.test(ua), // Serialized and available on the server and browser as `$global.isIos`
+        isAndroid: /Android/.test(ua), // Serialized and available on the server and browser as `$global.isAndroid`
         req, // Only available server-side and not serialized, because it’s not in `serializedGlobals`
 
         serializedGlobals: {

package/docs/typescript.md

@@ -124,7 +124,7 @@ Marko exposes [type definitions](https://github.com/marko-js/marko/blob/main/pac
   - The render context with methods like `write`, `beginAsync`, etc.
   - `ReturnType<template.render>`
 - **`Marko.Global`**
-  - The type of the object on `out.global` that can be passed to a template's render methods as the `$global` property
+  - The type of the object in `$global` and `out.global` that can be passed to a template's render methods as the `$global` property.
 - **`Marko.RenderResult`**
   - The [result](https://markojs.com/docs/rendering/#renderresult) of rendering a Marko template
   - `ReturnType<template.renderSync>`

package/package.json

@@ -1,11 +1,11 @@
 {
     "name": "marko",
-    "version": "5.22.9",
+    "version": "5.24.0",
     "license": "MIT",
     "description": "UI Components + streaming, async, high performance, HTML templating for Node.js and the browser.",
     "dependencies": {
-        "@marko/compiler": "^5.23.6",
-        "@marko/translator-default": "^5.22.6",
+        "@marko/compiler": "^5.26.0",
+        "@marko/translator-default": "^5.24.0",
         "app-module-path": "^2.2.0",
         "argly": "^1.2.0",
         "browser-refresh-client": "1.1.4",

package/src/runtime/components/renderer.js

@@ -220,7 +220,8 @@ function createRendererFunc(
       out,
       componentDef,
       component,
-      component.___rawState
+      component.___rawState,
+      out.global
     );
 
     endComponent(out, componentDef);