Marko

https://markojs.com/docs/
Admin
Marko is a JavaScript framework that re-imagines HTML as a language for building dynamic and...
Tokens:50,446
Snippets:493
Trust Score:9.6
Update:10 months ago
Show doc for...
Tokens:
Raw
### Manual Project Setup: Start Application with Node.js

Source: https://markojs.com/docs/introduction/installation

Starts the application by running the Express server script using Node.js. This command assumes the server logic is saved in 'index.js'.

```bash
node index.js
```

--------------------------------

### Manual Project Setup: Install Express Server Dependency

Source: https://markojs.com/docs/introduction/installation

Installs the Express.js framework, which will be used to create a basic server for handling requests and rendering Marko pages.

```bash
npm install express
```

--------------------------------

### Manual Project Setup: Create Directory and Initialize Package

Source: https://markojs.com/docs/introduction/installation

Creates a new project directory and initializes a package.json file using npm. This is the first step in a manual Marko project setup.

```bash
mkdir my-marko-application
cd my-marko-application
npm init --yes
```

--------------------------------

### Install Marko Run Package (npm)

Source: https://markojs.com/docs/marko-run/getting-started

Installs the Marko Run package using npm. This is required for both new projects starting from zero and for adding Marko Run to existing Marko projects.

```sh
npm install @marko/run
```

--------------------------------

### Manual Project Setup: Install Marko and Vite Dependencies

Source: https://markojs.com/docs/introduction/installation

Installs Marko as a project dependency and Vite with its Marko plugin as development dependencies. Requires Node.js and npm.

```bash
npm install marko@next
npm install -D vite @marko/vite
```

--------------------------------

### Preview Production Build with Marko Run (npm exec)

Source: https://markojs.com/docs/marko-run/getting-started

Builds the application for production and starts a local preview server. This is useful for testing the production build before deploying.

```sh
npm exec marko-run preview
```

--------------------------------

### Initialize New Marko Project with Marko Run

Source: https://markojs.com/docs/introduction/installation

Uses npm to initialize a new Marko project with the 'basic' template and starts the development server. Requires Node.js and npm.

```bash
npm init marko -- -t basic
cd ./my-marko-application
npm run dev
```

--------------------------------

### Start Marko Run Development Server (npm exec)

Source: https://markojs.com/docs/marko-run/getting-started

Starts the Marko Run development server using npm exec. This command enables watch mode for rapid development and hot module replacement.

```sh
npm exec marko-run
```

```sh
npm exec marko-run dev
```

--------------------------------

### Manual Project Setup: First Marko Page Content

Source: https://markojs.com/docs/introduction/installation

Defines the basic HTML structure for the root Marko page ('src/routes/index.marko'). This file serves as the entry point for the web application's UI.

```marko
<html lang="en">
    <body>
        <h1>Hello Marko!</h1>
    </body>
</html>
```

--------------------------------

### Initialize Marko Project with Template (npm)

Source: https://markojs.com/docs/marko-run/getting-started

Initializes a new Marko project using a specified template via npm. This is a common starting point for new Marko applications, often including Marko Run by default.

```sh
npm init marko -- -t basic
```

--------------------------------

### Build Production Artifacts with Marko Run (npm exec)

Source: https://markojs.com/docs/marko-run/getting-started

Creates a production-ready build of the Marko Run application. This command optimizes assets and prepares the application for deployment.

```sh
npm exec marko-run build
```

--------------------------------

### Manual Project Setup: Express Server with Vite SSR

Source: https://markojs.com/docs/introduction/installation

Sets up an Express server that integrates with Vite's Server-Side Rendering (SSR) capabilities to render Marko components. This code is intended for development environments.

```javascript
import express from "express";
import { createServer } from "vite";

const app = express();

const vite = await createServer({
  server: {
    middlewareMode: true,
  },
  appType: "custom",
});

app.use(vite.middlewares);

app.get("/", async (req, res) => {
  const template = (
    await vite.ssrLoadModule("./src/routes/index.marko?marko-server-entry")
  ).default;
  const result = template.render();
  res.header("Content-Type", "text/html");
  result.pipe(res);
});

app.listen(3000);
```

--------------------------------

### Inline SCSS and LESS Styles in Marko

Source: https://markojs.com/docs/guide/styling

Shows how to use SCSS and LESS preprocessors with the `<style>` tag by specifying file extensions. Styles are processed by the bundler. Dependencies: SCSS/LESS preprocessor setup.

```marko
<style.scss>
  $primary-color: green;

  .fancy-scss {
    color: $primary-color;
  }
</style>

<div class="fancy-scss">Hello!</div>

<style.less>
  @primary-color: blue;

  .fancy-less {
    color: @primary-color;
  }
</style>

<div class="fancy-less">Hello!</div>
```

--------------------------------

### Manual Project Setup: Vite Configuration with Marko Plugin

Source: https://markojs.com/docs/introduction/installation

Configures Vite to use the Marko plugin by creating a vite.config.ts file. This enables Marko rendering within the Vite build process.

```typescript
import { defineConfig } from "vite";
import marko from "@marko/vite";

export default defineConfig({
  plugins: [marko()],
});
```

--------------------------------

### Marko.js Middleware Function Example

Source: https://markojs.com/docs/marko-run/file-based-routing

Provides an example of a '+middleware.ts' file, demonstrating how to implement middleware for request handling. This example logs request start and completion, and includes error handling using a try-catch-finally block.

```typescript
/* +middleware.ts */
export default async function (context, next) {
  const requestName = `${context.request.method} ${context.url.href}`;
  let success = true;
  console.log(`${requestName} request started`);
  try {
    return await next(); // Wait for subsequent middleware, handler, and page
  } catch (err) {
    success = false;
    throw err;
  } finally {
    console.log(
      `${requestName} completed ${success ? "successfully" : "with errors"}`,
    );
  }
}
```

