marko 5.23.0 → 5.25.0

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

@@ -18,7 +18,7 @@ There are two (non-exclusive) ways to add TypeScript to a Marko project:
   📦 package.json
   <mark><img src="./icons/ts.svg" width=16> tsconfig.json</mark>
   </pre>
-- **If you’re [publishing packages of Marko tags](https://markojs.com/docs/custom-tags/#publishing-tags-to-npm)**, add the following to [your `marko.json`](https://markojs.com/docs/marko-json/):
+- **If you’re [publishing packages of Marko tags](https://markojs.com/docs/custom-tags/#publishing-tags-to-npm)**, add the following to [your `marko.json`](./marko-json.md):
   ```json
   "script-lang": "ts"
   ```
@@ -28,7 +28,7 @@ There are two (non-exclusive) ways to add TypeScript to a Marko project:
 
 ## Typing a tag's `input`
 
-A `.marko` file will use any exported `Input` type for [that file’s `input` object](https://markojs.com/docs/class-components/#input).
+A `.marko` file will use any exported `Input` type for [that file’s `input` object](./class-components.md#input).
 
 This can be `export type Input` or `export interface Input`.
 
@@ -66,7 +66,7 @@ export interface Input extends PriceInput {
 
 ### Generic `Input`s
 
-[Generic Types and Type Parameters](https://www.typescriptlang.org/docs/handbook/2/generics.html) on `Input` are recognized throughout the entire `.marko` template (excluding [static statements](https://markojs.com/docs/syntax/#static-javascript)).
+[Generic Types and Type Parameters](https://www.typescriptlang.org/docs/handbook/2/generics.html) on `Input` are recognized throughout the entire `.marko` template (excluding [static statements](./syntax.md#static-javascript)).
 
 For example, if you set up a component like this:
 
@@ -114,19 +114,19 @@ Marko exposes [type definitions](https://github.com/marko-js/marko/blob/main/pac
 - **`Marko.TemplateInput<Input>`**
   - The object accepted by the render methods of a template. It includes the template's `Input` as well as `$global` values.
 - **`Marko.Body<Params, Return>`**
-  - The type of the [body content](https://markojs.com/docs/body-content/) of a tag (`renderBody`)
+  - The type of the [body content](./body-content.md) of a tag (`renderBody`)
 - **`Marko.Component<Input, State>`**
-  - The base class for a [class component](https://markojs.com/docs/class-components/)
+  - The base class for a [class component](./class-components.md)
 - **`Marko.Renderable`**
-  - Values accepted by the [`<${dynamic}/>` tag](https://markojs.com/docs/syntax/#dynamic-tagname)
+  - Values accepted by the [`<${dynamic}/>` tag](./syntax.md#dynamic-tagname)
   - `string | Marko.Template | Marko.Body | { renderBody: Marko.Body}`
 - **`Marko.Out`**
   - 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
+  - The [result](./rendering.md#renderresult) of rendering a Marko template
   - `ReturnType<template.renderSync>`
   - `Awaited<ReturnType<template.render>>`
 - **`Marko.Emitter`**
@@ -137,10 +137,10 @@ Marko exposes [type definitions](https://github.com/marko-js/marko/blob/main/pac
   - Helpers to extract the input and return types for the specified `keyof Marko.NativeTag`
 - **`Marko.BodyParameters<Body>`** and **`Marko.BodyReturnType<Body>`**
   - Helpers to extract the parameters and return types from the specified `Marko.Body`
-- **`Marko.Repeated<T>`** and **`Marko.Repeatable<T>`**
-  - Used to represent types for attributes tags which can have one or many instances
-  - `Marko.Repeated<T>`: `[T, T, ...T[]]` (array with at least two items)
-  - `Marko.Repeatable<T>`: `T | Marko.Repeated<T>`
+- **`Marko.AttrTag<T>`** and **`Marko.RepeatableAttrTag<T>`**
+  - Used to represent types for [attributes tags](./body-content.md#named-body-content)
+  - `Marko.AttrTag<T>`: A single attribute tag
+  - `Marko.RepeatableAttrTag<T>`: One or more attribute tags
 
 ### Typing `renderBody`
 
@@ -221,7 +221,7 @@ $ const { color, renderBody, ...restOfInput } = input;
 
 ## TypeScript Syntax in `.marko`
 
-Any [JavaScript expression in Marko](https://markojs.com/docs/syntax/#inline-javascript) can also be written as a TypeScript expression.
+Any [JavaScript expression in Marko](./syntax.md#inline-javascript) can also be written as a TypeScript expression.
 
 ### Tag Type Parameters
 

package/index.d.ts

@@ -311,8 +311,8 @@ declare namespace Marko {
     removeAllListeners(eventName?: PropertyKey): this;
   }
 
-  export type Repeated<T> = [T, T, ...T[]];
-  export type Repeatable<T> = T | Repeated<T>;
+  export type AttrTag<T> = T & Iterable<AttrTag<T>>;
+  export type RepeatableAttrTag<T> = Repeatable<AttrTag<T>>;
 
   export interface NativeTags {
     [name: string]: {
@@ -326,3 +326,5 @@ declare namespace Marko {
   export type NativeTagReturn<Name extends keyof NativeTags> =
     NativeTags[Name]["return"];
 }
+
+type Repeatable<T> = T | [T, T, ...T[]];

package/package.json

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

package/src/runtime/components/entry/index-browser.js

@@ -1,11 +1,7 @@
-var initComponents = require("../init-components");
-require("../ComponentsContext").___initClientRendered =
-  initComponents.___initClientRendered;
+var registry = require("../registry");
 
 exports.getComponentForEl = require("../util").___getComponentForEl;
-exports.init = window.$initComponents = initComponents.___initServerRendered;
-
-var registry = require("../registry");
+exports.init = registry.___initServerRendered;
 exports.register = function (id, component) {
   registry.r(id, function () {
     return component;