open-index/open-npm huggingface dataset:
npm package: @marko-tags/destroy-when-detached
Description: Automatically clean up all Marko components within a container when it is removed.
Author: Dylan Piercey
Latest version: 0.1.4

<h1 align="center">
  <!-- Logo -->
  <br/>
  @marko-tags/destroy-when-detached
	<br/>

  <!-- Stability -->
  <a href="https://nodejs.org/api/documentation.html#documentation_stability_index">
    <img src="https://img.shields.io/badge/stability-stable-green.svg" alt="API Stability"/>
  </a>
  <!-- NPM Version -->
  <a href="https://npmjs.org/package/@marko-tags/destroy-when-detached">
    <img src="https://img.shields.io/npm/v/@marko-tags/destroy-when-detached.svg" alt="NPM Version"/>
  </a>
  <!-- Downloads -->
  <a href="https://npmjs.org/package/@marko-tags/destroy-when-detached">
    <img src="https://img.shields.io/npm/dm/@marko-tags/destroy-when-detached.svg" alt="Downloads"/>
  </a>
</h1>

Automatically clean up all Marko components within a container when it is removed and causes the `onDestroy` lifecycle to be called.
This is particularly useful when embedding a Marko application via [micro-frame](https://github.com/marko-js/micro-frame)
to allow cleanup when changing between pages.

# Installation

```console
npm install @marko-tags/destroy-when-detached
```

# Example

```marko
// Place this at the root where you want to track removals.
// If using micro-frame this should be at your embedded applications page template.
<destroy-when-detached>
  All children will go through the "onDestroy" lifecycle if this node is removed from the DOM.
</>
```
npm package: @marko-tags/effect
Description: Lifecycle events directly in your template
Author: Michael Rawlings
Latest version: 0.1.3

<h1 align="center">
  <!-- Logo -->
  <br/>
  @marko-tags/effect
	<br/>

  <!-- Stability -->
  <a href="https://nodejs.org/api/documentation.html#documentation_stability_index">
    <img src="https://img.shields.io/badge/stability-unstable-red.svg" alt="API Stability"/>
  </a>
  <!-- NPM Version -->
  <a href="https://npmjs.org/package/@marko-tags/effect">
    <img src="https://img.shields.io/npm/v/@marko-tags/effect.svg" alt="NPM Version"/>
  </a>
  <!-- Downloads -->
  <a href="https://npmjs.org/package/@marko-tags/effect">
    <img src="https://img.shields.io/npm/dm/@marko-tags/effect.svg" alt="Downloads"/>
  </a>
</h1>

Add and remove event subscriptions within your template.

# Installation

```console
npm install @marko-tags/effect
```

# Example

```marko
<effect(() => {
  if (!state.map) {
    state.map = new google.maps.Map(component.getEl('map'));
  }
  return () => {
    state.map = null;
  }
})/>

<div key="map"></div>
```

## API

```marko
<effect
  argument ():cleanup
  />
```
npm package: @marko-tags/match-media
Description: Media queries directly in your Marko templates.
Author: Dylan Piercey
Latest version: 1.3.0

<h1 align="center">
  <!-- Logo -->
  <br/>
  @marko-tags/match-media
	<br/>

  <!-- Stability -->
  <a href="https://nodejs.org/api/documentation.html#documentation_stability_index">
    <img src="https://img.shields.io/badge/stability-stable-green.svg" alt="API Stability"/>
  </a>
  <!-- NPM Version -->
  <a href="https://npmjs.org/package/@marko-tags/match-media">
    <img src="https://img.shields.io/npm/v/@marko-tags/match-media.svg" alt="NPM Version"/>
  </a>
  <!-- Downloads -->
  <a href="https://npmjs.org/package/@marko-tags/match-media">
    <img src="https://img.shields.io/npm/dm/@marko-tags/match-media.svg" alt="Downloads"/>
  </a>
</h1>

Media queries directly in your Marko templates.

_Note: version 1.0.0 of this module requires Marko >= 4.14.20 as it uses the new [tag parameter syntax](https://markojs.com/docs/syntax#parameters)_

# Installation

```console
npm install @marko-tags/match-media
```

# Example

```marko
<match-media|{ mobile, tablet, desktop }|
  mobile="(max-width: 767px)"
  tablet="(min-width: 768px) and (max-width: 1024px)"
  desktop="(min-width: 1025px)"
>

  <if(mobile)>
    <!-- Mobile version -->
  </if>
  <else-if(tablet)>
    <!-- Tablet version -->
  </else-if>
  <else-if(desktop)>
    <!-- Desktop version -->
  </else-if>
  <else>
    <!-- Handle server side render (no media queries match) -->
  </else>

</match-media>
```

### Full media query support

```marko
<match-media|{ portrait, landscape }|
  portrait="(orientation: portrait)"
  landscape="(orientation: landscape)"
>

  <!-- Render based on portrait or landscape -->

</match-media>
```
npm package: @marko-tags/portal
Description: A Portal Component for Marko.js. A typical use case for portals is in dialogs, 'hovercards', and tooltips.
Latest version: 1.2.2

<h1 align="center">
  <!-- Logo -->
  <br/>
  @marko-tags/portal
	<br/>

  <!-- Stability -->
  <a href="https://nodejs.org/api/documentation.html#documentation_stability_index">
    <img src="https://img.shields.io/badge/stability-stable-green.svg" alt="API Stability"/>
  </a>
  <!-- NPM Version -->
  <a href="https://npmjs.org/package/@marko-tags/portal">
    <img src="https://img.shields.io/npm/v/@marko-tags/portal.svg" alt="NPM Version"/>
  </a>
  <!-- Downloads -->
  <a href="https://npmjs.org/package/@marko-tags/portal">
    <img src="https://img.shields.io/npm/dm/@marko-tags/portal.svg" alt="Downloads"/>
  </a>
</h1>

Portals provide a way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

A typical use case for portals is when a parent component has an `overflow: hidden` or `z-index` style, but you need the child to visually “break out” of its container. For example, dialogs and tooltips.

# Installation

```console
npm install @marko-tags/portal
```

# Example

By default, the portal renders into `document.body`:

```marko
<portal>
   ...content here...
</portal>
```

You can set a custom target container using a DOM id:

```marko
<portal target="some-id">
   ...content here...
</portal>
```

Or by passing a DOM Node:

```marko
<portal target=someNode>
   ...content here...
</portal>
```
npm package: @marko-tags/rive
Description: Marko library project with TypeScript
Latest version: 0.0.3

# Marko Rive

A wrapper around the `@rive/canvas-lite` package that provides a Marko component for rendering [Rive](https://rive.app/) animations.

## Installation

```bash
npm install @marko-tags/rive
yarn add @marko-tags/rive
```

## Usage

### Marko 6 (Tags API)

```marko
import riveAsset from "./path/to/asset.riv";

<rive-canvas/riveInstance src=riveAsset/>

<script>riveInstance().play();</script>
```

### Marko 5 (Class API)

```marko
import riveAsset from "./path/to/asset.riv";
import type { Rive } from "@rive-app/canvas";

<rive-canvas src=riveAsset onMount("handleMounted")/>
class {
  declare riveInstance: Rive;
  handleMounted(instance: Rive) {
    this.riveInstance = instance;
    this.riveInstance.play();
  }
}
```

## Preloading the Rive Runtime

By default, the Rive runtime is loaded asynchronously when the component is mounted. This is harmful for performance, especially for assets which are visible on page load. To preload the runtime, be sure that you add this tag to the `<head>` of each document that uses Rive assets:

```marko
<rive-preload-vite/>
```
npm package: @marko-tags/state
Description: Inline state management within your Marko templates
Author: Andrew Gliga
Latest version: 0.2.3

<h1 align="center">
  <!-- Logo -->
  <br/>
  @marko-tags/state
	<br/>

  <!-- Stability -->
  <a href="https://nodejs.org/api/documentation.html#documentation_stability_index">
    <img src="https://img.shields.io/badge/stability-unstable-red.svg" alt="API Stability"/>
  </a>
  <!-- NPM Version -->
  <a href="https://npmjs.org/package/@marko-tags/state">
    <img src="https://img.shields.io/npm/v/@marko-tags/state.svg" alt="NPM Version"/>
  </a>
  <!-- Downloads -->
  <a href="https://npmjs.org/package/@marko-tags/state">
    <img src="https://img.shields.io/npm/dm/@marko-tags/state.svg" alt="Downloads"/>
  </a>
</h1>

Create and manipulate state directly from your templates.

# Installation

```console
npm install @marko-tags/state
```

# Example

```marko
<state|myState = 1|>

<div>
  <div>${myState}</div>
  <button onClick(() => myState++)>Increment</button>
</div>
```

# Real world example

```marko
<state|show = false|>

<div>
  <button onClick(() => show = !show)>Toggle</button>
  <div class=['container', {'container--visible': show}]>Content</div>
</div>
```

## API

```marko
<state|
  stateAssignment
 |/>
```
npm package: @marko-tags/subscribe
Description: Add and remove event subscriptions within your template.
Author: Dylan Piercey
Latest version: 0.5.2

<h1 align="center">
  <!-- Logo -->
  <br/>
  @marko-tags/subscribe
	<br/>

  <!-- Stability -->
  <a href="https://nodejs.org/api/documentation.html#documentation_stability_index">
    <img src="https://img.shields.io/badge/stability-stable-green.svg" alt="API Stability"/>
  </a>
  <!-- NPM Version -->
  <a href="https://npmjs.org/package/@marko-tags/subscribe">
    <img src="https://img.shields.io/npm/v/@marko-tags/subscribe.svg" alt="NPM Version"/>
  </a>
  <!-- Downloads -->
  <a href="https://npmjs.org/package/@marko-tags/subscribe">
    <img src="https://img.shields.io/npm/dm/@marko-tags/subscribe.svg" alt="Downloads"/>
  </a>
</h1>

Add and remove event subscriptions within your template.

# Installation

```console
npm install @marko-tags/subscribe
```

# Example

```marko
class {
    onCreate() {
        this.state = {
            listening: false
        }
    }

    toggle() {
        this.state.listening = !this.state.listening;
    }

    handleMove(e) {
      ...
    }
}

<button on-click('toggle')>
  <if(state.listening)>
    <!-- Only logs mouse moves if we are in the listening state -->
    <subscribe to=window on-mousemove('handleMove')/>
    Stop Listening
  </if>
  <else>
    Listen
  </else>
</button>
```

## API

```marko
<subscribe
  to=EventEmitter|EventTarget
  on-*(string, ...args)
  once-*(string, ...args)/>
```
npm package: @marko/build
Description: Utility to serve Marko build a server from a template
Latest version: 4.3.2

<h1 align="center">
  <!-- Logo -->
  <br/>
  @marko/build
	<br/>

  <!-- Stability -->
  <a href="https://nodejs.org/api/documentation.html#documentation_stability_index">
    <img src="https://img.shields.io/badge/stability-stable-green.svg" alt="API Stability"/>
  </a>
  <!-- NPM Version -->
  <a href="https://npmjs.org/package/@marko/build">
    <img src="https://img.shields.io/npm/v/@marko/build.svg" alt="NPM Version"/>
  </a>
  <!-- Downloads -->
  <a href="https://npmjs.org/package/@marko/build">
    <img src="https://img.shields.io/npm/dm/@marko/build.svg" alt="Downloads"/>
  </a>
</h1>

Utility to build a node server from a marko file

# CLI

## Getting Started

```terminal
npm install @marko/build
marko-build .
```

or

```terminal
npx @marko/build .
```

## Example

```terminal
marko-build .
marko-build ./my-page.marko
```

## Options

- `--output -o`: Where to write the build
- `--static`: Build static HTML files instead of a node server

# Config overrides

While `@marko/build` works out-of-the box without any config, it does allow customizing and extending the default config for unique use-cases.

## Webpack

> **NOTE:** `@marko/build` currently uses webpack to build projects, however, this may change in the future so it's recommended to avoid using a custom webpack config if possible.

In the most extreme case, you can use a custom `webpack.config.js`. This config file is discovered based on the entry that is passed to the cli command, but given that it's a standalone config file, you can use `webpack` directly to build your project as well.

To help configure webpack, `@marko/build` exports a `configBuilder` function that allows you to use the base config, while adding your own customizations.

### Example

**webpack.config.js**

```js
import path from "path";
import { configBuilder } from "@marko/build";
import MyPlugin from "my-plugin";

const { getServerConfig, getBrowserConfigs } = configBuilder({
  entry: path.join(__dirname, "target.marko"),
  production: process.env.NODE_ENV === "production"
});

module.exports = [
  ...getBrowserConfigs(config => {
    config.plugins.push(new MyPlugin());
    return config;
  }),
  getServerConfig(config => {
    config.plugins.push(new MyPlugin());
    return config;
  })
];
```

# API

## Installation

```terminal
npm install @marko/build
```

## `configBuilder`

Returns 3 functions: `getServerConfig`, `getBrowserConfig`, and `getBrowserConfigs`.

### Options

- `entry` - the marko file to build
- `output` - where to write the build
- `production` - whether to build in production mode

## `loadWebpackConfig`

Loads a custom `webpack.config.js` or creates a default array of compiler configs.

### Options

- `entry` - the marko file to build
- `output` - where to write the build
- `production` - whether to build in production mode
npm package: @marko/compat-v4
Description: <h1 align="center">   <!-- Logo -->   <br/>   @marko/compat-v4 	<br/>
Latest version: 1.0.13

<h1 align="center">
  <!-- Logo -->
  <br/>
  @marko/compat-v4
	<br/>

  <!-- Language -->
  <a href="http://typescriptlang.org">
    <img src="https://img.shields.io/badge/%3C%2F%3E-typescript-blue.svg" alt="TypeScript"/>
  </a>
  <!-- Format -->
  <a href="https://github.com/prettier/prettier">
    <img src="https://img.shields.io/badge/styled_with-prettier-ff69b4.svg" alt="Styled with prettier"/>
  </a>
  <!-- CI -->
  <a href="https://github.com/marko-js/ssr-to-html/actions/workflows/ci.yml">
    <img src="https://github.com/marko-js/ssr-to-html/actions/workflows/ci.yml/badge.svg" alt="Build status"/>
  </a>
  <!-- Coverage -->
  <a href="https://codecov.io/gh/marko-js/ssr-to-html">
    <img src="https://codecov.io/gh/marko-js/ssr-to-html/branch/main/graph/badge.svg?token=TODO"/>
  </a>
  <!-- NPM Version -->
  <a href="https://npmjs.org/package/ssr-to-html">
    <img src="https://img.shields.io/npm/v/ssr-to-html.svg" alt="NPM Version"/>
  </a>
</h1>

Install this module when upgrading from `marko@4` to `marko@5`.
This package will bring back many deprecated api's with automated migrations to help smooth over the upgrade process.

If you are using `marko-widgets` in your project, you can instead install [marko-widgets@8](https://github.com/marko-js/compat/blob/main/packages/marko-widgets/README.md) when upgrading (this module will be loaded automatically along side that module).
npm package: @marko/compile
Description: Compile Marko files
Latest version: 4.1.2

<h1 align="center">
  <!-- Logo -->
  <br/>
  @marko/compile
	<br/>

  <!-- Stability -->
  <a href="https://nodejs.org/api/documentation.html#documentation_stability_index">
    <img src="https://img.shields.io/badge/stability-stable-green.svg" alt="API Stability"/>
  </a>
  <!-- NPM Version -->
  <a href="https://npmjs.org/package/@marko/compile">
    <img src="https://img.shields.io/npm/v/@marko/compile.svg" alt="NPM Version"/>
  </a>
  <!-- Downloads -->
  <a href="https://npmjs.org/package/@marko/compile">
    <img src="https://img.shields.io/npm/dm/@marko/compile.svg" alt="Downloads"/>
  </a>
</h1>

Utility to compile Marko templates to JavaScript.

# CLI

## Getting Started

```terminal
npm install @marko/compile
marko-compile template.marko
```

or

```terminal
npx @marko/compile template.marko
```

## Example

```terminal
marko-compile --server ./components/my-component.marko
marko-compile --browser ./components/my-component.marko
```

## Options

- `--server`: Compiles a Marko file to render html.
- `--browser`: Compiles a Marko file to render vdom.
- `--files --file -f *`: Provide a pattern to match marko file(s).
- `--ignore`: Provide a pattern to exclude files from being compiled.
- `--clean`: Deletes any compiled `.marko.js` files.

# API

## Installation

```terminal
npm install @marko/compile
```

## Example

```javascript
import compile from "@marko/compile";

compile({
  files: "./components/**/*.marko"
}).then(() => {
  // All files are written to disk.
  console.log("Compiled all files");
});
```

## Options

Options are the same as the CLI options.
npm package: @marko/create
Description: Create Marko projects
Latest version: 6.1.0

<h1 align="center">
  <!-- Logo -->
  <br/>
  @marko/create
	<br/>

  <!-- Stability -->
  <a href="https://nodejs.org/api/documentation.html#documentation_stability_index">
    <img src="https://img.shields.io/badge/stability-stable-green.svg" alt="API Stability"/>
  </a>
  <!-- NPM Version -->
  <a href="https://npmjs.org/package/@marko/create">
    <img src="https://img.shields.io/npm/v/@marko/create.svg" alt="NPM Version"/>
  </a>
  <!-- Downloads -->
  <a href="https://npmjs.org/package/@marko/create">
    <img src="https://img.shields.io/npm/dm/@marko/create.svg" alt="Downloads"/>
  </a>
</h1>

Used to create a template Marko project in a specific directory.

# CLI

## Example

### npm

```bash
# Creates a Marko project
npm init @marko
# Creates a project called "myapp" from the "webpack" example template
npm init @marko myapp --template webpack
```

### yarn

```bash
yarn create marko
```

### pnpm

```
pnpx @marko/create
```

## Options

- `--dir`: Provide a different directory to setup the project in (default to `pwd`).
- `--template`: The name of an example from [marko-js/examples](https://github.com/marko-js/examples/tree/master/examples).
  - An example name
    ```bash
    webpack
    rollup
    ```
  - A tag/branch/commit other than `master` is supported
    ```bash
    basic#next     # example branch
    webpack#v1.2.3 # repo release tag
    rollup#62e9fb1 # repo commit hash
    ```
- `--installer`: Override the package manager used to install dependencies. By default will determine from create command and fallback to `npm`.
  - ```bash
    marko-create --installer pnpm
    ```

# API

## Installation

```bash
npm install @marko/create
```

## Example

```javascript
import { join } from "path";
import create from "@marko/create";

create({
  dir: join(__dirname, "myapp")
}).then(() => {
  // Project as been created and dependencies installed.
  console.log("Project created");
});
```

## Options

Options are the same as the CLI options.
npm package: @marko/express
Description: Render Marko templates in an express application.
Author: Dylan Piercey
Latest version: 2.1.0

<h1 align="center">
  <!-- Logo -->
  <br/>
  @marko/express
	<br/>

  <!-- Language -->
  <a href="http://typescriptlang.org">
    <img src="https://img.shields.io/badge/%3C%2F%3E-typescript-blue.svg" alt="TypeScript"/>
  </a>
  <!-- Format -->
  <a href="https://github.com/prettier/prettier">
    <img src="https://img.shields.io/badge/styled_with-prettier-ff69b4.svg" alt="Styled with prettier"/>
  </a>
  <!-- CI -->
  <a href="https://github.com/marko-js/express/actions/workflows/ci.yml">
    <img src="https://github.com/marko-js/express/actions/workflows/ci.yml/badge.svg" alt="Build status"/>
  </a>
  <!-- Coverage -->
  <a href="https://codecov.io/gh/marko-js/express">
    <img src="https://codecov.io/gh/marko-js/express/branch/main/graph/badge.svg?token=KWZ4YNTZVY"/>
  </a>
  <!-- NPM Version -->
  <a href="https://npmjs.org/package/@marko/express">
    <img src="https://img.shields.io/npm/v/@marko/express.svg" alt="NPM Version"/>
  </a>
  <!-- Downloads -->
  <a href="https://npmjs.org/package/@marko/express">
    <img src="https://img.shields.io/npm/dm/@marko/express.svg" alt="Downloads"/>
  </a>
</h1>

Render [Marko](https://markojs.com/) templates in an [`express`](http://expressjs.com/) application.

# Installation

```console
npm install @marko/express
```

# Examples

## Setup

```javascript
import express from "express";
import markoMiddleware from "@marko/express";
import Template from "./template.marko";

const app = express();

app.use(markoMiddleware());

app.get("/", (req, res) => {
  // Streams Marko template into the response.
  // Forwards errors into expresses error handler.
  res.marko(Template, { hello: "world" });
});
```

## $global / out.global

When calling `res.marko` the [`input.$global`](https://markojs.com/docs/rendering/#global-data) is automatically merged with [`app.locals`](http://expressjs.com/en/5x/api.html#app.locals) and [`res.locals`](http://expressjs.com/en/5x/api.html#res.locals) from [`express`](http://expressjs.com/). This makes it easy to set some global data via express middleware, eg:

_middleware.js_

```js
export default (req, res, next) => {
  res.locals.locale = "en-US";
};
```

Then later in a template access via:

```marko
<div>${out.global.locale}</div>
```

## Redirects

Allows `res.redirect` to redirect HTML responses that have already begun sending content. This is done by flushing a `<meta>` tag redirect with a `<script>` fallback before prematurely ending the response.

If `$global` includes a `cspNonce` it will be included in the redirect script.

```js
app.get("/", (req, res) => {
  res.marko(Template, { $global: { cspNonce: "xyz" } });

  // If a redirect occurs mid stream we'll see
  // something like the following in the output:
  //
  // <meta http-equiv=refresh content="0;url=...">
  // <script nonce="xyz">location.href="..."></script>
});
```

# Code of Conduct

This project adheres to the [eBay Code of Conduct](./.github/CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.
npm package: @marko/language-server
Description: Marko Language Server
Latest version: 2.1.30

# Marko Language Server

Implements [language-server-protocol](https://github.com/Microsoft/language-server-protocol)

_Marko VSCode_ is the name of the VSCode client consuming this
`marko-language-server`. But any editor that is compatible with the Language
Server Protocol can create clients that can use the features provided by this
language server.
npm package: @marko/migrate
Description: Migrate Marko files
Latest version: 6.0.2

<h1 align="center">
  <!-- Logo -->
  <br/>
  @marko/migrate
	<br/>

  <!-- Stability -->
  <a href="https://nodejs.org/api/documentation.html#documentation_stability_index">
    <img src="https://img.shields.io/badge/stability-stable-green.svg" alt="API Stability"/>
  </a>
  <!-- NPM Version -->
  <a href="https://npmjs.org/package/@marko/migrate">
    <img src="https://img.shields.io/npm/v/@marko/migrate.svg" alt="NPM Version"/>
  </a>
  <!-- Downloads -->
  <a href="https://npmjs.org/package/@marko/migrate">
    <img src="https://img.shields.io/npm/dm/@marko/migrate.svg" alt="Downloads"/>
  </a>
</h1>

Utility to migrate Marko templates to avoid using deprecated features.

# CLI

## Getting Started

```terminal
npx @marko/migrate ./components/my-component.marko
```

## Options

- `--indent`: The indent string to use when printing the migrated source (defaults to a `String` with four spaces)
- `--noSemi`: If set, will format JS without semicolons when printing the migrated source.
- `--singleQuote`: If set, will prefer single quotes when printing the migrated source.
- `--maxLen`: The max line length to use when printing the migrated source (defaults to `80`, set to `-1` to disable)
- `--syntax`: The syntax to use when printing the migrated source. Can either be `"html"` or `"concise"` (defaults to `"html"`)
- `--dry-run`: Runs the migration in memory only.
- `--safe`: Run all safe migrations ignoring any prompts.

# API

## Installation

```terminal
npm install @marko/migrate
```

## Example

```javascript
import fs from "fs";
import migrate from "@marko/migrate";
import { prompt } from "enquirer";

migrate({
  files: ["./components/**/*.marko"],
  prompt(options) {
    // This is used for "optional" migrations.
    // By default the cli mode uses enquirer to prompt the user via cli.
    // The programtic api does not come with this by default and can be overwritten.
    return prompt(options);
  },
  onWriteFile(file, source) {
    // A file has been modified, we can save it to disk.
    // Note you can also return a promise.
    fs.writeFileSync(file, source, "utf-8");
  },
  onRenameFile(from, to) {
    // A file has been renamed, lets move it on the disk.
    // Note you can also return a promise.
    fs.renameSync(file, fileNames[file]);
  },
  onUpdateDependents(from, to) {
    // This indicates that the dependents of the `from` file need to update
    // Their paths to point to the `to` file.
    // When running in CLI mode this will use https://github.com/marko-js/utils/tree/master/packages/dependent-path-update
  }
}).then(() => {
  // Migration has completed.
  // Output contains an object with all of the migrated component sources.
  console.log("migrated all files");

  for (const file in fileContents) {
    // Save all updated files to disk.
    fs.writeFileSync(file, fileContents[file], "utf-8");
  }

  for (const file in fileNames) {
    // Update locations of moved files on disk.
    fs.renameSync(file, fileNames[file]);
  }
});
```

## Options

Options are the same as the CLI options.
npm package: @marko/migrate-v3-widget
Description: Migrates a Marko v3 widget to a v4 component.
Author: Dylan Piercey
Latest version: 1.1.3

<h1 align="center">
  <!-- Logo -->
  <br/>
  @marko/migrate-v3-widget
	<br/>

  <!-- Language -->
  <a href="http://typescriptlang.org">
    <img src="https://img.shields.io/badge/%3C%2F%3E-typescript-blue.svg" alt="TypeScript"/>
  </a>
  <!-- Format -->
  <a href="https://github.com/prettier/prettier">
    <img src="https://img.shields.io/badge/styled_with-prettier-ff69b4.svg" alt="Styled with prettier"/>
  </a>
  <!-- CI -->
  <a href="https://travis-ci.org/marko-js/migrate-v3-widget">
  <img src="https://img.shields.io/travis/marko-js/migrate-v3-widget.svg" alt="Build status"/>
  </a>
  <!-- Coverage -->
  <a href="https://coveralls.io/github/marko-js/migrate-v3-widget">
    <img src="https://img.shields.io/coveralls/marko-js/migrate-v3-widget.svg" alt="Test Coverage"/>
  </a>
</h1>

Migrates a Marko **v3 widget** to a **v4 component**.

_Note: You probably want to use the [marko migrate](https://github.com/marko-js/cli/blob/master/packages/migrate/README.md) command instead of using this directly._

# Installation

```console
npm install @marko/migrate-v3-widget
```

# Example

```javascript
import migrate from "@marko/migrate-v3-widget";

migrate("./path-to-widget-file.js").then(code => {
  code; // Migrated code
});
```

## Code of Conduct

This project adheres to the [eBay Code of Conduct](./.github/CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.
npm package: @marko/prebuild
Description: Prebuild Marko pages
Latest version: 5.0.3

<h1 align="center">
  <!-- Logo -->
  <br/>
  @marko/prebuild
	<br/>

  <!-- Stability -->
  <a href="https://nodejs.org/api/documentation.html#documentation_stability_index">
    <img src="https://img.shields.io/badge/stability-experimental-orange.svg" alt="API Stability"/>
  </a>
  <!-- NPM Version -->
  <a href="https://npmjs.org/package/@marko/prebuild">
    <img src="https://img.shields.io/npm/v/@marko/prebuild.svg" alt="NPM Version"/>
  </a>
  <!-- Downloads -->
  <a href="https://npmjs.org/package/@marko/prebuild">
    <img src="https://img.shields.io/npm/dm/@marko/prebuild.svg" alt="Downloads"/>
  </a>
</h1>

Utility to precompile Marko templates using [lasso prebuilds](https://github.com/lasso-js/lasso).

# CLI

_This package does not yet expose a CLI_

# API

## Installation

```terminal
npm install @marko/prebuild
```

## Example

```javascript
import prebuild from "@marko/prebuild";

prebuild({
  config: "./lasso-config.json", // Either a lasso config object, or a path to one.
  flags: ["skin-ds6"], // Lasso flags to use when building the pages.
  pages: [
    // A list of paths to marko templates to prebuild.
    "src/routes/index/index.marko"
  ]
}).then(() => {
  // All templates have their prebuild.json files written to disk.
  console.log("Prebuild completed");
});
```
npm package: @marko/prettyprint
Description: Prettyprint Marko template files in the syntax of your choice
Author: Patrick Steele-Idem
Latest version: 3.0.1

<h1 align="center">
  <!-- Logo -->
  <br/>
  @marko/prettyprint
	<br/>

  <!-- Stability -->
  <a href="https://nodejs.org/api/documentation.html#documentation_stability_index">
    <img src="https://img.shields.io/badge/stability-stable-green.svg" alt="API Stability"/>
  </a>
  <!-- NPM Version -->
  <a href="https://npmjs.org/package/@marko/prettyprint">
    <img src="https://img.shields.io/npm/v/@marko/prettyprint.svg" alt="NPM Version"/>
  </a>
  <!-- Downloads -->
  <a href="https://npmjs.org/package/@marko/prettyprint">
    <img src="https://img.shields.io/npm/dm/@marko/prettyprint.svg" alt="Downloads"/>
  </a>
</h1>

Prettyprint Marko template files in the syntax of your choice.

# CLI

## Getting Started

```terminal
npm install @marko/prettyprint
marko-prettyprint template.marko
```

or

```terminal
npx @marko/prettyprint template.marko
```

## Example

```terminal
# Pretty print a single file.
marko-prettyprint template.marko --syntax html

# Pretty print all Marko files in a directory.
marko-prettyprint . --syntax html
```

## Options

- `--eol`: The EOL sequence (defaults to `require('os').EOL`)
- `--filename`: The path to the template being pretty printed (required unless `prettyPrintFile(filename, options)` is used)
- `--indent`: The indent string (defaults to a `String` with four spaces)
- `--noSemi`: If set, will format JS without semicolons.
- `--singleQuote`: If set, will prefer single quotes.
- `--maxLen`: The max line length (defaults to `80`, set to `-1` to disable)
- `--configFiles`: Should search for `.marko-prettyprint`/`.editorconfig` files? (defaults to `true`)
- `--syntax`: The syntax to use. Can either be `"html"` or `"concise"` (defaults to `"html"`)

# API

## Installation

```terminal
npm install @marko/prettyprint
```

## Example

```javascript
import {
    prettyPrintFile,
    prettyPrintSource,
    prettyPrintAST
} from "@marko/prettyprint";

prettyPrintFile("./path-to-marko-file", options) // -> Output Marko file string.

prettyPrintSource("<div x=1/>", options) // -> Output Marko file string.

const ast = compiler.parseRaw(...);
prettyPrintAST(ast, options) // -> Output Marko file string.
```

# Configuration files

## `.marko-prettyprint` config file

When pretty printing a Marko template, `@marko/prettyprint` will search up the directory tree looking for a `.marko-prettyprint` file. This file should be in the JSON format. For example:

_my-project/.marko-prettyprint:_

```json
{
  "indent": "\t",
  "syntax": "concise"
}
```

## `.editorconfig` file

`@marko/prettyprint` also supports [EditorConfig](https://github.com/editorconfig/editorconfig/wiki/EditorConfig-Properties) files for configuring `maxLen`, `indent` and `eol`. For example:

_my-project/.editorconfig:_

```
root = true

[*.marko]
indent_style = space
indent_size = 8
end_of_line = lf
```
npm package: @marko/run-adapter-netlify
Description: Preview and deploy @marko/run apps to Netlify Functions/Edge Functions
Author: Ryan Turnquist
Latest version: 3.0.3

<h1 align="center">
  <!-- Logo -->
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="https://github.com/marko-js/run/raw/main/assets/marko-run-dark.png">
    <source media="(prefers-color-scheme: light)" srcset="https://github.com/marko-js/run/raw/main/assets/marko-run.png">
    <img alt="Marko Run Logo" src="https://github.com/marko-js/run/raw/main/assets/marko-run.png" width="400">
  </picture>
  <br/>
  @marko/run-adapter-netlify
	<br/>
</h1>

Preview and deploy [@marko/run](../serve/README.md) apps to Netlify Functions/Edge Functions

## Installation

```sh
npm install @marko/run-adapter-netlify
```

## Usage

For most applications, installing this adapter is all that is needed. Marko Run will automatically discover it and configure it to deploy to Netlify Functions.

## Configuration

Netlify applications require a [`netlify.toml`](https://docs.netlify.com/configure-builds/file-based-configuration/#sample-netlify-toml-file) to configure it. This example is a starting point for Marko Run apps deployed to Netlify Functions.

```toml
[build]
  command = "marko-run build"
  publish = "dist/public"
  functions = "dist"
```

## Edge Functions

This adapter can be configured to build for Netlify [Edge Functions](https://docs.netlify.com/edge-functions/overview/) in the application's Vite config.

```ts
import { defineConfig } from "vite";
import marko from "@marko/run/vite";
import netlifyAdapter from "@marko/run-adapter-netlify";

export default defineConfig({
  plugins: [
    marko({
      adapter: netlifyAdapter({ edge: true }),
    }),
  ],
});
```

The netlify.toml will also need to specify the edge `edge_functions` directory instead of `functions`.

```toml
[build]
  command = "marko-run build"
  publish = "dist/public"
  edge_functions = "dist"
```
npm package: @marko/run-adapter-node
Description: Preview and deploy @marko/run apps on Connect-style servers
Author: Ryan Turnquist
Latest version: 2.0.5

<h1 align="center">
  <!-- Logo -->
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="https://github.com/marko-js/run/raw/main/assets/marko-run-dark.png">
    <source media="(prefers-color-scheme: light)" srcset="https://github.com/marko-js/run/raw/main/assets/marko-run.png">
    <img alt="Marko Run Logo" src="https://github.com/marko-js/run/raw/main/assets/marko-run.png" width="400">
  </picture>
  <br/>
  @marko/run-adapter-node
	<br/>
</h1>

Preview and deploy [@marko/run](../serve/README.md) apps on Connect-style servers

## Installation

```sh
npm install @marko/run-adapter-node
```

## Usage

In your application's Vite config file (eg. `vite.config.js`), import and register this adapter with the `@marko/run` Vite plugin:

```ts
import { defineConfig } from "vite";
import marko from "@marko/run/vite";
import nodeAdapter from "@marko/run-adapter-node";

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

## Middleware

This package provides two different middlewares. Both middleware handle converting Connect-style requests to [WHATWG requests](https://fetch.spec.whatwg.org/#request-class) and similarly writing [WHATWG responses](https://fetch.spec.whatwg.org/#response-class) back to the Connect response.

### Router Middleware

This middleware fully handles requests that match a route.

```ts
// my-app-server.ts
import express from "express";
import { routerMiddleware } from "@marko/run-adapter-node/middleware";

express()
  .use("/assets", express.static("assets"))
  .use(routerMiddleware()) // register the router middleware
  .listen(8080);
```

### Match Middleware

This middleware attaches the matched route onto the request object where it can be invoked later. Along with an invoke function, the object will contain the route's meta data. This is useful if you have other middleware that need to run between finding a match and invoking the route.

```ts
// my-app-server.ts
import express from "express";
import { matchMiddleware } from "@marko/run-adapter-node/middleware";

express()
  .use("/assets", express.static("assets"))
  .use(matchMiddleware()) // register the match middleware
  // ...other middleware here
  .use((req, res, next) => {
    // `req.route` will be populated if the match middleware found a route
    if (req.route) {
      // do something with `req.route.config` which will contain the route's meta data
    }
    next();
  })
  .use((req, res, next) => {
    if (req.route) {
      // finally invoke the route handler
      req.route.invoke(req, res, next);
    } else {
      next();
    }
  })
  .listen(8080);
```

## Build and Dev

For now, check out the [examples](../../examples/) directory for more info.
npm package: @marko/run-adapter-static
Description: Preview and deploy @marko/run apps as static files
Author: Ryan Turnquist
Latest version: 2.0.5

<h1 align="center">
  <!-- Logo -->
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="https://github.com/marko-js/run/raw/main/assets/marko-run-dark.png">
    <source media="(prefers-color-scheme: light)" srcset="https://github.com/marko-js/run/raw/main/assets/marko-run.png">
    <img alt="Marko Run Logo" src="https://github.com/marko-js/run/raw/main/assets/marko-run.png" width="400">
  </picture>
  <br/>
  @marko/run-adapter-static
	<br/>
</h1>

Preview and deploy [@marko/run](../serve/README.md) apps as static files

## Installation

```sh
npm install @marko/run-adapter-static
```

## Usage

In your application's Vite config file (eg. `vite.config.js`), import and register this adapter with the `@marko/run` Vite plugin:

```ts
import { defineConfig } from "vite";
import marko from "@marko/run/vite";
import staticAdapter from "@marko/run-adapter-static";

export default defineConfig({
  plugins: [
    marko({
      adapter: staticAdapter(),
    }),
  ],
});
```
npm package: @marko/tags-api-preview
Description: A glimpse into the future of Marko.
Author: Dylan Piercey
Latest version: 0.8.1

<h1 align="center">
  <!-- Logo -->
  <br/>
  @marko/tags-api-preview
	<br/>

  <!-- CI -->
  <a href="https://github.com/marko-js/tags-api-preview/actions/workflows/ci.yml">
    <img src="https://github.com/marko-js/tags-api-preview/actions/workflows/ci.yml/badge.svg" alt="Build status"/>
  </a>
  <!-- Coverage -->
  <a href="https://codecov.io/gh/marko-js/tags-api-preview">
    <img src="https://codecov.io/gh/marko-js/tags-api-preview/branch/main/graph/badge.svg?token=TODO"/>
  </a>
  <!-- NPM Version -->
  <a href="https://npmjs.org/package/@marko/tags-api-preview">
    <img src="https://img.shields.io/npm/v/@marko/tags-api-preview.svg" alt="NPM Version"/>
  </a>
  <!-- Downloads -->
  <a href="https://npmjs.org/package/@marko/tags-api-preview">
    <img src="https://img.shields.io/npm/dm/@marko/tags-api-preview.svg" alt="Downloads"/>
  </a>
</h1>

A glimpse into the future of Marko.

For more information, check out [the announcement article](https://dev.to/ryansolid/introducing-the-marko-tags-api-preview-37o4)!

# Installation

```console
npm install @marko/tags-api-preview
```

After installing the `tags-api-preview` in your project, you can immediately start using new tags and features.
You can use "tags api" templates along side your existing "class api" templates. A [set of heuristics](#heuristics) is used to determine if the "tags api" should be enabled.

# Examples

```marko
<let/count=0 />

<div>${count}</div>
<button onClick() { count++ }>
  Click me!
</button>
```

```marko
<let/count=0 />
<effect() { document.title = `You clicked ${count} times` } />

<button onClick() { count++ }>
  Click me
</button>
```

# Heuristics

When `@marko/tags-api-preview` is installed, using any of the following opts into the "tags api" on a per template level:

- tag variable syntax (`<div/el>`).
- any new tag (`<let>`, `<const>`, `<effect>`, etc).
- usage of the attribute binding syntax (`<input value:=myValue/>`).
- a `<!-- use tags -->` comment at the top of the template

There are some features that are disabled when opting into the tags api. Those features will display errors when used.

# Code of Conduct

This project adheres to the [eBay Code of Conduct](./.github/CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.
npm package: @marko/type-check
Description: A CLI to type check Marko projects
Latest version: 2.1.29

# Marko Type Check (@marko/type-check)

A CLI for running type checks on .marko, .ts, and .js files.

## Installation

```
npm install --save-dev @marko/type-check
```

## Usage

Use the `marko-type-check` or `mtc` command followed by options to run type checks on your project files:

```terminal
marko-type-check [options]

# or with the shorthand
mtc [options]
```

## Options

| Option           | Alias | Description                                                            | Default Value                      |
| ---------------- | ----- | ---------------------------------------------------------------------- | ---------------------------------- |
| --project <path> | -p    | Path to the tsconfig or jsconfig file                                  | ./tsconfig.json or ./jsconfig.json |
| --display <type> | -d    | Set the display type for error output. Choices: codeframe or condensed | codeframe                          |
| --help           | -h    | Display the help text                                                  |                                    |
| --version        | -v    | Display the CLI version, Marko version, and TypeScript version         |                                    |

## Examples

### Run type check with the default tsconfig.json file:

```
marko-type-check
```

### Run type check with a custom jsconfig.json file and condensed error output:

```
mtc -p ./jsconfig.json -d condensed
```

## FAQ

### What files are emitted?

Outputs files are similar to the [`tsc` cli in build mode](https://www.typescriptlang.org/docs/handbook/project-references.html). Meaning `.js` and `.d.ts` files will be output (depending on your project config). Beyond that `.marko` files _with their types stripped_ and an associated `.d.marko` file will be output that serve a similar purpose to the `.js` and `.d.ts` files.

### What is a `.d.marko` file?

A `.d.marko` files is similar to a `.d.ts` file. All script content in the file will be processed as if the Marko script-lang was typescript and the Marko-VSCode plugin and this CLI will both prefer loading a `.d.marko` over an adjacent `.marko` file. The `.d.marko` files output by this tool will strip out any runtime code such that only type information is in the `.d.marko` output.

### Does this replace `tsc`?

Yes this replaces `tsc` since in order to provide proper type checking for `.marko` files the `.ts` and `.js` files must be processed as well.

## Contributing

Contributions are welcome! Please read our [Contributing Guidelines](CONTRIBUTING.md) for more information on how to contribute.

## License

This project is licensed under the [MIT License](LICENSE).
npm package: @markocen/binance-api
Description: Binance API library for node and browser
Author: Marko Cen
Latest version: 0.1.0

Binance API library for Node.js and modern browser, supporting both Binance.com and Binance.us API calls. TypeScript declaration file included.

Binance RESTful API Docs: https://github.com/binance/binance-spot-api-docs/blob/master/rest-api.md <br/>
Last Synced Commit: [9c797](https://github.com/binance/binance-spot-api-docs/commit/9c797ada166f4941fb5e57780dadb37c54a7eacb)

#### Usage

_RESTful API client_

```javascript
import { BinanceClient } from 'binance-api';

const client = BinanceClient.create({
  apiKey: '...',
  apiSecret: '...',
  site: 'binance.com', // or binance.us
  useServerTime: true,
});

client.getCurrentAvgPrice('BTCUSD').then((price) => {
  console.log(price);
});
```

#### Development Status

_RESTful API Client_

- [x] General Info API
- [x] Public Market Data API
- [ ] User Data API

_Websocket Stream Client_

- [ ] Public Market Data API
- [ ] User Data API
npm package: @markofilipovic/n8n-nodes-imgbb
Description: n8n community node for uploading images to imgbb (URL, Base64, or Binary).
Author: Your Name
Latest version: 1.0.0

# n8n-nodes-imgbb

An n8n community node to upload images to **imgbb** from:
- **Binary** data (from n8n)
- **URL**
- **Base64** string

## Install

```bash
npm i n8n-nodes-imgbb
# or
npm pack && n8n install <generated .tgz>
```

## Credentials

Create **IMGBB API** credentials with your API key from [https://api.imgbb.com/](https://api.imgbb.com/).

## Usage

1. Add **IMGBB** node → Operation: **Upload**.
2. Choose **Input Mode**:

   * **Binary**: set Binary Property (default `data`).
   * **URL**: provide the image URL.
   * **Base64**: paste raw base64 (no data URL prefix).
3. Optional: `Name`, `Expiration (seconds)`.

Outputs the raw imgbb JSON response.

## API

- **Base URL:** `https://api.imgbb.com/1/upload`
- **Method:** `POST`
- **Auth:** API key via query parameter `key=<API_KEY>`
- **Form fields:**
  - `image` (required): URL string, Base64 string (raw), or Binary file (`image` field)
  - `name` (optional): filename label
  - `expiration` (optional): seconds (TTL)
- **Response:** JSON like `{ success, data: { id, url, display_url, delete_url, size, time, ... } }`

### Example (curl)

**URL mode:**

```bash
curl -X POST "https://api.imgbb.com/1/upload?key=$IMGBB_KEY" \
  -F "image=https://example.com/pic.jpg"
```

**Base64 mode:**

```bash
curl -X POST "https://api.imgbb.com/1/upload?key=$IMGBB_KEY" \
  -F "image=$(cat image.b64)"
```

**Binary mode:**

```bash
curl -X POST "https://api.imgbb.com/1/upload?key=$IMGBB_KEY" \
  -F "image=@./local-file.jpg"
```

## Notes

- Expressions are supported for all string fields.
- Automatically strips `data:*;base64,` if pasted in Base64.
- Clear error messages with item index.
npm package: @markopapic/file-upload-react
Description: A React component for uploading files.
Author: Marko Papic
Latest version: 1.0.5

# React File Uploader

![npm (scoped)](https://img.shields.io/npm/v/@markopapic/file-upload-react) ![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@markopapic/file-upload-react)

A React component that allows you to upload files to a specified server, with the progress indicator.

## Installation
```
npm install @markopapic/file-upload-react
```

## Usage

```js
import FileUpload from "@markopapic/file-upload-react";

<FileUpload
    requestData={{
        url: "https://your-server.com/upload"
    }}
    onUploaded={response => console.log(response)} />
```

### Configuration

You can configure the behavior of the file uploader by passing the following props:

**allowMultiple** - Specifies if selecting multiple files should be allowed. Default: `false`.

**btnLabel** - Text that will be displayed on the upload button. Default: `"Upload"`.

**disabled** - Specifies if the input should be disabled. Default: `false`.

**inputName** - Name of the input field. This name will be sent to the server. Default: `"file"`.

**onUploaded** - The callback that handles the upload result. The object that gets passed to this callback contains the following fields:
&nbsp;&nbsp;&nbsp; **status** - HTTP status code.
&nbsp;&nbsp;&nbsp; **responseType** - Response type.
&nbsp;&nbsp;&nbsp; **body** - Response body.

**requestData** - Information about the HTTP request that will be used for upload.
&nbsp;&nbsp;&nbsp; **url** - A URL to which the file should be uploaded. This URL should accept HTTP `POST` requests with `multipart/form-data` content type.
&nbsp;&nbsp;&nbsp; **headers** - An object containing HTTP request headers.

**uploadOnSelect** - If set to true, file selection will trigger the upload, instead of having a separate upload button. Default: `false`.

#### Example

```js
<FileUpload
    requestData={{
        url: "https://your-server.com/upload",
        headers: {
            Authorization: "Bearer eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ"
        }
    }}
    inputName="my-file"
    uploadOnSelect={false}
    disabled={false}
    onUploaded={response => console.log(response)} />
```