--------------------------------

### Basic Inline Styles in Marko

Source: https://markojs.com/docs/guide/styling

Demonstrates using the `<style>` tag for globally scoped CSS within a Marko template. Styles are bundled and loaded once. Dependencies: None.

```marko
<style>
  /* Bundled and loaded once */
  .fancy {
    color: green;
  }
</style>

<div class="fancy">Hello!</div>
```

--------------------------------

### Marko: Styling with CSS and Dynamic Styles

Source: https://markojs.com/docs/tutorial/components-and-reactivity

Shows how to add styles directly within a Marko template using the `<style>` tag and apply dynamic styles using CSS variables. This example creates a temperature gauge visualization.

```marko
<let/degF=80>
<const/degC=(degF - 32) * 5 / 9>

<input type="number" value=degF onInput(e) {
  degF = +e.target.value;
}>
<div>
  ${degF}°F ↔ ${degC.toFixed(1)}°C
</div>

<div class="gauge">
  <div class="needle" style={"--rotation": `${degF * 180 / 100}deg`}/>
</div>

<style>
  .gauge {
    position: relative;
    width: 8rem;
    height: 4rem;
    border-radius: 4rem 4rem 0 0;
    background: conic-gradient(from 270deg at 50% 100%, lightblue, blue, green, orange, red 180deg);
  }

  .needle {
    position: absolute;
    box-sizing: border-box;
    width: 4rem;
    height: 4px;
    bottom: -2px;
    background: black;
    border: 1px solid white;
    transform-origin: right;
    transform: rotate(var(--rotation));
  }
</style>
```

--------------------------------

### Basic HTML Template in Marko

Source: https://markojs.com/docs/tutorial/fundamentals

Marko templates are largely compatible with standard HTML. This example shows a simple HTML structure for a blog header and navigation within a Marko file.

```marko
<h1>My Blog</h1>
<nav>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>
```

--------------------------------

### Marko Installed Tag Configuration (marko.json)

Source: https://markojs.com/docs/reference/custom-tag

An example `marko.json` file that specifies the export directory for custom tags within an installed package. This configuration tells Marko where to find the tags exposed by the library.

```json
{
  "exports": "./dist/tags"
}
```

--------------------------------

### Inline CSS Modules with SCSS in Marko

Source: https://markojs.com/docs/guide/styling

Demonstrates using CSS Modules with the SCSS preprocessor by combining a Tag Variable and a file extension on the `<style>` tag. Dependencies: SCSS and CSS Modules support.

```marko
<style.scss/styles>
  $primary-color: green;

  .fancy {
    color: $primary-color;
  }
</style>

<div class=styles.fancy>Hello</div>
```

--------------------------------

### Marko.js Layout Component Example

Source: https://markojs.com/docs/marko-run/file-based-routing

An example of a '+layout.marko' file, which serves as a wrapper component for nested layouts and pages. It defines an 'Input' interface and renders its content within a main HTML structure.

```marko
/* +layout.marko */
export interface Input {
  content: Marko.Body;
}

<main>
  <h1>My Products</h1>

  <${input.content}/> // render the page or layout here
</main>
```

--------------------------------

### Marko: Controllable `<let>` Tag Example

Source: https://markojs.com/docs/reference/core-tag

Demonstrates how to make the `<let>` tag controllable using the `valueChange=` attribute. This allows for interception and transformation of state updates, enabling synchronization between parent and child components.

```marko
<let/value="HELLO">
<let/controlled_value=value valueChange(newValue) { value = newValue.toUpperCase() }>
```

--------------------------------

### Install and Use Marko Type Checker CLI

Source: https://markojs.com/docs/introduction/installation

Installs the `@marko/type-check` package as a development dependency for type checking Marko files. After installation, the `mtc` command can be used as a replacement for `tsc` to perform Marko-specific type checks.

```bash
npm install -D @marko/type-check
```

```bash
mtc
```

--------------------------------

### Inline CSS Modules in Marko

Source: https://markojs.com/docs/guide/styling

Explains how to use CSS Modules by adding a Tag Variable to the `<style>` tag, exposing class names as an object for scoped styling. Dependencies: CSS Modules support in bundler.

```marko
<style/styles>
  .foo { border: 1px solid red }
  .bar { background: green }
</style>

<div class=styles.foo />
<div class=[styles.foo, styles.bar] />
<div class={ [styles.bar]: true } />
<div.${styles.foo} />
```

--------------------------------

### Core Marko To-Do List Example

Source: https://markojs.com/docs/explanation/nested-reactivity

A foundational Marko component demonstrating a client-side To-Do list with add and delete functionality. It uses local state for managing the list of todos and next available ID.

```marko
<let/todos=[
  { id: 0, text: "Learn Marko" },
  { id: 1, text: "Make a Website" },
]>

<ul>
  <for|todo, i| of=todos by="id">
    <li>
      <id/checkboxId>
      <input type="checkbox" id=checkboxId>
      <label for=checkboxId>${todo.text}</label>
      <button title="delete" onClick() {
        todos = todos.toSpliced(i, 1);
      }>&times;</button>
    </li>
  </for>
</ul>

<let/nextId=2/>
<form onSubmit(e) {
  e.preventDefault();
  todos = todos.concat({
    id: nextId++,
    text: e.target.text.value,
  })
}>
  <input name="text" placeholder="Another Item">
  <button type="submit">Add</button>
</form>
```

--------------------------------

### Using TypeScript Syntax in Marko Templates

