marko 5.23.0 → 5.24.0
Sign up to get free protection for your applications and to get access to all the features.
package/docs/class-components.md
CHANGED
@@ -565,7 +565,7 @@ this.setStateDirty("numbers");
|
|
565
565
|
|
566
566
|
### `this.input`
|
567
567
|
|
568
|
-
The current input for the component. Setting `this.input` will rerender the component
|
568
|
+
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).
|
569
569
|
|
570
570
|
## Variables
|
571
571
|
|
package/docs/express.md
CHANGED
@@ -29,7 +29,7 @@ Express’s builtin view engine may be asynchronous, but it doesn’t support st
|
|
29
29
|
|
30
30
|
[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.
|
31
31
|
|
32
|
-
> **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
|
32
|
+
> **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).
|
33
33
|
|
34
34
|
```js
|
35
35
|
import express from "express";
|
@@ -50,7 +50,7 @@ app.get("/", function (req, res) {
|
|
50
50
|
app.listen(8080);
|
51
51
|
```
|
52
52
|
|
53
|
-
> **Note**: Older versions of `@marko/express` used to also attach Express’s `app`, `req`, and `res` objects onto
|
53
|
+
> **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:
|
54
54
|
>
|
55
55
|
> ```js
|
56
56
|
> app.get("/", function (req, res) {
|
package/docs/fastify.md
CHANGED
@@ -21,7 +21,7 @@ npm install marko @marko/fastify fastify --save
|
|
21
21
|
|
22
22
|
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.
|
23
23
|
|
24
|
-
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
|
24
|
+
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`.
|
25
25
|
|
26
26
|
```javascript
|
27
27
|
import fastify from "fastify";
|
package/docs/rendering.md
CHANGED
@@ -209,7 +209,7 @@ This method is available on the server, but not available by default in the brow
|
|
209
209
|
|
210
210
|
## Global data
|
211
211
|
|
212
|
-
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
|
212
|
+
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.
|
213
213
|
|
214
214
|
Global values persist across renders.
|
215
215
|
|
@@ -221,11 +221,21 @@ View.render({
|
|
221
221
|
});
|
222
222
|
```
|
223
223
|
|
224
|
+
Within the template you can access `$global` similar to accessing `input`.
|
225
|
+
|
226
|
+
```marko
|
227
|
+
<div>
|
228
|
+
You are on ${$global.flags.includes("mobile") ? "mobile" : "desktop"}
|
229
|
+
</div>
|
230
|
+
```
|
231
|
+
|
232
|
+
> **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.
|
233
|
+
|
224
234
|
> **Warning:** Use `$global` with caution; it is visible in any component.
|
225
235
|
|
226
236
|
### Sending global data to browsers
|
227
237
|
|
228
|
-
⚠️ To prevent accidentally exposing sensitive data, by default **no keys** in
|
238
|
+
⚠️ 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`.
|
229
239
|
|
230
240
|
Values must be serializable by [the `warp10` module](https://www.npmjs.com/package/warp10).
|
231
241
|
|
@@ -238,8 +248,8 @@ app.get("/", (req, res) => {
|
|
238
248
|
Page.render(
|
239
249
|
{
|
240
250
|
$global: {
|
241
|
-
isIos: /iPad|iPhone/.test(ua), // Serialized and available on the server and browser as
|
242
|
-
isAndroid: /Android/.test(ua), // Serialized and available on the server and browser as
|
251
|
+
isIos: /iPad|iPhone/.test(ua), // Serialized and available on the server and browser as `$global.isIos`
|
252
|
+
isAndroid: /Android/.test(ua), // Serialized and available on the server and browser as `$global.isAndroid`
|
243
253
|
req, // Only available server-side and not serialized, because it’s not in `serializedGlobals`
|
244
254
|
|
245
255
|
serializedGlobals: {
|
package/docs/typescript.md
CHANGED
@@ -124,7 +124,7 @@ Marko exposes [type definitions](https://github.com/marko-js/marko/blob/main/pac
|
|
124
124
|
- The render context with methods like `write`, `beginAsync`, etc.
|
125
125
|
- `ReturnType<template.render>`
|
126
126
|
- **`Marko.Global`**
|
127
|
-
- The type of the object
|
127
|
+
- The type of the object in `$global` and `out.global` that can be passed to a template's render methods as the `$global` property.
|
128
128
|
- **`Marko.RenderResult`**
|
129
129
|
- The [result](https://markojs.com/docs/rendering/#renderresult) of rendering a Marko template
|
130
130
|
- `ReturnType<template.renderSync>`
|
package/package.json
CHANGED
@@ -1,11 +1,11 @@
|
|
1
1
|
{
|
2
2
|
"name": "marko",
|
3
|
-
"version": "5.
|
3
|
+
"version": "5.24.0",
|
4
4
|
"license": "MIT",
|
5
5
|
"description": "UI Components + streaming, async, high performance, HTML templating for Node.js and the browser.",
|
6
6
|
"dependencies": {
|
7
|
-
"@marko/compiler": "^5.
|
8
|
-
"@marko/translator-default": "^5.
|
7
|
+
"@marko/compiler": "^5.26.0",
|
8
|
+
"@marko/translator-default": "^5.24.0",
|
9
9
|
"app-module-path": "^2.2.0",
|
10
10
|
"argly": "^1.2.0",
|
11
11
|
"browser-refresh-client": "1.1.4",
|