Source: https://markojs.com/docs/reference/typescript

Illustrates how TypeScript expressions can be directly used within Marko templates for dynamic content rendering and type casting. It shows an example of casting an element to HTMLInputElement.

```marko
<my-tag foo=1 as any>
  ${(input.el as HTMLInputElement).value}
</my-tag>

```

--------------------------------

### Imported Styles in Marko

Source: https://markojs.com/docs/guide/styling

Shows how to import external CSS files into a Marko template using the `import` statement. Useful for sharing styles across multiple templates. Dependencies: Bundler configuration for CSS imports.

```css
/* fancy.css */
.fancy {
  color: red;
}
```

```marko
/* index.marko */
import "./fancy.css";

<div class="fancy">Hello!</div>
```

--------------------------------

### Marko Lifecycle Tag: Integrating with WorldMap API

Source: https://markojs.com/docs/reference/core-tag

This example demonstrates using the `<lifecycle>` tag to initialize, update, and destroy a `WorldMap` instance. It shows how to manage the map's state (coordinates, zoom) based on component data and lifecycle events.

```marko
client import { WorldMap } from "world-map-api";

<let/latitude = 0>
<let/longitude = 0>
<div/container/>
<lifecycle<{ map: WorldMap }>
  onMount() {
    this.map = new WorldMap(container(), { latitude, longitude, zoom });
  }
  onUpdate() {
    this.map.setCoords(latitude, longitude);
    this.map.setZoom(zoom);
  }
  onDestroy() {
    this.map.destroy();
  }
/>
```

--------------------------------

### Marko Reactive Counter Example

Source: https://markojs.com/docs/reference/reactivity

Demonstrates a simple counter using Marko's reactivity. A '<let>' tag initializes a 'count' variable to 0. A button increments 'count', and the button's text content, which displays '${count}', automatically updates to reflect the new value.

```marko
<let/count=0>

<button onClick() {
  count++
}>
  Current: ${count}
</button>
```

--------------------------------

### Imported CSS Modules in Marko

Source: https://markojs.com/docs/guide/styling

Demonstrates importing CSS Modules files (typically named `*.module.css`) into Marko templates. Classes are accessed via an imported `styles` object. Dependencies: Bundler configured for CSS Modules.

```css
/* something.module.css */
.fancy {
  color: red;
}
```

```marko
/* index.marko */
import * as styles from "./something.module.css";
<div class=styles.fancy/>
```

--------------------------------

### Marko Environment Coordination: Tabs Component

Source: https://markojs.com/docs/explanation/targeted-compilation

This Marko tabs component example illustrates environment coordination. Server compilation renders initial HTML, while client compilation generates JavaScript only for interactive elements like tab switching and visibility updates.

```marko
/* tabs.marko */
// Static
<h1>${input.title}</h1>

// Interactive
<let/active=0>
<div>
  <for|section, i| of=input.section>
    <button
      aria-selected=(i === active && 'true')
      onClick() {
        active = i
      }
    >
      ${section.title}
    </button>
  </for>
</div>

// Static content dependent on interactive state
<for|section, i| of=input.section>
  <div hidden=(i !== active)>${section.content}</div>
</for>
```

--------------------------------

### Marko.js Handler Functions (POST, GET)

Source: https://markojs.com/docs/marko-run/file-based-routing

Illustrates the implementation of '+handler.ts' files for handling HTTP requests. Shows synchronous POST handler and an asynchronous GET handler that calls `next()` and returns a Response.

```typescript
/* +handler.ts */
export function POST(context, next) {
  const { request, params, url, meta } = context;
  return new Response("Successfully updated", { status: 200 });
}

export async function GET(context, next) {
  // do something before calling `next`
  const response = await next();
  return response;
}
```

--------------------------------

### Marko Tag Type Arguments with Generics

Source: https://markojs.com/docs/reference/typescript

Shows how to explicitly provide type arguments when using a Marko tag that has generic type parameters. This example explicitly sets the type argument to 'number' for a '<child>' tag.

```marko
/* components/child.marko */
export interface Input<T> {
  value: T;
}

```

```marko
/* index.marko */
// number would be inferred in this case, but we can be explicit
<child<number> value=1 />

```

--------------------------------

### Enable TypeScript for Marko Sites/Web Apps with tsconfig.json

Source: https://markojs.com/docs/reference/typescript

To enable TypeScript support for Marko websites and web applications, a `tsconfig.json` file at the project root is the primary requirement. This configuration file guides the TypeScript compiler.

```plaintext
src/
package.json
tsconfig.json
```

--------------------------------

### Configure tsconfig.json for Marko.js

Source: https://markojs.com/docs/introduction/installation

This JSON configuration file enables TypeScript support for a Marko.js project. It specifies compiler options such as module resolution, output directory, and strict type checking. Ensure this file is placed in the project's root directory.

```json
{
  "include": ["src/**/*"],
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "lib": ["dom", "ESNext"],
    "module": "ESNext",
    "moduleResolution": "bundler",
    "noEmit": true,
    "noImplicitOverride": true,
    "noUnusedLocals": true,
    "outDir": "dist",
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "ESNext",
    "verbatimModuleSyntax": true
  }
}
```

--------------------------------

### Interactive Rating Component in Marko

Source: https://markojs.com/docs/introduction/why-marko

An example of an interactive rating component built with Marko. It uses `<let>` for state (rating, hovering) and conditional logic (`<if>`, `<else>`) to display the rating status dynamically.

```marko
<let/rating=0>
<let/hovering=0>

<div>
  <for|i| from=1 to=5>
    <button 
      class=((hovering || rating) >= i && 'filled')
      onPointerEnter() { hovering = i }
      onPointerLeave() { hovering = 0 }
      onClick() { rating = i; hovering = 0 }
    >*</button>
  </for>
  <span>
    <if=(hovering > 0)>
      ${hovering} star${hovering > 1 ? 's' : ''}
    </if>
    <else if=(rating > 0)>
      Rated ${rating} star${rating > 1 ? 's' : ''}
    </else>
    <else>
      Click to rate
    </else>
  </span>
</div>
```

--------------------------------

### Marko: Repeated Attribute Tags Example

Source: https://markojs.com/docs/reference/language

Demonstrates the use of multiple attribute tags with the same name ('@item') in Marko. These are consumed as an iterable.

```marko
<my-menu>
  <@item value="foo">
    Foo Item
  </@item>

  <@item value="bar">
    Bar Item
  </@item>
</my-menu>
```

--------------------------------

### Auto-Discovered Styles for Marko Custom Tags

Source: https://markojs.com/docs/guide/styling

Illustrates how Marko automatically discovers and processes style files (e.g., `style.css`) located adjacent to custom tag files. Styles are imported and processed like inline styles. Input: `.css` file, Output: Global styles.

```css
/* style.css */
.fancy {
  color: green;
}
```

```marko
/* index.marko */
<div class="fancy">Hello!</div>
```

--------------------------------

### Marko: Nested Attribute Tags Example

Source: https://markojs.com/docs/reference/language

Illustrates how attribute tags can be nested within other attribute tags in Marko. The input object reflects this nested structure.

```marko
<my-tag>
  <@a value=1>
    <@b value=2/>
  </>
</>
```

--------------------------------

### Unserializable Data Examples in Marko State

Source: https://markojs.com/docs/explanation/serializable-state

Illustrates common anti-patterns in Marko state management where custom class instances and DOM nodes are included, leading to serialization errors. These should be avoided for client-side state.

```marko
// ❌ BAD: custom class instance in state
<let/state=new Cart()>

// ❌ BAD: DOM nodes in state
<let/state={ el: document.body }>
```

--------------------------------

### Typing Marko Input with JSDoc

Source: https://markojs.com/docs/reference/typescript

Demonstrates how to use JSDoc comments to define the types for a Marko component's input properties. This allows for type checking in JavaScript projects without a full TypeScript setup.

```marko
// @ts-check

/**
 * @typedef {{
 *   firstName: string,
 *   lastName: string,
 * }}
 */

<div>${firstName} ${lastName}</div>

```

--------------------------------

### Advanced Input Handling and Formatting in Marko

Source: https://markojs.com/docs/reference/native-tag

Presents several examples of input handling in Marko, including an uncontrolled input, a controlled input using the `:=` shorthand, and a controlled input with a custom `valueChange` handler that formats a credit card number by adding spaces.

```marko
// uncontrolled - The browser owns the state
<input value="hello">

// controlled - The `inputValue` tag variable owns the state
<let/inputValue="hello">
<input value:=inputValue>

// controlled - Modifications to `<input>` are transformed
<let/creditCardNumber="5555 5555 555">
<input
  value=creditCardNumber
  valueChange(v) {
    creditCardNumber = [...v.replace(/\D/g, "").matchAll(/\d{1,4}/g)].join(" ");
  }
>

```

--------------------------------

### Marko Tag Type Parameters with Generics

Source: https://markojs.com/docs/reference/typescript

Demonstrates how to define generic type parameters for a Marko tag, allowing the tag to work with different types. This example shows a '<child>' tag with a type parameter 'T'.

```marko
<child <T>|value: T|>
  ...
</child>

```

--------------------------------

### Manipulating Input with `valueChange` in Marko

Source: https://markojs.com/docs/reference/native-tag

Illustrates how `valueChange` can be used to intercept and transform input values before updating the component state. This example automatically converts all input characters to lowercase, showcasing its utility for input masking and validation.

```marko
<let/message = "hello">

<input value=message valueChange(newMessage) { message = newMessage.toLowerCase() }>

<div>${message}</div>

<button onClick() { message = "goodbye" }>Click Me</>

```

--------------------------------

### Parent Hoisting State with Validation Logic in Marko

Source: https://markojs.com/docs/explanation/controllable-components

Illustrates how a parent component can add validation logic to a controllable `<counter>` component. In this example, a confirmation dialog is shown before updating the counter's state, ensuring user consent for the change.

```marko
/* parent.marko */
<let/count=0>

<counter count=count countChange(c) {
  if (confirm("are you sure?")) {
    count = c;
  }
}/>
```

--------------------------------

### Stream with Node.js and Gzip Compression

Source: https://markojs.com/docs/explanation/streaming

This Node.js example demonstrates streaming HTML content from a Marko template and piping it through a gzip stream. It utilizes `Z_PARTIAL_FLUSH` for the gzip compressor to reduce latency when streaming small chunks of data.

```javascript
import http from "http";
import zlib from "zlib";

import MarkoTemplate from "./something.marko";

http
  .createServer(function (request, response) {
    response.writeHead(200, { "content-type": "text/html;charset=utf-8" });
    const templateStream = MarkoTemplate.stream({});
    const gzipStream = zlib.createGzip({
      flush: zlib.constants.Z_PARTIAL_FLUSH,
    });
    templateStream.pipe(outputStream).pipe(response);
  })
  .listen(80);
```

--------------------------------

### Marko: Accessing DOM Node Reference

Source: https://markojs.com/docs/reference/native-tag

Demonstrates how to get a reference to a native DOM node using the 'ref' attribute in Marko. The reference is only available client-side. Input is a native HTML 'div' tag.

```marko
<div/ref/>

<script>
  ref().innerHTML = "Hello World"
</script>
```

--------------------------------

### Using Controllable Counter with Parent State in Marko

Source: https://markojs.com/docs/explanation/controllable-components

Demonstrates how a parent component can manage the state of a controllable `<counter>` component using the `countChange` handler. This example shows both a controlled counter (with `countChange`) and an uncontrolled counter (without `countChange`).

```marko
/* parent.marko */
<let/parentCount=0>

// `parentCount` is the source of truth
<counter count=parentCount countChange(count) {
  parentCount = count;
}/>

// This one holds its own state
<counter/>
```

--------------------------------

### Marko Server Compilation: Static Article Template

Source: https://markojs.com/docs/explanation/targeted-compilation

This example shows a Marko template compiled for server-side rendering. The compiler optimizes this to generate efficient string concatenation operations for building HTML, pre-computing static markup and escaping dynamic values.

```marko
/* article.marko */
<article>
  <h2>${input.title}</h2>
  <if=input.featured>
    <span class="badge">Featured</span>
  </if>
</article>
```

--------------------------------

### Marko Local State for Disabled Delete

Source: https://markojs.com/docs/explanation/nested-reactivity

Extends the To-Do list example by introducing local state within each list item to track completion status ('done'). This prevents deleting items that are not yet completed, demonstrating local state management.

```marko
<let/todos=[
  { id: 0, text: "Learn Marko" },
  { id: 1, text: "Make a Website" },
]>

<ul>
  <for|todo, i| of=todos by="id">
    <li>
      <id/checkboxId>
      <let/done=false>
      <input type="checkbox" checked:=done id=checkboxId>
      <label for=checkboxId>${todo.text}</label>
      <button
        title="delete"
        disabled=!done
        onClick() {
          todos = todos.toSpliced(i, 1);
        }
      >&times;</button>
    </li>
  </for>
</ul>
```

--------------------------------

### Manual Coordination of Shopping Cart State Across Components (JavaScript)

Source: https://markojs.com/docs/introduction/why-marko

This JavaScript code implements a basic 'CartManager' class for manual state management of a shopping cart. It includes methods to add items and notify subscribers. Two example components, 'CartBadge' and 'CartTotal', demonstrate subscribing to these updates. Dependencies: None, pure JavaScript.

```javascript
// Manual coordination across components
class CartManager {
  constructor() {
    this.items = [];
    this.subscribers = [];
  }
  
  addItem(item) {
    this.items.push(item);
    this.notifySubscribers();
  }
  
  subscribe(callback) {
    this.subscribers.push(callback);
  }
  
  notifySubscribers() {
    this.subscribers.forEach(callback => callback(this.items));
  }
}

// Each component needs manual subscription management
class CartBadge extends HTMLElement {
  connectedCallback() {
    cartManager.subscribe(items => {
      this.textContent = items.length;
    });
  }
}

class CartTotal extends HTMLElement {
  connectedCallback() {
    cartManager.subscribe(items => {
      const total = items.reduce((sum, item) => sum + item.price, 0);
      this.textContent = `$${total}`;
    });
  }
}
```

--------------------------------

### Marko: Creating a Reusable Gauge Component

Source: https://markojs.com/docs/tutorial/components-and-reactivity

Demonstrates how to create a reusable component by extracting functionality into a separate Marko file (`tags/gauge.marko`). This promotes code organization and reusability. Input properties are accessed via `input.propertyName`.

```marko
/* index.marko */
<let/degF=80>
<const/degC=(degF - 32) * 5 / 9>

<input type="number" value=degF onInput(e) {
  degF = +e.target.value;
}>
<div>
  ${degF}°F ↔ ${degC.toFixed(1)}°C
</div>

<gauge temperature=degF/>
```

```marko
/* tags/gauge.marko */
<div class="gauge">
  <div class="needle" style={"--rotation": `${input.temperature * 180 / 100}deg`}/>
</div>

<if=(input.temperature > 90)>
  It's <strong>hot</strong> 🥵
</if>
<else if=(input.temperature > 60)>
  Lovely day! 😎
</else>
<else if=(input.temperature < 32)>
  Brrrrr 🥶
</else>

<style>
  .gauge {
    position: relative;
    width: 8rem;
    height: 4rem;
    border-radius: 4rem 4rem 0 0;
    background: conic-gradient(from 270deg at 50% 100%, lightblue, blue, green, orange, red 180deg);
  }

  .needle {
    position: absolute;
    box-sizing: border-box;
    width: 4rem;
    height: 4px;
    bottom: -2px;
    background: black;
    border: 1px solid white;
    transform-origin: right;
    transform: rotate(var(--rotation));
  }
</style>
```

--------------------------------

### Marko: Conditional Rendering with <if>/<else>

Source: https://markojs.com/docs/tutorial/components-and-reactivity

Illustrates conditional rendering in Marko using `<if>`, `<else if>`, and `<else>` tags. This allows different content to be displayed based on the value of reactive variables.

```marko
<let/degF=80>
<const/degC=(degF - 32) * 5 / 9>

<input type="number" value=degF onInput(e) {
  degF = +e.target.value;
}>
<div>
  ${degF}°F ↔ ${degC.toFixed(1)}°C
</div>

<if=(degF > 90)>
  It's <strong>hot</strong> 🥵
</if>
<else if=(degF > 60)>
  Lovely day! 😎
</else>
<else if=(degF < 32)>
  Brrrrr 🥶
</else>
```

--------------------------------

### Marko Targeted Compilation for Server and Client Rendering

Source: https://markojs.com/docs/introduction/welcome-to-marko

Shows how Marko's targeted compilation optimizes rendering for server and client. It renders a static paragraph directly as HTML on the server, while a conditional section is rendered on the client only if 'someState' is true, demonstrating bundle size optimization.

```marko
<div>
  <p>
    This paragraph isn't stateful, so it will be rendered by the server in raw HTML
  </p>
  <if=someState>
    This section depends on state, so JavaScript will be included about how to manage it
  </if>
</div>
```

--------------------------------

### Marko: Adding State with Tag Variables

Source: https://markojs.com/docs/tutorial/components-and-reactivity

Introduces state management in Marko using the `<let>` tag to declare and initialize a tag variable. This variable holds the input's value and allows for tracking changes.

```marko
<let/degF=80>

<input type="number" value=degF>
<div>It's ${degF}°F</div>
```

--------------------------------

### Marko: Basic HTML Input Tag

Source: https://markojs.com/docs/tutorial/components-and-reactivity

Demonstrates the simplest way to include an HTML input element in a Marko template. This is the initial step for gathering user data.

```marko
<input type="number">
```

--------------------------------

### Controlled Counter Component (Marko)

Source: https://markojs.com/docs/explanation/controllable-components

An example of a controlled component in Marko. The component receives its state ('count') and a function to update it ('updateCount') as props from its parent. The component itself does not manage the state internally but relies on the parent to do so.

```marko
/* counter.marko */
export interface Input {
  count: number;
  updateCount: (count: number) => void;
}

<button onClick() {
  input.updateCount(input.count + 1);
}>
  Count: ${input.count}
</button>
```

--------------------------------

### Marko Component Definition and Usage

Source: https://markojs.com/docs/introduction/welcome-to-marko

Defines a reusable 'hello' component with an input interface for a name and demonstrates its usage by passing a 'Marko' string to the name prop. This showcases Marko's component-based architecture for modularity.

```marko
/* hello.marko */
export interface Input {
  name: string;
}

<h1>Hello, ${input.name}</h1>
```

```marko
/* index.marko */
<hello name="Marko"/>
```

--------------------------------

### Marko: Syncing Input Value with State

Source: https://markojs.com/docs/tutorial/components-and-reactivity

Shows how to synchronize an input element's value with a tag variable using an `onInput` event handler. This makes the variable reactive to user input.

```marko
<let/degF=80>

<input type="number" value=degF onInput(e) {
  degF = +e.target.value;
}>
<div>It's ${degF}°F</div>
```

--------------------------------

### Marko: Creating Computed Values with <const>

Source: https://markojs.com/docs/tutorial/components-and-reactivity

Demonstrates how to create computed values based on existing tag variables using the `<const>` tag. This allows for derived data, like Celsius conversion, to be displayed reactively.

```marko
<let/degF=80>
<const/degC=(degF - 32) * 5 / 9>

<input type="number" value=degF onInput(e) {
  degF = +e.target.value;
}>
<div>
  ${degF}°F ↔ ${degC.toFixed(1)}°C
</div>
```

--------------------------------

### Marko HTML Streaming with Await for Asynchronous Content

Source: https://markojs.com/docs/introduction/welcome-to-marko

Demonstrates Marko's HTML streaming capabilities using the `<await>` tag. A header is sent immediately, followed by a paragraph after a 500ms delay, showcasing how to send content to the client as it becomes available for improved perceived performance.

```marko
<header>Sent immediately</header>
<await=Promise((res) => setTimeout(res, 500))>
  <p>Sent after 500 milliseconds</p>
</await>
```

--------------------------------

### Marko State Management with Declarative UI Updates

Source: https://markojs.com/docs/introduction/welcome-to-marko

Illustrates state management in Marko using the `<let>` tag to declare a reactive 'count' variable. Clicking the button increments the count, and the UI automatically updates to display the new value, demonstrating declarative UI updates.

```marko
<let/count=0>
<button onClick() {
  count++
}>
  ${count}
</button>
```

--------------------------------

### Marko Concise Syntax vs. HTML

Source: https://markojs.com/docs/reference/concise-syntax

Demonstrates the equivalence between Marko's concise syntax and standard HTML syntax for basic element and attribute declaration. Marko removes angle brackets and uses indentation for nesting.

```marko
div class="thumbnail"
    img src="https://example.com/thumb.png"
```

```html
<div class="thumbnail"><img src="https://example.com/thumb.png" /></div>
```

--------------------------------

### Basic HTML Structure in Marko

Source: https://markojs.com/docs/introduction/why-marko

Demonstrates how standard HTML is directly usable within Marko templates. This serves as the foundational syntax for Marko components.

```marko
<h1>My Products</h1>
<ul>
  <li>Widget - $10</li>
  <li>Gadget - $15</li>
</ul>
```

--------------------------------

### Server-Side Rendering Logic in JavaScript

Source: https://markojs.com/docs/introduction/why-marko

Illustrates a Node.js Express route handler for rendering a product page on the server. It shows the typical steps: building component trees, fetching data, executing render logic, and generating HTML. This process repeats for every request, contributing to server-side runtime burden.

```javascript
app.get('/product/:id', async (req, res) => {
  // 1. Parse and compile component tree structure
  const componentTree = buildServerComponents();
  
  // 2. Resolve data dependencies 
  const productData = await fetchProduct(req.params.id);
  const recommendations = await fetchRecommendations(productData.category);
  
  // 3. Execute render logic
  const html = framework.renderToString('ProductPage', {
    product: productData,
    recommendations: recommendations
  });
  
  // 4. Generate final HTML with boilerplate
  res.send(wrapWithLayout(html));
});
```

--------------------------------

### Marko Component Encapsulation with State

Source: https://markojs.com/docs/introduction/why-marko

Demonstrates creating a reusable modal component in Marko, including local state management with `<let>` and conditional rendering. It showcases basic component interaction and styling.

```marko
<let/open=false>

<button onClick() { open = true }>Open Modal</button>

<div style={ display: open ? "block" : "none" } class=styles.modalContent>
  <button onClick() { open = false }>×</button>
  <${input.content}/>
</div>

<style/styles>
  .modalContent {
    background: white;
    margin: 50px auto;
    padding: 20px;
    width: 300px;
  }
</style>
```

--------------------------------

### Uncontrolled Counter Component (Marko)

Source: https://markojs.com/docs/explanation/controllable-components

An example of an uncontrolled component in Marko where the component manages its own internal state. The 'count' state is defined and updated within the component itself using `<let>`. This makes it easy to use but inaccessible to parent components.

```marko
/* counter.marko */
<let/count=0/>

<button onClick() {
  count++;
}>
  Count: ${count}
</button>
```

--------------------------------

### Creating Reusable Components in Marko

Source: https://markojs.com/docs/tutorial/fundamentals

Marko supports componentization by allowing code to be placed in separate `.marko` files. These files can be used like HTML tags, promoting code reuse and organization. Components in the `tags/` directory are auto-discovered.

```marko
/* tags/card.marko */
<div>
  <h3>Alice</h3>
  <p>Designer</p>
  <p>Joined 2023</p>
</div>
```

```marko
<h1>Our Team</h1>
<card/>
<card/>
<card/>
```

--------------------------------

### Conditional Rendering with Marko's <if> and <else> Tags

Source: https://markojs.com/docs/tutorial/fundamentals

Marko provides core tags for control flow. The `<if>` and `<else>` tags allow for conditional rendering of content based on boolean expressions, useful for managing UI states like product availability.

```marko
/* tags/product.marko */
<div>
  <h3>${input.name}</h3>
  <p>$${input.price}</p>
  <if=input.stock>
    <button>Add to Cart</button>
  </if>
  <else>
    <button disabled>Out of Stock</button>
  </else>
</div>
```

```marko
<product name="T-Shirt" price=25 stock=10/>
<product name="Hoodie" price=45 stock=0/>
<product name="Hat" price=15 stock=5/>
```

--------------------------------

### Handling Asynchronous Operations with Marko

Source: https://markojs.com/docs/introduction/why-marko

Illustrates Marko's declarative approach to handling asynchronous operations using `<await>`, `<try>`, `<@placeholder>`, and `<@catch>` tags. This simplifies loading states and error handling for data fetching.

```marko
<h1>My Products</h1>
<try>
  <await|products|=fetchProducts()>
    <ul>
      <for|product| of=products>
        <li>${product.name} - $${product.price}</li>
      </for>
    </ul>
  </await>
  
  <@placeholder>
    Loading products...
  </@placeholder>
  
  <@catch|error|>
    Failed to load: ${error.message}
  </@catch>
</try>
```

--------------------------------

### Extending Native HTML Button Tag in Marko

Source: https://markojs.com/docs/reference/typescript

Shows how to extend the types of native HTML tags within a Marko component. This example demonstrates extending the 'button' tag to include custom attributes like 'color' while inheriting standard button attributes.

```marko
/* color-button.marko */
export interface Input extends Marko.HTML.Button {
  color: string;
}

<const/{ color, ...attrs }=input>

<button style=`color: ${color}` ...attrs/>

```

```marko
<!-- Note: Marko 6+ supports content as an attribute -->
<button style=`color: ${color}` ...attrs>
  <${input.content}/>
</button>

```

--------------------------------

### Marko: Enhanced 'style' Attribute Handling

Source: https://markojs.com/docs/reference/native-tag

Illustrates Marko's extended support for the 'style' attribute on native elements, accepting strings, objects, and arrays for CSS properties. The output is a 'div' with applied styles.

```marko
<!-- String -->
<div style="display:block;margin-right:16px"/>

<!-- Object -->
<div style={ display: "block", color: false, "margin-right": 16 }/>

<!-- Array -->
<div style=["display:block", null, { "margin-right": 16 } ]/>
```

--------------------------------

### Marko Template Instance Lifecycle Methods

Source: https://markojs.com/docs/reference/template

After mounting, the `instance` object provides methods to manage the rendered template. `update(input)` applies new input reactively, and `destroy()` cleans up the instance and aborts any pending asynchronous operations. These are primarily for client-side environments or testing.

```javascript
const instance = template.mount({ name: "foo" }, document.body);

// Update the template with new input
instance.update({ name: "bar" });

// Destroy the template instance and cleanup
instance.destroy();
```

--------------------------------

### Marko Method Shorthand with Type Parameters

Source: https://markojs.com/docs/reference/typescript

Illustrates the syntax for defining a method shorthand within a Marko tag that includes generic type parameters. This allows methods within the tag to be typed generically.

```marko
<child process<T>() { /* ... */ } />

```

--------------------------------

### Marko Client Compilation: Interactive Article Template

Source: https://markojs.com/docs/explanation/targeted-compilation

This interactive Marko template demonstrates client-side compilation. The compiler generates minimal JavaScript focused on reactive state, targeted DOM updates, and event handlers for interactivity, avoiding code for static content.

```marko
/* article.marko */
<article>
  <h2>${input.title}</h2>

  // Interactive like toggle
  <let/liked:=input.liked>
  <button class=liked && 'liked' onClick() {
    liked = !liked
  }>
    ${liked ? '❤️ liked' : '🤍 like'}
  </button>
</article>
```

--------------------------------

### Marko Attributes on Multiple Lines

Source: https://markojs.com/docs/reference/concise-syntax

Illustrates how to define attributes for Marko elements across multiple lines using commas as separators. This enhances readability for elements with many attributes.

```marko
div id="hello", class=["class1", "class2", "class3"], style={ border: "1px solid red" }
```

```marko
div id="hello" class="world",
  style={ border: "1px solid red" }
```

```marko
div
  ,id="hello"
  ,class=["class1", "class2", "class3"]
  ,style={ border: "1px solid red" }
  -- hello
```

--------------------------------

### Marko Attribute Type Assertions with `as` Keyword

Source: https://markojs.com/docs/reference/typescript

Explains and demonstrates how to use TypeScript's 'as' keyword for type assertions on attribute values in Marko. This is useful when the type inference is not specific enough, such as asserting an array to be of a specific type.

```marko
<some-component
  number=1 as const
  names=[] as string[]
/>

```

--------------------------------

### Marko: `<let>` Tag for Parent-Child State Synchronization

Source: https://markojs.com/docs/reference/core-tag

Illustrates creating a `<let>` state that can be optionally controlled by a parent component. This provides flexibility for both uncontrolled (child-managed) and controlled (parent-managed) state behaviors.

```marko
/* counter.marko */
export interface Input {
  count: number;
  countChange?: (count: number) => void;
}

<let/count:=input.count>

<button onClick() {
  count++
}>
  Clicked ${count} times
</button>
```

--------------------------------

### Marko Reactivity Analysis

Source: https://markojs.com/docs/introduction/why-marko

Illustrates Marko's compile-time reactivity analysis. Changes in variables like 'firstName' trigger updates only in dependent elements, generating optimal code without runtime dependency tracking overhead.

```marko
<let/firstName="John">
<let/lastName="Doe">
<const/fullName=`${firstName} ${lastName}`>

<input value:=firstName>
<input value:=lastName>

<h1>Hello, ${fullName}!</h1>
<p>Your initials are ${firstName[0]}${lastName[0]}</p>
```

--------------------------------

### Template.mount(input, node, position?)

Source: https://markojs.com/docs/reference/template

Mounts a Marko template to a specified DOM node and position. It returns an instance object with methods for updating and destroying the mounted template.

```APIDOC
## POST /template/mount

### Description
Mounts a Marko template to a specified DOM node and position. It returns an instance object with methods for updating and destroying the mounted template.

### Method
POST

### Endpoint
/template/mount

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **input** (object) - Required - The input object for the template. May also include `$global` for global state.
- **node** (Node) - Required - A reference to the DOM node where the template will be rendered.
- **position** (string) - Optional - Location to render the template, relative to `node`. Defaults to "beforeend". Valid values are "beforebegin", "afterbegin", "beforeend", "afterend".

### Request Example
```json
{
  "input": { "name": "Example" },
  "node": "document.body",
  "position": "afterbegin"
}
```

### Response
#### Success Response (200)
- **instance** (object) - An object with `update` and `destroy` methods.

#### Response Example
```json
{
  "instance": {
    "update": "function",
    "destroy": "function"
  }
}
```
```

--------------------------------

### Integrating Control Flow in Marko Templates

Source: https://markojs.com/docs/introduction/why-marko

Shows how to use Marko's control flow syntax, like the 'for' loop, to iterate over data directly within the HTML structure. This enables dynamic list generation based on input data.

```marko
<h1>My Products</h1>
<ul>
  <for|product| of=input.products>
    <li>${product.name} - $${product.price}</li>
  </for>
</ul>
```

--------------------------------

### Marko Tag Parameters for Child-to-Parent Communication

Source: https://markojs.com/docs/reference/language

Illustrates how child components can pass data back to parent components using tag parameters in Marko.js. It covers standard parameter passing and destructuring.

```marko
/* child.marko */
export interface Input {
  content: Marko.Body<[{ number: number }]>;
}

<div>
  <${input.content} number=1337 />
</div>
```

```marko
/* parent.marko */
<child|params|>
  Rendered with ${params.number} as the `number=` attribute.
</child>
```

```marko
<child|{ number }|>
  Rendered with ${number} as the `number=` attribute.
</child>
```

--------------------------------

### Typing Marko Content with Marko.Body

Source: https://markojs.com/docs/reference/typescript

Demonstrates how to use the Marko.Body type to define and accept content within a Marko component's input. It shows valid and invalid ways to pass content, including plain text, components, and other values.

```marko
/* child.marko */
export interface Input {
  content?: Marko.Body;
}

```

```marko
/* index.marko */
<child/>
<child>Text in render body</child>
<child>
  <div>Any combination of components</div>
</child>

```

```marko
/* index.marko */
import OtherTag from "<other-tag>";
<child content=OtherTag/>

```

--------------------------------

### Marko Interactive Button Component

Source: https://markojs.com/docs/explanation/fine-grained-bundling

This Marko component demonstrates an interactive 'watch' button. The compiler optimizes this by including only the JavaScript needed for the button's toggle functionality and text update, excluding static content rendering. It requires Marko's compiler to process.

```marko
/* shop-item.marko */
<div>
  <h3>${input.name}</h3>

  <${input.content}/>
  
  // Interactive toggle
  <let/watching:=input.watching>
  <button onClick() { watching = !watching }>
    ${watching ? "watching" : "watch"}
  </button>
</div>
```

--------------------------------

### Controlled Input with Binding Shorthand in Marko

Source: https://markojs.com/docs/explanation/controllable-components

Shows the shorthand syntax for creating a controlled input in Marko using the `:=` operator. This simplifies the binding of the input's value to the `textValue` state variable, achieving the same two-way data flow as the explicit `valueChange` handler.

```marko
<let/textValue="">

<input value:=textValue>
```
Tokens:
Raw